# Perspective Stacked Bar Chart - TimeSeriesChart

**URL:** <https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [April 16, 2024, 12:59pm UTC](https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884 "2024-04-16T12:59:19Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Robert\_Hrynciw](https://avatars.discourse-cdn.com/v4/letter/r/3bc359/32.png) [@Robert\_Hrynciw](https://forum.inductiveautomation.com/u/Robert_Hrynciw)\
**Post date:** [April 16, 2024, 12:59pm UTC](https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884/1 "2024-04-16T12:59:19Z")

</div>

Good morning all,

I am attempting to use the TimeSeriesChart as a stacked bar chart in Ignition Perspective. I have linked my data as a query with a json return and it seems to be picking it up; however, the data is just off of the side. I will attach a picture below:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/2/a2fc76cddfc6019c4264067d23446e87d6046f3e.png)

Seems like it doesn't want to show my data. I only have 2 points of data; one for 4/1 and one for 4/8. My main issue is making it so the bottom row only utilizes dates that are in my database (once a week, a Monday date). Does anyone know how to make this possible?

Thanks in advance for the help,

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 16, 2024, 1:48pm UTC](https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884/2 "2024-04-16T13:48:30Z")

</div>

Please post the chart configuration. See [Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831).

The chart will have a data binding so you'll need to paste the data separately, nicely formatted too.

---

<div class="post-metadata">

**Author:** ![Robert\_Hrynciw](https://avatars.discourse-cdn.com/v4/letter/r/3bc359/32.png) [@Robert\_Hrynciw](https://forum.inductiveautomation.com/u/Robert_Hrynciw)\
**Post date:** [April 16, 2024, 3:32pm UTC](https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884/4 "2024-04-16T15:32:59Z")

</div>

Just a heads up, the query selecting the data changed so you will see a difference in the value of the output. Didn't affect the issue that already exists.

> **Chart Config**
>
> ```auto
> [
> {
> "type": "ia.chart.timeseries",
> "version": 0,
> "props": {
> "series": [
> {
> "name": "Cleaning Time"
> }
> ],
> "plots": [
> {
> "relativeWeight": 1,
> "trends": [
> {
> "axis": "",
> "baselines": [],
> "breakLine": true,
> "columns": [
> {
> "color": "#FF4A4A",
> "key": "S",
> "styles": {
> "highlighted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "muted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "normal": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "selected": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> }
> }
> },
> {
> "color": "#9dd55a",
> "key": "I",
> "styles": {
> "highlighted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "muted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "normal": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "selected": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> }
> }
> },
> {
> "color": "#E3FF38",
> "key": "C",
> "styles": {
> "highlighted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "muted": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "normal": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> },
> "selected": {
> "fill": {
> "color": "",
> "opacity": null
> },
> "stroke": {
> "color": "",
> "dashArray": null,
> "opacity": null,
> "width": null
> }
> }
> }
> }
> ],
> "interpolation": "curveLinear",
> "radius": 2,
> "series": "Cleaning Time",
> "stack": true,
> "type": "bar",
> "visible": true
> }
> ],
> "axes": [],
> "markers": []
> }
> ],
> "title": {
> "text": "Time Spent"
> },
> "timeAxis": {
> "tickCount": 2,
> "tick": {
> "label": {
> "angled": true,
> "format": "M-D",
> "font": {
> "size": 12
> }
> }
> }
> },
> "timeRange": {
> "dateFormat": "MMMM Do YYYY",
> "timeFormat": "None"
> },
> "xTrace": {
> "infoBox": {
> "showTime": false,
> "dateFormat": "M-D",
> "timeFormat": "None"
> }
> },
> "defaultStyles": {
> "colorScheme": "RdYlGn"
> }
> },
> "meta": {
> "name": "TimeSeriesChart"
> },
> "position": {
> "x": 0.0178,
> "y": 0.0172,
> "height": 0.4323,
> "width": 0.9461
> },
> "custom": {},
> "propConfig": {
> "props.series[0].data": {
> "binding": {
> "type": "query",
> "config": {
> "returnFormat": "json",
> "queryPath": "Chart Puller",
> "parameters": {
> "Shift": "0",
> "Press": "26"
> }
> }
> }
> }
> }
> }
> ]
> 
> ```

> **Data**
>
> ```auto
> [
> {
> "time": 1711944000000,
> "Inspect": 34,
> "Clean": 25.5,
> "Safety": 60
> },
> {
> "time": 1712548800000,
> "Inspect": 23,
> "Clean": 9.5,
> "Safety": 45
> }
> ]
> 
> ```

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 16, 2024, 4:01pm UTC](https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884/5 "2024-04-16T16:01:07Z")

</div>

Two posts tackling the same vertical bar seem to switch to XY Chart to provide a solution:

> [@Stacked Bar Chart in Perspective - Detailed Steps](https://forum.inductiveautomation.com/t/stacked-bar-chart-in-perspective-detailed-steps/47107):
>
> 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](http://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/3)). 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 th…

> [@Ignition Perspective TimeSeriesChart bar display](https://forum.inductiveautomation.com/t/ignition-perspective-timeserieschart-bar-display/35902/5):
>
> Hello @joostjojo , I just wanted to post how i accomplished your mockup you did in vision but using the perspective XY chart. Below is a screen shot of a test screen i am working on currently. To get bars layered behind others you just need to copy your x axis so that you have 2 x axis configured (rename the second one so they aren’t the same) then in your series for the data you want behind you use the second x axis and change the z index of your series so that the one you want in the back is…

(The last line of your Chart Config has ]``` - three extra backticks which means it can't be posted into Designer. You might edit those out in case anyone else wants to try. Nice post, by the way!)

---

<div class="post-metadata">

**Author:** ![Robert\_Hrynciw](https://avatars.discourse-cdn.com/v4/letter/r/3bc359/32.png) [@Robert\_Hrynciw](https://forum.inductiveautomation.com/u/Robert_Hrynciw)\
**Post date:** [April 16, 2024, 6:33pm UTC](https://forum.inductiveautomation.com/t/perspective-stacked-bar-chart-timeserieschart/88884/6 "2024-04-16T18:33:27Z")

</div>

Thanks for that, I made that edit. I will definitely look into these posts - as long as it looks _stacked_ I don't see a problem with it. My only issue as of right now is making those items stacked rather than lie behind one another, should one week S be longer than I and another I be longer than S for example would cause one or the other be hidden.