determine if text is outside of data point - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

determine if text is outside of data point

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://code.jquery.com/jquery-2.2.4.js"></script> 
      <script type="text/javascript">
var lightColor = "#DADADA";
function datalabelColor() {/* w  w  w. j  a  v  a2  s .  c om*/
   var chart = this,
  series = chart.series,
  each = Highcharts.each,
  dL;
  each(series, function(serie, i) {
     each(serie.data, function(p, j) {
      dL = p.dataLabel;
      if(dL.alignOptions.verticalAlign === 'top') {
        dL.css({
           color: lightColor
        });
      }
    });
  });
}
$(function() {
  $('#container').highcharts({
    chart: {
       type: 'column',
      events: {
        load: datalabelColor,
        redraw: datalabelColor
      }
    },
    title: {
      text: 'I want data point inside a bar to be my colour, and outside to be black'
    },
    xAxis: {
      categories: ['Car Insurance',
        'Life Insurance',
        'Pet Insurance'
      ]
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          overflow: 'justify',
          crop: false,
          inside: false,
          style: {
            fontWeight: 'normal',
            textShadow: 'none'
          },
          formatter: function() {
            var item = this;
            return (item.point.formattedValue || item.point.y);
          }
        }
      }
    },
    series: [{
      "color": "#666699",
      "name": "North",
      "data": [{
        "color": "#666699",
        "name": "Car Insurance",
        "y": 9178
      }, {
        "color": "#666699",
        "name": "Life Insurance",
        "y": 4518
      }, {
        "color": "#666699",
        "name": "Pet Insurance",
        "y": 1450
      }]
    }, {
      "color": "#663366",
      "name": "South",
      "data": [{
        "color": "#663366",
        "name": "Car Insurance",
        "y": 2129
      }, {
        "color": "#663366",
        "name": "Life Insurance",
        "y": 1066
      }, {
        "color": "#663366",
        "name": "Pet Insurance",
        "y": 374
      }]
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 320px"></div>  
   </body>
</html>

Related Tutorials