Définir la hauteur du graphique dans Chart.js

Question

Je veux dessiner un graphique à barres horizontales avec Chart.js mais il continue de dimensionner le graphique au lieu d'utiliser la hauteur que j'attribue au canvas depuis le script.

Y a-t-il un moyen de définir la hauteur du graphique à partir du script ?

Voir fiddle : Jsfidle

HTML

JavaScript

var ctx = $('#myChart');

ctx.height(500);

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Rouge", "Bleu", "Jaune", "Vert", "Violet", "Orange"],
        datasets: [{
            label: '# de Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    maintainAspectRatio: false,
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

Answer 1

Si vous désactivez le maintien du rapport hauteur/largeur dans les options, alors il utilise la hauteur disponible :

var chart = new Chart('blabla', {
                type: 'bar',
                data: {
                },
                options: {
                    maintainAspectRatio: false,
                }
            });

Answer 2

La manière la plus simple est de créer un conteneur pour le canvas et de définir sa hauteur :

et définir

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Answer 3

Il semble que var ctx = $('#myChart'); renvoie une liste d'éléments. Vous devriez faire référence au premier en utilisant ctx[0]. De plus, height est une propriété, pas une fonction.

Je l'ai fait de cette façon dans mon code :

var ctx = document.getElementById("myChart");
ctx.height = 500;

Answer 4

Vous pouvez envelopper votre élément canvas dans une div parent, positionnée de manière relative, puis donner à cette div la hauteur souhaitée, en définissant maintainAspectRatio: false dans vos options

//HTML

new Chart(somechart, {
options: {
    responsive: true,
    maintainAspectRatio: false

/*, vos autres options*/

}
});

Answer 5

Celui-ci a fonctionné pour moi :

J'ai défini la hauteur depuis le HTML

canvas#scoreLineToAll.ct-chart.tab-pane.active[height="200"]
canvas#scoreLineTo3Months.ct-chart.tab-pane[height="200"]
canvas#scoreLineToYear.ct-chart.tab-pane[height="200"]

Ensuite, j'ai désactivé le maintien du rapport hauteur/largeur

options: {
  responsive: true,
  maintainAspectRatio: false,