JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script src="http://code.highcharts.com/master/highstock.js"></script>
<div id="container" style="height: 500px; min-width: 500px"></div>

JavaScript

var data_main,
    data_flag,
    chart;

$(function() {
    data_main = (function () {
        for(var arr = [], i=0; i<200; i++)
            arr.push([Date.UTC(2012, 0, i), Math.random() * 100 | 0]);
        return arr;
    }());
    
    data_flag = (function () {
        for(var arr = [], i=0; i<200; i++)
            arr.push({
                x: Date.UTC(2012, 0, i),
                title: "A",
                text:"Example"
            });
        return arr;
    }());

    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        series: [{
            id: 'series1',
            data: data_main
        }, {
            data: data_flag,
            type:'flags',
            onSeries: 'series1',
            turboThreshold: 2000
        }],
        plotOptions:{
            series: {
                dataGrouping:{
                    enabled: true,
                    units: [
                        ['week',[1] ]
                    ],
                    //forced: true
                }
            }
        }
    });
});