Définir la hauteur du graphique dans Chart.js

Je veux dessiner un graphique à barres horizontales avec Chart.js, mais il continue à mettre à l'échelle le graphique au lieu d'utiliser la hauteur que j'attribue au canevas du script.

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

Voir violon: Jsfidle

HTML

<div class="graph">
  <div class="chart-legend">

  </div>
  <div class="chart">
    <canvas id="myChart"></canvas>
  </div>
</div>

JavaScript

var ctx = $('#myChart');

ctx.height(500);

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of 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
                }
            }]
        }
    }
});

On dirait qu'il var ctx = $('#myChart');renvoie une liste d'éléments. Vous devez référencer le premier en utilisant ctx[0]. La hauteur est également 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;

Si vous désactivez le maintien des proportions dans les options, il utilise la hauteur disponible:

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

Le moyen le plus simple est de créer un conteneur pour le canevas et de définir sa hauteur:

<div style="height: 300px">
  <canvas id="chart"></canvas>
</div>

Et mettre

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Vous pouvez envelopper votre élément de canevas dans un div parent, positionné de manière relative, puis donner à ce div la hauteur souhaitée, en définissant keepAspectRatio: false dans vos options

//HTML
<div id="canvasWrapper" style="position: relative; height: 80vh/500px/whatever">
<canvas id="chart"></canvas>
</div>

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

/*, your other options*/

}
});
</script>

Celui-ci a fonctionné pour moi:

J'ai défini la hauteur à partir du 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é pour maintenir le rapport hauteur / largeur

options: {
  responsive: true,
  maintainAspectRatio: false,

Il a raison. Si vous voulez rester avec jQuery, vous pouvez le faire

var ctx = $('#myChart')[0];
ctx.height = 500;

ou

var ctx = $('#myChart');
ctx.attr('height',500);

Définir la propriété aspectRatio du graphique sur 0 a fait l'affaire pour moi ...

    var ctx = $('#myChart');

    ctx.height(500);

    var myChart = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of 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
                    }
                }]
            }
        }
    });
myChart.aspectRatio = 0;

Vous devez utiliser l'attribut html height pour l'élément canvas comme:

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>

J'ai créé un conteneur et l'ai défini à la hauteur souhaitée du port de vue (en fonction du nombre de graphiques ou de tailles spécifiques aux graphiques):

.graph-container {
width: 100%;
height: 30vh;
}

Pour être dynamique aux tailles d'écran, j'ai défini le conteneur comme suit:

*Small media devices specific styles*/
@media screen and (max-width: 800px) {
.graph-container {
        display: block;
        float: none;
        width: 100%;
        margin-top: 0px;
        margin-right:0px;
        margin-left:0px;
        height: auto;
    }
}

Bien sûr, il est très important (comme cela a été mentionné à plusieurs reprises) de définir les optionpropriétés suivantes de votre graphique:

options:{
    maintainAspectRatio: false,
    responsive: true,
}

Vous pouvez également définir les dimensions du canevas

<canvas id="myChart" width="400" height="400"></canvas>

Ensuite, définissez les options réactives sur false pour toujours conserver le graphique à la taille spécifiée.

options: {
    responsive: false,
}

Il fallait que le graphique remplisse l'élément parent à 100%, plutôt que de définir la hauteur manuellement, et le problème était de forcer le div parent à toujours remplir l'espace restant.

Après avoir défini les options responsive et ratio (consultez la documentation relative à chartjs ), le css suivant a fait l'affaire:

html

<div class="panel">
  <div class="chart-container">
    <canvas id="chart"></canvas>
  </div>
</div>

scss:

.panel {
  display: flex;

  .chart-container {
    position: relative;
    flex-grow: 1;
    min-height: 0;
  }
}

Juste pour ajouter à la réponse donnée par @numediaweb

Au cas où vous vous cogneriez la tête contre le mur parce qu'après avoir suivi les instructions pour définir maintainAspectRatio=false: j'ai initialement copié mon code à partir d'un exemple que j'ai obtenu sur un site Web sur l'utilisation de Chart.js avec Angular 2+:

        <div style="display: block">
          <canvas baseChart
                  [datasets]="chartData"
                  [labels]="chartLabels"
                  [options]="chartOptions"
                  [legend]="chartLegend"
                  [colors]="chartColors"
                  [chartType]="chartType">
          </canvas>
        </div>

Pour que cela fonctionne correctement, vous devez supprimer les éléments incorporés (et inutiles). style="display: block" Définissez plutôt une classe pour le div englobant et définissez sa hauteur en CSS.

Une fois que vous faites cela, le graphique doit avoir une largeur réactive mais une hauteur fixe.