How can I wrap long text labels in column chart nested groups - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

How can I wrap long text labels in column chart nested groups

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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <style id="compiled-css" type="text/css">

.highcharts-xaxis-labels {/*ww  w . j  a  v a  2  s .  c o  m*/
   word-break: break-all;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: "container",
            type: "column"
        },
        title: {
            text: null
        },
        series: [{
            data: [4, 14, 18, null, 5, 6, 5, null, 14, 15, 18]
        }],
        plotOptions: {
            column: {
                //grouping: false,
                color: 'blue'
            },
            series: {
                pointPadding: 0,
                groupPadding: 0.1
            }
        },
        xAxis: {
            labels:{
                maxStaggerLines: 1,
                useHTML:true,
            },
            categories: [{
                name: "Fruit",
                categories: ["Apples", "Bananas", "Oranges"]
            }, {
                name: ' ',
                categories: [' ']
            }, {
                name: "Vegetable",
                categories: ["Carrots", "Potatos", "Tomatoes"]
            }, {
                name: ' ',
                categories: [' ']
            }, {
                name: "Fish",
                categories: ["Cod", "Salmon", "Tuna"]
            }]
        }
    });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script> 
      <div id="container" style="height: 400px; width: 400px"></div>  
   </body>
</html>

Related Tutorials