# Time Series chart xtrace font **URL:** \ **Category:** Ignition\ **Created:** [February 2, 2022, 5:23pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670 "2022-02-02T17:23:03Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 2, 2022, 5:23pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/1 "2022-02-02T17:23:03Z")
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 ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 10:04am UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/2 "2022-02-03T10:04:19Z")
perspective right? you might need` !important` here and there for the data ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/5/554fddc6696f5e3356863faf2d8c897ae27eb8b6.png) `.ia_timeSeriesChartComponent__labelText{}` for the marker: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/954e2a4cb80e8866ca42939c822f0cd9a63a2acc.png) `.ia_timeMarker > g > text{}` note: the time marker also hits powercharts and stuff so you might want to specifiy a class too ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 1:45pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/3 "2022-02-03T13:45:00Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 1:58pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/4 "2022-02-03T13:58:28Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/1/114427f62cb806c53fe75c67400419ca1b44fef9.png) ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 2:30pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/5 "2022-02-03T14:30:36Z")
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](https://www.youtube.com/watch?v=nTzKGn4QGYo&t=895s) 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 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/3/13d141a4f6d0f5bb3abe3df0d4d66fb236a194e8.png) I can place it in this classes spot ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/e/0ec2689c9922c3ca66c53ea8c5984eb7eefcd17a.png) I don't know what to put in the style though to make it size my xtrace to size 14 though. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/7/b75be0b56b18e4f7c31a5df98c7f8ac9795bedd5.png) I think you say like I write ```auto }.ia_timeSeriesChartComponent_labelText{fontSize:14;}{ ``` in the background image section Is the syntax right? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 2:38pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/6 "2022-02-03T14:38:04Z")
> [@zacharyw.larson](#): > > I don’t know what this means exactly. 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 > [@zacharyw.larson](#): > > `}.ia_timeSeriesChartComponent_labelText{fontSize:14;}{` 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](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/7/673fc648f5dc91dd85309356dbecdd52296bf879.png) ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 2:58pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/7 "2022-02-03T14:58:48Z")
It did not work for me. I don’t know what I have done wrong ```auto }.ia_timeSeriesChartComponent_labelText{fill:red;font-size:200px;}{ ``` I put exactly this, and yet still I have no results. gray with small text still ![capture](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/1/21cfb071a7ad9eb697044d8d7b81da3ab3413a41.jpeg) what is this part `.time-series-chart-component .ia_timeMarker > g > text{}` ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 3:04pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/8 "2022-02-03T15:04:19Z")
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;}{` ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 3:05pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/9 "2022-02-03T15:05:30Z")
> [@victordcq](#): > > }.ia\_timeSeriesChartComponent\_\_labelText{fill:red;font-size:20px;}{ yah, that did it ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 3:07pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/10 "2022-02-03T15:07:12Z")
What is the reference for the date above that? is that this: ```auto .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? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 3:08pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/11 "2022-02-03T15:08:14Z")
> [@zacharyw.larson](#): > > What is the reference for the date above that? yes, just a space after the bracket ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/4/a467fd196266888ff72669b8055cdacfc07003bc.png) ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 3:10pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/12 "2022-02-03T15:10:32Z")
```auto }.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 ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 3:12pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/13 "2022-02-03T15:12:49Z")
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;}{` ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 3:16pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/14 "2022-02-03T15:16:40Z")
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;}` ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 3:16pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/15 "2022-02-03T15:16:56Z")
> [@victordcq](#): > > } .time-series-chart-component .ia\_timeMarker \> g \> text{font-size:14px !important;} .ia\_timeSeriesChartComponent\_\_labelText{font-size:14px;}{ `} .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 ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 3:20pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/16 "2022-02-03T15:20:04Z")
> [@zacharyw.larson](#): > > Is this something I can learn on w3? 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](https://www.w3schools.com/cssref/css_selectors.asp) > [@zacharyw.larson](#): > > I increased the box size in the property editor Ah right that is possible too xD ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 3:22pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/17 "2022-02-03T15:22:00Z")
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 ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [February 3, 2022, 3:24pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/18 "2022-02-03T15:24:52Z")
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! ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 4:01pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/19 "2022-02-03T16:01:41Z")
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](https://forum.inductiveautomation.com/t/feature-14716-perspective-time-series-axis-number-format/27384/3) It was a feature request 2 years ago, but I don’t see it in 8.1.0 which I am using. ---
**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\ **Post date:** [February 3, 2022, 4:54pm UTC](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670/20 "2022-02-03T16:54:45Z")
something like ```auto .ia_timeSeriesChartComponent __yAxis__ values{format: 0,0,#,###.#} ``` don’t know [Next page](https://forum.inductiveautomation.com/t/time-series-chart-xtrace-font/55670.md?page=2)