Y-axis title behaves strangely in combination with responsive rules

[Martin Devillers]

Bug

Bug

Description

I'm trying to make my chart responsive by hiding the legend and y-axis title on smaller viewports. According to this Highcharts Responsive Demo, this can be achieved by passing the following object to the reponsive property on the root:

const responsive = {
  rules: [
    {
      condition: {
        maxWidth: 640,
      },
      chartOptions: {
        legend: {  
          enabled: false  
        },
        yAxis: {
          title: {
            text: null,
          },
        },
      },
    },
  ],
};

With React JSX Highcharts I'm getting mixed results:

• The legend works perfectly. It starts in the right state (hidden or visible) and flips accordingly when I resize my browser window beyond the breakpoint.
• The title on the Y-axis behaves strangely. It's always there initially, regardless whether my screen is bigger or smaller than the breakpoint. When I resize the screen beyond the breakpoint, it always disappears, even when it shouldn't. After this, it never comes back.

How to reproduce

Take any chart and add the responsive object posted above. Then resize the preview window beyond the breakpoint. The legend will (dis)appear as expected but the Y-axis title won't. I've made a live demo below with the responsive setup.

Live demo demonstrating bug

https://stackblitz.com/edit/base-chart-example-responsive

Versions

• React JSX Highcharts version: 4.0.0
• Highcharts version: 8.0.0
• React version: 16.12.0

[Will Hawker]

The Highcharts responsive options are difficult to use with React JSX Highcharts to be honest, as it's not how updating the chart works behind the scenes.

Plus it's not great for debugging either, as it means the React components don't really reflect the displayed state of the chart anymore.

I would suggest using react-responsive instead, and mounting/unmouting components as required. Example here.

Let me know your thoughts.

[Martin Devillers]

Hi Will,

Thank you for replying so quickly! 👍 Yes, I can imagine the dynamic nature of the responsive feature doesn't match well with the way React handles things. I saw your great example using react-responsive but I was stubborn wanted to try Highchart's own responsive mechanism before pulling in another package. I'll try react-responsive now :-)

The only feedback I have at this point is that it may be useful to make a list of Highchart features that JSX does (and does not) support. You could even go as far as to change the BaseChart and emit a warning to the console if a developer tries to use a known unsupported features

if(props.responsive && !production) {
  console.warn("The 'responsive' option is currently not supported by Highcharts JSX")
}

Again, thank you for the great work on this library.

[Martin Devillers]

Just to confirm the setup with react-responsive works beautifully.

Demo: https://omi.cr/sorting/counting-sort
Change: MartinDevillers/omicron@28c8bd5

[Will Hawker]

Thanks for the feedback!

P.s. that site looks great, I should look into making a community showcase or something...