In kendo UI how to draw vertical line in a line chart

Question

enter image description here How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?

vertical or horizontal line? I think, there is a way to define horizontal line in `kendoui`. — Mohit Pandey, Feb 25 '14 at 12:23
Vertical line only. I am newbie to kendo ui hence can you explain briefly ? — arun, Feb 25 '14 at 12:27
I think, its not possible to draw vertical line in `kendoui`(in middle of charts), but as i said horizontal line can be drawn with `plotbands`. Can you tell me why you need a vertical line, with example. — Mohit Pandey, Feb 25 '14 at 12:30
If i have a line chart with vertical columns as 10,20,30,..... and horizontal column with months say jan to dec and after that again jan to dec for separation i need a vertical line with some color. — arun, Feb 25 '14 at 12:37
i have added the sample image just like that i want @Mohit Pandey — arun, Feb 25 '14 at 12:40

Mohit Pandey · Accepted Answer · 2014-02-26T04:20:30.747

4

Try this:

// let chart be the id
$("#chart").kendoChart({
     categoryAxis: {
         notes: {
             line: {
                 length: 300
             },
             data: [{
                 value: new Date(2012, 0, 3),
                 label: {
                     text: "-" //text you want to show
                 } 
             }]
         }
     }
 });

Demo: http://jsbin.com/obuweca/26

/* WITHOUT CIRCLE */

$("#chart").kendoChart({
    categoryAxis: {
        notes: {
            line: {
                length: 300
            },
            icon: {
                border: {
                    width: 0
                }
            },
            // Initial notes
            data: [{
                value: new Date(2012, 0, 3)
            }]
        }
    }
});

DEMO: http://jsbin.com/obuweca/29/

edited Feb 26 '14 at 04:20

answered Feb 25 '14 at 12:51

Mohit Pandey

3,679
7
26
38

as you mentioned this works fine thanks :) but on top of the vertical line a circle is placed right ? whatever text we put there will be displayed. But i don't want to display the circle instead just vertical line is enough for me ??? can you help out that ? – arun Feb 25 '14 at 13:00
@arun: please look at the edited code. If it resolve your issue, you can up-vote it as well. – Mohit Pandey Feb 26 '14 at 04:21
@ Mohit Pandey thanks for your reply :) and in mean time i had found other solution too place visible as false for the label that too worked out. And your answer also worked :) – arun Feb 26 '14 at 05:18

score 1 · Answer 2 · answered Sep 22 '16 at 06:53

In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.

http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands

You can customize lines by editing stroke:

 stroke: {
          color: "red",
          width: 1,
          dashType:"dash"
        }

score 0 · Answer 3 · answered Aug 25 '15 at 11:25

You can also try to use the column-Chart.

Just extend the series:

  series: [{
                type: "line",
                field: "value",
                categoryField: "date"
            },
            {
                type:"column", 
                field: "valueColumn", 
                gap: 300
            }]

and the dataSource.data with a new field like: valueColumn.

In kendo UI how to draw vertical line in a line chart

3 Answers3