Dynamic vertical line in charts

2 posts, 1 answers
  1. Miguel Angel
    Miguel Angel avatar
    4 posts
    Member since:
    May 2015

    Posted 08 Feb Link to this post

    I have to create a line chart that will include some series and a vertical line whose position can be modified dynamically after the creation of the chart. I'm using the property notes to display the vertical line:

    notes: {
       line: {
          length: 99999999,
          color: "#ff0000"
       // initial note (vertical line)
       data: [{
          value: dates[0]

     The position of the vertical line is updated by external events with the following code:

       categoryAxis: {
          notes: {
             data: [{
                value: dates[1]

     The problem is that when the notes are modified the notes and the series are redrawn and I would like that only the notes are redrawn.

     Is it possible to modify and redraw only the notes of a chart? Is it correct use notes to achieve this functionality?


    Thanks in advance.

  2. Answer
    Iliana Nikolova
    Iliana Nikolova avatar
    2570 posts

    Posted 10 Feb Link to this post

    Hi Miguel,

    Redrawing only the notes but not the entire chart is not supported. Some other options to draw vertical lines are below: 
    - Render custom plotBands via the drawing API (as demonstrated in this example);
    - Define multiple value axes, hide their labels and change the axisCrossingValues (like here).
    On a side note, if you keep the approach with the notes you could stop the chart animations in order to prevent flickering.

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top