charts - graficas - Chart.js: espacio entre barras en el gráfico de barras horizontales

graficas html javascript

Question

gráfico de barras horizontales

  var barOptions_stacked1 = {
                tooltips: {
                    enabled: true
                },
                hover: {
                    animationDuration: 0
                },
                scales: {
                    xAxes: [{
                            ticks: {
                                beginAtZero: true,
                                fontFamily: "''Open Sans Bold'', sans-serif",
                                fontSize: 11
                            },
                            scaleLabel: {
                                display: false
                            },
                            gridLines: {
                            },
                            stacked: true
                        }],
                    yAxes: [{
                            barThickness: 20,
                            gridLines: {
                                display: false,
                                color: "#fff",
                                zeroLineColor: "#fff",
                                zeroLineWidth: 0
                            },
                            ticks: {
                                fontFamily: "''Open Sans Bold'', sans-serif",
                                fontSize: 11
                            },
                            stacked: true
                        }]
                },
                legend: {
                    display: true
                },
                pointLabelFontFamily: "Quadon Extra Bold",
                scaleFontFamily: "Quadon Extra Bold"
            };
            var ctx1 = document.getElementById("Chart1");
            var myChart1 = new Chart(ctx1, {
                type: ''horizontalBar'',
                data: {
                    labels: ["BU 5", "BU 4", "BU 3", "BU 2", "BU 1"],
                    datasets: [{
                            data: [727, 589, 537, 543, 574],
                            backgroundColor: "rgba(63,103,126,1)",
                            hoverBackgroundColor: "rgba(50,90,100,1)",
                            label: "newly request"
                        }, {
                            data: [238, 553, 746, 884, 903],
                            backgroundColor: "rgba(163,103,126,1)",
                            hoverBackgroundColor: "rgba(140,85,100,1)",
                            label: "in progress"
                        }, {
                            data: [1238, 553, 746, 884, 903],
                            backgroundColor: "rgba(63,203,226,1)",
                            hoverBackgroundColor: "rgba(46,185,235,1)",
                            label: "active"
                        }, {
                            data: [1338, 553, 746, 884, 903],
                            backgroundColor: "rgba(255,169,188,1)",
                            hoverBackgroundColor: "rgba(255,99,132,1)",
                            label: "in approval"
                        }, {
                            data: [1438, 553, 746, 884, 903],
                            backgroundColor: "rgba(136,202,247,1)",
                            hoverBackgroundColor: "rgba(54,162,235,1)",
                            label: "recycle"
                        }, {
                            data: [1538, 553, 746, 884, 903],
                            backgroundColor: "rgba(196,232,116,1)",
                            hoverBackgroundColor: "rgba(152,177,98,1)",
                            label: "reject"
                        }]
                },
                options: barOptions_stacked1
            });

<canvas id="Chart1"></canvas>

Cómo reducir el espacio entre barras. Probé categorySpacing, barValueSpacing ... ¡Pero nada funciona! Se ve bien en el ancho pequeño, pero cuando el ancho de la pantalla completa, aumenta la altura debido a la separación entre las barras. Css en línea para lienzo no funciona ya que está anulado por chartjs predeterminados. Además, no puedo establecer la altura del gráfico al inicializar el gráfico: ctx1.canvas.height = 300; ¡No funciona! enlace de enlace jsfiddle

Answer 1

El espaciado entre barras se puede eliminar estableciendo barPercentage y categoryPercentage en 1:

yAxes: [{ barPercentage: 1.0, categoryPercentage: 1.0, }],

Sin embargo, barThickness parece anular estas configuraciones. La única solución que he encontrado es establecer la altura del elemento padre del gráfico en un valor fijo, establecer la opción maintainAspectRatio en false y eliminar la opción barThickness .

NOTA: estoy usando angular-chart.js