Stacked and grouped column

author(s): Torstein Hønsi

by Rambabu Pudi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>


<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Chart showing stacked columns with grouping, allowing specific series to
        be stacked on the same column. Stacking is often used to visualize
        data that accumulates to a sum.
    </p>
</figure>

<button id='exportToCSV'>EXPORT TO CSV</button> &nbsp;&nbsp;&nbsp;
<button id='exportToXLS'>EXPORT TO XLS</button>  &nbsp;&nbsp;&nbsp;
<button id='exportToXLSX'>EXPORT TO XLSX(Using 3rd Party Lib)</button>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

// Data retrieved from https://en.wikipedia.org/wiki/Winter_Olympic_Games
var chartData = Highcharts.chart("container", {
  chart: {
    type: "column",
  },

  title: {
    text: "Forecast Review and explanation",
    align: "left",
  },

  xAxis: {
    categories: ["W1", "W2", "W3", "W4", "W5", "W6", "W7", "W8", "W9", "W10"],
  },
  yAxis: [
    {
      // Primary yAxis
      labels: {
        style: {
          color: Highcharts.getOptions().colors[1],
        },
      },
      title: {
        text: "Forecast (Units)",
        style: {
          color: Highcharts.getOptions().colors[1],
        },
      },
    },
    {
      // Secondary yAxis
      title: {
        text: "Weather",
        style: {
          color: Highcharts.getOptions().colors[0],
        },
      },
      labels: {
        format: "{value} °C",
        style: {
          color: Highcharts.getOptions().colors[0],
        },
      },
      opposite: true,
    },
    {
      // Secondary yAxis
      title: {
        text: "Precipitation",
      },
      labels: {
        format: "{value} mm",
      },
      opposite: true,
    },
    {
      // Secondary yAxis
      title: {
        text: "Event Casual",
      },
      labels: {
        format: "{value}",
      },
      opposite: true,
    },
  ],

  tooltip: {
    format:
      "<b>{key}</b><br/>{series.name}: {y}<br/>" + "Total: {point.stackTotal}",
  },

  plotOptions: {
    column: {
      stacking: "normal",
    },
  },

  series: [
    {
      name: "Forecast",
      data: [1000, 800, 950, 1150, 950, 1000, 800, 950, 1150, 950],
      showInLegend: true,
      stack: "Forecast Review",
    },
    {
      name: "Base Demand",
      data: [500, 500, 500, 500, 500, 500, 500, 500, 500, 500],
      showInLegend: true,
      stack: "Forecast Explaination",
    },
    {
      name: "Marketing",
      data: [250, 150, 100, 50, 100, 250, 150, 100, 50, 100],
      showInLegend: true,
      stack: "Forecast Explaination",
    },
    {
      name:...