display series.name on X Axis in bar chart - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

display series.name on X Axis in bar 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"> 
      <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  a2s .  com*/
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        xAxis: {
            categories:[]
        },
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true,
                    formatter: function() {
                        return this.name;
                    }
                }
            }
        },
        legend: {
            layout: 'vertical',
            floating: true,
            backgroundColor: '#FFFFFF',
            align: 'right',
            verticalAlign: 'top',
            y: 60,
            x: -60
        },
        series: [{
            data: [{name:'Test 1',y:20,color:'red'},
                   {name:'Test 2',y:20,color:'blue'},
                   {name:'Test 3',y:40,color:'green'}]
        }]
    });
});

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

Related Tutorials