Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

HTML

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

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

CSS

#container {
    min-width: 310px;
    max-width: 800px;
    height: 400px;
    margin: 0 auto
}

JavaScript

var balanceChart = Highcharts.stockChart('container', {
    chart: {
        type: 'area',
        style: {
            fontFamily: 'ComicSans',
        }
    },
    legend: {
        enabled: true,
        align: "right",
        verticalAlign: "top",
        rtl: false,
        y: 0,
    },
    rangeSelector: {
        enabled: true,
        allButtonsEnabled: true,
        selected: 1,
        buttons: [{
            type: 'day',
            count: 3,
            text: 'Last 3 days'
        }, {
            type: 'all',
            text: 'All'
        }],
        verticalAlign: 'bottom',
        buttonPosition: {
            align: 'center',
            y: 12,
        },
        inputEnabled: false,
        buttonSpacing: 30,
        buttonTheme: {
            style: {
                fill: 'none',
                color: '#595959',
            },
            stroke: 'none',
            padding: 10,
            fontWeight: 'bold',
            height: 18,
            width: null,
            'stroke-width': 0,
            r: 10,
            states: {
                hover: {
                    fill: '#0ec3ee',
                    style: {
                        color: 'white'
                    }
                },
                select: {
                    fill: '#16aed2',
                    style: {
                        color: 'white'
                    }
                }
            }
        },
    },
    navigator: {
        //enabled: false,
    },
    scrollbar: {
        enabled: false,
    },
    credits: {
        enabled: false,
    },
    title: {
        text: ''
    },
    subtitle: {},
    xAxis: {

    },
    yAxis: {
        title: {
            enabled: false
        },
        labels: {
            enabled: false
        },
        lineWidth: 0,
        minorGridLineWidth: 1,
        gridLineWidth: 1,
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0
    },
    tooltip: {
        useHTML: true,
   ...