Currently, the extreme values on the yAxis component are 0 and 6K, respectively. We can change them programmatically using the Axis.setExtremes() method.

Instead of adding a button in HTML and then setting values upon its click, it will be faster to use the developer tools' console as our playground.

We first need to get a reference to the chart object; we can do so using the following code:

var chart = $( '#energy_consumption' ).highcharts();

We can now navigate the chart object hierarchy and call various methods using the chart variable:

chart.yAxis[0].setExtremes(0, 10000);

Since each chart can contain multiple x and y axes, we used array notation as yAxis[0] to call the setExtremes() method on the first yAxis component.

The extreme values are set on the y axis:

The title of the chart can be changed after it has been initialized. Type the following code in the developer tools' console to set the title to a different one:

var chart = $( '#energy_consumption' ).highcharts();
chart.setTitle( {text: prompt('Enter the new title')} );

A prompt will appear asking for a new title, and it will set the title to the new one:

Sometimes the container div is resized without the window.resize event, that is, it is resized by JavaScript. In that case, the chart will overflow its parent container. To prevent this problem, the chart.reflow() method can be used, which will reflow the chart inside its container.

In the following code, we will first resize the container via jQuery and then call the chart.reflow() method to prevent the overflow.

We will add a button for resizing the container and then examine the effect of the chart.reflow() method:

<button data-action="resize_container">Resize</button>

The following code will resize the chart container:

$( '[data-action="resize_container"]' ).on( 'click', function( e ) {
  $( '#energy_consumption' ).css({
    width: 400,
    height: 375
  });
});

Since we have not called the chart.reflow() method yet, the container will resize but the chart will overflow as seen in the following screenshot:

The blue area represents the actual container size that is smaller than the chart size.

Modify the code to include a call to the chart.reflow() method as shown in the following code:

var chart = $( '#energy_consumption' ).highcharts();
$( '[data-action="resize_container"]' ).on( 'click', function( e ) {
  $( '#energy_consumption' ).css({
    width: 400,
    height: 375
  });
  chart.reflow();
});

Refresh the window and click on the resize button again to see the effect. This time, the container will resize and the chart will be reflowed to fit inside its container:

When initializing a new chart in the same container, the old chart must be destroyed to empty the container and purge the memory. This method is also called internally on the window.unload event to prevent memory leaks.

This method can be called by the following code:

chart.destroy();

A series can be hidden or shown programmatically using the series.hide() and series.show() methods. In addition to these two methods, the series.visible property says whether a series is currently visible or not.

In the following example, we will add a button to toggle a series using the preceding two methods:

<button data-action="toggle_series">Toggle Series</button>

The code for toggling the series is as follows:

var chart = $( '#energy_consumption' ).highcharts(),
  series = chart.series[0];

$( '[data-action="toggle_series"]' ).on( 'click', function( e ) {
  if ( series.visible ) {
    series.hide();
  } else {
    series.show();
  }
});

We first saved a reference to the chart and the series in the chart and series variables, respectively. Then, for the click event of the button we attached a function that will determine whether the series is currently visible and will hide the series. Otherwise, it will show the hidden series.

When toggling a series through a similar API, the series legend will also reflect the change by toggling between the enable and disable state.

In the next section, we will take a look at Highcharts events that occur at various stages in the life span of a chart.