JSFiddle - React, Tailwind, and code Playground

by koh_edwin

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>

JavaScript

$(function () {
    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

            }]
        }, function (chart) {

            var i = 0,
                avg,
                yAxis = chart.yAxis[0],
                r = chart.renderer,
                tickWidth = chart.plotWidth / chart.series[0].data.length,
                startX = chart.plotLeft,
                len = chart.series[0].data.length,
                seriesCount = chart.series.length;


            for (i = 0; i < len; i++) {
                avg = 0;
                console.log(`series: `, chart.series);
                $.each(chart.series, function (j, serie) {
                	console.log(`j: `, j)
                    avg += serie.data[i].y;
                });
                avg = Math.floor(avg / seriesCount);

                r.path(['M', startX, chart.plotHeight -  yAxis.translate(avg), 
                	'L', startX + tickWidth*.9, chart.plotHeight - yAxis.translate(avg)])
                    .attr({
                    'stroke-width': 2,
                    stroke: 'red'
                })
                    .add();
                startX = startX + tickWidth;
            }

        });
    });

});