JSFiddle - React, Tailwind, and code Playground

by stuarthwoods

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; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function () {
		Highcharts.setOptions({
    		colors: ['#A953C2', '#FF8820','#76AEE5'],
				credits: { enabled: false }});
    $('#container').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: 'Device Impressions'
        },
        subtitle: {
            text: 'Source: Wikipedia.org'
        },
        xAxis: {
        crosshair: true,
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            tickmarkPlacement: 'on',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Percent'
            }
        },
        tooltip: {
            pointFormat: '<span>{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f}k)<br/>',
            shared: true,
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.15,
                stacking: 'percent',
                lineWidth: 2,
                marker: {
                    enabled: false,
                    states: {
                       hover: {
                           enabled: false
                       }
                   },
                    lineWidth: 1,
                    lineColor: '#ffffff'
                }
            }
        },
        series: [{
            name: 'Mobile',
            data: [32, 33, 39, 44, 52, 58, 60]
        }, {
            name: 'Tablet',
            data: [16, 17, 16, 17, 19, 27, 28]
        }, {
            name: 'Desktop',
            data: [53, 53, 47, 48, 47, 39, 38]
        }]
    });
});