Highcharts Stock Demo

author(s): Torstein Hønsi

by chikunova_nata

HTML

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

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

JavaScript

var chart = Highcharts.stockChart('container', {
    chart: {
    alignTicks: false,
      inverted: true,
      type: 'column',
      zoomType: "x"
    },
    title: {
        text: 'xAxis: {min: Date.UTC(2010, 8, 1), max: Date.UTC(2014, 8, 1)}'
    },
    
    navigator: {
        height: 62,
        opposite: true,
      outlineWidth: 5
      },

    xAxis: {
        /* min: Date.UTC(2010, 8, 1),
        max: Date.UTC(2018, 8, 1), */
        maxPadding: 0.22, //Prevent chart going off the screen on the right
        minPadding: 0.22,
        events: {
            afterSetExtremes: function (e) {
                        /* var length = (e.max - e.min) || 1;
                        minPadding = 0.22,
                        maxPadding = 0.22;
                        console.log(e);
                        console.log('d',chart.xAxis[0]); */
           /*if (e.min ==  chart.xAxis[0].min || e.max == chart.xAxis[0].max) {
                        if (e.min == chart.xAxis[0].min) e.min -= length * minPadding;
                        if (e.max == chart.xAxis[0].max) e.max += length * maxPadding;
                        this.setExtremes(e.min, e.max,true, false);
                    } */
                    
           }
       }
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});