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

jquery

Question

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

¿Hay alguna forma de establecer la altura del gráfico desde el 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
                }
            }]
        }
    }
});

Answer 1

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

Answer 2

Establecer la propiedad AspectRatio del gráfico en 0 me sirvió ...

    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;

Answer 3

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,

Answer 4

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
}

Answer 5

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;

Answer 6

Puede envolver su elemento de lienzo en un div principal, 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>

Answer 7

Si deshabilita 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,
                }
            });

Answer 8

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 estilo 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.