Is it possible to turn off the Chart Range Selector and the Tag Selector on the Perspective Power Chart?
1 Like
The “visibility” props nested under “config” lets you turn off most selectors on the Power Chart. I believe the two you want are included in this list. This is a screenshot from version 8.1.15:
1 Like
This does let you turn off the button for the Tag Selector, but if you put the chart into Historical mode there’s no way of turning off the Range Selector.
The method of range selection is definitely a backward step from Vision - it’s much more awkward to use and doesn’t work well on a mobile interface.
1 Like
You can hide it with CSS, but at this time that is the only way possible. I have done this but don’t have access to the CSS file at the moment. If some one else hasn’t posted it, I’ll post it when I can.
1 Like
Here is the CSS for removing the range selector:
.ia_powerChartComponent__chart .range-selector-container{
display: none !important;
}
I do agree with this.
2 Likes
We are aware of this limitation for the Historical Range Selector and there is an open request for this feature. Thank you @lrose for the CSS workaround.
Thanks for replying lrose. I thought I could work out how to apply this custom CSS but can’t! How would I add this so it is used by Perspective? Is it possible to apply this CSS only when a certain custom property is true?
There are several ways to accomplish this. The easiest is to paste it as is into a custom theme in a CSS file. Of course this means that it is removed in all cases across all views, so long as that theme is applied.
The next is to inject it into a style. You can learn more about that here:
There are also ways to insure that it is only applied to a specific instance of power chart utilizing a custom style. I'm not too up to speed on that, perhaps @victordcq or @nminchin can provide a more complete solution along those lines.
I also don't believe that injected styles like this work in the designer, but they do work in the browser.
2 Likes
you could add a class in the styles
style:classes:“hideRangeSelector”
and then in the style
.psc-hideRangeSelector .ia_powerChartComponent__chart .range-selector-container{
display: none !important;
}
(might not need the space, havent tested it
.psc-hideRangeSelector.ia_powerChartComponent__chart)
1 Like
if you want to inject the css into a style class you have to put it in between inverted curly brackets}{
}.psc-hideRangeSelector .ia_powerChartComponent__chart .range-selector-container{ display: none !important;
}{
1 Like
And this should allow me to hide the rangeselector container on the Powerchart? I am using 8.1.0
Yes, so long as you have applied the hideRangeSelector style class to that component.
Hopefully, you or someone you work with is petitioning hard to upgrade to a more current version. There have been several bug fixes and features added since 8.1 was released in 2020. Not a criticism, I understand fully why it can be difficult.
I have been fully pleading to my manager about upgrading. He is worried about other projects breaking when we upgrade. We didnt worry about it when we moved from 7.9 to 8.1.0, lol
1 Like
hah!
There is far less chance of it breaking across a minor revision than a major one. But I get it. I have to find a time when 3 different production facilities are down before I can upgrade. I’m hoping to go to 8.1.19 this weekend. I was attempting to wait for 8.1.20 to be released, but alas I don’t think that is in the cards.
1 Like
always first test on a different gateway before upgrading a produciton one xd
and take a beakup
WHere can I find the other commands for the code like this one has:
}.psc-hideRangeSelector .ia_powerChartComponent__chart .range-selector-container{ display: none important;
}{
{ display: none important;}
FYI, that should be: {display: none !important;} note the exclamation point.
Google CSS (Cascading Style Sheets) and pick your favorite resource.
ah my bad, no idea why it didnt copy the !, i’ll edit my reply