JavaScript
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "y Axis rounding issue"
},
axisY: {
title: "Value",
interval: 20,
minimum: 10,
maximum: 210,
gridThickness: 0,
tickThickness: 0,
labelFormatter: function(){
return "";
},
stripLines: []
},
axisY2: {
title: "Score",
interval: 0.1,
minimum: 0,
maximum: 1,
gridThickness: 0
},
data: [{
type: "scatter",
color: "DarkOrange",
showInLegend: true,
name: "Data",
dataPoints: [
{ x: 1, y: 130 },
{ x: 2, y: 190 },
{ x: 3, y: 200 },
{ x: 4, y: 150 },
{ x: 5, y: 34 },
{ x: 6, y: 111 },
{ x: 7, y: 40 },
{ x: 8, y: 15 },
{ x: 9, y: 40 },
{ x: 10, y: 100 }
]
}, {
type: "line",
color: "DodgerBlue",
showInLegend: true,
axisYType: "secondary",
name: "Scoring",
dataPoints: [
{ x: 1, y: 0.1 },
{ x: 2, y: 0.1 },
{ x: 3, y: 0.3 },
{ x: 4, y: 0.5 },
{ x: 5, y: 0.8 },
{ x: 6, y: 0.7 },
{ x: 7, y: 0.8 },
{ x: 8, y: 0.6 },
{ x: 9, y: 0.3 },
{ x: 10, y: 0.2 }
]
}]
});
chart.render();
addStripLines(chart);
function addStripLines(chart) {
for (var i = chart.axisY[0].minimum; i <= chart.axisY[0].maximum; i += chart.axisY[0].interval) {
chart.options.axisY.stripLines.push({
value: i,
label: i,
labelPlacement: "outside",
labelFontColor:"black",
labelBackgroundColor: "transparent",
color: chart.axisY[0].gridColor
});
}
chart.render()
}
}