Estoy utilizando chartjs para mostrar unas gráficas y tengo un problema y es que el canvas donde tengo la gráfica se hace demasiado alto.
En el mismo proyecto en desarrollo se ve correctamente, en la réplica del proyecto que tenemos para hacer test se ve bien igualmente pero en producción la gráfica se ve enorme.
Éste es el código de la plantilla:
<div class="text-center">
<h3>{{ almacen }}</h3>
</div>
<canvas id="myChart" class="col-md-8 centrar-div" height="300"></canvas>
<table class="table table-striped table-bordered table-hover dt-responsive dt-bootstrap" id="tabla_ventas_anuales_almacen" width="100%">
<thead>
<tr>
<th>{{ "Anyo"|trans }}</th>
<th>{{ "01"|trans }}</th>
<th>{{ "02"|trans }}</th>
<th>{{ "03"|trans }}</th>
<th>{{ "04"|trans }}</th>
<th>{{ "05"|trans }}</th>
<th>{{ "06"|trans }}</th>
<th>{{ "07"|trans }}</th>
<th>{{ "08"|trans }}</th>
<th>{{ "09"|trans }}</th>
<th>{{ "10"|trans }}</th>
<th>{{ "11"|trans }}</th>
<th>{{ "12"|trans }}</th>
<th>{{ "Total"|trans }}</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<strong class="pull-right">{{ anyo }}</strong><br>
<strong class="pull-right">{{ anyoant }}</strong>
</td>
{% for cont in 1..12 %}
<td>
<strong class="pull-right {% if datos[cont] < datosant[cont] %}rojo{% else %}verde{% endif %}">{{ datos[cont]|number_format(2, ',','.') }}</strong><br>
<strong class="pull-right ">{{ datosant[cont]|number_format(2, ',','.') }}</strong><br>
</td>
{% endfor %}
<td>
<strong class="pull-right {% if total < totalant %}rojo{% else %}verde{% endif %}">{{ total|number_format(2, ',','.') }}</strong><br>
<strong class="pull-right ">{{ totalant|number_format(2, ',','.') }}</strong>
</td>
</tr>
</tbody>
</table>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [
'{{ "01"|trans }}',
'{{ "02"|trans }}',
'{{ "03"|trans }}',
'{{ "04"|trans }}',
'{{ "05"|trans }}',
'{{ "06"|trans }}',
'{{ "07"|trans }}',
'{{ "08"|trans }}',
'{{ "09"|trans }}',
'{{ "10"|trans }}',
'{{ "11"|trans }}',
'{{ "12"|trans }}'
],
datasets: [{
label: '{{ anyo }}',
data: [
{% for dato in datos %}
parseFloat({{ dato }}),
{% endfor %}
],
backgroundColor: "rgba(0, 0, 0, 0)",
borderColor: "rgb(204,127,0)"
}, {
label: '{{ anyoant }}',
data: [
{% for dato in datosant %}
parseFloat({{ dato }}),
{% endfor %}
],
backgroundColor: "rgba(0, 0, 0, 0)",
borderColor: "rgb(0,202,214)"
}]
}
});
</script>
height="300"
a 150 en<canvas>
te cambia el alto (?)