Clearing data v4

author(s): Torstein Hønsi

by pepperdigital

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>


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

CSS

/* Series Colours*/
path.highcharts-area {
fill: rgba(249, 166, 48, 0.15);
}

     .highcharts-point.highcharts-color-0,
     .highcharts-legend-item.highcharts-color-0 .highcharts-point,
     .highcharts-tooltip .highcharts-color-0 .stroke.highcharts-label-box {
          fill: #F9A630 !important;
     } 
     .highcharts-legend-item-hidden * {
     fill: #cccccc !important;
     transition: fill 250ms;
     }
     .highcharts-point.highcharts-color-1,
     .highcharts-legend-item.highcharts-color-1 .highcharts-point,
     .highcharts-tooltip .highcharts-color-1 {
          fill: #8E9090;
     }


     /* Colours */
     .highcharts-background {
     fill: #FFFFFF;
     stroke: #FFFFFF;
     }
     .highcharts-point {
     stroke-width: 0px  !important;
     }

     .highcharts-legend-item rect.highcharts-point {
     width: 16px;
     height: 16px;
     rx: 14px;
     ry: 14px;
     y: 12px;
     x: 0px;
     }
     .highcharts-plot-band {
     fill: rgba(204, 214, 235, 0.2) !important;
     }


     .highcharts-grid-line {
     stroke: rgba(204, 214, 235, 0) !important;
     }
     .highcharts-tick {
     stroke: rgba(204, 214, 235, 0.5);
     }
     .highcharts-axis-title {
     fill: #000000 !important;
     }
     .highcharts-axis-labels text {
     fill: #000000 !important;
     }

     /* Tooltips */
     .highcharts-tooltip-box .highcharts-label-box {
     fill: rgb(255, 255, 255);
     fill-opacity: 1;
     stroke-width: 1px;
     }
     .highcharts-markers {
     stroke-width: 2px;
     }
     .highcharts-scrollbar-arrow {
     fill: rgb(255, 255, 255);
     }
     .highcharts-scrollbar-rifles {
     stroke: rgb(255, 255, 255);
     }

JavaScript

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {
    // Create the chart
    Highcharts.stockChart('container', {
  exporting: {
        enabled: false
    },

    credits: {
        enabled: false
    },
        title: {
            text: ''
        },

        rangeSelector: {
            selected: 1,
            inputEnabled: false
        },
            tooltip: {
        formatter: function () {
            return '<b>$' + this.y + '</b>' + ' billion transferred';
        }
    },
        yAxis : {
        labels:{
            align:'right',
            x:-10
        },
         title: {
                text: 'Millions of Ounces'
            },
        lineWidth : 1,
        offset : 40
    },

        series: [{
            name: 'Gold Ounces (mns)',
            data: data,
            color: '#F9A630',
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});