Establecer la altura del gráfico en Chart.js

Quiero dibujar un gráfico de barras horizontales con Chart.js pero sigue escalando el gráfico en lugar de usar la altura que le asigno al lienzo del script.

¿Hay alguna forma de establecer la altura del gráfico a partir del script?

Ver violín: 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á devolviendo una lista de elementos. Debería hacer referencia a la primera mediante ctx[0]. También la altura es una propiedad, no una función.

Lo hice de esta manera en mi código:

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

Si desactiva la relación de aspecto de mantenimiento en las opciones, entonces usa la altura disponible:

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

La forma más fácil es crear un contenedor para el lienzo y establecer su altura:

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

y establecer

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Puede envolver su elemento de lienzo en un div padre, relativamente posicionado, luego darle a ese div la altura que desee, estableciendo keepAspectRatio: false en sus opciones

//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 me funcionó:

Establezco la altura desde 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"]

Luego lo deshabilité para mantener la relación de aspecto

options: {
  responsive: true,
  maintainAspectRatio: false,

El tiene razón. Si quieres quedarte con jQuery puedes hacerlo

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

o

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

Establecer la propiedad AspectRatio de la tabla a 0 hizo el truco para mí ...

    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;

Debe usar el atributo de altura html para el elemento de lienzo como:

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

Creé un contenedor y lo configuré en la altura deseada del puerto de vista (dependiendo del número de gráficos o tamaños específicos de gráficos):

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

Para ser dinámico a los tamaños de pantalla, configuro el contenedor de la siguiente manera:

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

Por supuesto, es muy importante (como se ha mencionado en numerosas ocasiones) establecer las siguientes optionpropiedades de su gráfico:

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

También puede establecer las dimensiones en el lienzo.

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

Y luego configure las opciones de respuesta en falso para mantener siempre el gráfico en el tamaño especificado.

options: {
    responsive: false,
}

Necesitaba el gráfico para llenar el elemento primario al 100%, en lugar de establecer la altura manualmente, y el problema era obligar al div primario a llenar siempre el espacio restante.

Después de configurar las opciones de respuesta y proporción (consulte el documento chartjs relacionado ), el siguiente CSS hizo el truco:

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

Solo para agregar a la respuesta dada por @numediaweb

En caso de que te golpees la cabeza contra la pared porque después de seguir las instrucciones para configurar maintainAspectRatio=false: Originalmente copié mi código de un ejemplo que obtuve en un sitio web sobre el uso de Chart.js con Angular 2+:

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

Para que esto funcione correctamente, debe eliminar el incrustado (e innecesario) style="display: block" En su lugar, defina una clase para el div que lo encierra y defina su altura en CSS.

Una vez que haga eso, el gráfico debe tener un ancho sensible pero una altura fija.