Time Series chart xtrace font

It means all powercharts will also have their xtrace text change by this css selector
so you might want to put .time-series-chart-component .ia_timeMarker > g > text{} instead for only timeseries

No you have to use css names, igntions styles uses ‘js.css’ names. (basicly replace camelCase with ‘-’)
also it will have to be with a unit (px)
}.ia_timeSeriesChartComponent_labelText{font-size:14px;}{
image

It did not work for me.

I don’t know what I have done wrong

}.ia_timeSeriesChartComponent_labelText{fill:red;font-size:200px;}{

I put exactly this, and yet still I have no results.

gray with small text still

what is this part
.time-series-chart-component .ia_timeMarker > g > text{}

You dont need to assign it to a class.

And i think you forgot one _ (which i also seem to have copied from you when i wrote the reply xd)

}.ia_timeSeriesChartComponent__labelText{fill:red;font-size:20px;}{

1 Like

yah, that did it

What is the reference for the date above that?

is that this:

.time-series-chart-component .ia_timeMarker > g > text{}

if so, I don’t know css, so how do I write them one then the other?
just comma seperated?

yes, just a space after the bracket
image

}.time-series-chart-component .ia_timeMarker > g > text{font-size:14px}.ia_timeSeriesChartComponent__labelText{font-size:14px;}{

I must have a typo or something again

The text size did not go up on the date, but is still good on the text in the box

No you are correct, but some of the variables on there already are defined so you will need to use !important…
its kinda hard to know when to use it xd

} .time-series-chart-component .ia_timeMarker > g > text{font-size:14px !important;} .ia_timeSeriesChartComponent__labelText{font-size:14px;}{

if you increase font i suppose you might also want to increase the size of the box

.ia_timeSeriesChartComponent__xTrace__box { height: 100px; width:150px !important;}

1 Like

} .time-series-chart-component .ia_timeMarker > g > text{font-size:14px !important;} .ia_timeSeriesChartComponent__labelText{font-size:14px;}{

Thanks, that worked.

Is this something I can learn on w3?
CSS looks very hard to learn, as just this little bit of code has so many references.


I increased the box size in the property editor

Yes you can.
I suggest the checking selectors, those are kinda the hardest.
But the browser inspectors have many tools to get you started with them.

Ah right that is possible too xD

I mean that I know it is on w3, but I wonder if it is effective to learn from.

Like the w3 sql has been super helpful.

ah, I am silly asking, I will check it out.
I tend to ask instead of read. Thanks for your help

Welh effective is kinda subjective :stuck_out_tongue:
But it has a lot of info^^ I check it often still too, as new css tricks get invented all the time!

1 Like

I am trying to learn how to add a comma every 3rd digit to my axis
I don’t know how to pull out the right thing.

maybe it is : class="yaxis ia_timeSeriesChartComponent__yAxis__values ia_yAxis"

I don’t really know. Then I also don’t know how to set the comma.
I went to the w3 css reference and searched for comma, but no results.
Searched format, no results.
font-variant-numeric seemed like the best from a search of number

`class=“yaxis ia_timeSeriesChartComponent__yAxis__values ia_yAxis” fill=“none” font-size=“10” font-

class=“ia_timeSeriesChartComponent__yAxis__ticks”
class=“ia_timeSeriesChartComponent__yAxis__axis” x1=“0” y1=“0” x2=“0” y2=“498”>`

[FEATURE-14716] Perspective Time Series Axis Number Format - Ignition - Inductive Automation Forum
It was a feature request 2 years ago, but I don’t see it in 8.1.0 which I am using.

something like

.ia_timeSeriesChartComponent__yAxis__values{format: 0,0,#,###.#}

don’t know

You’ll need to create an axis to use with the trend that you’ll configure for a given plot. Once both are in place, the property you’ll change is plots[x].axes[x].tick.label.format:

There’s an option for “Comma-Separated Integer” that will give you the above display for your axis.

I am in 8.1.0

I do not have that, and require a css workaround for now I think.

I could also benefit from a count too.

Gotcha. 8.1.11 was the release that included the prop for the axis data format.

Css is not able to format text like that.
It can extent text with some symbols, but that also doesnt work in svgs.
And the chart is in svg.
The format igntion is doing is done in javascript (probably? it could be the gateway too i guess), which you dont have acces too (unless creating your own perspective module)

I would be working to convince your company to upgrade. It’s just a minor upgrade so should go very smoothly and take only a few minutes. The benefit of all the bug fixes and added features far outweigh the risk, imnsho.