JSFiddle - React, Tailwind, and code Playground

by epoch

HTML

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

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


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

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

JavaScript

var charti;
$(document).ready(function () {
    charti = new Highcharts.Chart({
        chart: {
            renderTo: 'sales',
            type: 'area'
        },
        title: {
            text: 'Sales by source'
        },
        legend: {
            enabled: false,
        },
        xAxis: {
            categories: [],

            dateTimeLabelFormats: {
                day: '%m-%d'
            },
            tickmarkPlacement: 'off',
            title: {
                enabled: false
            }
        },
        yAxis: {
            title: {
                text: 'Visits / Day'
            },
            labels: {
                formatter: function () {
                    return this.value;
                }
            }
        },
        tooltip: {
            formatter: function () {
                return '' + this.x + ': ' + Highcharts.numberFormat(this.y, 0, ',') + ' visits';
            }
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                }
            }
        },
        series: [{
            name: 'Email',
            marker: {
                enabled: false
            },
            fillColor: '#71a75b',
            color: '#71a75b',
            data: [561, 388, 1140, 899, 459, 464, 1265, 687, 365, 1287, 1044, 881, 459, 1419, 1076, 400, 323, 251, 887, 786, 1322, 1002, 517, 774, 551, 1249, 563, 1062, 800, 392, 149]
        }, {
            name: 'Social',
            marker: {
                enabled: false
            },
            fillColor: '#A60F2F',
            color: '#A60F2F',
            data: [133, 103, 95, 68, 51, 62, 104, 58, 65, 82, 44, 31, 64, 61, 91, 51, 64, 91, 41, 77, 108, 83, 55, 69, 65, 137, 54, 84, 73, 63, 28]
        }, {
            name: 'Paid',
            marker: {
               ...