Home forums Report Bugs Graphs not displaying correctly on Chrome

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #10495

    I have my graph configured to get data from a database and it’s all set up correctly with all the data displaying as it should. I have also configured 2 tabs which switch the graphs from line to bar for convienience which works fine. However, I now have a problem where the graphs are completely messed up on Chrome but work fine on Firefox and IE!

    This is the code for the graph.
    var chart = new CanvasJS.Chart(“chartContainer”,
    animationEnabled: true,

    gridColor: “Silver”,
    tickColor: “silver”,
    labelAngle: -50

    axisY: {
    gridColor: “Silver”,
    tickColor: “silver”
    verticalAlign: “bottom”,
    horizontalAlign: “center”,
    fontFamily: “Expressway-Rg”
    data: [
    type: “line”,
    showInLegend: true,
    lineThickness: 2,
    name: “Orders Week Ending ” + “@Html.Raw(Model.OrdersWeekEnding)”,
    markerType: “square”,
    color: “#cc0000”,
    type: “line”,
    showInLegend: true,
    name: “Orders Week Ending ” + “@Html.Raw(Model.ComparisonOrdersWeekEnding)”,
    color: “#000000”,
    lineThickness: 2,



    Thanks in advance to anyone that can help!



    It would help us if you can provide us the working fiddle of the issue along with proper JSON-data.

    Here is an example to give you an idea on using external JSON in jsfiddle.


    This is the JSFiddle of the graph with data.
    I’ve also surrounded it with window.onload = function() {}, could this be the reason it’s messing up on chrome?
    Thanks for the reply!



    We observed that the fiddle you have created seems to be working fine across all browsers.

    Check this screenshot. If you find any further issue, kindly provide us the OS, chrome version you are using along with the screenshot of the issue, so that we can understand it better and help you out.


    Here’s the screenshot for the graph on chrome and then this screenshot is the exact same link and graphs but on firefox.


    I’m also on windows 10, using the latest version of chrome and firefox.



    Earlier we had come across a similar issue with Chrome when Canvas is GPU accelerated (default). Google fixed the issue after sometime.

    Please try disabling GPU accelerated rendering in Chrome and see if it helps.



    Can you please try using this latest build and let us know if it worked.



    We have just released v1.8.1 GA. Kindly download the latest version and let us know your feedback. Refer to the release blog for more information.

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

You must be logged in to reply to this topic.