Stacked and grouped column

author(s): Torstein Hønsi

by srinivas yaragalla

HTML

<script src="https://n20-bn-dvt0082d:12000/scripts/HighChart9.2.2/highstock.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>

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

var jData = {
  "chart": {
    "renderTo": {
      "jQuery3600430882842662954961": {
        "display": ""
      }
    },
    "spacingLeft": 25,
    "borderColor": "#999999",
    "borderWidth": 0,
    "borderRadius": 0,
    "type": "line",
    "backgroundColor": "transparent",
    "events": {}
  },
  "stockTools": {
    "gui": {
      "toolbarClassName": "tools-container",
      "enabled": false
    }
  },
  "title": {
    "text": "",
    "style": {
      "fontSize": "14px",
      "fontWeight": "bold",
      "fontFamily": "Arial, Helvetica, sans-serif",
      "color": "#000000"
    }
  },
  "credits": {
    "text": "",
    "style": {
      "fontSize": "12px",
      "fontWeight": "bold",
      "fontFamily": "Arial, Helvetica, sans-serif",
      "color": "#000000"
    },
    "position": {
      "align": "center",
      "x": 5,
      "y": -6
    }
  },
  "legend": {
    "enabled": "true",
    "borderColor": "white",
    "borderWidth": 1,
    "layout": "horizontal",
    "symbolRadius": 0,
    "itemDistance": 20
  },
  "exporting": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "events": {},
      "marker": {
        "enabled": true,
        "radius": 30,
        "symbol": "square"
      }
    },
    "column": {
      "stacking": "normal"
    },
    "area": {
      "stacking": "normal"
    },
  },
  "xAxis": {
    "categories": [
      "01 Jan 2021",
      "01 Jan 2022",
      "01 Jan 2023",
      "01 Jan 2024",
      "01 Jan 2025",
      "01 Jan 2026",
      "01 Jan 2027",
      "01 Jan 2028",
      "01 Jan 2029",
      "01 Jan 2030"
    ],
    "labels": {
      "type": "category"
    }
  },
  "yAxis": {
    "opposite": false,
    "lineWidth": 1,
    "lineColor": "#999999",
    "gridLineWidth": 1,
    "tickWidth": 1,
    "showLastLabel": true,
    "showFirstLabel": true,
    "labels": {
      "align": "right",
      "x": -5
    }
  },
  "navigator": {
    "series": {
      "type": "line",
      "color": "#4572A7",
      "lineWidth": 1
    },
   ...