make Bar Chart data labels appear on the far right in the chart - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

make Bar Chart data labels appear on the far right in the chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 310px; height: 300px; margin: 0 auto"></div> 
      <script type="text/javascript">
var chart = Highcharts.chart('container', {
    chart: {//from  w w w  .j  av a  2  s  . c  o  m
        type: 'column',
        inverted: true
    },
    title: {
        text: 'market shares. January, 2015 to May, 2015'
    },
    subtitle: {
        text: 'Click the columns to view versions. Source: <a href="http://java2s.com">java2s.com</a>.'
    },
    xAxis: [{
          opposite: true,
        type: 'category',
          labels: {
              formatter: function() {
                return this.chart.series[0].processedYData[this.pos] + ' %'
            },
        },
        lineWidth: 0,
        minorTickWidth: 1,
        tickWidth: 0
    }, {
          type: 'category',
        labels: {
              formatter: function() {
                        return this.chart.series[0].data[this.pos].name
                  }
        }
    }],
    yAxis: {
          title: {
              enabled: false
        },
        labels: {
              enabled: false
        },
        gridLineWidth: 0,
        max: 100
    },
    legend: {
        enabled: false
    },
    plotOptions: {
        series: {
            borderWidth: 0,
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
    },
    series: [{
        name: 'Brands',
        data: [{
            name: 'SAC1',
            y: 10,
        }, {
            name: 'SAC2',
            y: 5,
        }, {
            name: 'SAC3',
            y: 15,
        }]
    }],
});
var extremes = chart.xAxis[0].getExtremes();
chart.xAxis[1].setExtremes(extremes.min-0.5 ,extremes.max+0.5);

      </script>  
   </body>
</html>

Related Tutorials