javascript - Establecer la altura del gráfico en Chart.js

Quiero dibujar un gráfico de barras horizontal con Chart.js pero sigue escalando el gráfico en vez de usar la altura que asigno al lienzo del guion.

¿Hay alguna forma de establecer la altura del gráfico desde el script?

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<div class="graph">
  <div class="chart-legend">

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

Ver el código en fiddle: Jsfiddle

Respuesta #1

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

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

Respuesta #2

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 conjunto

options: {  
    responsive: true,
    maintainAspectRatio: false
}

Respuesta #3

Parece que var ctx=$ ('#myChart'); está devolviendo una lista de elementos. Necesitarías hacer referencia al primero usando ctx[0]. Además, height es una propiedad, no una función.

Lo hice así en mi código:

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

Respuesta #4

Puedes envolver tu elemento de lienzo en un div padre, relativamente posicionado, y luego darle a ese div la altura que quieras, configurando maintainAspectRatio: false en tus 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>

Respuesta #5

Este funcionó para mí:

Establecí 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 desactivé mantener la proporción

options: {
  responsive: true,
  maintainAspectRatio: false,

Respuesta #6

También puedes establecer las dimensiones del lienzo

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

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

options: {
    responsive: false,
}