Setting Minimum Width in a Pie Chart when Values are too Small - CanvasJS JavaScript Charts
Setting Minimum Width in a Pie Chart when Values are too Small - CanvasJS JavaScript Charts
by canvasjs
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", {
data: [{
type: "doughnut",
dataPoints: [
{ y: 1071 },
{ y: 1055 },
{ y: 1950 },
{ y: 765 },
{ y: 595 },
{ y: 368 },
{ y: 828 },
{ y: 1 },
{ y: 73 }
]
}]
});
setMinimumWidth();
chart.render();
function setMinimumWidth() {
var min = 50;
var sumOfDataPoints = 0;
var percentageOfIndividualDataPoints = [];
for (var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
sumOfDataPoints = sumOfDataPoints + chart.options.data[0].dataPoints[i].y;
}
for (var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
percentageOfIndividualDataPoints[i] = (chart.options.data[0].dataPoints[i].y / sumOfDataPoints) * 100;
}
for (var i = 0; i < percentageOfIndividualDataPoints.length; i++) {
if (percentageOfIndividualDataPoints[i] <= 5) {
chart.options.data[0].dataPoints[i].originalValue = chart.options.data[0].dataPoints[i].y;
chart.options.data[0].dataPoints[i].toolTipContent = "{originalValue}";
chart.options.data[0].dataPoints[i].y += min;
}
}
}