0
341
VistasChartJS Barras horizontales apenas visibles con 50 registros en el eje Y
¿Hay alguna manera de establecer el grosor vertical de las barras horizontales en ChartJS (3.7.0)? ¿O cambiar el nivel de zoom o algo así?
Tengo un conjunto de registros con 50 filas que deberían mostrar 50 barras horizontales. Sin embargo, cuando se representa el gráfico. Las líneas que representan las barras horizontales son apenas visibles.
Estoy usando esta configuración:
const config = { type: 'bar', data: chart_data, options: { maintainAspectRatio: false, scales: { yAxes: [{ barThickness: 20, // number (pixels) or 'flex' maxBarThickness: 22 // number (pixels) }] }, indexAxis: 'y', plugins: { legend: { position: 'right', }, } } };También estoy configurando la barra y el grosor máximo en cada conjunto de datos. También establezca la altura del elemento principal <div> que alberga la etiqueta <canvas> en un valor grande de 3200 px.
Gracias
1 Respuestas
Responde la pregunta0
Sin ver más de su código, es casi imposible averiguar por qué el grosor de las barras en su gráfico no es el esperado.
Sin embargo, vale la pena conocer los siguientes puntos cuando se trabaja con Chart.js v3:
-
scales.[x/y]Axes.barThicknessse movió a la opción de conjunto de datosbarThickness -
scales.[x/y]Axes.maxBarThicknessse movió a la opción de conjunto de datosmaxBarThickness
Se pueden encontrar más detalles en la Guía de migración 3.x o en la documentación de Chart.js v3aquí .
Eche un vistazo a la secuencia de comandos ejecutable a continuación y vea cómo se podría hacer en su caso.
const data = [...Array(50)].map(e => ~~(Math.random() * 20 + 1)); const colors = ['255, 99, 132', '54, 162, 235', '255, 206, 86', '231, 233, 237', '75, 192, 192', '151, 187, 205', '220, 220, 220', '247, 70, 74', '70, 191, 189', '253, 180, 92', '148, 159, 177', '77, 83, 96']; new Chart('chart', { type: 'bar', plugins: [{ beforeLayout: chart => chart.options.scales.y1.labels = chart.data.datasets.filter((ds, i) => !chart.getDatasetMeta(i).hidden).map(ds => ds.label) }], data: { datasets: data.map((v, i) => ({ label: i + 1, data: [{ x: v, y: i }], backgroundColor: 'rgba(' + colors[i % colors.length] + ', 0.4)', borderColor: 'rgb(' + colors[i % colors.length] + ')', borderWidth: 1, categoryPercentage: 1 })) }, options: { indexAxis: 'y', plugins: { legend: { position: 'right', }, tooltip: { callbacks: { title: () => undefined } } }, scales: { y: { }, y1: { offset: true, gridLines: { display: false } } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script> <canvas id="chart" height="600"></canvas>