How do I create an area chart with zones?
To create an area chart with zones, you can use the following javascript in the footnote of your area widget.
<script>
var widgetBody =
document.querySelector('.widget[data-id="214674"]
.body');
var chartIndex = widgetBody.dataset.highchartsChart;
var chart = Highcharts.charts[chartIndex];
if (chart){
chart.update({
plotOptions: {
area: {
zones: [{
value: 80000, color: '#fdc3a3'
}, {
value: 90000, color: '#fef2b7'
}, {
color: '#90ed7d' }],
lineWidth: 0 } } }, false);
chart.series.forEach(function(s){
s.update({fillOpacity: 1}, false);
});
chart.redraw();
}
</script>
Instructions:
1) Paste the code above into the footnote of your area widget.
2) Inspect the widget to replace the data-id with the id that corresponds with your widget (video walkthrough: https://www.loom.com/share/0c7e884dd50449c282b6a6974a064b56?sid=b03b2dbd-b1e8-4213-bdab-0f6fd3e0cc8d)
3) Replace the bolded values with the respective zone max value. The last hex color does not have a value associated with it because it corresponds with the last zone.
4) Replace the bolded hex color value with the desired color value for each respective zone.
Please sign in to leave a comment.
0 comments