Highstock CH Dempo

by akaimo

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="http://highcharts.base.is/highcharts-downsample.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

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

JavaScript

$(function () {
    var seriesOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'];

    /**
     * Create the chart when all data is loaded
     * @returns {undefined}
     */
    function createChart() {

        $('#container').highcharts('StockChart', {
						navigator: {
                series: {
                  type: 'areaspline',
                  color: '#006666',
                  fillOpacity: 0.09,
                  dataGrouping: {
                    smoothed: true
                  },
                  lineWidth: 1,
                  marker: {
                    enabled: false
                  }
               },
              maskFill: 'rgba(0, 0, 0, 0.25)'
            },
           rangeSelector: {
            buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: '#CCCCCC',
                'stroke-width': 2,
                style: {
                    color: '#333',
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#006666',
                        stroke: '#666666',
                        style: {
                            color: 'white'
                        }
                    }
                }
            },
            inputBoxBorderColor: 'gray',
            inputBoxWidth: 120,
            inputBoxHeight: 18,
            inputStyle: {
                color: '#777777',
                fontWeight: 'bold'
            },
            labelStyle: {
                color: '#AAAAAA',
                fontWeight: 'bold'
            },
            selected: 2
        },
						scrollbar : {
                enabled : false
            },
            yAxis: {
                labels: {
                    formatter: function () {
                        return (this.value > 0 ? ' + ' : '') + this.value + '%';
                    }
                },
               ...