I am using ChartJs to graph some values in a Bar chart, what happens is that I am trying to show these values in a label with the datalabels plugin , so far so good, however one of the values of the graph when it is done more large the value comes out of the "Canvas" and I can't see it correctly.
I have already tried to modify the Height of the canvas but that does not solve it, what it does is that it stretches the graphic.
What I have researched:
If the legend is shown Options > Legend, then it creates a box above the bars and everything is displayed as I want, the problem is that I already tried to change the color of that box, for example, to #fff
simulate that it is not there and it does not accept me the property as I see it in the Legend documentation | ChartJs
If the Legend is not displayed on the chart, then the problem occurs that the values of the chart go out of the canvas and are not displayed.
I would like the legend to be hidden but also my chart to be displayed as it is when it is active.
options: {
legend :{
display:false,
labels:{
color:'#fff'
}
}...
Example code:
let ctx = document.getElementById('myChart');
let myChart = null;
// valores por defecto en la grafica
crearGrafica(3000, 8000);
function cargar() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 & this.status == 200) {
let obj = JSON.parse(xhttp.responseText);
//Create the graph
crearGrafica(4000, 5000);
}
};
xhttp.open("GET", "livenumbers.json", true);
xhttp.send();
}
function crearGrafica(valor1, valor2) {
// Si ya se creó la gráfica
if (myChart !== null) {
// Destruir para poder crear nuevamente
myChart.destroy();
}
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Valor1', 'Valor2'],
datasets: [{
label: '',
data: [valor1, valor2],
minBarLength: 80,
barThickness: 100,
backgroundColor: [
'#322c83',
'#ea7123'
],
datalabels: {
color: '#000',
font: {
weight: 'bold',
},
formatter: (value, context) => {
return '$ ' + parseInt(value).toLocaleString('en-US');
},
//Aqui controlo la ubicacion de mis labels encima del grafico
anchor: 'end',
align: 'top',
offset: 0,
display: true
}
}]
},
options: {
//quisiera que la legenda estuviera oculta pero que tambien mi grafico se mostrara como quiero
legend :{
display:false,
labels:{
color:'#fff'
}
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
},
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false,
beginAtZero: true,
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
}
}]
}
},
});
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- for canvas chart -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<div class="row">
<div class="col-md-4">
<div class="container" style="text-align:center">
<span style="color:#000;font-weight:bold;font-size:18px;"> Mi grafica
</span>
</div>
</div>
<div class="col-md-8">
<canvas id="myChart" style="width:100%;max-width:700px;margin-top:10%"></canvas>
</div>
<br>
<div class="container" style="text-align:center">
</div>
</div>
I would appreciate any help,
One option is to manually set
padding
the valuetop
of the chart to prevent the values from goinglabels
off the canvas.PS : In this demo you
cartjs-plugin-datalabels
can see that they also solve it this way.