# Perspective Time Series Chart Axis Cut Off

**URL:** <https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188>\
**Category:** Ignition\
**Created:** [May 4, 2022, 4:51am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188 "2022-05-04T04:51:57Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 4, 2022, 4:51am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/1 "2022-05-04T04:51:57Z")

</div>

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?

 ![Screen Shot 2022-05-04 at 2.50.06 pm](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b406705c52eb10b30b544600e64ca368da1ed0e4.png)

---

<div class="post-metadata">

**Author:** ![stat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/stat/32/32530_2.png) [@stat](https://forum.inductiveautomation.com/u/stat)\
**Post date:** [May 5, 2022, 6:56pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/2 "2022-05-05T18:56:28Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 13, 2022, 9:11am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/3 "2022-05-13T09:11:41Z")

</div>

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](https://forum.inductiveautomation.com/uploads/short-url/56IULk3amGsqvx1wS0L4HDmTgjt.zip) (10.1 KB)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 13, 2022, 11:48am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/4 "2022-05-13T11:48:27Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/a/8a457d8be6581d6df82080abcab72a1c94cfe6a0.png)

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

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

```

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 19, 2022, 10:48pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/5 "2022-05-19T22:48:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 20, 2022, 6:43am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/6 "2022-05-20T06:43:57Z")

</div>

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](https://forum.inductiveautomation.com/t/perspective-table-how-to-handle-right-click-copy-event/47618/5):
>
> 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. 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}`

---

<div class="post-metadata">

**Author:** ![ASF](https://avatars.discourse-cdn.com/v4/letter/a/c4cdca/32.png) [@ASF](https://forum.inductiveautomation.com/u/ASF)\
**Post date:** [May 20, 2022, 8:01am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/7 "2022-05-20T08:01:24Z")

</div>

> [@victordcq](#):
>
> ```auto
> 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!

---

<div class="post-metadata">

**Author:** ![Ryan\_Allen](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_allen/32/47013_2.png) [@Ryan\_Allen](https://forum.inductiveautomation.com/u/Ryan_Allen)\
**Post date:** [July 5, 2025, 9:42pm UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/8 "2025-07-05T21:42:31Z")

</div>

This also worked for the tick labels getting cutoff, thanks! I put overflow visible on every style prop I could find in the chart but none of them would fix it

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 7, 2025, 9:28am UTC](https://forum.inductiveautomation.com/t/perspective-time-series-chart-axis-cut-off/59188/9 "2025-07-07T09:28:11Z")

</div>

note that you can now use the advanced stylesheet for this, if you havent 😉
