CODEWITHSUNDEEP
javascriptreactjshighcharts
Atilio Jobson
Atilio Jobson

Reputation: 469

Highcharts - How to show more than 30 columns side by side

I'm using Highcharts 6.1.1 with react-highcharts 16.0.0. When I create a 'column' style chart with 30 series or less, the data points with matching x-values all are arranged side by side:chart working as i want with fewer than 31 series

But, if i add another series, bringing the total to 31, Highcharts no longer groups the columns side by side, and instead renders them all in the same place, not stacked, just overlapping:over 30 series doesn't group I can't seem to find a setting in highcharts config to change this grouping threshold, and have experimented quite a bit with setting paddings and widths and such to try to maximize the number of columns it will show side by side, but i can never get it to work with more than 30 series.

Upvotes: 0

Views: 282

Answers (2)

ppotaczek
ppotaczek

Reputation: 39099

When you are using the boost module, columns are always one pixel wide. Additionally, a lot of functionality (such as grouping, which causes this problem) is disabled when the boost module works.

Here: https://github.com/highcharts/highcharts/issues/6600, you have very well explained the assumptions of this module.

To work around, you can use decimal x values:

series: [{
    data: [1]
}, {
    data: [2, 2]
}, {
    data: [{
        x: 0.3,
        y: 1
    }]
}, {
    data: [2]
}, ... ]

Live demo: http://jsfiddle.net/BlackLabel/8bq9yL4f/

Upvotes: 1

Atilio Jobson
Atilio Jobson

Reputation: 469

The problem was in the boost part of the config:

config = {
  boost: {
      enabled: true,
      useGPUTranslations: true,
      seriesThreshold: 30
   },
 }

So I can up that seriesThreshold or just disable boost for this case to solve the problem. Though I would like to know if there's a way to get the boost rendering to correctly show the columns side by side.

Upvotes: 0

Related Questions