Perspective 8.0.14 Time Series Bar Chart width

Ignition
23

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

image
image734×795 6.71 KB

24

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