Charts - API - Display a Tooltip

This demo illustrates how to show and hide the point’s tooltip with the API. To test this feature, select a continent from the drop-down menu under the PieChart or click a point directly in the PieChart.

www.wikipedia.org

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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 Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult APIDisplayATooltip() { return View(SampleData.PopulationData); } } }

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