JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    var cat = ['Jan', 'Feb', 'Mar'],
    		data1 = [502, 635, 809],
        data2 = [106, 107, 111],
        data3 = [163, 203, 276],
        data4 = [18, 31, 54],
        data5 =  [2, 2, 2];
    	;
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: 'Historic and Estimated Worldwide Population Growth by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            labels: {
                    formatter: function () {
                        return cat[this.value];
                    }
                }
        },
        yAxis: {
            title: {
                text: 'Billions'
            },
            labels: {
                formatter: function () {
                    //return this.value / 1000;
                }
            }
        },
        tooltip: {
            shared: true,
            useHTML: true,
                pointFormat: "{series.name}: {point.y:.0f} ({point.percentage:.1f}%)<br />",
                headerFormat: "<b>{point.key}</b><br><br>",
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [{
            name: 'Asia',
            data: data1.map(function (y, i) {
            	return [cat[i], y];
            })
        }, {
            name: 'Africa',
            data: data2.map(function (y, i) {
            	return [cat[i], y];
            })
        }, {
            name: 'Europe',
            data: data3.map(function (y, i) {
            	return [cat[i], y];
            })
        }, {
            name: 'America',
            data: data4.map(function (y, i) {
            	return [cat[i], y];
            })
        }, {
      ...