Grid line only on data point for scratter points

Question

I need to draw x & y intercepts for all data points in a scratter chart. I went through major and minor grid lines. But it could not be my perfect solution.

Like the image below:

The sample image with x and y intercepts only on data points

Answer 1

You can use the render function of the chart to draw the horizontal and vertical lines on the chart surface. In the following demo, I name the x and y axes so that in the render function I can use the getAxis() method along with slot and range. See DOCS.

DEMO

var data = [[0.67, 5.4], [2.2, 2], [3.1, 3]];
$("#chart").kendoChart({
  series: [{
    type: "scatter",
        data: data,
        markers: {size: 16},
  }],
  yAxis: { name: "value",   majorGridLines: {visible: false } },
  xAxis: { name: "category",    majorGridLines: {visible: false } },
  render: function(e){
    var chart = e.sender;
    var yAxis = chart.getAxis("value");
    var xAxis = chart.getAxis("category");
        //iterate each point on the chart
        for (var i=0; i<data.length; i++){
            //vertical line
            var valRange = yAxis.range();
        var valSlot = yAxis.slot(valRange.min, valRange.max);
            var point = data[i];            
            var catSlot = xAxis.slot(point[0]);
            var path = new kendo.drawing.Path({
             stroke: {color: "#B3BDBD", width: 1}
            }).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); 
            //horizontal line
            var ySlot = yAxis.slot(point[1]);
            var xRange = xAxis.range();
            var xSlot = xAxis.slot(xRange.min, xRange.max);
            var pathH = new kendo.drawing.Path({
             stroke: {color: "#B3BDBD", width: 1}
            }).moveTo(xSlot.origin.x,  ySlot.origin.y + ySlot.size.width/2)
                .lineTo(xSlot.bottomRight().x, ySlot.origin.y + ySlot.size.width/2);

            chart.surface.draw(pathH); 
        }
  }
});