Cortez
Posts: 85
Joined: Fri May 29, 2020 9:41 am

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

After implementing this into my application I want to add several more comments in case someone else needs to use this in future:

1. I am using Highcharts Stock, which means I have a navigator enabled by default. This results in having double series in `chart.series` (each base series has it's counterpart navigator series). So I added additional check when iterating through `chart.series` in order to skip navigator series and not take them into account in further `pointWidth` calculations. I check for `series.baseSeries` presence, as it indicates that series is navigator series (every navigator series has a reference on it's base series and vice versa):

Code: Select all

if (!series.visible || series.baseSeries) return;

2. `Math.max.apply(Math, Object.values(occurrences))` can produce `-Infinity` output if `Object.values(occurrences)` produces an empty array. As `-Infinity` is considered a truthy value, this results in `customColumnCount` taking a value of `-Infinity` instead of `columnCount` in this assignment:

Code: Select all

var customColumnCount = Math.max.apply(Math, Object.values(occurrences)) || columnCount;

so I replaced it with

Code: Select all

var occurrencesArr = Object.values(occurrences);
var customColumnCount = occurrencesArr.length ? Math.max.apply(Math, occurancesArr) : columnCount;

3. If we want to stick with ES5-compatibility, then `Object.values` should be replaced. For example:

Code: Select all

Object.keys(occurrences).map(function(key){return occurrences[key]});


Here is a final result with all the fixes applied:
https://jsfiddle.net/Cortez/okhfj19g/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Column chart with grouping: align columns with xAxis ticks no matter how many columns per X value

Thank you so much for sharing it with everyone! We really do appreciate your effort in making this community a more valuable source of information for every Highcharts user.

Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”