JSFiddle - React, Tailwind, and code Playground

by Sushil Mahajan

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


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

JavaScript

$(function () {
    var data = [{x:1147651200000,y:67.79, marker : {
                    
                    symbol: 'square'
            
    }, name : "a", dataLabels: {shape: 'triangle'}},
                
                {x:1147737600000, y:64.98, marker : {
                    symbol: 'circle'
                }, name : "b"},
                {x:1147824000000, y:65.26, marker : {
                    symbol: 'triangle'
                }, name : "c"},
                {x:1147910400000, y:63.18, marker : {
                    symbol: 'square'
                }, name : "d", dataLabels: {shape: 'diamond'}},
                {x:1147996800000, y:64.51, marker : {
                    symbol: 'diamond'
                }, name : "e"}

];
        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {
                enabled: false
            },
            navigator: {
                enabled: false
            },

            title : {
                text : 'AAPL Stock Price'
            },

            series : [{
                name : 'AAPL Stock Price',
                data : data,
                lineWidth : 0,
                marker : {
                    enabled : true,
                    radius : 8,
                 },
                dataLabels: {
                    shape: 'circle',
                    borderRadius: 5,
                    backgroundColor: 'rgba(252, 255, 197, 0.7)',
                    borderWidth: 1,
                    borderColor: '#AAA',
                    style: {
                        
                        textShadow: 'none'
                    },
                    enabled: true,
                    inside: true,
                    formatter: function () {
                        return this.point.name;
                    }
                },
                
                tooltip: {
                    valueDecimals: 2
                }
            }]
        
    });
});