# Power chart color

**URL:** <https://forum.inductiveautomation.com/t/power-chart-color/72691>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [April 20, 2023, 9:28am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691 "2023-04-20T09:28:21Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 20, 2023, 9:28am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/1 "2023-04-20T09:28:21Z")

</div>

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

If you look at the attached file, you have darkened the theme mode.

So I know that the trend pop-up window comes out in a dark color.

However, even if the mode is dark, I want to brighten the trend pop-up window.

Is it possible to change the color?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 20, 2023, 9:55am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/2 "2023-04-20T09:55:38Z")

</div>

I would just change the popup view's background color to something a little lighter, maybe '--neutral-40'. This way if the user selects the light theme there will still be contrast.

See [Perspective Built-In Themes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes)

It would be best to define a background style that could be reused across various views that might need that background. Then if you need an edit you just do it once in the style and everything changes with that.

---

<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:** [April 20, 2023, 10:02am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/3 "2023-04-20T10:02:11Z")

</div>

all popups or only this one?

the close icon doesnt seem to work tho idk ill check it out later after lunch

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

add this to the stylescheet

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

for all:

```auto
.popup.ia_popup{
	--white: #FFFFFF;
    --black: #000000;
    --red-20: #FAD4D4;
    --red-30: #F99797;
    --red-50: #F55353;
    --red-60: #DE1B1B;
    --red-90: #661414;
    --neutral-10: #FAFAFA;
    --neutral-20: #F4F4F4;
    --neutral-30: #D8D8D8;
    --neutral-40: #BDBDBD;
    --neutral-50: #A1A1A1;
    --neutral-60: #767676;
    --neutral-70: #5E5E5E;
    --neutral-80: #515151;
    --neutral-90: #323232;
    --neutral-100: #161616;
    --seq-1: #AE74E8;
    --seq-2: #9659D6;
    --seq-3: #7D3CBD;
    --seq-4: #642B9E;
    --seq-5: #4B2175;
    --seq-6: #371C52;
    --div-1: #642B9E;
    --div-2: #7D3CBD;
    --div-3: #9656D6;
    --div-4: #AE74E8;
    --div-5: #C79BF2;
    --div-6: #DABCF7;
    --div-7: #EAD9FA;
    --div-8: #F5F0FA;
    --div-9: #D7FAF8;
    --div-10: #83F2EB;
    --div-11: #43DED3;
    --div-12: #21C2B7;
    --div-13: #0EA197;
    --div-14: #08827A;
    --div-15: #086962;
    --div-16: #09524D;
    --qual-1: #7D3CBD;
    --qual-2: #229AD6;
    --qual-3: #086962;
    --qual-4: #B01355;
    --qual-5: var(--red-50);
    --qual-6: var(--red-90);
    --qual-7: #038537;
    --qual-8: #114599;
    --qual-9: #ED5393;
    --qual-10: #CF7911;
    --containerRoot: var(--neutral-10);
    --container: var(--neutral-20);
    --containerNested: var(--neutral-30);
    --input: var(--white);
    --input--disabled: var(--neutral-40);
    --icon: var(--neutral-70);
    --icon--hover: var(--neutral-60);
    --icon--disabled: var(--neutral-40);
    --icon--selected: var(--neutral-10);
    --label: var(--neutral-90);
    --label--disabled: var(--neutral-60);
    --border: var(--neutral-50);
    --border--disabled: var(--neutral-50);
    --containerBorder: 1px solid var(--border);
    --boxShadow1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    --boxShadow2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    --boxShadow3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    --boxShadow4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    --boxShadow5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
    --boxShadow--inset: inset 0 0 4px 2px rgba(34, 34, 34, 0.4);
    --callToAction: #0C7BB3;
    --callToActionHighlight: #E8F4FA;
    --callToAction--hover: #229AD6;
    --callToAction--active: #066391;
    --callToAction--activeAlt: #BBE5FA;
    --callToAction--activeAltInvis: #0B7BB2;
    --callToAction--disabled: var(--neutral-50);
    --error: var(--red-60);
    --info: #3272D9;
    --infoSecondary: #ACCBFC;
    --warning: #AD5F00;
    --warningSecondary: #F5BC76;
    --success: #038537;
    --borderRadius: 4px;
    --borderRadiusInput: 2px;
    --opacity-25: rgba(0, 0, 0, 0.25);
    --opacity-50: rgba(0, 0, 0, 0.50);
    --opacity-85: rgba(0, 0, 0, 0.85);
    --font-NotoSans: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --indicator: #1EC963;
    --indicatorOff: #0A2E18;
    --checkbox--checked: var(--callToAction);
    --checkbox--unchecked: var(--border);
    --checkbox--indeterminate: var(--callToAction);
    --checkbox--disabled: var(--input--disabled);
    --progressLinearTrack--determinate: var(--neutral-10);
    --progressLinearTrack--indeterminate: var(--neutral-10);
    --progressLinearBar--determinate: var(--infoSecondary);
    --progressLinearBar--indeterminate: var(--border);
    --toggleSwitch--selected: var(--callToAction);
    --toggleSwitch--unselected: var(--neutral-10);
    --radio--selected: var(--callToAction);
    --radio--unselected: var(--border);
    --radio--disabled: var(--input--disabled);
    --pipePrimaryFill: var(--neutral-20);
    --pipeSecondaryFill: #cccccc;
    --pipeStroke: var(--neutral-70);
    --pipeSelectStroke: var(--callToAction);
    --contextBackground: var(--white);
    --symbolFill--default: var(--neutral-40);
    --symbolFillAnimation--default: var(--neutral-50);
    --symbolStroke--default: var(--neutral-70);
    --symbolFill--running: var(--white);
    --symbolFillAnimation--running: var(--neutral-50);
    --symbolStroke--running: var(--neutral-70);
    --symbolFill--stopped: var(--neutral-40);
    --symbolStroke--stopped: var(--neutral-70);
    --symbolFill--faulted: #FAB6B6;
    --symbolStroke--faulted: #B80D0D;
	}

```

for one change .popup.ia\_popup to `#thisPopupId`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/b/2bb5210f109043ff9886bb9204a08c5ef4153d13.png)

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 20, 2023, 10:07am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/4 "2023-04-20T10:07:50Z")

</div>

![1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/5/859f9439eb5811417626df70f5af794564552858.gif)

I'm setting the color after looking at the data you sent, but by any chance, where should the pen name go and change the color?

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 20, 2023, 10:16am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/5 "2023-04-20T10:16:20Z")

</div>

thanks for telling me how

If I follow the method you told me, the close works, but the close color is bright, so I can't see it. I want to change the color to black. What part should I change?

---

<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:** [April 20, 2023, 10:23am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/6 "2023-04-20T10:23:15Z")

</div>

`.popup.ia_popup .material-icons{ fill:black }`

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

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [April 20, 2023, 10:25am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/7 "2023-04-20T10:25:07Z")

</div>

> [@jiyoung\_hwang1](#):
>
> where should the pen name go and change the color?

You do that by configuration using the ⚙ button. Run the view in Designer Preview mode, configure it and then save your project. Those settings then become the default.

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 20, 2023, 10:27am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/8 "2023-04-20T10:27:22Z")

</div>

Where do I need to fix this...?

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 20, 2023, 10:32am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/9 "2023-04-20T10:32:37Z")

</div>

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

I mean this part

I don't want to change the pen color, but I want to change the color of the table with the pen name.

---

<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:** [April 20, 2023, 10:45am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/10 "2023-04-20T10:45:26Z")

</div>

this code i posted also does the table

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

---

<div class="post-metadata">

**Author:** ![jiyoung\_hwang1](https://avatars.discourse-cdn.com/v4/letter/j/bc79bd/32.png) [@jiyoung\_hwang1](https://forum.inductiveautomation.com/u/jiyoung_hwang1)\
**Post date:** [April 20, 2023, 10:49am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/12 "2023-04-20T10:49:02Z")

</div>

> [@victordcq](#):
>
> .popup.ia\_popup .material-icons{ fill:black }

Where is the place to put the code you're talking about?

---

<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:** [April 20, 2023, 10:49am UTC](https://forum.inductiveautomation.com/t/power-chart-color/72691/13 "2023-04-20T10:49:50Z")

</div>

also in the stylesheet