Add vertical guideline

[Anthony]

Using Kendo Charts, is it possible to add vertical guidelines? For example, on a chart showing all the days of this month vs. amount of remaining budget, I'd like there to be a red vertical line the height of the entire chart to indicate the current date. Thank You. 

[EZ]

You could either use plotbands or draw on the chart surface.

 

For plotBands, have a look at categoryAxis.plotBands

 

$("#chart").kendoChart({
  theme: "Bootstrap",
  dataSource: data,
  series: [{
    type: "line",
    field: "value",
    categoryField: "day"
  }],
  valueAxis: {
    name: "value"
  },
  categoryAxis: {
    name: "category",
    plotBands: [
      { from: 15, to: 16, color: "red" }
    ]
  },
});

DEMO

 

For drawing, on render, you can get the axis objects and use slot and range to get the coordinates of the line to draw:

See Docs for ChartAxis and getAxis

 

$("#chart").kendoChart({
  theme: "Bootstrap",
  dataSource: data,
  series: [{
    type: "line",
    field: "value",
    categoryField: "day"
  }],
  valueAxis: {
    name: "value"
  },
  categoryAxis: {
    name: "category"
  },
  render: function(e){

    var chart = e.sender;
    var valueAxis = chart.getAxis("value");
    var categoryAxis = chart.getAxis("category");

    var catSlot = categoryAxis.slot(15,16);
    var valRange = valueAxis.range();
    var valSlot = valueAxis.slot(valRange.min, valRange.max);

    var path = new kendo.drawing.Path({
     stroke: {
      color: "red",
      width: 3
    }
    }).moveTo(catSlot.origin.x + catSlot.size.width/2, valSlot.origin.y)
      .lineTo(catSlot.origin.x + catSlot.size.width/2, valSlot.bottomRight().y);

    chart.surface.draw(path);

  }
});

 

DEMO