javascript - How to draw connecting lines for bar charts in Kendo-UI -
i have started on kendo-ui.
i have following bar charts. add draw lines connects bar charts shown in second figure.
here have: 
here wish 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 jsfiddle: http://jsfiddle.net/mskjblwx/
add 2 series type: line connect bar. see example: jsfiddle, may 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>