chart.js - bottom - pointstyle chart js

Ajuste ancho y alto

Question

Estoy probando el código de ejemplo para Chart.js que figura en los documentos .

El ancho y la altura se especifican en línea en el elemento del lienzo a 400px / 400px.

Pero cuando se procesa el gráfico, se amplía hasta el ancho completo de la página y se corta el extremo derecho.

Ver ejemplo

¿Cómo / dónde se supone que debo controlar el ancho / alto del gráfico?

This is some bogus text because SO prohibits linking to Codepen otherwise.

Answer 1

¡Puedes anular el ancho del estilo del lienzo! Importante ...

canvas{
width:1000px !important;
height:600px !important;
}

además

Especifique responsive:true, propiedad en opciones ..

options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}

actualizar bajo las opciones agregadas: maintainAspectRatio: false,

enlace: http://codepen.io/theConstructor/pen/KMpqvo

Answer 2

En mi caso, pasar responsive: false bajo opciones resolvió el problema. No estoy seguro de por qué todo el mundo le está diciendo que haga lo contrario, especialmente porque verdadero es el valor predeterminado.

Answer 3

Funciona para mi

responsive:true
maintainAspectRatio: false

Gracias

Answer 4

También puede simplemente rodear el gráfico con el contenedor (según el documento oficial http://www.chartjs.org/docs/latest/general/responsive.html#important-note )

<div class="chart-container">
<canvas id="myCanvas"></canvas>
</div>

CSS

.chart-container {
width: 1000px;
height:600px
}

y con opciones

responsive:true
maintainAspectRatio: false

Answer 5

Trabaja para mi tambien

responsive:true
maintainAspectRatio: false
<div class="row">
<div class="col-xs-12">
<canvas id="mycanvas" width="500" height="300"></canvas>
</div>
</div>

Gracias

Answer 6

Usa esto, funciona bien.

<canvas id="totalschart" style="height:400px;width: content-box;"></canvas>

y bajo options ,

responsive:true,