web-dev-qa-db-fra.com

Comment modifier la largeur des barres dans les graphiques à barres Chartjs 2

Quelqu'un peut-il me dire comment modifier la largeur des barres dans les graphiques à barres Chartjs 2? Il n'y a rien à ce sujet dans la documentation.

https://github.com/nnnick/Chart.js/tree/v2.0-dev/docsI ne sais pas quoi faire.

javascriptcanvaschartschart.js
16
VictorArcas

Notez qu'il semble y avoir des changements en cours. La configuration réelle dépend de la v2.0 que vous utilisez.

Pour la version 2.0.0-alpha

Définissez categorySpacing pour les xAxes. Vous pouvez le faire à l'échelle mondiale

Chart.defaults.bar.scales.xAxes[0].categorySpacing = 0

ou vous pouvez le faire par graphique

...
scales: {
    xAxes: [{
        categorySpacing: 0
    }],
...

Violon - http://jsfiddle.net/beehe4eg/

Pour la version 1.0.2

Ajustez les options barValueSpacing et barDatasetSpacing pour rapprocher les barres. Cela augmentera automatiquement leur largeur.

8
potatopeelings

Pour la version 2.4.0 barThickness - Définissez manuellement la largeur de chaque barre en pixels. S'ils ne sont pas définis, les barres sont dimensionnées automatiquement.

options = {
    scales: {
        xAxes: [{
            barThickness : 73
        }]
    }
}
30
Mihail Lebedev

Pour moi, en essayant la version bêta 2.0, ce qui a fonctionné a été de définir le barPercentage sur l'option d'échelle xAxes.

Voici ce que j'ai utilisé:

var options = {
    data: chartData,
    type: "bar",
    options: {
        scales: {
            xAxes: [{ barPercentage: 0.5 }]
        }
    }
};
var chart = new Chart(chartCtx, options);
16
py7133