Установка ширины и высоты

Я пробую пример кода для Chart.js, приведенный в документации .

Ширина и высота указываются в элементе холста в размере 400 пикселей / 400 пикселей.

Но при рендеринге диаграммы он увеличивается до полной ширины страницы и обрезает дальний правый конец.

См. Пример

Как / где я должен контролировать ширину / высоту диаграммы?

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

Вы можете изменить ширину стиля холста! Important ...

canvas{

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

}

также

укажите responsive:true,свойство под опциями ..

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

обновление при добавленных опциях: maintainAspectRatio: false,

ссылка: http://codepen.io/theConstructor/pen/KMpqvo

Вы также можете просто окружить диаграмму контейнером (согласно официальному документу 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
}

и с опциями

responsive:true
maintainAspectRatio: false

В моем случае переход responsive: falseпо опциям решил проблему. Я не уверен, почему все говорят вам делать обратное, тем более что по умолчанию true.

У меня тоже работает

responsive:true
maintainAspectRatio: false


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

Благодарю вас

Я не могу поверить, что никто не говорил об использовании относительного родительского элемента.

Код:

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

Источники: Официальная документация.

Не упомянуто выше, но использование max-widthили max-heightна элементе холста также возможно.

Приведенное ниже сработало для меня, но не забудьте указать это в параметре «Параметры».

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

В моем случае это помогло:

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

Вы можете изменить в aspectRatioсоответствии с вашими потребностями:

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

Используйте это, он отлично работает.

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

и под options,

responsive:true,