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.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
x
Send Feedback
Thank you! We appreciate your 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)
.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.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class ChartsController : Controller {
public ActionResult APIDisplayATooltip() {
return View(SampleData.PopulationData);
}
}
}