JSFiddle - React, Tailwind, and code Playground

by Nick Hulea

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://www.highcharts.com/js/themes/grid.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            credits: {
                enabled: false
            },

            chart: {
                renderTo: 'container',
                type: 'area'
            },
            title: {
                text: 'Media Partners Analysis'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: ['May', 'June', 'July', 'August', 'September', 'October', 'November', 'December', 'January'],
                tickmarkPlacement: 'on',
                title: {
                    enabled: false
                }
            },
            yAxis: {
                title: {
                    text: 'Billions'
                },
                labels: {
                    formatter: function () {
                        return this.value / 1000;
                    }
                }
            },
            tooltip: {
                formatter: function () {
                    return '' + this.x + ': ' + Highcharts.numberFormat(this.y, 0, ',') + ' millions';
                }
            },
            plotOptions: {
                area: {
                    stacking: 'normal',
                    lineColor: '#666666',
                    lineWidth: 1,
                    marker: {
                        lineWidth: 1,
                        lineColor: '#666666'
                    }
                }
            },
            series: [{
                name: 'All media partners',
                data: [502, 635, 809, 947, 1402, 3634, 268, 234, 2330]
            }, {
                name: 'Non Media Partners ',
                data: [106, 107, 111, 133, 221, 767, 1766, 299, 13]
            }]
        });
    });

});