Highcharts Demo

author(s): Torstein Hønsi Alan Dong

by Alan Dong

HTML

<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="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

CSS

/* Group Stacked Bar Chart */

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Stacked bar chart'
    },
    xAxis: {
//        categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            categories: [{
                name: "Web",
                categories: ["Video", 'Non-Video']
            }, {
                name: "App",
                categories: ["Video", 'Non-Video']
            }] 
    },
/*     yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        }
    }, */
  yAxis: [{ // Primary yAxis
    labels: {
      format: '${value}',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    title: {
      text: 'MAU',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: 'DAU',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '${value}',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: 'normal' // this is the magic
        }
    },
    series: [
            {
            name: 'desktop',
            type: 'column',
            data: [301,302,303,304],
            tooltip: {
                valueSuffix: ' °MM'
            },
/*             stack: 'web' */
        },
        {
            name: 'mobile',
            type: 'column',
            data: [404,405,406,407],
            tooltip: {
                valueSuffix: ' °BB'
            },
/*             stack: 'web' */
        },
    {
            name: 'tv',
            type: 'column',
            data: [301,302,303,304],
            tooltip: {
                valueSuffix: ' °MM'
            },
            /* stack: 'web' */
        },
    /* 
        {
            name: 'Invoices',
            type: 'column',
           ...