JSFiddle - React, Tailwind, and code Playground

by pratik24

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 () {  
        $('#container').highcharts('StockChart', {
           
            navigator:{
                enabled: false
            },
            scrollbar:{
                enabled: false
            },
            
             rangeSelector : {
                selected : 1,
                 enabled:false
            },
           
            
            yAxis: [{
                  min: -1e6,
                max: 1e6,
                labels: {
                    align: 'left',
                    format : ''
                },
                title: {
                    text: 'OHLC'
                },
                height: '30%'
            }, {   min: -1e6,
                max: 1e6,
                labels: {
                    align: 'left',
                    x: -3,
                    format : ''
                },
                title: {
                    text: 'Volume'
                },
                top: '65%',
                height: '35%',
                offset: 0
            }],

            series: [{
                inverted: true,
                type: 'scatter',
                name: 'AAPL',
                
                data: [7.0, 6.9, 9.5, 14.5, 18.4],
                yAxis: 0
            }, {
                inverted: true,
                type: 'scatter',
                name: 'Volume',
                data: [3,6,8,5,2],
                  yAxis: 1
               
            }]
        });
  
});