JSFiddle - React, Tailwind, and code Playground

by Dhamotharan

HTML

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

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

JavaScript

$(function() {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
            },
            series: [{
                type: 'column',
                data: [3, 2, 1, 3, 4]},
            {
                type: 'column',
                data: [2, 3, 5, 7, 6]},
            {
                type: 'scatter',
                showInLegend: false,
                data: [1, 2, 5, 7, 4],
                marker: {
                    symbol: 'diamond',
                    lineWidth: 1,
                    radius: 20,
                    lineColor: '#f00'
                }}]
        });
        $.extend(Highcharts.Renderer.prototype.symbols, {
            line: function(x, y, r) {
                console.log(this, x, y, r);
                return ['M', x - r, y, 'L', x + r, y];
            }
        });
        chart2 = new Highcharts.Chart({
            chart: {
                renderTo: 'container2'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
            },
            series: [{
                type: 'column',
                data: [3, 2, 1, 3, 4]},
            {
                type: 'column',
                data: [2, 3, 5, 7, 6]},
            {
                type: 'scatter',
                showInLegend: false,
                data: [1, 2, 5, 7, 4],
                marker: {
                    symbol: 'line',
                    lineWidth: 1,
                    radius: 5,
                    lineColor: '#f00'
                }}]
        });
    });
});