Home forums Using CanvasJS gridThickness – Small bugs in rendering

This topic contains 2 replies, has 2 voices, and was last updated by  Sunil Urs 5 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #5368

    dev

    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=”/assets/script/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!

    #5383

    Thanks for reporting. I’ll be working on this tomorrow. Will give you a new build at the earliest.


    Sunil Urs

    #5523

    Hi,

    I’ve fixed this issue in the v1.3 GA. Please download the same and let me know if it worked as expected.

    Thanks for reporting.


    Sunil

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.