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.
Pete
shared this idea
-
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.
Example: http://imgur.com/a/ErH17
-
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.
-
Grzegorz
commented
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:
http://api.highcharts.com/highcharts#chart.events.load
http://api.highcharts.com/highcharts#chart.events.redraw
http://api.highcharts.com/highcharts#plotOptions.series.events.show
http://api.highcharts.com/highcharts#plotOptions.series.events.hideexample:
http://jsfiddle.net/zmktekak/14/Related forum topic:
http://forum.highcharts.com/highcharts-usage/suppress-gaps-in-multi-series-column-charts-t34228/
