Estoy trabajando con charts.js pero tengo un problema. Mi leyenda y el valor del gráfico de barras se superponen un poco.
No puedo resolver este problema, se agradecería si hay una solución a este problema
He compartido el enlace de violín JS a continuación
https://jsfiddle.net/qh0yzmjf/1/
var ctx = document.getElementById("canvas").getContext("2d"); var nomi = [2017, 2018, 2019]; var myChart = new Chart(ctx, { type: 'bar', data: { labels: nomi, datasets: [{ label: 'PP PERVENUTI', data: [50, 30, 45], backgroundColor: "#8A0808", fill: false, borderColor: "#8A0808", borderWidth: 3 }, { label: 'PP EVASI', data: [60, 45, 12], backgroundColor: "#0B610B", fill: false, borderColor: "#0B610B", borderWidth: 3 }, { label: 'PI PERVENUTI', data: [20, 25, 35], backgroundColor: "#8A0886", fill: false, borderColor: "#8A0886", borderWidth: 3 }, { label: 'PI EVASI', data: [10, 20, 30], backgroundColor: "#0404B4", fill: false, borderColor: "#0404B4", borderWidth: 3 } ] }, options: { legend: { display: true, position: "top" }, hover: { animationDuration: 0 }, animation: { onComplete: function() { var ctx = this.chart.ctx; const chart = this.chart; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); ctx.fillStyle = "black"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; this.data.datasets.forEach(function(dataset, i) { if (chart.getDatasetMeta(i).hidden) { return; } for (var i = 0; i < dataset.data.length; i++) { for (var key in dataset._meta) { var model = dataset._meta[key].data[i]._model; ctx.fillText(dataset.data[i], model.x, model.y); } } }); } } } });También he compartido mi código arriba
No sé cómo crear espacio entre la leyenda y el gráfico, y la ayuda será apreciada gracias
Si no me equivoco, no hay una configuración construida por chart js para poner relleno entre las etiquetas y el gráfico, aunque el relleno a las etiquetas se aplica en formato de trabajo, esto significa que chart js aplica relleno entre etiquetas, por otro lado. Por otro lado, puede aplicar relleno entre el título del gráfico y las etiquetas.
Si desea un relleno entre el título del gráfico y el gráfico, puede usar el siguiente código:
plugins: { title: { display: true, text:'Historico Mensual', }, legend: { labels: { padding: 100 } } },Otra solución podría ser cambiar la posición de las etiquetas hacia abajo con el siguiente código:
options: { legend: { display: true, position: "bottom" },Y agregando un relleno de diseño para que los valores no salgan del lienzo.
options: { layout:{ padding:20 } },