Charts - Tooltip API

You can use tooltip API members to manage tooltip visibility in code. This demo creates a DevExtreme PieChart and disables its default tooltip. When you click a pie segment or select an item in the "Choose Region" box, a showTooltip() method call displays the corresponding tooltip.

www.wikipedia.org

Backend API

@model IEnumerable<object> @(Html.DevExtreme().PieChart() .ID("chart") .Type(PieChartType.Doughnut) .Palette(VizPalette.SoftPastel) .Title("The Population of Continents and Regions") .Tooltip(t => t .Enabled(false) .Format(Format.Millions) .CustomizeTooltip(@<text> function (arg) { return { text: arg.argumentText + "<br />" + arg.valueText }; } </text>) ) .Size(s => s.Height(350)) .OnPointClick(@<text> function(e) { var point = e.target; point.showTooltip(); $("#region").dxSelectBox("option", "value", point.argument); } </text>) .Legend(l => l.Visible(false)) .Series(s => s.Add().ArgumentField("Region").ValueField("Val")) .DataSource(Model) ) <div class="controls-pane"> @(Html.DevExtreme().SelectBox() .ID("region") .Width(250) .InputAttr("aria-label", "Region") .DisplayExpr("Region") .ValueExpr("Region") .Placeholder("Choose region") .DataSource(Model) .OnValueChanged(@<text> function(data) { var chart = $("#chart").dxPieChart("instance"); chart.getAllSeries()[0].getPointsByArg(data.value)[0].showTooltip(); } </text>) ) </div>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult TooltipAPI() { return View(SampleData.PopulationData); } } }

#region { display: inline-block; } .controls-pane { padding-top: 20px; text-align: center; }