Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

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

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

JavaScript

var chart = new Highcharts.chart('container', {

    chart: {
        type: 'column'
    },

    title: {
        text: 'Total fruit consumtion, grouped by gender'
    },

    xAxis: {
        categories: ['Apples', 'Oranges', 'Pears']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of fruits'
        }
    },

    tooltip: {
      enabled : false
    },

    plotOptions: {
        column: {
            pointWidth : 20,
        }
    },

    series: [{
        name: 'John',
             shadow : {
										offsetX : 0,
									},
							        	color : {
								"linearGradient" : {
									"x1" : 0,
									"y1" : 0.3,
									"x2" : 0,
									"y2" : 1
								},
								"stops" : [[0, "#7EDBCC"], [1, "#AEE9DF"]]
							},
        data: [5, 3, 4],
          point :{
        events :{
        click : function (e){
        console.log(e.point.index);
     
       // console.log(this.series);
        
				var series = this.series;
			for (var i=0; i < series.data.length; i++){
				var point = series.data[i];
point.update({color: series.chart.options.colors[i]});
										 	 chart.series[1].data[i].update({color: "#519DD1"});
										 	   chart.series[0].data[i].update({color: "#57E7CE"});
										 	    chart.series[2].data[i].update({color: "#000000"});
										 }
	

        }
        }
        },
        stack: 'male'
    }, 
    {
        name: 'Jane',
        data: [2, 5, 6],
            point :{
        events :{
        click : function (e){
   
        
         console.log(e.point.index);
        }
        }
        },
        stack: 'female'
    }, {
        name: 'Janet',
        data: [3, 2, 4],
            point :{
        events :{
        click : function (e){
         console.log(e.point.index);
        }
        }
        },
        stack: 'female'
    }]
});