Time Series Chart xtrace font change?
I used the search to find all fonts, and set them all to 14, yet my xtrace font is still tiny
8.1.0
perspective right?
you might need !important here and there
for the data
.ia_timeSeriesChartComponent__labelText{}
for the marker:
.ia_timeMarker > g > text{}
note: the time marker also hits powercharts and stuff so you might want to specifiy a class too
How do I access this code?
When I right click the object, I don’t see the way.
I think this is a common thing for some people to edit, please teach me the way.
The “correct way” would be to create a new theme.css in
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes
which would import the light.css theme (or whatever theme you are using)
and than under that you could put the above css selectors.
However its rather bothersome so i’ve found you can css inject into style classes.
By wrapping whatever css you have in }{ and put it in the background image.
This is kinda a bug in igntion tho, which might get fixed but i doubt it as it posses no vulnerabilities.
1 Like
haha that is funny
CSS is not in my comfort zone.
I watched a video and read what you said.
Understanding CSS, Selectors, and Specificity in Ignition Perspective - YouTube
You had mentioned this stuff:
.ia_timeSeriesChartComponent__labelText{}
.ia_timeMarker > g > text{}
not the time marker also hits powercharts and stuff so you might want to specify a class too
I don't know what this means exactly.
I created this style
I can place it in this classes spot
I don't know what to put in the style though to make it size my xtrace to size 14 though.
I think you say like I write
}.ia_timeSeriesChartComponent_labelText{fontSize:14;}{
in the background image section
Is the syntax right?
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;}{
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?
}.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.
https://www.w3schools.com/cssref/css_selectors.asp
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 
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