Highcharts Demo

author(s): Torstein Hønsi

by vibhuti

HTML

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

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

JavaScript

var n = 1;
Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            events: {
                hide: function () {
                    var text = 'The series was just hidden (#' + n + ')';
                    if (!this.chart.lbl) {
                        this.chart.lbl = this.chart.renderer.label(text, 100, 70)
                            .attr({
                                padding: 10,
                                r: 5,
                                fill: Highcharts.getOptions().colors[1],
                                zIndex: 5
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();
                    } else {
                        this.chart.lbl.attr({
                            text: text
                        });
                    }
                    n = n + 1;
                }
            }
        }
    },

    series: [{
                type: 'spline',
                name: 'Priority Demand 3',
                data: [3, 2.67, 3, 6.33, 3.33, 5, 2, 6, 3, 2, 1, 2],
                marker: {
                    enabled: false                    
                },
                color: '#EFCE5C'
            },{
                type: 'spline',
                name: 'Priority Demand 4',
                data: [5, 5, 3, 6, 2, 2, 3, 1, 1, 2, 4],
                animation:{
                    duration:1000
                },
                marker: {
                    enabled: false
                },
                color: '#E75552'
            }]
});