'ChartJS Data-label cropped
I have a line chartJS chart with the datalabel plugin but the datalabel is cropped by the border of the canvas, is there a way to increase its z-index or something like that?
For example in this code (a cleaned-up version of the real code), I'm supposed to have 1234 as the last value but it only shows 12, and even 3 is cropped. I would like to display it on top of the white border or maybe translate it a few pixels to the left automatically if it can't fit here (I don't care if a bit of the number border is cropped while the number isn't)
Chart.register(ChartDataLabels); // Import the data-labels plugin
graphItop4 = new Chart(document.getElementById("mois"), {
type: "line",
data: {
labels: [1, 2],
datasets: [{
label: "1",
fill: true,
data: [0, 1234],
backgroundColor: "rgba(0, 0, 255, 0.2)",
borderColor: "blue",
borderWidth: 1,
datalabels: {
align: 'start',
}
},
]
},
options: {
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor.replace("0.2", "0.5");
},
borderRadius: 100,
color: 'white',
font: {
weight: 'bold',
size: '15'
},
formatter: Math.round,
padding: 5,
}
},
},
})
body {
font-family: "Arial", Helvetica, sans-serif;
display: flex;
margin: 18px;
padding: 0;
background-color: #ccc;
}
.case {
position: relative;
padding: 10px;
text-align: center;
border-radius: 10px;
min-height: 240px;
background-color: #fff;
}
h2 {
font-size: 1.4em;
margin: 0;
padding: 10px 20px;
border-radius: 10px;
background-color: lightgrey;
}
<div class="case">
<h2>Mois</h2>
<div>
<canvas height="270" id="mois" width="600"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
