Easy way to paginate in Highcharts

Recently, when creating a statistics page on a site, I needed to display 450 positions in the next chart. In view of the fact that this chart was not on the page alone, and it would have looked very cumbersome on the page, it was decided to add something like pagination data. For graphs in the project uses the Highcrarts library. Having rummaged in documentation the pagination for a legend, but not for schedules was found only.

A little googling found a non-working solution using the jquery Paginator plug-in and the suggestion to load data on ajax, again to start with the folded buttons. I did not like both decisions by the poet. I decided to do something of my own.
After some thought, I came to the conclusion that you can try using the Legend component for this purpose by adding an event handler to the elements of the legend.

Here is the result code for three pages.

Next, a few comments:
When generating a page, the axis values ​​for the first page are initially set:

xAxis: { categories: [ ' ..', ' ..', ' ..', ' ..', ' ..', ' ..', ' ..', ' ..', ' ..', ' ..' ] }, 

')
Subsequently, when switching "pages" is set depending on the values ​​in the series:

 var newCats = []; for (var i = 0; i < series[this.index]['data'].length; i++) { newCats[i] = series[this.index]['data'][i]['name']; }; this.chart.xAxis[0].setCategories(newCats); 

The text on the legend buttons is taken from the name of the series, all series except the first one are set to false.

 series: [ { name: '1', visible: true, 

So here, everything turned out to be very simple.