Bar chart data label with bar custom css and bar background - Javascript highcharts

Javascript examples for highcharts:Bar Chart

Description

Bar chart data label with bar custom css and bar background

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-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//  ww w .  jav  a 2  s. c om
  $('#container').highcharts({
    chart: {
      type: 'bar',
      marginLeft: 100,
      marginRight: 100
    },
    xAxis: {
      visible: false,
    },
    yAxis: {
      min: 0,
      max: 10,
      gridLineWidth: 0,
    },
    plotOptions: {
      bar: {
        dataLabels: {
          backgroundColor: '#000',
          shape: 'circle',
          padding: 8,
          color: 'white',
          style: {
            "textShadow": "0 0 2px black, 0 0 2px black"
          }
        }
      }
    },
    series: [{
      data: [10, 10, 10, 10, 10],
      showInLegend: false,
      animation: false,
      grouping: false,
      borderRadiusTopLeft: 7,
      borderRadiusTopRight: 7,
      borderRadiusBottomRight: 7,
      borderRadiusBottomLeft: 7,
      pointWidth: 15,
      enableMouseTracking: false,
      color: '#aaa',
      dataLabels: {
        enabled: true,
        x: 20,
        formatter: function() {
          var series = this.series.chart.series[1];
          return series.options.data[this.point.index];
        }
      }
    }, {
      name: 'Year 2012',
      data: [9, 7, 4, 7, 3],
      color: 'orange',
      borderRadiusBottomRight: 7,
      borderRadiusBottomLeft: 7,
      pointWidth: 15,
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script src="https://rawgithub.com/highslide-software/rounded-corners/master/rounded-corners.js"></script> 
      <div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials