LineChart axis manual max min
by bairog
HTML
<div id="chartDiv"><canvas id="chart"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
JavaScript
var data = {
//labels:["0","1","2"],
datasets: [{
datalabels: {
color: '#c0c0c0'
},
label: 'Тест не пройден',
fill: false,
lineTension: 0,
backgroundColor: '#c0c0c0',
borderColor: '#c0c0c0',
//data: [{x:"2021-03-30T00:00:00", y:6, stress: 'notComplete'},{x:"2021-04-01T00:00:00", y:3, stress: 'inspiration'},{x:"2021-04-05T00:00:00", y:4, stress: 'neutral'}]
data: [{x:"2021-04-26T00:00:00",y:5},{x:"2021-05-04T00:00:00",y:null},{x:"2021-05-11T00:00:00",y:5}]
}]
};
var options = {
animation: false,
scales: {
xAxis: {
// The axis for this scale is determined from the first letter of the id as `'x'`
// It is recommended to specify `position` and / or `axis` explicitly.
axis: 'x',
type: 'time',
time: {
unit: 'day',
tooltipFormat: 'dd.MM.yyyy',
displayFormats: {
day: 'dd.MM.yy'
}
},
ticks: {
color: 'red'
}
},
yAxis: {
//afterDataLimits: function (axis) {
//Setting axis min\max via `afterDataLimits` callback is working incorrectly (yAxis is from -2 to 12)
//axis.max = 10.5;
//axis.min = -0.5;
//},
//position: 'bottom',
axis: 'y',
ticks: {
color: 'green'
},
//Setting axis min\max via options is working correctly (yAxis is from -0.5 to 10.5)
min: -0.5,
max: 10.5
}
},
plugins: {
legend: {
labels: {
color: "blue"
},
},
// Change options for ALL labels of THIS CHART
datalabels: {
align: 'start',
anchor: 'end',
font: {
weight: 'bold'
},
...