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:
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
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:
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:
Notes:
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:
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.
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.
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
