assign colour to datapoints bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

assign colour to datapoints bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 200px; height: 100px; margin: 0 auto"></div> 
      <script type="text/javascript">
$(function() {/*from ww w  .j  a va2 s . c om*/
    currentIndex = 0;
    myColors = ['#D5D4D4','#D5D4D4','#87bdd8','#87bdd8','#87bdd8'];
    function getColor(index) {
       return myColors[index%myColors.length];
    }
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: [''],
            visible:false
        },
        yAxis: {
            min: 0,
            visible:false
        },
        legend: {
            reversed: true,
            enabled:false
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                animation:false
            }
        },
        labels: {
            enabled: false
        },
        tooltip: {
            enabled: false
        },
        exporting:{
            enabled:false
        },
        credits:{
            enabled:false
        },
        series: [{
            name: 'Del1',
            data: [.20],
            color: getColor(currentIndex++)
        }, {
            name: 'Del2',
            data: [.20],
            color: getColor(currentIndex++)
        }, {
            name: 'Del3',
            data: [.20],
            color: getColor(currentIndex++)
        }, {
            name: 'Del4',
            data: [.20],
            color: getColor(currentIndex++)
        }, {
            name: 'Del4',
            data: [.20],
            color: getColor(currentIndex++)
        }]
    });
});

      </script>  
   </body>
</html>

Related Tutorials