JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Removing Labels Below Threshold Value"
},
data: [
{
type: "pie",
dataPoints: [
{ y: 26, label: "School Aid", color: "red" },
{ y: 20, label: "Medical Aid", color: "yellow" },
{ y: 5, label: "Debt/Capital", color: "orange" },
{ y: 3, label: "Elected Officials", color: "green" },
{ y: 7, label: "University", color: "aqua" },
{ y: 17, label: "Executive", color: "olive" },
{ y: 22, label: "Other Local Assistance", color: "black"}
]
}
]
});
chart.options.data[0].dataPoints = updateDataPoints(chart);
chart.render();
function updateDataPoints(chart){
var dps = chart.options.data[0].dataPoints;
var threshold = 15;
var updatedDataPoints = [];
for(var i = 0; i < dps.length; i++) {
if(dps[i].y > threshold)
updatedDataPoints.push(dps[i]);
else
updatedDataPoints.push(_objectWithoutProperties(dps[i], "label"));
}
return updatedDataPoints;
}
function _objectWithoutProperties(obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
}