[Solved] Dynamic vertical line in charts

[Miguel Angel]

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:

element.data("kendoChart").setOptions({
   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.

[Iliana Dyankova]

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.

Regards,
Iliana Nikolova
Telerik