CODEWITHSUNDEEP
javascripthighchartsdata-visualizationreact-highcharts
drewkiimon
drewkiimon

Reputation: 591

How to hide empty stacked columns in categories in Highcharts?

Codepen: https://codepen.io/drewkiimon/pen/LYydNdE

Hey y'all. More data visualization questions.

Right now, I am using a column chart to created stacked grouped bar charts where I am using categories to create these 3 different fields. However, I run into the problem where my data is being visualized properly, but I have these empty spaces where stacks should be going. For example, in CA, stack 4 and 5 are not being shown because they have no data, and I would like to remove the void/empty white space there.

So in the end, my chart would have none of the empty white space in between it all.

I am trying to avoid using the Grouped Categories library. Just a heads up.

I am trying to dig around the API, but don't see how to remove this white space. Any clues? Or do I need to approach this differently?

How it currently looks

Upvotes: 0

Views: 543

Answers (1)

madepiet
madepiet

Reputation: 884

Currently, there is no such thing available out of the box. Your own configuration would be necessary here. See the example of this function justifying columns per category: https://jsfiddle.net/BlackLabel/2orx31dL/

var justifyColumns = function (chart) {
    var categoriesWidth = chart.plotSizeX / (1 + chart.xAxis[0].max - chart.xAxis[0].min),
        distanceBetweenColumns = 0,
        each = Highcharts.each,
        sum, categories = chart.xAxis[0].categories,
        number;
    for (var i = 0; i < categories.length; i++) {
        sum = 0;
        each(chart.series, function (p, k) {
            if (p.visible) {
                each(p.data, function (ob, j) {
                    if (ob.category == categories[i]) {
                        sum++;
                    }
                });
            }
        });
        distanceBetweenColumns = categoriesWidth / (sum + 1);
        number = 1;
        each(chart.series, function (p, k) {
            if (p.visible) {
                each(p.data, function (ob, j) {
                    if (ob.category == categories[i]) {
                        ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
                        number++;
                    }
                });
            }
        });
    }
};

Upvotes: 1

Related Questions