Set color of data label to different inside and outside of the bar chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

Set color of data label to different inside and outside of the bar chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from   ww  w  .jav  a2  s . c o m*/
    $('#container').highcharts({
        chart: {
            type: 'bar',
            height: 700
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            bar: {
                stacking: 'normal',
                pointPadding: 0,
                groupPadding: 0.2,
                dataLabels: {
                    enabled: true,
                    align: "right",
                    inside: false,
                    style: {
                        fontWeight: 'bold'
                    },
                    formatter: function() {
                        var max = this.series.yAxis.max,
                            color =  this.y / max < 0.05 ? 'black' : 'white'; // 5% width
                        return '<span style="color: ' + color + '">' + this.y + ' M</span>';
                    },
                    verticalAlign: "middle"
                },
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 2.33]
        }]
    });
});

      </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: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials