How to draw connecting lines for bar charts in Kendo-UI

Question

I have recently started on Kendo-UI.

I have the following bar charts. I would like to add the draw lines that connects bar charts as shown in the second figure.

Here is what I have:

Here is what I wish to achieve:

 function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "Hybrid car mileage report"
                },
                legend: {
                    position: "top"
                },
                series: [{
                    type: "column",
                    data: [20, 40, 45, 30, 50],
                    stack: true,
                    name: "on battery",
                    color: "#003c72"
                }, {
                    type: "column",
                    data: [20, 30, 35, 35, 40],
                    stack: true,
                    name: "on gas",
                    color: "#0399d4"
                }],
                valueAxes: [{
                    title: { text: "miles" },
                    min: 0,
                    max: 100
                }],
                categoryAxis: {
                    categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
                    axisCrossingValues: [0, 0, 10, 10]
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);

Here is my jsfiddle: http://jsfiddle.net/mskjbLwx/

Answer 1

Add two another series with type: line to connect bar. See example: JSFiddle, may be that help you.

function createChart() {
    $("#chart").kendoChart({
        title: {
            text: "Hybrid car mileage report"
        },
        legend: {
            position: "top"
        },
        transitions: true,
        series: [{
            type: "line",
            missingValues: "interpolate",
            markers: {
                visible: false
            },
            data: [10, 20, 30, 40, 50],
            stack: true,
            tooltip: {
                visible: true
            },
            name: "on battery",
            color: "orange",
            visibleInLegend: false
        }, {
            type: "column",
            data: [10, 20, 30, 40, 50],
            stack: true,
            name: "on battery",
            color: "#003c72"
        }, {
            type: "line",
            missingValues: "interpolate",
            markers: {
                visible: false
            },
            data: [5, 15, 25, 35, 45],
            stack: true,
            tooltip: {
                visible: true
            },
            name: "on gas",
            color: "green",
            visibleInLegend: false
        }, {
            type: "column",
            data: [5, 15, 25, 35, 45],
            stack: true,
            name: "on gas",
            color: "#0399d4"
        }],
        valueAxes: [{
            title: {
                text: "miles"
            },
            min: 0,
            max: 100
        }],
        categoryAxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
            axisCrossingValues: [0, 0, 10, 10]
        },
        tooltip: {
            visible: true,
            format: "{0}%",
            template: "#= series.name #: #= value #"
        }
    });
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);

 { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }

 <base href="http://demos.telerik.com/kendo-ui/area-charts/multiple-axes">
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.material.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js">   </script>
<body>
<div id="example">
    <div class="demo-section k-content">
        <div id="chart"></div>
    </div>