CODEWITHSUNDEEP
javascriptchartshighcharts
Dattatreya Kugve
Dattatreya Kugve

Reputation: 377

Number of legends per page on pagination in Highcharts

Hi I am using Highcharts. In one of the chart I have too many legends so there is an overflow. In this scenario Highcharts is rightly adding pagination arrow as shown in attached pic. My question is how can I control number of legends per page. I need only 4 legends per page when pagination occurs. I could not find anything in highcharts doc. Please help. [enter image description here

Upvotes: 0

Views: 524

Answers (1)

magdalena
magdalena

Reputation: 3695

There is no API option to set the number of series showing at the legend.navigation but you can control it using legend properties, such as itemWidth, maxHeight and other options for styling legend. You can also use responsive.rules for more precise settings.

Example config:

  legend: {
    align: 'center',
    itemMarginTop: 1,
    useHTML: true
  },

  responsive: {
    rules: [{
        condition: {
          maxWidth: 500,
        },
        chartOptions: {
          legend: {
            width: 250,
            itemWidth: 125,
            maxHeight: 60
          },
        }
      }
    ]
  },

Demo: https://jsfiddle.net/BlackLabel/j6gn1uto/

API Reference: https://api.highcharts.com/highcharts/legend https://api.highcharts.com/highcharts/responsive.rules

Upvotes: 1

Related Questions