Grouped categories demo

author(s): Black Label

by jeffersonswartz

HTML

<link rel="stylesheet" href="http://blacklabel.github.io/grouped_categories/css/styles.css">
<script src="https://code.highcharts.com/stock/highstock.src.js"></script>
<script src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script>
<div id="container" class="chart-container" style="height:400px"></div>

CSS

body {
  padding: 0px !important;
  margin: 8px;
}

.highcharts-xaxis-labels span {
  white-space: normal!important;
  width: 75px !important;
}

JavaScript

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      type: "bar",
      borderWidth: 5,
      borderColor: '#e8eaeb',
      borderRadius: 0,
      backgroundColor: '#f7f7f7',
      marginLeft: 300
        //height: '1200'
    },
    scrollbar: {
      enabled: true
    },
    title: {
      style: {
        'fontSize': '1em'
      },
      useHTML: true,
      x: -27,
      y: 8,
      text: '<span class="chart-title"> Grouped categories <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
    },
    series: [{
      data: [4, 14, 18, 5, 6, 5, 14, 15, 18]
    }],
    xAxis: {
      labels: {
        x: -4,
        useHTML: true
      },
      max: 2,
      categories: [{
        name: "FruitFruit Fruit",
        categories: [{
          name: "California Apple",
          categories: ["Green", "Red with a very long text that should be broken!", "white"]
        }, {
          name: "Banana",
          categories: ["small", "medium medium_medium", "large"]
        }, {
          name: "Orange",
          categories: ["small", "medium medium_medium", "large"]
        }]
      }, {
        name: "Big Long List of Vegetable",
        categories: ["Carrot", "Potato", "Tomato festival in Rio"]
      }, {
        name: "Fish",
        categories: ["Cod", "Salmon", "Tuna"]
      }]
    }
  });
});