Configurando largura e altura

Estou testando o código de exemplo para Chart.js fornecido na documentação .

A largura e a altura são especificadas em linha no elemento da tela em 400px / 400px.

Mas, ao renderizar o gráfico, ele é ampliado para a largura da página inteira e corta a extremidade direita.

consultar exemplo

Como / onde devo controlar a largura / altura do gráfico?

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

Você pode substituir a largura do estilo da tela! Importante ...

canvas{

  width:1000px !important;
  height:600px !important;

}

Além disso

especifique a responsive:true,propriedade nas opções.

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

atualizar nas opções adicionadas: maintainAspectRatio: false,

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

Você também pode simplesmente circundar o gráfico com o contêiner (de acordo com o 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
}

e com opções

responsive:true
maintainAspectRatio: false

No meu caso, passar responsive: falsepor opções resolveu o problema. Não sei por que todo mundo está dizendo para você fazer o oposto, especialmente porque true é o padrão.

Funciona para mim também

responsive:true
maintainAspectRatio: false


<div class="row">
        <div class="col-xs-12">
            <canvas id="mycanvas" width="500" height="300"></canvas>
        </div>
    </div>

Obrigado

Não posso acreditar que ninguém falou sobre o uso de um elemento pai relativo.

Código:

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

Fontes: documentação oficial

Não mencionado acima, mas usar max-widthou max-heightno elemento canvas também é uma possibilidade.

O abaixo funcionou para mim - mas não se esqueça de colocar isso no parâmetro "opções".

var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
    maintainAspectRatio: false,
    responsive:true,
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

Isso ajudou no meu caso:

options: {
    responsive: true,
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                min:0,
                max:100
            }
        }]
    }
}

Você pode alterar o de aspectRatioacordo com suas necessidades:

options:{
     aspectRatio:4 //(width/height)
}

Use isso, funciona bem.

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

e abaixo options,

responsive:true,