Highcharts Demo

author(s): Torstein Hønsi

by fekkyDev s

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.seriesTypes.area.prototype.drawLegendSymbol = 
     Highcharts.seriesTypes.line.prototype.drawLegendSymbol;

Highcharts.addEvent(Highcharts.Series, 'afterInit', function () {
	this.symbolUnicode = {
    	circle: '●',
        diamond: '♦',
        square: '■',
        triangle: '▲',
        'triangle-down': '▼'
    }[this.symbol] || '●';
});

Highcharts.chart('container', {
    chart: {type: 'area'},
    plotOptions: {
        series: {marker: {enabled: true}},
	      area: {
	       stacking: 'normal',
	      }
	    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.symbolUnicode} {series.name}</span>: <b>{point.y}</b><br/>',
        valueSuffix: ' items',
        shared: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        marker: {enabled: false},
        color: "#Ff7799"
    }, {
        data: [19.9, 41.5, 16.4, 12.2, 14.0, 17.0, 13.6, 14.5, 26.4, 194.1, 95.6, 54.4],
        marker: {symbol: 'square'},
        color: "#6699ff"
    }]
});