I have a kendo line chart which will bind the data from Model as below. Now i would like to show at particular point a call out message saying degradation start at this point dynamically. Can some one help me on this how to acheive this.
<div style="overflow:scroll;width:100%">
@if (@Model != null && @Model.XYAxisData != null)
{
@(Html.Kendo().Chart()
.Name("Predictionchart")
.Transitions(false)
.RenderAs(RenderingMode.Canvas)
//.Title(Model.YString + " Vs " + Model.XString + " Relationship")
.Legend(legend => legend
.Position(ChartLegendPosition.Right).Visible(true)
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Line().Style(ChartLineStyle.Smooth)
)
.Series(series =>
{
series.ScatterLine(Model.XYAxisData).Fields("xValue", "yValue");
series.ScatterLine(Model.XYPredictedData).Fields("xValue", "yValue");
})
.ChartArea(x => x.Width(1000).Height(400))
.XAxis(x => x
.Numeric()
.Title(title => title.Text(Model.PredictXString))
.Crosshair(crosshair => crosshair
.Visible(true)
.Tooltip(tooltip => tooltip
.Visible(true)
//.Format("{0:n1}")
)
)
//.Max(35)
)
.YAxis(y => y
.Numeric()
.Title(title => title.Text(""))
.AxisCrossingValue(-5)
.Crosshair(crosshair => crosshair
.Visible(true)
.Tooltip(tooltip => tooltip
.Visible(true)
//.Format("{0:n1}")
)
)
//.Min(-5)
//.Max(25)
)
)
}
</div>
