When evaluating CanvasJS, one thing we noticed are small bugs in how grid lines are rendered. For example, the top most grid line looks thinner/different than the rest, and the main grid lines seem to be thicker than 1 pixel even when setting gridThickness to 1.
For example, let’s take code:
<!DOCTYPE HTML>
<html>
<head>
<script type=”text/javascript”>
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
text: “Grid Line Example ”
},
axisY:{
gridColor: “lightgray”,
gridThickness: 1,
tickThickness: 0
},
data: [
{
type: “column”,
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55}
]
}
]
});
chart.render();
}
</script>
<script type=”text/javascript” src=”https://cdn.canvasjs.com/canvasjs.min.js”></script>
</head>
<body>
<div id=”chartContainer” style=”height: 300px; width: 100%;”>
</div>
</body>
</html>
Result (CanvasJS):
http://prntscr.com/1wdw87
— The grid lines look thicker than 1 px
— Top grid line is thinner/less bright than the rest
This is how another canvas library renders grid lines (appear thinner, crisper and consistent):
http://prntscr.com/1wdweq
Are there plans to fix the rendering of grid lines? Is this something that can be included in one of the upcoming releases?
Thanks in advance!
.
