Hi guys,
I can’t find a way to remove the default grey border around the power charts.
Thanks for the help!
- 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.
1 Like
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
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.
- 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).
.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.
- 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.
1 Like
@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.
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!
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.
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.
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.
1 Like