Kendo UI Chart type rangeColumn stacked series

Question

I have this requirement to create a chart type rangeColumn with stacked series. This is how it looks now. It should stack the columns.

This is my create chart function:

function createChart() {
    $("#Chart").kendoChart({
        title: {
            text: "Title",
            font: "14px 'Open Sans'",
            color: "#4D4D4D",
            align: "left",
            margin: {
                top: 20,
                bottom: 10
            }
        },
        legend: {
            position: "bottom",
            item: {
                visual: function (e) {
                    var color = e.options.markers.background;
                    var labelColor = e.options.labels.color;
                    var rect = new kendo.geometry.Rect([0, 0], [200, 50]);
                    var layout = new kendo.drawing.Layout(rect, {
                        spacing: 5,
                        alignItems: "left"
                    });
                    var marker = new kendo.drawing.Path({
                        fill: {
                            color: color
                        },
                        stroke: {
                            color: color
                        },
                    }).moveTo(10, 0).lineTo(10, 10).lineTo(0, 10).lineTo(0, 0).close();
                    var label = new kendo.drawing.Text(e.series.name, [10, 0], {
                        fill: {
                            color: labelColor
                        },
                        font: "14px 'Open Sans'"

                    });

                    layout.append(marker, label);
                    layout.reflow()

                    return layout;
                }
            }
        },
        series: [

            {
            stack: "area",
            type: "rangeColumn",
            color: "#C60C30",                 
            data: [
                [40, 60], [55, 65]
            ]
        },
        {
            type: "rangeColumn",
            color: "rgb(198, 12, 48, 0.55)", 
            data: [
                [30, 38], [44, 54]
            ]
        }
        ],
        seriesDefaults: { 
            overlay: { gradient: "none" },
            border: {
                width: 0,
                color: ""
            },                
            labels: {
                visible: false                    
            }
        },
        categoryAxis: {
            title: {
                text: "Loren ipsum",
                position: "bottom",
                font: "10px Open Sans",
                color: "#4D4D4D"
            },
            categories: ["Loren", "Ipsum"],
            majorGridLines: false,
            labels: {
                rotation: "auto"
            }
        },
        valueAxis: {
            title: {
                text: "Loren ipsum",
                position: "bottom",
                font: "10px Open Sans",
                color: "#4D4D4D"
            },
            min: 0,
            max: 100
        },
        tooltip: {
            visible: true                
        }
    });
}

I´ve tried different types of ways to stack the values like using stack: true without success. Telerik stack example https://demos.telerik.com/kendo-ui/bar-charts/stacked-bar Here is the documentation - I guess I´m skipping something here. https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.stack

GaloisGirl GaloisGirl · Accepted Answer · 2019-08-23T10:29:52

Indeed, the docs say:

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" or "radarColumn". All series in the stack must be of the same type.

Your type is "rangeColumn", which is not on the list.

You can use the "column" type and and a white series at the bottom to create the offset from 0.

You can also request support for stacking rangeColumn at https://www.telerik.com/support/feedback

Kendo UI Chart type rangeColumn stacked series

1 Answers