javascript - horizontal - gráfico js 2 cómo configurar el ancho de la barra

graficas javascript jquery

Question

Estoy usando la versión Chart js: 2.1.4 y no puedo limitar el ancho de la barra. Encontré dos opciones en stackoverflow

barPercentage: 0.5

o

categorySpacing: 0

Pero ninguno de los dos trabaja con la versión mencionada. ¿Hay alguna manera de resolver este problema sin modificar manualmente la biblioteca principal de chart.js?

Gracias

Answer 1

A partir de v2.7.2 se puede hacer por:

scales: {
  xAxes: [{
    maxBarThickness: 100,
  }],
}

Answer 2

Tenías razón: el atributo que tienes que editar es barPercentage .

Pero tal vez el error proviene de donde editaste el valor.

Como se puede ver en las opciones del gráfico de barras :

Nombre : barPercentage
- Tipo : Número
- Predeterminado : 0.9
- Descripción : El porcentaje (0-1) del ancho disponible de cada barra debe estar dentro del porcentaje de la categoría. 1.0 tomará todo el ancho de la categoría y pondrá las barras una al lado de la otra. Lee mas

El atributo se almacena realmente en scales.xAxes ( scales.xAxes " Opciones para xAxes ").

Así que solo tienes que editar tu gráfico de esta manera:

var options = { scales: { xAxes: [{ barPercentage: 0.4 }] } } Aquí hay un ejemplo completamente funcional con un ancho personalizado ( 0.2 ) para la barra:

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        label: "My First dataset",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderColor: "rgba(75,192,192,1)",
        data: [65, 59, 75, 81, 56, 55, 40],
    }]
};

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: ''bar'',
    data: data,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }],
            xAxes: [{
                // Change here
             barPercentage: 0.2
            }]
        }
    }
});

console.log(myChart);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.js"></script>
<canvas id="myChart"></canvas>

Actualización (Chart.js versión 2.2.0+)

Como se indica en la versión de lanzamiento 2.2.0 - Candidato 2 :

Mejoras

• Ahora puede configurar manualmente el grosor de una barra en un gráfico de barras. Use una nueva opción de barThickness en el eje correcto para establecer el grosor de una barra.
• Y así ...