# Powerchart Time Range Selector color

**URL:** <https://forum.inductiveautomation.com/t/powerchart-time-range-selector-color/114697>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 26, 2026, 2:24pm UTC](https://forum.inductiveautomation.com/t/powerchart-time-range-selector-color/114697 "2026-03-26T14:24:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jacob\_N](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@Jacob\_N](https://forum.inductiveautomation.com/u/Jacob_N)\
**Post date:** [March 26, 2026, 2:24pm UTC](https://forum.inductiveautomation.com/t/powerchart-time-range-selector-color/114697/1 "2026-03-26T14:24:36Z")

</div>

Does anyone know of a way to change the color of this text on the Powerchart component? Per documentation its called the Time Range Selector [Perspective - Power Chart | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-chart-palette/perspective-power-chart#user-interaction) . I’m guessing I will have too use some type of CSS override 😱 ? I’ve tried setting the overall style in props and the style specifically for the title for text color but had no luck.

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

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [March 26, 2026, 2:54pm UTC](https://forum.inductiveautomation.com/t/powerchart-time-range-selector-color/114697/2 "2026-03-26T14:54:22Z")

</div>

Try editing your perspective stylesheet.css and ad:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1eabe403f79fed3fdf8ab5dabd3d432ffcecedd1.png)

```python
.ia_powerChartComponent__dateTimeSelection .actionable-wrapper>* {
    margin-right: 8px;
    color: red;
}

```

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

I think this is what you looking for

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/641883761c6d24f5299fe0091a4176d839c06892.png)

---

<div class="post-metadata">

**Author:** ![Jacob\_N](https://avatars.discourse-cdn.com/v4/letter/j/ee59a6/32.png) [@Jacob\_N](https://forum.inductiveautomation.com/u/Jacob_N)\
**Post date:** [March 26, 2026, 3:10pm UTC](https://forum.inductiveautomation.com/t/powerchart-time-range-selector-color/114697/3 "2026-03-26T15:10:10Z")

</div>

That did it. Thank you! In the future if I run into one of these issues how did you manage to figure this out? Did you just look at the raw CSS of the power chart and search for something? I know a little bit of CSS just never knew how I should approach a problem like this in ignition as I’ve mainly ignored anything CSS related.

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [March 26, 2026, 3:13pm UTC](https://forum.inductiveautomation.com/t/powerchart-time-range-selector-color/114697/4 "2026-03-26T15:13:53Z")

</div>

You launch te perspective project

then open the browser inspector  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dc2bc6977abe0489a5104c8bc99be60caff523a5.png)

select the component you want to inspect and seee the css styles of it where you can see wich class is using.

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