Establecer la altura del gráfico en Chart.js

138

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

Respuestas:

71

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;
Riscie
fuente
55
@MattSaunders Está en píxeles.
Jonathan Lam el
334

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,
                }
            });
numediaweb
fuente
Sí! Funciona bien Gracias por este consejo Saludos cordiales hombre.
Sedat Kumcu
14
¿Por qué no es esta la respuesta aceptada? Funciona perfectamente
Tom Doodler
3
Curiosamente, si realiza destroy()el gráfico y luego lo crea de nuevo en el mismo lienzo por segunda vez, la altura del lienzo puede desordenarse después de la destrucción y debe volver a aplicarse antes de la creación. Sin embargo, puede evitar destruir y usar el updatemétodo en su lugar, si no cambia las opciones.
Gherman
55
¿Cómo hago que use la altura disponible pero también establezco una altura mínima?
Zapnologica
1
Tendría sentido explicar un poco lo que hace deshabilitar esta propiedad (excepto por lo que ya se discutió).
fgblomqvist
115

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
}
bibamann
fuente
21
Gracias por esto, la clave aquí es establecer maintainAspectRatioque falseen las opciones de la gráfica, de lo contrario el heightasignar a través del styleatributo será en realidad no tenga efecto.
Ben
2
La sugerencia de Ben es oro.
rubeonline
El valor predeterminado para la responsiveopción es true. Detalles: chartjs.org/docs/latest/general/…
Dem Pilafian
Gracias por aclarar que la heightpropiedad debe estar en un elemento padre y no en el lienzo
Savage
16

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>
Geoff Kendall
fuente
Según la documentación del sitio web Chart.js, este parece ser el enfoque correcto.
Ryan D
14

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,
ilusionista
fuente
6

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);
alivio de melone
fuente
¿Cuál es ese signo de dólar?
Tiberiu-Ionuț Stan
1
$ sign es un selector y un alias de jQuery
Andrei Erdoss el
4

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;
Franz Kiermaier
fuente
4

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

<div class="chart">
    <canvas id="myChart" height="100"></canvas>
</div>
Basharat Hussain
fuente
2

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,
}
HalfMens
fuente
2

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,
}
velval
fuente
1

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;
  }
}
ego
fuente
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.

Andrés
fuente