Remove gap in Highcharts column chart from null value in React

[luciomcamargo]

I'd like to justify columns by category on a Highcharts column chart, so it corrects null values. The function below was written by Grzegorz does just that. But when I try to add the function in the React official wrapper, it returns "element" undefined. How do I adapt this to the React official wrapper. Remember I only want to ignore the gaps from null values, not zeros. Here is a codesandbox of my code, the logic should be in the Chart.js component.
https://codesandbox.io/s/github/luciomcamargo/graph

Code: Select all

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++;
                    }
                });
            }
        });
    }
};

[rafalS]

Hi, luciomcamargo!

Error "element" undefined is throwing because null point (ob) doesn't have its own graphic element. You can use the code you found, but you need to loop through all points and remove the null ones.

jsFiddle: https://jsfiddle.net/BlackLabel/0npxeLst/

Best regards!