Perspective Time Series Chart Axis Cut Off

[ASF]

I’m trying to put together a generic “trend” view which just consists of a time series chart. I pass in all the relevant parameters, including a font size parameter, so that I can easily adapt the chart for showing on a small diagnostic popup or a large dashboard.

However, when I set the font size to a larger size, the very top label on the chart is partially cut off. I have gone through every style class I can think of and set overflow to visible, but all to no avail - somehow I just can’t find the setting that allows that last number to be shown fully.

Can anyone point me in the right direction?

[stat]

Which version are experiencing this cutoff on? I’ve tested this on 8.1.16, and I’m not seeing my label for the y-axis get cut off when I increase the legend font size. Could you share a view export with your Time Series Chart?

[ASF]

I’m on 8.1.15 currently. An export is attached - you’ll have to set up the right tag structure to see it work: a UDT of type ANLG which has at least two REAL’s - Scaled and Setpoint. Then create an instance and copy the path to that instance into the tagPath view parameter. Adjust the fontSize view parameter to change the font size.
Backup.zip (10.1 KB)

[victordcq]

I was able to reproduce…
It appears that the svg for the y-axis is being scaled just a tad bit to much when the title is disabled
im guessing a rounding error

There are two solutions that i see on first sight.
1- turn on the title (with no text, and with height in proportion to your fontSize)
2- use theme.css or css injection to add this style

div[data-component="ia.chart.timeseries"] .ia_chartContainer {
  overflow: visible;
}

[ASF]

Thanks, the first workaround has got it working for now. FYI the same applies to the Linear Scale object, but the first workaround does not apply. Can you give me a little more detail on the second? I’m not familiar with CSS injection and not sure how to approach it

[victordcq]

You can find more info on one of the other posts i made

wrap the css code i posted above into inversted brackets }{ and put it into the backgroundimage of a styleclass

Perspective Table How to Handle Right Click Copy Event

i might have a hacky solution to make it invisible… if you create a style class and paste this }.contextMenuCommon.ia_contextMenu{display:none;}{ into for example the background image. [image] The copy popup will no longer be visible and clickable. It still triggers the event tho. Also this will now work on all tables you have in the project, so if do want it somewhere else you will have to change it a bit to be more specific. You can “inject” css in the styles. You can probably also c…

i'll take a look for this one

@ASF

Linear Scale object

edit for the scale you can use this:
[data-component="ia.display.linear-scale"]>svg{ overflow:visible}

[ASF]

@victordcq

edit for the scale you can use this:
[data-component="ia.display.linear-scale"]>svg{ overflow:visible}

Thanks for your help, it's such a small thing but it makes a big visual difference when it's on a 55" TV right next to the operator station!