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,