New to Kendo UI for jQuery? Start a free 30-day trial
Displaying Negative Values in Pie Chart Tooltip
Environment
Product | Chart for Progress® Kendo UI® |
Version | 2025.1.211 |
Description
Pie charts are typically designed to represent positive values as percentages of a whole. However, in some cases, negative values may appear in the data set. By default, the Kendo UI Pie Chart converts negative values to positive ones for tooltip display. This behavior can be overridden to show the original negative values in the tooltip or to omit negative values entirely.
This knowledge base article also answers the following questions:
- How to display negative values in Pie Chart tooltips?
- Can negative values be omitted from Pie Chart tooltips?
- How to customize the tooltip display for Pie Charts in Kendo UI?
Solution
To display the original negative values in the tooltips for Kendo UI Pie Charts, use the template
option of the tooltip configuration. This allows direct access to the dataItem
value, bypassing the default conversion to positive values.
Displaying Negative Values in Tooltips
Use the following configuration for the tooltip:
javascript
tooltip: {
visible: true,
template: function (e) {
return e.dataItem.value; // Displays the original value
},
},
Example
<div id="example">
<div class="demo-section wide">
<div
id="chart"
style="
background: center no-repeat
url("https://demos.telerik.com/kendo-ui/content/shared/styles/world-map.png");
"
></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012",
},
legend: {
visible: false,
},
chartArea: {
background: "",
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= dataItem.value #%",
},
},
series: [
{
type: "pie",
startAngle: 150,
data: [
{
category: "Asia",
value: -53.8,
color: "#9de219",
},
{
category: "Europe",
value: -16.1,
color: "#90cc38",
},
{
category: "Latin America",
value: 11.3,
color: "#068c35",
},
{
category: "Africa",
value: -9.6,
color: "#006634",
},
{
category: "Middle East",
value: 5.2,
color: "#004d38",
},
{
category: "North America",
value: 3.6,
color: "#033939",
},
],
},
],
tooltip: {
visible: true,
template: function (e) {
return e.dataItem.value;
},
},
});
}
$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>