I have a line chart in a MVC razer web app to which the user can add at runtime up to 5 categories. The chart also has 2 x axes, one that delineates time, the other that delineates dates. The tooltip has been appearing over the particular category line over which the mouse hovers. I want the crosshair functionality where a vertical line appears and one tooltip shows the values for all categories and cannot get it to work.
I assume it has something to do with the fact I have 2 x axes, dynamically add categories at runtime, or both. Further, a y axis is added for each category that is added to the chart, though I assume the stuff going on with the y axes is not contributing to the problem, but I'm not certain of that.
Below is the cshtml code for the chart. It differs from the original code only in regards to:
1) The addition of .CategoryAxis(axis => axis.Crosshair(c => c.Visible(true)))
2) The addition of .Shared(true) for the tooltip.
I have not included any of the javascript/jQuery code that executes when a user adds a category, and I realize to solve this problem seeing that code may be necessary. Will provide on request.
Attached is a screen shot of the chart after 5 categories have been added, showing how a tooltip appears only for the category over which the mouse hovers.
@(Html.Kendo().Chart<TagValue>()
.Series(series => series.ScatterLine(s => s.Local_TimeStamp, s => s.Value))
.Legend(false)
.HtmlAttributes(new { @class = "multiPenChart" })
.CategoryAxis(axis => axis.Crosshair(c => c.Visible(true)))
.XAxis(x => x.Date()
.BaseUnit(ChartAxisBaseUnit.Minutes)
.Labels(labels => labels.Visible(false).Format("HH:mm")))
.XAxis(x => x.Date()
.BaseUnit(ChartAxisBaseUnit.Minutes)
.Color("#DAA520")
.Labels(labels => labels.Visible(false).Format("MM/dd")))
.Tooltip(tooltip => tooltip
.Visible(true)
.Shared(true)
.Template("<div class='ChartTooltip'>#= formatDate(value.x) # - #= value.y #</div>"))
.Events(events => events.DataBound("onDataBound"))
.Name("chart"))
I assume it has something to do with the fact I have 2 x axes, dynamically add categories at runtime, or both. Further, a y axis is added for each category that is added to the chart, though I assume the stuff going on with the y axes is not contributing to the problem, but I'm not certain of that.
Below is the cshtml code for the chart. It differs from the original code only in regards to:
1) The addition of .CategoryAxis(axis => axis.Crosshair(c => c.Visible(true)))
2) The addition of .Shared(true) for the tooltip.
I have not included any of the javascript/jQuery code that executes when a user adds a category, and I realize to solve this problem seeing that code may be necessary. Will provide on request.
Attached is a screen shot of the chart after 5 categories have been added, showing how a tooltip appears only for the category over which the mouse hovers.
@(Html.Kendo().Chart<TagValue>()
.Series(series => series.ScatterLine(s => s.Local_TimeStamp, s => s.Value))
.Legend(false)
.HtmlAttributes(new { @class = "multiPenChart" })
.CategoryAxis(axis => axis.Crosshair(c => c.Visible(true)))
.XAxis(x => x.Date()
.BaseUnit(ChartAxisBaseUnit.Minutes)
.Labels(labels => labels.Visible(false).Format("HH:mm")))
.XAxis(x => x.Date()
.BaseUnit(ChartAxisBaseUnit.Minutes)
.Color("#DAA520")
.Labels(labels => labels.Visible(false).Format("MM/dd")))
.Tooltip(tooltip => tooltip
.Visible(true)
.Shared(true)
.Template("<div class='ChartTooltip'>#= formatDate(value.x) # - #= value.y #</div>"))
.Events(events => events.DataBound("onDataBound"))
.Name("chart"))