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

Crosshair Shared tooltip on a line chart with multiple dynamic categories and 2 x axes

0 Answers 82 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Curtis
Top achievements
Rank 1
Curtis asked on 21 Mar 2014, 08:53 PM
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"))

No answers yet. Maybe you can help?

Tags
ToolTip
Asked by
Curtis
Top achievements
Rank 1
Share this question
or