Responsive charts

Since Highcharts 5.0 you can create responsive charts much the same way you work with responsive web pages. A top-level option, responsive , exists in the configuration.

It lets you define a set of rules, each with a condition , for example maxWidth: 500, and a separate set of chartOptions  that is applied on top of the general chart options. The chartOptions work as overrides to the regular chart options, which apply when the rule applies. For example, the following rule will hide the legend for charts less than 500 pixels wide: 

responsive: {
  rules: [{
    condition: {
      maxWidth: 500
    },
    chartOptions: {
      legend: {
        enabled: false
      }
    }
  }]
}

One of the most handy options is chart.className  that can be used to control the style of all other elements in Highcharts styled mode .

In general, the responsive configuration lets you define size-dependent settings for all aspects of the chart. Typical use could be to move the legend  or modify how much space the axes take up . Responsiveness is also a great concept in charts with many graphical elements, like stock charts .

Watch what happens to the legend in this sample as you scale up or down the browser window size: