custom datalabel for bar chart. Format in PlotOptions - Javascript highcharts

Javascript examples for highcharts:Chart Data

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

Description

custom datalabel for bar chart. Format in PlotOptions

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {// ww  w. j  a  v a 2 s  .c o m
    var chart;
    var categories = ['Category1', 'Category2', 'Category3', 'Category4'];
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type:'bar'
            },
            title: {
                text: 'Your Title'
            },
            xAxis: {
                categories: categories,
                labels: {
                    enabled:false
                }
            }, plotOptions: {
            series: {
              dataLabels: { formatter: function() {return this.x+"   "+ this.y; }, enabled: true,
                        align: 'right',
                        color: '#294469',
                        shadow: false,
                        x: -10,
                        style: {"fontSize": "10px", "textShadow": "0px" } },
                pointPadding: 0.1,
                groupPadding: 0
            }
        },
            tooltip: {
                formatter: function() {
                    return this.x  +': '+ this.y;
                }
            },
            series: [{
                type: 'bar',
                name: 'Jane Doe',
                data: [3, 2, 1, 3],
                stacking: 'normal'
            }]
        });
    });
});

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

Related Tutorials