I've been exploring how to prevent chartjs from cutting off its tooltips, but I haven't been able to find a config option to address this issue.
https://i.sstatic.net/Knzvd.png
Here's what I've attempted so far:
<script>
$(document).ready(function() {
var doughnutData = [
{
value: 48.3,
color: "#81d7d8",
highlight: "#23c6c8",
label: "Accepted"
},
{
value: 20.7,
color: "#f58894",
highlight: "#d9534f",
label: "Denied"
},
{
value: 31,
color: "#f5c592",
highlight: "#f8ac59",
label: "Pending"
}
];
var doughnutOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 45, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
fullWidth: true
};
var ctx = document.getElementById("doughnutChart").getContext("2d");
var DoughnutChart = new Chart(ctx).Doughnut(doughnutData, doughnutOptions);
});
</script>
My HTML code for the relevant section is as follows:
<div class="col-lg-3">
<div class="ibox float-e-margins">
<div class="ibox-content">
<canvas id="doughnutChart" width="95" height="95" style="width: 95px; height: 95px;"></canvas>
</div>
</div>
</div>
Can anyone provide some guidance on what I may be overlooking here?