Stacked Bar Chart in Perspective - Detailed Steps

Few months ago I needed to create a stacked bar chart and ran into issues (Perspective 8.0.14 Time Series Bar Chart width - #3 by arun1). There are few posts here but they don’t give a full picture. Here are the steps that I took to create one:

  1. First it is worthwhile to note that we need to use the XY chart and not the TimeSeries chart because the width of the bar chart is calculated automatically based on the amount of data in the x-axis so if you have sparse data in a wide time range then this bar chart will end up as thin vertical lines. (Perspective 8.0.14 Time Series Bar Chart width - #2 by jball). See Note 2 in the end
  2. The dataset needs to be such that the different categories need to have their own columns. For example if there are 3 categories of alarms that can occur on any day then the dataset should have 3 separate columns each containing the total number of alarms of one category:
  3. To keep things simple, let’s start with the dataset that comes with default XY Chart when you drag it in from the Perspective Components window. The default XY chart will look like this:

    Our goal is to convert the above plot such that both Process and Outside Temp are represented as bars, one on top of the other, aka a stacked bar chart. If we are successful it look like this:
  4. Click on the chart, go to the Series 0 and 1 and configure them to be plotted on the same yAxis as shown below:
  5. Change both Series 0 and 1 ‘render’ property from Line to Column:
  6. All the above steps will result in:
  7. Since we have selected Column, we can now drill into column property to get to column/appearance/stacked and check the box:
  8. Only when both the series have their stacked property checked, the chart will display the proper stacked bar chart

i. One of the Inductive programmers has opened a ticket to allow the user to specify the Bar chart width. Not sure if it has been addressed
ii. The default TimeSeries Chart of type Bar does look like a stacked bar chart but has limitations if the time axis range is too wide:

The same data over a wider time range does not look like bar graph because the bars are too thin:

Hope this was helpful.
Thanks :grinning:


I referenced his today. Very helpful, thank you.


1 Like

Hi Thanks for this example.

Could it be possible to add the total value on top of each stacked bar as label ?


Yes, it is possible if you add a new serie to the chart that has the total value in the y axis and the time in the x axis. If it is rendered as a step line, you can set the stroke width to 0 and, the bullets to labels instead of circles. Finally, you will have to fit the position (dy) of the bullets so that they appear over the columms.


hi @Marta_Castillo,
It's working like a charm.


Thanks for putting this all together.

One other solution that I have found works well is to use the Time Series Chart but instead of setting it to a stacked Bar Chart to set it to a stacked Area Chart. I really like this because then I can still utilize items like the Zoom feature if I end up having a lot of data where my bars are going to be tiny even in an XY Chart.

1 Like

That sounds interesting to me. Thanks

I have been really fiddling with my bar sizes and spacings each time.

Thank you very much for this!

Hi Hello, Nice work. Is it possible for you to display the individual series value like if total value for column 1 is 80 (5+30+45) i want to display all three values inside bracket.

I think, you can achieve this by applying the in-line codes. label.text support in-line codes. More details can be found Text styling – amCharts 5 Documentation
Here is a sample

1 Like

ok will check on this. Thanks

For those that want to use the time series chart, the best solution I found is in this thread:

Here is my chart (I need to adjust so it lines with the hour but its nearly there):