Suppress gaps in multi-series column charts
Consider this chart where one series has a missing value. JSFiddle: http://jsfiddle.net/pclaar/zmktekak/2/
(Note that New York does not have a value for February.)
I would like to instruct HighCharts to remove the gap created by the missing data point, effectively showing three points for February.
Milan Gamble commented
Grzegorz's solution is close. What's left:
- Identify gaps by null values in series. Null value = don't draw column.
- After not drawing individual columns in a cluster, equalize distance between clusters. Adjust column widths accordingly.
- Control this behavior with flag: Hide null columns.
This is a frequent issue for us. If we want to show a 'Top 10 Cities per Continent' we run into the need for workarounds for two problems: cities are unique to each continent, and some continents have <10 cities (in our dataset).
In slightly more complicated scenarios, we may want a 'Top 10 Products per Continent' graph, in which some products are in the top 10 for multiple continents, while others are unique to 1 continent. Currently this would result in [count distinct products across all continents] x [# of continents in dataset] columns, when a maximum of 10 x [# of continents in dataset] is desired.
Nice work Grzegorz!
For better separation from the configuration, and to make it more pluggable, you could wrap the ColumnSeries.translate method and set the new x attributes on the point.shapeArgs object. Then you'll get animation for free, and you can get rid of the event handlers inside the config.
As a workaround you can use custom function I have written. You should put it as a callback function in load and redraw events of chart and hide and show events of series:
Related forum topic: