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:
- I’ve set up a
div
inside the HTML Component (html1
) where I expect the chart to be rendered. - I’ve tried using JavaScript to instantiate the chart with
Highcharts.chart()
, pointing it to the containerdiv
insidehtml1
. - 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()
).
- HTML Component:
- Tried approaches:
- I've tried directly referencing
document.getElementById('html1')
to append the chartdiv
, as well as dynamically creating and attaching it. - Documentation consulted: Highcharts setup examples and Retool docs on handling custom components.
- I've tried directly referencing
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>