Power chart pen control

Is there a way to prevent pen control from expanding?

PROPS.config.visibility.showPenControlDisplay : false

This hides the pen control.
I want to prevent it from expanding when user click the icon.

image

Hide the icon instead.

  • Create a new style. I called mine hidePowerChartPensExpandButton. You might like something more brief.
  • In the base style expand Background and add the following code into Background image.
} .ia_powerChartComponent__penDataDisplay__table__icon.expand-icon {display: none !important;}  {
  • OK that.
  • On the Power Chart component Property Editor hit the PROPS.style.classes dropdown and select the new style you created. That should do the trick.

This is CSS injection. You find the classes you need by examining the web page in question with the browser’s developer tools. (Usually hit F12 to show the developer tools.)

This would be applied to all instants of power chart.

Is it possible to apply only to one particular instance?

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

Yup seems right

}.psc-YourClassName .ia_powerChartComponent__penDataDisplay__table__icon.expand-icon {
display: none;
}{


4 Likes

Thank you for all, works great.

Is there a way to ensure that the Pen Control defaults to COMPACT instead of EXPANDED?
I have it set to COMPACT in designer for the view, but when opening on Workstation or Perpsective session, it is expanded and it is confusing users..

Setting the props.legend.visible flag to true will ensure that Pen Control will default to the compact version. It's towards the bottom of the Props property tree, below timeAxis.

1 Like