HighCharts integration

Goal:

I’m trying to dynamically render a Highcharts chart inside the HTML Component (html1) in Retool. The chart should display browser market share data.

Steps:

  1. I’ve set up a div inside the HTML Component (html1) where I expect the chart to be rendered.
  2. I’ve tried using JavaScript to instantiate the chart with Highcharts.chart(), pointing it to the container div inside html1.
  3. Issue: I keep encountering an error ("Error 13") saying that it cannot find the container div, which suggests the element may not exist or is not accessible when the script runs.

Details:

  • Components used:
    • HTML Component: html1
    • JavaScript to render Highcharts (Highcharts.chart()).
  • Tried approaches:
    • I've tried directly referencing document.getElementById('html1') to append the chart div, as well as dynamically creating and attaching it.
    • Documentation consulted: Highcharts setup examples and Retool docs on handling custom components.

js

// Data retrieved from https://netmarketshare.com/

// Fetch default Highcharts colors and make them monochrome
const colors = Highcharts.getOptions().colors.map((c, i) =>
    // Start out with a darkened base color (negative brighten), and end up with a much brighter color
    Highcharts.color(Highcharts.getOptions().colors[0])
        .brighten((i - 3) / 7)
        .get()
);

// Build the chart
Highcharts.chart('chartContainer', {  // Render into 'chartContainer' from the HTML Custom Component
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in February, 2022',
        align: 'left'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            colors,
            borderRadius: 5,
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
                distance: -50,
                filter: {
                    property: 'percentage',
                    operator: '>',
                    value: 4
                }
            }
        }
    },
    series: [{
        name: 'Share',
        data: [
            { name: 'Chrome', y: 74.03 },
            { name: 'Edge', y: 12.66 },
            { name: 'Firefox', y: 4.96 },
            { name: 'Safari', y: 2.49 },
            { name: 'Internet Explorer', y: 2.31 },
            { name: 'Other', y: 3.398 }
        ]
    }]
});

html

<div id="chartContainer" style="width: 100%; height: 400px;"></div>

Hello @bayovoh!

Going to do some further testing with custom components and your code, but my first thought is that because Retool code executes in a sandboxed environment that document.getElementById('html1') is the issue as the Javascript code that is executed unfortunately does not have access to the HTML document and thus won't be able to reach the div where the data you want to access is located.

My two ideas for work arounds would be firstly, using one of our many built in chart components! There are a lot of options and they are very flexible, most are built around JSON data and use the Plotly.js library!

The second option would be an embedded app that would have a Retool window build inside of another website/application that could be fed data and render this data via a custom component or one of our amazing chart components.