HTML5 & JS Stacked Column Charts

Stacked Column Charts are plotted when multiple Column Charts with aligned x values are plotted on same scale. Contribution of each value is displayed in different color and total length of Column shows cumulative total of that point for all the series. Each dataSeries should contain type as stackedColumn.

In column charts, axisX is the horizontal Axis and axisY is the vertical Axis.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Stacked Column Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries bevelEnabled Boolean false true,false
dataSeries/ dataPoint indexLabelPlacement String “outside” “inside”,”outside”
dataSeries/ dataPoint indexLabelOrientation String “outside” “inside”,”outside”
dataSeries fillOpacity Number 1 .2,.4,1 etc

Basic Stacked Column Chart

Try it Yourself by Editing the Code below.

Stacked Column Chart With Additional Customization

Try it Yourself by Editing the Code below.


Comments 27

  1. how can I start the second stackedColumn chart from below (0) not from above (where first stackedColumn finish), like 2 column chart overlapped each other with one of them a little bit transparent color. So, both will be visible.

  2. I am created a stacked column chart. It’s completely valid for some columns to have zero as their value. When I use “0” as a column value an error is given instead of text shown above the column. I want “0” to appear. Is this possible?

    I was able to use “” instead of a value and remove the error. However, if the last column piece has no value the sum of the other pieces is not shown. This work around was unsuccessful. Allowing zero as a valid value would make more sense.

    Is there a way to allow valid values of zero for columns?

  3. Is it possible to plot date/time values on the x axis and y axis simultaneously? I am looking to create a graph which separates individual days into multiple bar segments which will represent how long an event occurred for on a given day.

  4. I need to either reverse the order of the items in the legend or reverse the order that the series are stacked on the chart. Currently when I show all the series in the legend the order that they read from top to bottom is the order that they are stacked from bottom to top on the chart when it is drawn. Is there a way to do this? The client wants to be able to see the top item in the legend and know that it is also the top item in the stacked columns.

  5. Is there a way to show a sum total of all columns? To expand up on that, is there a way to have the totals of each colored area show in those areas without mousing over?

  6. Is there a way to sort the data in each stacked column, ascending, or descending? Ideally, I’d would like each stacked column in the chart to be organized by value internally.

    • I would like to be able to do this as well. I have a shared tooltip on a multiple dataSeries rangeArea chart, and for any given datapoint the values and hence the sort order should be different. I thought that the control of the order was based on the stacking of the dataSeries in the chart setup, but then I viewed the same chart in Chrome (all my testing had been in Firefox) and now the tooltip order is incorrect.

      I was thinking about modifying my already complex tooltip contentFormatter by building an array or something so that it could be sorted.

      Has anyone come up with a fix for this?

      • Melony,
        We were unable to reproduce your issue. Can you kindly create a fiddle, so that we can understand your issue and help you out.

        • It took me a little while to create a kind of encapsulated version of my application, but I finally managed it. Here’s the fiddle: https://jsfiddle.net/melonyjr/eyok3rby/1/.

          So, the shared tooltip works as expected in Firefox (and IE even!), but not in Chrome. In Chrome there are two entries that are always out of order (Ashmore Tongue and Grayslake Peat). If I could sort the values in the toolTip on y[1], then all would be solved, I think.

          Thanks for having a look at this!

  7. Is it possible to start the chart from a point other than zero? My specific example is a borehole in the ground. I want the top of the chart to be at the ground elevation (say 150), and then the stacked column to move down from there. I’ve used negative values for the Y values to make the chart go negative, but it starts from zero. I tried to use the range chart to do this as well, but then I’d need a stackedRangeColumn chart, and you don’t have that option. Any help appreciated.

  8. I would like to move a stack from one column say Jan 2015 and would like to see the effect of the change on the system. Graph needs to have the capability to change the source code at a point

  9. i want to pass variables from php to this javascript file, then draw the stacked column chart. How can I achieve this? Using JSON or ?

  10. Switching between the types “stackedArea” and “stackedColumn” works fine as long as no negative numbers are used. Is there a way to stack the values in “stackedColumn” the same way as “stackedArea” does?

    Setting the value ‘y: 135305 , label: “USA”‘ of the 1st example to ‘y: -135305 , label: “USA”‘ shows a graph which a “cumulative total” of about 250.000 (+-120.000). Setting then both data types to “stackedArea” will show a “cumulative total” of -23967.

    • Gregory,

      Sorry as of now it is not possible. As a workaround you can try with, rangeColumn chart in addition to column chart, but you have to add the data yourself. Here is an example.
