Open ahmadmustafaanis opened 2 years ago
I want to create a bubble chart using this library. This is the code
import dash import dash_alternative_viz as dav import pandas as pd import plotly.express as px from dash import html app = dash.Dash(__name__, external_scripts=["high-charts-more.js", "high-charts.js"]) # Loaded more js bubble_fig = { "chart": {"type": "bubble", "plotBorderWidth": 1, "zoomType": "xy"}, "legend": {"enabled": False}, "title": {"text": "Sugar and fat intake per country"}, "subtitle": { "text": 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>' }, "accessibility": { "point": { "valueDescriptionFormat": "{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {point.z}%." } }, "xAxis": { "gridLineWidth": 1, "title": {"text": "Daily fat intake"}, "labels": {"format": "{value} gr"}, "plotLines": [ { "color": "black", "dashStyle": "dot", "width": 2, "value": 65, "label": { "rotation": 0, "y": 15, "style": {"fontStyle": "italic"}, "text": "Safe fat intake 65g/day", }, "zIndex": 3, } ], "accessibility": {"rangeDescription": "Range: 60 to 100 grams."}, }, "yAxis": { "startOnTick": False, "endOnTick": False, "title": {"text": "Daily sugar intake"}, "labels": {"format": "{value} gr"}, "maxPadding": 0.2, "plotLines": [ { "color": "black", "dashStyle": "dot", "width": 2, "value": 50, "label": { "align": "right", "style": {"fontStyle": "italic"}, "text": "Safe sugar intake 50g/day", "x": -10, }, "zIndex": 3, } ], "accessibility": {"rangeDescription": "Range: 0 to 160 grams."}, }, "tooltip": { "useHTML": True, "headerFormat": "<table>", "pointFormat": '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' + "<tr><th>Fat intake:</th><td>{point.x}g</td></tr>" + "<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>" + "<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>", "footerFormat": "</table>", "followPointer": True, }, "plotOptions": { "series": {"dataLabels": {"enabled": True, "format": "{point.name}"}} }, "series": [ { "data": [ {"x": 86.5, "y": 102.9, "z": 14.7, "name": "DE", "country": "Germany"}, {"x": 80.8, "y": 91.5, "z": 15.8, "name": "FI", "country": "Finland"}, { "x": 80.4, "y": 102.5, "z": 12, "name": "NL", "country": "Netherlands", }, {"x": 80.3, "y": 86.1, "z": 11.8, "name": "SE", "country": "Sweden"}, {"x": 78.4, "y": 70.1, "z": 16.6, "name": "ES", "country": "Spain"}, {"x": 74.2, "y": 68.5, "z": 14.5, "name": "FR", "country": "France"}, {"x": 73.5, "y": 83.1, "z": 10, "name": "NO", "country": "Norway"}, {"x": 69.2, "y": 57.6, "z": 10.4, "name": "IT", "country": "Italy"}, {"x": 68.6, "y": 20, "z": 16, "name": "RU", "country": "Russia"}, { "x": 65.5, "y": 126.4, "z": 35.3, "name": "US", "country": "United States", }, {"x": 65.4, "y": 50.8, "z": 28.5, "name": "HU", "country": "Hungary"}, {"x": 63.4, "y": 51.8, "z": 15.4, "name": "PT", "country": "Portugal"}, ] } ], } highchart_barplot = html.Div(dav.HighChart(id="bar-plot", options=bubble_fig)) app.layout = html.Div([highchart_barplot]) app.run(port=8001, debug=True)
I get this error
Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=bubble - missingModuleFor: bubble
Not sure if its still relevant, but you need to add the external scripts of highcharts on the app init to make them render properly
I want to create a bubble chart using this library. This is the code
I get this error