How to make label horizontally aligned on Y Axis in time series chart

Ignition
1

I am trying to align label text align horizontal on Y -Axis in Time series chart, as you can see below image in this image I am getting text vertical and on top,

image
image1207Ă—805 85.8 KB

I tried it in style property but it is not working as expected.

here is the property screenshot I have attached where that label we can see,

image
image380Ă—697 24.1 KB

this label I need aligned horizontally and position of it should be at center aligned

2

There are no component properties that allow for rotation, but you can do it by creating an override style via theming. Something like this will get you in the ballpark, and you can refine from there:

text.ia_timeSeriesChartComponent__yAxis__label {
    transform: rotate(0deg) translate(0px, 70px);
}

Theme files are in the gateway’s install directory: %installDirectory%\data\modules\com.inductiveautomation.perspective\themes\... . Check out the readme.md file in that directory. The last two sections in the file talk about making modifications to themes or building custom ones.

2 Likes
3

Hi @jball ,
Thanks for this but I can not see readme.md inside directory which you have mentioned.
I can see below files there,

image
image1630Ă—356 22.8 KB

Could you please help me ? How to add ? as I am new here

4

Looks like you’re on a version of Ignition before our current (more robust) theme implementation that was introduced in 8.0.13. When you are able, you’ll want to upgrade to the latest version of Ignition, and you’ll be able to add the style override mentioned above. As of this posting, 8.1.1 is the latest, and 8.1.2 will be released early next month.

1 Like
5

Hi @jball,

I have upgraded ignition and added CSS file as you said but how can I use it on timeseries chart for that label?

6

With that style override added to an “overrides” theme file (make sure to read the readme.md file in the themes directory above), all Y axis labels on all Time Series charts will be displayed horizontally vs vertically. That style rule I posted above is an approximation based on a chart that I was modifying. Your implementation may vary slightly based on the height of your chart or the offset of the axis label. …but play around with it. You can debug that style rule in the browser console. Once you’ve got something that looks correct, you can formalize the style rule in your overrides file and restart the gateway.