Perspective 8.0.14 Time Series Bar Chart width

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

and

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

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?

@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).

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 :neutral_face:

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.

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

@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:

Here is the write up:

1 Like

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. :man_shrugging:
I’m on 8.0.16.

1 Like

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.

Is there a solution for this now?

1 Like

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

1 Like

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

.ia_barChart > rect {
    width: 132px;
}

image
image

2 Likes

Any idea how to offset the center of the bar? :face_with_peeking_eye:

something like this i guess?

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

Works perfect :ok_hand:t3:
Thanks!

1 Like

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

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!

Hi,

In my stylesheet.css I added e.g. two style classes (just called them barChart1 and barChart2):

.psc-barChart1 .ia_barChart > rect {
	width: 15px;
   	transform: translate(10px)
}

.psc-barChart2 .ia_barChart > rect {
	width: 30px;
   	transform: translate(20px)
}

On my time series chart, I just reference which of those style classes I want to use (barChart2 in this example):

image

And the result (style barChart1 used on the upper chart, and barChart2 used on the lower chart):

Thanks! I was missing the first part of identifying the style. In case others want to know:

.psc-barChart2 .ia_barChart > rect {
	width: 30px;
   	transform: translate(20px)
}

The .psc- is required to be appended at the beginning. Ignition parses that out.

The barChart2 is the name of the style that will be referenced in the component.

The .ia_barChart is a reference to the internal Perspective style/resource (I think).

The > means to get a child of the bar chart and specifically getting the rect shape of the bars.

Then the rest is setting the width and offset of the bars.

Thanks again!

1 Like