CODEWITHSUNDEEP
highchartsresponsive
Stevethemacguy
Stevethemacguy

Reputation: 756

HighCharts: How to toggle yAxis options on browser resize?

In HighCharts 5.0, you can define a set of responsive chartOptions that are applied at different viewport sizes. See https://www.highcharts.com/docs/chart-concepts/responsive.

Unfortunately, changes to xAxis and yAxis only work in one direction. When the browser is resized a second time, there is no way to revert back to the original options.

Example One http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/responsive/axis/

chartOptions: {
  xAxis: {
      labels: {
          formatter: function () {
              return this.value.charAt(0);
          }
      }
  }
}

Expected

When the chart width is <= 500px, the xAxis labels are shortened (e.g. 'January' becomes 'J'). When the chart is resized back to > 500px, the label should revert back to 'January.'

Actual

When the chart is <= 500px, 'January' becomes 'J', but when the browser is resized back above 500px, the chart continues to show the short name forever, regardless of the browser size.

Example Two http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/responsive/

chartOptions: {
    yAxis: {
        title: {
            text: null
        }
    }
}

Expected

When the chart width is <= 500px, the yAxis title should be removed. When the chart width is > 500px, the yAxis title should say 'Amount.'

Actual

When the chart width is <= 500px, the yAxis title is removed, but when the chart is resized back above 500px, the 'Amount' title does not re-appear as it should.

Summary

There are potential workarounds, but they do not address the issue.

In the second example, the yAxis title could be toggled using HighChart's Styled mode and a CSS media query or className (see the className example here: https://www.highcharts.com/docs/chart-concepts/responsive)

However, this only fixes problems that can be solved with CSS (e.g. hiding an element). This isn't a realistic solution to truncate the xAxis name, rotate the labels 45deg, etc.

Another option is to use the HighCharts update() function inside of $(window).resize(), but the chart is already listening for this event, so I don't want to add an an additional listener.

Am I missing something or is this just a bug? Thank you!

Upvotes: 1

Views: 1210

Answers (1)

ewolden
ewolden

Reputation: 5803

You could just make a set of responsive rules. Keeping in line with your examples above: one that matches when the chart width is smaller than 500px, and one when it is larger than 500px. Like this:

responsive: {
  rules: [{
    condition: {
      maxWidth = 500, //matches all configs with width below 500px
    },
    chartOptions: {} //options go here
  }, {
    condition: {
      minWidth = 500, //matches all configs with width above 500px
    },
    chartOptions: {} //options go here
  }]
}

If you wanted further steps you could have that as well because the API on responsive.rules states:

A set of rules for responsive settings. The rules are executed from the top down.

Working example: http://jsfiddle.net/ewolden/25z2a1c9/

API on responsive.rules: https://api.highcharts.com/highcharts/responsive

Upvotes: 1

Related Questions