JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

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

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

CSS

svg > text:last-child,
.highcharts-button {
    /*display: none;*/
}

JavaScript

$(function () {
        $('#container').highcharts({
            chart: {
                zoomType: 'xy',
                width: 1050,
                height: 656
            },
            title: {
                text: 'Requested Data Rates and Duplex Types'
            },
            xAxis: [{
                categories: ['2.4 kbps', '4.8 kbps', '9.6 kbps', '16 kbps', '32 kbps', '64 kbps', '384 kbps']
            }],
            yAxis: [{
                title: {
                    text: 'Total Network Requests',
                    style: {
                        color: Highcharts.getOptions().colors[3]
                    }
                },
                lineWidth: 2,
                opposite: true
            }, {
                title: {
                    text: 'Network Requests',
                    style: {
                        color: 'gray'
                    }
                }
            }],
            tooltip: {
                headerFormat: '<b>{series.name}</b><br/>',
                pointFormat: '{point.category}: {point.y} Networks'
            },
            plotOptions: {
                spline: {
                    marker: {
                        enable: false
                    }
                }
            },
            series: [{
                type: 'column',
                name: 'Simplex',
                data: [88,100,90,25,16,6,0],
				yAxis: 1
            }, {
                type: 'column',
                name: 'Half-duplex',
                data: [7,70,28,34,20,18,0],
                yAxis: 1
            }, {
                type: 'column',
                name: 'Full-duplex',
                data: [1,20,32,26,24,24,2],
                yAxis: 1
            }, {
                type: 'spline',
			    name: 'Total Network Requests',
                data: [100,190,150,85,60,48,2],
				yAxis: 0,
                marker: {
                    lineWidth: 2,
                    lineColor:...