JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

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 () {
    Highcharts.chart('container', {
        chart: {
            type: 'area'
        },
        title: {
            text: 'Historic and Estimated Worldwide Population Growth by Region'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
            categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Billions'
            },
            labels: {
                formatter: function () {
                    return this.value / 1000;
                }
            }
        },
        plotOptions: {
        area: {
            stacking: 'normal'
        }
    },

series: [{
        name: 'Series 1',
        data: [502, 635, 809, 947, 1402, 3634, 5268],
        lineWidth: 3,
        lineColor: 'rgba(58, 204, 188, 1)',
        marker: {
          lineWidth: 1,
          lineColor: 'rgba(58, 204, 188, 1)',
          fillColor: 'rgba(58, 204, 188, 1)'
        },
        fillColor: {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
                [0, 'rgba(58, 204, 188, 1)'],
                [1, 'gba(58, 204, 188, 1)']
            ]
        },
    }, {
        name: 'Series 2',
        data: [106, 107, 111, 133, 221, 767, 1766],
        lineWidth: 3,
        lineColor: 'rgba(247, 106, 1, 1)',
        marker: {
          lineWidth: 1,
          lineColor: 'rgba(247, 106, 1, 1)',
          fillColor: 'rgba(247, 106, 1, 1)',
          symbol: 'circle'
        },
        fillColor: {
            linearGradient: {x1: 0, y1: 0, x2: 0, y2: 1},
            stops: [
                [0, 'rgba(247, 106, 1, 1)'],
                [1, 'rgba(255,255,255,.25)']
            ]
        },
    }]
    });
});