Comment raccourcir l’étiquette Chart.js

Le problème auquel je suis confronté est que j’ai deux graphiques, créés avec Chart.js , qui contiennent des descriptions d’étiquettes dynamics. Si certaines descriptions d’étiquettes sont trop longues, le graphique devient plus petit, mais j’ai besoin que les deux graphiques contiennent la même hauteur.

Comment puis-je configurer Chart.js pour raccourcir les étiquettes et Chart.js une étiquette complète comme un titre HTML lorsque la souris survole la souris, afin de conserver la hauteur de la zone d’étiquette?

Ce dont j’ai besoin, c’est de maintenir la hauteur de la surface du graphique, quelle que soit la longueur de l’étiquette.

 var options = { //maintainAspectRatio: false, responsive:true, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } }; var ctx = document.getElementById("myCanvas1"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue yjfid ", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: options }); var ctx = document.getElementById("myCanvas2"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: options }); 
 div{ display: inline-block; width: 49%; } 
      JS Bin     

Sur cette souris, vous pouvez voir une info-bulle indiquant le nom complet de l’étiquette.

 var options = { scales: { xAxes: [{ ticks: { callback: function(value) { if (value.length > 4) { return value.substr(0, 4) + '...'; //truncate } else { return value } }, } }], yAxes: [{}] }, tooltips: { enabled: true, mode: 'label', callbacks: { title: function(tooltipItems, data) { var idx = tooltipItems[0].index; return 'Title:' + data.labels[idx]; //do something with title }, label: function(tooltipItems, data) { //var idx = tooltipItems.index; //return data.labels[idx] + ' €'; return tooltipItems.xLabel + ' €'; } } }, }; var ctx = document.getElementById("myCanvas1"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue mbkjbjkbjlkbk", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: options }); var ctx = document.getElementById("myCanvas2"); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: options }); 
 div { display: inline-block; width: 49%; } 
      JS Bin