Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add series</button>

JavaScript

// create the chart
Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
        		load: function () {
              var label = this.renderer.label('The chart was just redrawn', 100, 0)
              .attr({
                fill: Highcharts.getOptions().colors[3],
                padding: 10,
                r: 5,
                zIndex: 8
              })
              .css({
                color: '#FFFFFF'
              })
              .add();

              setTimeout(function () {
                label.fadeOut();
              }, 1000);
            }
        }
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            stacking: 'normal',
            animation: {
            	duration: 1
            },
            events: {
              "afterAnimate": function () {
                var colorsArr = ['red','yellow','green'];
                var nameArr = ['test','test2','test3'];
                var countI;
                var countII;
                for(countI=0;countI<this.data.length;countI++){
                  switch(this.name){
                    case nameArr[0]:
                      this.color = colorsArr[0];
                      this.data[countI].color = colorsArr[0];
                      break;
                    case nameArr[1]:
                      this.color = colorsArr[1];
                      this.data[countI].color = colorsArr[1];
                      break;
                    case nameArr[2]:
                      this.color = colorsArr[2];
                      this.data[countI].color = colorsArr[2];
                      break;
                  }
                }  
                this.chart.addSeries({
                	showInLegend: false
                });
                this.chart.redraw();
            	}
            }
        }
    },

   ...