I have been working on a chart using chartjs that shows workout durations on each day.So the x-axis have dates and y-axis has duration,The dataset will have values Maximum duration is 1.30 and minumum is 0.00.I want y axis to show labels like 0.00,0.10,0.20...,1.20,1.30.
I could show the graph with labels as .1,.2 ... 1.3. and code is given below .
I could show the graph with labels as .1,.2 ..1.3. and code is given below .
var options = {
type: 'line',
data: {
labels: newDates.split(','),datasets: [{
label: 'Time',
data: newDuration.split(','),
borderWidth: 1,
fill: false,
borderColor: "#fff"
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
title: {
display: true,
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
suggestedMax: 1.30,
stepSize: .10,
fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red
},
gridLines: {
color: 'rgba(255, 255, 255, 0.2)' // makes grid lines from y axis red
}
}],
xAxes: [{
ticks: {
beginAtZero: true,
fontColor: 'rgba(255, 255, 255)' // makes grid lines from y axis red
},
gridLines: {
display:false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
Expected result :
y axis to show labels as 0 0.10 0.20 0.30 ... 1.20,1.30
Change this
yAxes: [{
ticks: {
precision: 2
}
}],
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.