How to plot a Stacked column chart using highcharts?

Question

[["isis",14823424,1012],["isis",7589888,1011],["isis_uv",458752,1115],["bgp",524066816,1059],["bgp_policy_reg_agent",352256,146],["isis",7655424,1013],["isis_policy_reg_agent",290816,314]]

Here [0] index is the x-axis  
     [1] index is the y-axix  
     [2] index is the legend value

I wanted to plot a graph something like this

JSFiddle Link

Please Guide me to plot it..

Answer 1

Mike Zavarello has described your issue in detail.

If you can't (or don't want to) format your data, the function below will do this for you.

chart: {
    type: 'column',
    events: {
      load: function() {
        var chart = this,
          categories = [],
          series = [];
        data.forEach(function(elem) {
          if (!categories.includes(elem[0])) {
            categories.push(elem[0])
          }
        })
        data.forEach(function(elemData) {
          series.push({
            name: elemData[2],
            data: (function() {
              var dataPoints = [];
              categories.forEach(function() {
                dataPoints.push(0)
              })
              categories.forEach(function(elemCategories, j) {
                if (elemCategories == elemData[0]) {
                  dataPoints[j] = elemData[1]
                }
              })
              return dataPoints
            })()
          })
        })
        chart.update({
          series: series,
          xAxis: {
            categories: categories
          }
        }, true, true)
      }
    }
  },

You can take a look at the example here: https://jsfiddle.net/BlackLabel/mqotyc64/

Answer 2

In order to draw the chart from your image, you will need to format your data a bit differently.

First, items for your x-axis need to be defined as a categories array:

xAxis: {
    categories: ['isis', 'isis_uv', 'bgp', 'bgp_policy_reg_agent', 'isis_policy_reg_agent']
},

Next, you define the chart series and data. Each of the items you want in your legend (1011, 1012, etc.) will be a separate series with its own name and data. The y-axis values for each of those series are the data array that matches the categories array we defined above.

series: [{
    name: '1012',
    data: [14823424, 0, 0, 0, 0]
}, {
    name: '1011',
    data: [7589888, 0, 0, 0, 0]
}, {
    name: '1115',
    data: [0, 458752, 0, 0, 0]
}, {
    name: '1059',
    data: [0, 0, 524066816, 0, 0]
}, {
    name: '146',
    data: [0, 0, 0, 352256, 0]
}, {
    name: '1013',
    data: [7655424, 0, 0, 0, 0]
}, {
    name: '314',
    data: [0, 0, 0, 0, 290816]
}]

Let's look at the first series here:

{
    name: '1012',
    data: [14823424, 0, 0, 0, 0]
}

This tells the chart that series "1012" has:

• a value of 14823424 for x-axis item "isis"
• a value of 0 for x-axis item "isis_uv"
• a value of 0 for x-axis item "bgp"
• a value of 0 for x-axis item "bgp_policy_reg_agent"
• a value of 0 for x-axis item "isis_policy_reg_agent"

Here's a modified example with your data: https://jsfiddle.net/brightmatrix/6gb0tzj3/74/

I hope this is helpful for you.