Cant get a grouped kendo ui column chart to hide when some items in group don't have a value

Question

I've been trying to get a telerik kendo ui column chart to display grouped data but where the groups might not have entries for all possible values and I don't want to show space/empty columns in these empty cases.

Telerik dojo of problem

Is anyone aware of anyway to get this to work more like the screenshot below

Excel has grouped the data but doesn't display a column at all if the data is null/zero

Answer 1

I couldn't find a built-in way to do this, so I ended up just placing the bars manually by overriding the visual function. In my case, I only needed to move one bar and that bar will always be the same category, which made it a whole lot easier in that I only had to identify it by matching the category. I could then move it with a transform. You cannot move it by setting the coordinates because the visual has already been created.

It would be more complex to do this dynamically, but it's certainly possible. This may give someone a start in the right direction.

One downside of this method is that you must also place the labels manually, which I have also done below. You can override the visual function of the labels, as well, but no references to any other elements are passed with the event data. Note how the documentation says the sender field may be undefined; in my experience, this is always the case.

It also does not move the tooltip or the highlight. You could use the same method to move the highlight (override the visual function, though on the series instead of the seriesDefaults) and draw the tooltip manually while moving the highlight -- similar to how the method below draws the label while moving the column.

Telerik Dojo Example

$(document).ready(function () {
    $("#chart").kendoChart({
        legend: { visible: false },
        tooltip: { visible: false },
        categoryAxis: {
            name: "categoryAxis",
            categories: ["1", "2", "3"],
        },
        series: [
            {
                data: [1, 2, 3],
                highlight: { visible: false },
            },
            {
                data: [1.5, null, 3.5],
                highlight: { visible: false },
            }
        ],
        seriesDefaults: {
            type: "column",
            labels: { visible: false },
            visual: function (e) {
                if (e.value === null) return;
                var visual = e.createVisual();
                var axisRect = e.sender.getAxis("categoryAxis").slot("2");
                var group = new kendo.drawing.Group();
                var label = new kendo.drawing.Text(e.value, [0, 0], {
                    font: "20px sans-serif",
                    fill: { color: "black" }
                });
                var lbox = label.clippedBBox();
                label.position([
                    e.rect.origin.x + e.rect.size.width / 2 - lbox.size.width / 2,
                    e.rect.origin.y - label.bbox().size.height * 1.5
                ]);
                group.append(visual, label);
                if (e.category === "2") {
                    var x = (axisRect.origin.x + axisRect.size.width / 2) - e.rect.size.width / 2;
                    group.transform(kendo.geometry.transform().translate(x - e.rect.origin.x, 0));
                }
                return group;
            },
        }
    });
});