Definir altura do gráfico no Chart.js

Eu quero desenhar um gráfico de barras horizontal com o Chart.js, mas ele continua dimensionando o gráfico em vez de usar a altura que atribuo à tela do script.

Existe alguma maneira de definir a altura do gráfico a partir do script?

Veja o violino: 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
                }
            }]
        }
    }
});

Parece que var ctx = $('#myChart');está retornando uma lista de elementos. Você precisaria referenciar o primeiro usando ctx[0]. A altura também é uma propriedade, não uma função.

Fiz dessa maneira no meu código:

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

Se você desativar a proporção de aspecto de manutenção nas opções, ela usará a altura disponível:

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

A maneira mais fácil é criar um contêiner para a tela e definir sua altura:

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

E definir

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Você pode agrupar seu elemento de tela em uma div pai, relativamente posicionada, e então fornecer a div a altura desejada, definindo keepAspectRatio: false em suas opções

//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>

Este funcionou para mim:

Eu defino a altura do 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"]

Então eu desabilitei para manter a proporção

options: {
  responsive: true,
  maintainAspectRatio: false,

Ele tem razão. Se você quiser ficar com o jQuery, poderá fazer isso

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

ou

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

Defina a propriedade aspectRatio do gráfico como 0 fez o truque para mim ...

    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;

Você deve usar o atributo de altura html para o elemento canvas como:

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

Criei um contêiner e configurei a altura desejada da porta de visualização (dependendo do número de gráficos ou tamanhos específicos de gráficos):

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

Para ser dinâmico em tamanhos de tela, defino o contêiner da seguinte maneira:

*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;
    }
}

É claro que muito importante (como já foi mencionado várias vezes) defina as seguintes optionpropriedades do seu gráfico:

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

Você também pode definir as dimensões para a tela

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

E defina as opções responsivas como false para sempre manter o gráfico no tamanho especificado.

options: {
    responsive: false,
}

Precisava que o gráfico preenchesse o elemento pai 100%, em vez de definir a altura manualmente, e o problema era forçar a divisão pai a preencher sempre o espaço restante.

Após definir as opções de resposta e proporção (consulte o documento chartjs relacionado ), o seguinte css fez o truque:

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;
  }
}

Apenas para adicionar à resposta dada por @numediaweb

Caso você esteja batendo com a cabeça na parede, porque depois de seguir as instruções para definir maintainAspectRatio=false: originalmente eu copiei meu código de um exemplo que recebi em um site usando o Chart.js com Angular 2+:

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

Para fazer isso funcionar corretamente, você deve remover o incorporado (e desnecessário) style="display: block" Em vez disso, defina uma classe para a div envolvente e defina sua altura no CSS.

Depois de fazer isso, o gráfico deve ter largura responsiva, mas altura fixa.