# Perspective timeseries chart timeRange color

**URL:** <https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756>\
**Category:** Ignition\
**Tags:** ignition80\
**Created:** [March 22, 2021, 4:11pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756 "2021-03-22T16:11:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![NII](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nii/32/12920_2.png) [@NII](https://forum.inductiveautomation.com/u/NII)\
**Post date:** [March 22, 2021, 4:11pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756/1 "2021-03-22T16:11:51Z")

</div>

How can I change the color of the timeRange property of a timeseries chart? The default is very light grey, I’d like to make it darker (perhaps change opacity?).

Thanks.

---

<div class="post-metadata">

**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:** [October 25, 2022, 1:37pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756/2 "2022-10-25T13:37:26Z")

</div>

I am also trying to figure it out.  
Might have to find again where Victor said how to insert some css.  
I might post the range above my chart though.

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [October 25, 2022, 1:47pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756/3 "2022-10-25T13:47:13Z")

</div>

Create a new style (I called it `timerange_color`) and add this to its `background position` property:

`} .psc-timerange_color .time-range-display {color: red;} {`

Change the color to whatever you want, add this class to your timeseries chart and you're done.

---

<div class="post-metadata">

**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:** [October 25, 2022, 5:19pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756/4 "2022-10-25T17:19:26Z")

</div>

Thanks Pascal

* * *

Kind of upset that I just found out I could have used curvestep as the interpolation on the trend after that headache trying to add in zeroes.

---

<div class="post-metadata">

**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:** [October 25, 2022, 5:36pm UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756/5 "2022-10-25T17:36:28Z")

</div>

How would I move the grid line for 6am to be at 6am?

It is at like 630am right now.

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

I thought I could figure it out looking at the source, but I don't know css.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/9347f3536266a80240f737427bd4d05d114674fc.png)

---

<div class="post-metadata">

**Author:** ![RSTechShannon](https://avatars.discourse-cdn.com/v4/letter/r/f05b48/32.png) [@RSTechShannon](https://forum.inductiveautomation.com/u/RSTechShannon)\
**Post date:** [July 19, 2023, 11:51am UTC](https://forum.inductiveautomation.com/t/perspective-timeseries-chart-timerange-color/44756/6 "2023-07-19T11:51:33Z")

</div>

![TimeRange Color](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0350fba3b73bba70ca65b082ea830e629d863e5.png)  
Is there something that can be added to this custom style to have the "to" between the DateTime values match the color or is there another property to adjust this that I am just missing?