JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<div id="main-chart" style="width:100%;height:300px;"></div>

JavaScript

$(function () {
		    $('#main-chart').highcharts({
		        chart: {
		            type: 'area'
		        },
		        plotBorderColor: '#000000',
		        plotBackgroundColor: '#000000',
		        title: {
		            text: ''
		        },
		        subtitle: {
		            text: ''
		        },
		        xAxis: {
		            allowDecimals: false,
		            labels: {
		                formatter: function () {
		                    return this.value; // clean, unformatted number for year
		                }
		            }
		        },
		        yAxis: {
		            title: {
		                text: 'Number of Clicks'
		            },
		            labels: {
		                formatter: function () {
		                    return this.value / 1000 + 'k';
		                }
		            }
		        },
		        tooltip: {
		            pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
		        },
		        plotOptions: {
		            area: {
		                pointStart: 1940,
		                marker: {
		                    enabled: false,
		                    symbol: 'circle',
		                    radius: 2,
		                    states: {
		                        hover: {
		                            enabled: true
		                        }
		                    }
		                }
		            }
		        },
		        series: [{
		            name: 'USA',
		            lineColor: '#4adefa',
		            color: '#f1faf7',
		            data: [
                         { name: 'Point 1',color: '#4adefa', y: 251 }, 
                        { name: 'Point 2',color: '#000000', y: 122 },
                        { name: 'Point 3',color: '#A25429', y: 511 },
                        { name: 'Point 4',color: '#AA1111', y: 524 },
                        { name: 'Point 5',color: '#DF2500', y: 291 },
                        { name: 'Point 6',color: '#007ACF', y: 342 },
                        { name: 'Point...