Highcharts Demo

author(s): Torstein Hønsi

by maritavindedal

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container"></div>

CSS

#container {
    height: 700px;
    width: 1000px;
}

JavaScript

Highcharts.stockChart('container', {
    chartName: '',
    chart: {
        type: 'line',
        height: 305,
        marginLeft: 75,
        marginRight: 50, 
        marginTop: 50,
        width: 700 + 75 + 50,
        plotBorderWidth: 1,
        animation: false,
        reflow: false,
        panning: false,
        pinchType: '',
        zoomType: '',
        zooming: {
          mouseWheel: {
              enabled: false
          }
        },
        
    },
    xZoomFactor: 1,
    annZoomFactor: 1,
    accessibility: {
        enabled: false,
    },
    credits: {
        enabled: false,
    },
    title: {
        text: '',
    },
    navigator: {
        enabled: true,
    },
    rangeSelector: {
        enabled: false,
    },
    scrollbar: {
        enabled: false,
    },
    tooltip: {
        enabled: false,
        animation: false,
        followTouchMove: false
    },
    xAxis: [
         {
            type: 'datetime',
            ordinal: false,
            opposite: false,
            lineWidth: 0,
            startOnTick: false,
            endOnTick: false,
            tickWidth: 0,
            tickPosition: 'inside',
            gridLineWidth: 1,
            gridLineColor: '#C0C0C0',
            gridLineDashStyle: "Solid",
            minorGridLineColor: '#C0C0C0',
            minorGridLineWidth: 1,
            minorGridLineDashStyle: "Dot",
            minorTickInterval: 40,
            labels: {
                enabled: false,
            },
            min: 0,
            max: 7000,
            breaks: [{
               from: 12000,
               to: 20000,
               breakSize: 200
           }],
           events: {   
             afterSetExtremes: function(e){
             		console.log(e.min + ',' + e.max);
             }
           },
        },
        {
            linkedTo: 0,
            type: 'datetime',
            ordinal: false,
            opposite: true,
            lineWidth: 1,
            lineColor: '#C0C0C0',
...