Проблема с позиционированием радиолокационной диаграммы с использованием Chart.js ⇐ CSS

[Anonymous]

Я пытаюсь расположить радиолокационную диаграмму с помощьюchart.js. Моя диаграмма выводится с выравниванием по правому краю.

Я пробовал установить для контейнера ширину: 100 %, выравнивание текста: по центру и поле: 0 автоматически, но вывод по-прежнему неверно.

Код:

Код: Выделить всё

var ctx = document.getElementById("myChart").getContext('2d');

var marksData = {
labels: ["Digital Product Definition", "Digital Thread", "Digital Twin", "Digital Innovation Platform", "Top Performers", "Others"],
datasets: [{
label: "Your Company",
backgroundColor: "rgba(200,0,0,0.2)",
data: [4.8,7.2,9.6,7.2, 4, 2]
}]
};

var radarChart = new Chart(ctx, {
type: 'radar',
data: marksData
});

var chartOptions = {
scale: {
ticks: {
beginAtZero: true,
min: 0,
max: 10,
stepSize: 1
},
pointLabels: {
fontSize: 18
}
},
legend: {
position: 'left'
},
responsive: true,
};
var radarChart = new Chart(ctx, {
type: 'radar',
data: marksData,
options: chartOptions
});

CSS

Код: Выделить всё

canvas {
margin: 0 auto!important;
width: 100%;
height: auto;
}

.chartholder {
text-align: center;
width: 100%;
margin: 0 auto;
background-color: blue;
}

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



Подробнее здесь: https://stackoverflow.com/questions/556 ... g-chart-js