JSFiddle - React, Tailwind, and code Playground

by Nhi Nguyen

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<div id="container"></div>

CSS

.chart {
    min-width: 320px;
    max-width: 800px;
    height: 220px;
    margin: 0 auto;
}

</style> <!-- http: //doc.jsfiddle.net/use/hacks.html#css-panel-hack --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

JavaScript

$(function() {
    $('#container').bind('mousemove touchmove', function(e) {
        var chart,
            points,
            i;

        for (i = 0; i < Highcharts.charts.length; i++) {
            chart = Highcharts.charts[i];
            e = chart.pointer.normalize(e);
            points = chart.series[0].searchPoint(e, true);
            if (points) {
                points.onMouseOver();
                chart.tooltip.refresh(points);
                chart.xAxis[0].drawCrosshair(e, points[0]);
            }
        }
    });
    Highcharts.Pointer.prototype.reset = function() {};

    function syncExtremes(e) {
        var thisChart = this.chart;
        Highcharts.each(Highcharts.charts, function(chart) {
            if (chart !== thisChart) {
                if (chart.xAxis[0].setExtremes) {
                    chart.xAxis[0].setExtremes(e.min, e.max);
                }
            }
        });
    }
    var activity = {
            "xData": [1, 1056, 2161, 3215, 4267],
            "datasets": [{
                "data": [23, 84, 22, 5, 75],
            }, {
                "data": [4, 56, 34, 77, 2],
            }]
        },
        lastChart;
    $.each(activity.datasets, function(i, dataset) {
        dataset.data = Highcharts.map(dataset.data, function(val, i) {
            return [activity.xData[i], val];
        });
        $('<div class="chart">')
            .appendTo('#container')
            .highcharts({
                chart: {
                    marginLeft: 40,
                    spacingTop: 20,
                    spacingBottom: 20,
                },
                xAxis: {
                    events: {
                        setExtremes: syncExtremes
                    },
                },
                series: [{
                    data: dataset.data,
                    type: 'line',
                    lineWidth: 0,
                     states: {
                      hover: {
                          lineWidthPlus: 0
       ...