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

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. 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