# Perspective 8.0.14 Time Series Bar Chart width

**URL:** <https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 28, 2020, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160 "2020-07-28T14:30:33Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mason.Younger](https://avatars.discourse-cdn.com/v4/letter/m/50afbb/32.png) [@Mason.Younger](https://forum.inductiveautomation.com/u/Mason.Younger)\
**Post date:** [July 28, 2020, 2:30pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/1 "2020-07-28T14:30:33Z")

</div>

I have the chart displaying how I would like, but can not change the width of the bars in the chart.

I noticed the scatter render type has a radius parameter, am I missing something for the bar render type?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84de93dfb5efa377c990aa6435d665b7de96bf7b.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/c/fc9e254bc892a86d8b410c216fbb1bff8670411f.png)

Thanks!

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [July 30, 2020, 4:29pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/2 "2020-07-30T16:29:39Z")

</div>

@Mason.Younger, you’re not missing anything. There isn’t a setting for bar width. The width is calculated automatically based on the number of data points being displayed on the chart.

This question has come up before. Since there is interest, I will open a ticket to allow for width adjustment.

---

<div class="post-metadata">

**Author:** ![arun1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arun1/32/79753_2.png) [@arun1](https://forum.inductiveautomation.com/u/arun1)\
**Post date:** [October 15, 2020, 9:19pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/3 "2020-10-15T21:19:13Z")

</div>

Hi @jball , If the bar thickness is being calculated automatically then how are people able to create bar charts that look like this:

> [@Stacked Bar Chart in Perspective](http://forum.inductiveautomation.com/t/stacked-bar-chart-in-perspective/37636/2):
>
> @umesh.pol, this is possible with the Time Series Chart. You’ll need to create a trend under a plot and change its type value to bar:

and

> [@Stacked Bar Chart rendering broken?](http://forum.inductiveautomation.com/t/stacked-bar-chart-rendering-broken/26381):
>
> I have a setup with an XY chart that has three dataSources, all of which are used to generate a triply-stacked bar chart. These sources are getting their data from the same named query with different parameters. Whenever I view the chart, it looks something like that. Some of the columns are fine, but then they become disjointed and it’s all a mess. Could there be something I’m doing wrong? Or are things breaking because of how the named queries aren’t quite getting all the data at t…

I have a stacked bar chart with just 7 data points (along time axis) and I still get thin lines instead of thick bars!!

---

<div class="post-metadata">

**Author:** ![arun1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arun1/32/79753_2.png) [@arun1](https://forum.inductiveautomation.com/u/arun1)\
**Post date:** [October 15, 2020, 9:22pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/4 "2020-10-15T21:22:06Z")

</div>

Hi @Mason.Younger , it’s awesome you were able to draw those 3 horizontal lines for Best, Flex, Target, could you please share how you were able to achieve this?

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [October 16, 2020, 12:08am UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/5 "2020-10-16T00:08:12Z")

</div>

@arun1, you likely have your 7 data points spread out over a long period of time. That longer period of time will create an X axis (time axis) that is much wider, and sparse data will result in thin bars. The first example has a few points spread out over a very short period of time. The second example is the XY Chart (as opposed to the Time Series Chart).

---

<div class="post-metadata">

**Author:** ![arun1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arun1/32/79753_2.png) [@arun1](https://forum.inductiveautomation.com/u/arun1)\
**Post date:** [October 16, 2020, 7:02am UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/6 "2020-10-16T07:02:18Z")

</div>

Yup you are correct, my 7 data points were spread out over 7 days. I switched to XY chart after you pointed it out and was able to get it to work after a lot of trial and error. Is there a place where I can post the steps taken to create such a stacked bar graph? might as well save others some time, there is no point in reinventing the wheel 😐

 ![MicrosoftTeams-image (2)](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/633edcefd3ab6ba1cdb5e2c002eabdc3b85eb34b.png)

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [October 16, 2020, 4:57pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/7 "2020-10-16T16:57:29Z")

</div>

You’re welcome to create a new post in this forum and cross-link to the this thread as reference. I think others would certainly find that helpful.

---

<div class="post-metadata">

**Author:** ![valerie.garciakutlu](https://avatars.discourse-cdn.com/v4/letter/v/74df32/32.png) [@valerie.garciakutlu](https://forum.inductiveautomation.com/u/valerie.garciakutlu)\
**Post date:** [February 3, 2021, 6:38pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/9 "2021-02-03T18:38:58Z")

</div>

Where can I find the steps you took to achieve your stacked bar chart? I am looking to do the same. TIA.

---

<div class="post-metadata">

**Author:** ![arun1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arun1/32/79753_2.png) [@arun1](https://forum.inductiveautomation.com/u/arun1)\
**Post date:** [May 25, 2021, 8:32pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/10 "2021-05-25T20:32:49Z")

</div>

@valerie.garciakutlu Sorry about the long delay, I had moved on to other projects. It must be too late to help you but here it is any way:

> [@Stacked Bar Chart in Perspective - Detailed Steps](http://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…

---

<div class="post-metadata">

**Author:** ![arun1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/arun1/32/79753_2.png) [@arun1](https://forum.inductiveautomation.com/u/arun1)\
**Post date:** [May 25, 2021, 8:33pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/11 "2021-05-25T20:33:53Z")

</div>

Here is the write up:

> [@Stacked Bar Chart in Perspective - Detailed Steps](http://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…

---

<div class="post-metadata">

**Author:** ![flavien](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flavien](https://forum.inductiveautomation.com/u/flavien)\
**Post date:** [November 5, 2021, 10:15am UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/12 "2021-11-05T10:15:37Z")

</div>

Hi,

Do you have a solution for changing bar width ? Even if I have a few values in my chart, bars are thin. In my opinion auto width calculation is not working. 🤷‍♂️  
I’m on 8.0.16.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/0/60e854d319bfb76d2f1cc2c7ec25e9b80ae15eb8.png)

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [November 5, 2021, 3:58pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/13 "2021-11-05T15:58:15Z")

</div>

No solution in place yet. I’ve got a ticket open to expose some options for adjusting the bar chart width on the Time Series and Power Charts. I’ll give it a bump.

---

<div class="post-metadata">

**Author:** ![Nicole\_Weiss](https://avatars.discourse-cdn.com/v4/letter/n/258eb7/32.png) [@Nicole\_Weiss](https://forum.inductiveautomation.com/u/Nicole_Weiss)\
**Post date:** [February 10, 2022, 7:50pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/14 "2022-02-10T19:50:06Z")

</div>

Is there a solution for this now?

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [February 10, 2022, 8:54pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/15 "2022-02-10T20:54:09Z")

</div>

No work has been started yet, but the priority of the ticket was raised.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 11, 2022, 8:04am UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/16 "2022-02-11T08:04:01Z")

</div>

Not sure we have the same chart, i dont rly use the charts, how did you get both bar and line?

anyways this css worked on the timeserie barchart for me. You might need to set some offset too if the center no longer matches the x value idk

```auto
.ia_barChart > rect {
    width: 132px;
}

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/b/3b76145a530d1e54dc350532b1605f89b0377f0f.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b9e20a320785e3ff2ea85063b25490fc50ddd06c.png)

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [March 30, 2022, 12:21pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/17 "2022-03-30T12:21:39Z")

</div>

Any idea how to offset the center of the bar? 🫣

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 30, 2022, 12:35pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/18 "2022-03-30T12:35:24Z")

</div>

something like this i guess?

```auto
.ia_barChart > rect {
    width: 132px;
    transform: translate(15px)
}

```

---

<div class="post-metadata">

**Author:** ![andreas](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/andreas/32/18981_2.png) [@andreas](https://forum.inductiveautomation.com/u/andreas)\
**Post date:** [March 30, 2022, 12:39pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/19 "2022-03-30T12:39:59Z")

</div>

Works perfect 👌🏼  
Thanks!

---

<div class="post-metadata">

**Author:** ![tmahaf](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tmahaf/32/23492_2.png) [@tmahaf](https://forum.inductiveautomation.com/u/tmahaf)\
**Post date:** [April 19, 2022, 2:10pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/20 "2022-04-19T14:10:35Z")

</div>

I vote for adding a property to allow how wide the bars are. They look really silly if you have data that spans over several days.

The XY Chart bars look much nicer. So a workaround would just be to use that component until inductive makes this a little bit better.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/6/56cbb59bfd5833277a2049f4dd013f1b29558afa.png)

---

<div class="post-metadata">

**Author:** ![eckman.tech](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/eckman.tech/32/45147_2.png) [@eckman.tech](https://forum.inductiveautomation.com/u/eckman.tech)\
**Post date:** [April 11, 2023, 2:28pm UTC](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160/22 "2023-04-11T14:28:15Z")

</div>

I'm trying to apply that css style to a TimeSeriesChart with a plot configured for bars...no luck. I'm still a bit green with using CSS.

I copied what was provided into the stylesheet.css and appended the .psc- to the front and changed the name. I then typed that into the root style property of the TimeSeriesChart. Where did I go wrong? I'm thinking the fact that the original CSS of "ia\_barChart" means I shouldn't be placing it in the stylesheet.css that is available in the designer and it's something more in-depth. (I did try several iterations of the CSS, including not changing anything and still no luck).

I have successfully used the stylesheet.css for other parts and those worked out great. Just not this one.

Any help/explanation will be appreciated! Thanks!

[Next page](https://forum.inductiveautomation.com/t/perspective-8-0-14-time-series-bar-chart-width/37160.md?page=2)