Quiero mostrar datos en el gráfico js (versión 3.7.1) con un gráfico de barras horizontales. Los datos se están cargando desde el backend. Mi problema es con el ancho de la barra. Cuando tengo pocos discos, las barras son muy gruesas. 1 Cuando tengo muchos registros (por ejemplo 1000) las barras son muy estrechas y falta etiqueta. 2 ¿Cómo se puede ver en las imágenes. Me gustaría tener todavía el mismo ancho para las barras y, si hay muchos registros, habilitar el desplazamiento.
Ahí está mi código:
createConfig(config: ChartConfigDto): ChartConfiguration { return { type: 'bar', data: { labels: config.labels, datasets: config.datasets.map((dataset, index) => ({ label: dataset.label, backgroundColor: `${CHART_COLORS[index]}`, borderColor: `${CHART_COLORS[index]}`, data: dataset.data, barThickness: 'flex', })) }, options: { indexAxis: 'y', plugins: { title: { display: true, text: 'Sites', }, legend: { position: 'top', }, }, responsive: true, scales: { x: { stacked: true, position: 'top', }, y: { stacked: true, grid: { display: false, }, } }, }, } } <div class="modal-body"> <canvas appChart [config]="config"></canvas> </div>Gracias por ayudar
Hay dos propiedades que puede usar para lograrlo.
Puede usar la propiedad maxBarThickness en el conjunto de datos.
Aquí adjunto demo de Stackblitz