Chart menu text string no longer vertically centered within box

Hi,

I’ve noticed that some of the styles have been reverted back since the Highcharts update. Really appreciate that being fixed :slight_smile:

Since the update, our text string within the Context Button is still not centered vertically in our box. It seems that if you change the font size to be larger than the default it changes the alignment.

Just wondering if this will also be fixed?

image

Hi,

While this may be related to an update done to Highcharts, I was not able to confirm this by downgrading the version.

Notably, three options are set which are suspect in terms of how they influence the look of this button, and its outline:

  • Symbol X
  • Symbol X
  • Height

Undoing these (CTRL+A inside the textbox, then backspace) resolves the issue for me.

I can see that other charts on your end which does not exhibit this problem, does not have these options set. It is unknown to me what and when these three options were set, and why they are only applied to some of your charts.

Hi,

Symbol X
Symbol Y and
Height
don’t seem to affect the “Options” text. They affect the symbol (which is not showing in our case).

When I change those settings to Auto nothing happens. When we set the font-size to 12px (default) it is centered, it’s when we change it to be 14px that it moves up. I have provided a video below showing this.

2023-07-19_Options-button

Anna came up with code to add a space under the Options text but this is less than ideal.

<div style="font-size:14px">Options</div><br><div style="font-size:1px"></div>

Thanks!

I should mention that this fix is only seen to work in the publish codes. Here’s why:

This is as of yet untested, but I consider with probability that this is the same issue as one of CIHI’s other issues, wherein accessibility descriptions was mismatched between what options were set in the editor.

The relevant change of suspicion is seen here at the HC GH
which shows that symbolX and symbolY was changed. In the everviz editor we still use the old values, despite having upgraded to a newer verison of Highcharts. This was reported internally as “Review deprecated Highcharts assets” #1277

Consequently, the reason that the suggested fix works is because the now non-default values everviz sets by default is again missing.

The issue can be reproduced by enabling or disabling the commented line in custom code

Off: everviz

On: everviz

A small difference is visible as a chart preview here in the forum, but not identical to embed itself

https://app.everviz.com/create?uuid=arWdVU_8A

Hi Martin,

Do you foresee any problems using our suggested code until this is resolved, given that we don’t want a symbol to appear before “Options”?

<div style="font-size:14px">Options</div><br><div style="font-size:1px"></div>

Hi,

The suggested custom code is safe to use, and in particular won’t affect screen readers.

2 Likes