Can not create Bubble Chart using Dash-Alternative-Viz

[ahmadmustafaanis]

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

[ThomasGl]

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