This is a migrated thread and some comments may be shown as answers.

Add vertical guideline

1 Answer 81 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Anthony
Top achievements
Rank 1
Anthony asked on 20 Nov 2015, 08:24 PM
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. 

1 Answer, 1 is accepted

Sort by
0
Accepted
EZ
Top achievements
Rank 2
answered on 23 Nov 2015, 05:38 PM

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

Tags
Charts
Asked by
Anthony
Top achievements
Rank 1
Answers by
EZ
Top achievements
Rank 2
Share this question
or