dash-alternative-viz
dash-alternative-viz copied to clipboard
Can not create Bubble Chart using Dash-Alternative-Viz
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