Highcharts Demo

author(s): Torstein Hønsi

by pankaj agrawal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

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

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: ['01 Sep', '02 Sep', '03 Sep', '04 Sep', '05 Sep', '06 Sep','07 Sep'],
        title: {
            text: 'Date'
        },
    },
    yAxis: {
    		min: 0, 
    		max: 10,
        tickInterval: 2,
        title: {
            text: 'Count (In K)'
        },
        labels: {
            formatter: function () {
                return this.value + '°';
            }
        }
    },
    tooltip: {
        crosshairs: true,
        shared: true
    },
    plotOptions: {
        spline: {
            marker: {
                radius: 4
            }
        }
    },
    series: [{
        name: 'Actual',
        marker: {
            symbol: 'circle'
        },
        data:[4.3,3.8,4,5.2,5,4,5.6],
         

    }, {
        name: 'Target',
        marker: {
            symbol: 'circle'
        },
        data:[5.3,4.6,6.3,4,6,3,4.9],
        color: '#FFB6B6'
    }],
    legend: {
            layout: 'horizontal',
            align: 'left',
            verticalAlign: 'bottom',
            x: 20
        },
        exporting: {
            buttons: {
                contextButton: {
                    enabled: false
                }
            }
        },
        credits: {
      enabled: false
  }
});