JSFiddle - React, Tailwind, and code Playground

by remguif

HTML

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

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/ohlc.js"></script>

JavaScript

$(function () {
    //$('#container').highcharts('StockChart', {
    chart = new Highcharts.StockChart({
         chart: {
                renderTo: 'container',
                alignTicks: false
        },
        xAxis: {
            plotLines: [{id:'x1'},{},{},{},{}]
        },
        plotOptions: {
            candlestick: {
                lineColor: '#2f7ed8',
                upLineColor: 'silver', // docs
                upColor: 'silver'
            }
        },

        rangeSelector: {
            selected: 1
        },

        series: [{
            type: 'candlestick',
            name: 'USD to EUR',
            data: ohlcdata,
            allowPointSelect: true,
            point:{
                events: {
                    click: function(event) {
                        console.log('Click series.point');
                        //adding flag on clicking!
                        chart.series[1].addPoint({
                            x: event.point.x,
                            y: event.point.y,
                            title: 'hey you clicked me'
                        });
                        /*console.log(chart.xAxis[0].plotLinesAndBands);
                        chart.xAxis[0].plotLinesAndBands.push({
                            x: event.point.x,
                            y: event.point.y,
                            title: 'hey you clicked me'
                        });*/
                        
                        chart.options.xAxis.plotLines.push({
                            color: 'red',
                            value: event.point.x,
                            width: 10
                        });
                    }
                }
            }
        },
                 {
                     type: 'flags',
                     data: [],
                     onSeries: 'dataseries',
                     shape: 'squarepin',
                 }]
    });
}, function(chart){
    chart.addPlotLine = function...