JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
JavaScript
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Пример пагинации Highcharts',
},
xAxis: {
categories: ['Иванов К.С.', 'Петров А.К.', 'Сидоров О.Н.', 'Лазарев Р.В.', 'Ершов В.В.', 'Никитин А.С.', 'Смирнов Н.С.', 'Кузнецов К.С.', 'Соколов И.С.', 'Попов К.Р.']
},
yAxis: {
startOnTick: false
},
plotOptions: {
bar: {
events: {
legendItemClick: function (event) {
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
series[i].hide();
}
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);
}
},
},
},
tooltip: {
},
legend: {
symbolHeight: 0,
symbolPadding: 0,
symbolWidth: 0,
},
series:
[
{
name: '1',
visible: true,
color: "#87b7db",
data: [
{
name: "Иванов К.С.",
y: 679
},
{
name: "Петров А.К.",
y: 653
},
{
name: "Сидоров О.Н.",
y: 610
},
{
name: "Лазарев Р.В.",
y: 597
...