# Remove power chart border **URL:** \ **Category:** Ignition\ **Created:** [June 24, 2022, 8:49pm UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187 "2022-06-24T20:49:01Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 24, 2022, 8:49pm UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/1 "2022-06-24T20:49:01Z")
Hi guys, I can’t find a way to remove the default grey border around the power charts. Thanks for the help! ---
**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:** [June 24, 2022, 9:23pm UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/2 "2022-06-24T21:23:49Z")
- Create a new Perspective style _hidePowerChartBorder_. - Add the following CSS into the background image. The leading and trailing curly braces are essential. `} .ia_powerChartComponent{border: none} {` - Apply that style to the table’s `PROPS.style.classes`. This is CSS injection and the background image is the handiest way to do this at the moment. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 25, 2022, 9:31am UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/3 "2022-06-25T09:31:53Z")
Thank you very much for the help, this is what I need. I take this opportunity to ask you if is possible to change the color of the data range selector (for example “Last 24 hours”. I wonder how is possible to know which property and the exactly name to edit to change it and other properties. I mean, in your example, how could I know that I have to use “} .ia\_powerChartComponent” to select the Power Chart ? Is there any manual or something like this to study? Thank you very much for the help ---
**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:** [June 25, 2022, 10:16am UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/4 "2022-06-25T10:16:18Z")
Here’s how I figure out the styles: - Launch the view in your favourite browser. I’m using Google Chrome. - Hit F12 to show the developer tools. - Hit the _Select element_ button on the top left corner. Move around the view highlighting each object while monitoring the HTML and CSS in the lower panes until you find what you want. In this case we’re looking for the dateTimeSelection. ![Power Chart datetimeSelection color](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/3/93489f6c5fd7c23e1cd8338b834a9e09fb158024.png) - The color is determined by the CSS and we can see that this is coming from the dark theme (which I’m running at the moment). ```auto .ia_powerChartComponent__dateTimeSelection { color: var(--callToAction); font-weight: bold; } ``` The `--callToAction` is an Ignition theme variable and I strongly recommend that you use these as much as possible rather than specifying a color directly. That way your colors will be modified based on the theme selection. Read more here: [https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-ThemeColors](https://docs.inductiveautomation.com/display/DOC81/Perspective+Built-In+Themes#PerspectiveBuiltInThemes-ThemeColors). - Now create another style _powerChartDateTimeSelector_ with your chosen color. `} .ia_powerChartComponent__dateTimeSelection {color: var(--qual-10);} {` Note that in my previous post I said that you had to add that style to the power chart’s style classes. I think that that step is unnecessary but note that this will modify all power charts in the project. I’ll remove that line from my previous post. * * * Tips: Use color consistently and with purpose. Avoid garish colors and avoid adding color where it’s not needed. Define your pallet of colors for your site’s theme and consider creating your own theme. A good start is [What is High-Performance HMI? - ISA101 - RealPars](https://realpars.com/high-performance-hmi/). ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 25, 2022, 5:05pm UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/5 "2022-06-25T17:05:14Z")
@Transistor, this is very illuminating and helpful! I start since now to set the colors using the builtInThemes, there's no reason to not use them. > [@Transistor](#): > > Note that in my previous post I said that you had to add that style to the power chart’s style classes. I think that that step is unnecessary but note that this will modify all power charts in the project. I’ll remove that line from my previous post. About this, I noticed that the style has modified all the power charts in the project, but what if I would just set the style to one power chart only? I've red something about using .psc or something like this but is not very clear. Could you explain this please? One last question, why when I asked about the power chart border you told me to put the code into the background image? I mean, couldn't I just set the border to "none"? I ask this because I see that for the dataTimeSelection I can put the code into the color property (under Text) and in the same way it work even if I put the code in the background image, so I wonder what is the correct way to insert css code into a Style. Thanks a lot for the help! ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 27, 2022, 12:01pm UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/6 "2022-06-27T12:01:00Z")
> [@Aiasa21](#): > > I’ve red something about using .psc or something like this but is not very clear. Could you explain this please? To apply it to just a single power chart you have to create a style class and then use a selector that selects only power charts with that style class. There is an example in this thread. > [@Power chart pen control](https://forum.inductiveautomation.com/t/power-chart-pen-control/60932/6): > > It is possible, though I don’t know the correct selector syntax off the top of my head. You have to do something where your selector calls out your specific style class, such that only power charts with that style class are affected. something like: } .psc-hidePowerChartPensExpandButton .ia\_powerChartComponent ...{@victordcq > [@Aiasa21](#): > > why when I asked about the power chart border you told me to put the code into the background image? When editing styles there are certain places that will accept text and some others that will not. It's only important that you place the CSS in a place where it will be accepted as typed. > [@Aiasa21](#): > > so I wonder what is the correct way to insert css code into a Style. The correct way is to create a style class and then modify your theme file. This method is really just an unintended side effect of the way styles and style classes work in Ignition. We can take advantage of it and "inject" css in to the theme. It's kind of a short-cut but isn't really the supported method for applying advanced CSS to your project. ---
**Author:** ![Aiasa21](https://avatars.discourse-cdn.com/v4/letter/a/aeb1de/32.png) [@Aiasa21](https://forum.inductiveautomation.com/u/Aiasa21)\ **Post date:** [June 29, 2022, 6:50pm UTC](https://forum.inductiveautomation.com/t/remove-power-chart-border/61187/7 "2022-06-29T18:50:38Z")
Thanks for your suggestions @lrose!