[SalesForce] In Chart.js mouse hover is not working Locker Service Enabled Org

On mouse hover I am encounter one error in lightning component. But in JS fiddle it is working fine.

afterChartJsLoaded: function(component, event, helper) {
    var el = component.find("chart").getElement();
    var chartContext = document.getElementById("chart").getContext("2d");
    var data = {
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ],
        datasets: [{
            data: [100, 200, 50],
            backgroundColor: [
                "#FF6384",
                "red",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EC",
                "#FFCE56"
            ]
        }]
    };

    var myDoughnutChart = new Chart(chartContext, {
        type: 'bar',
        data: data,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }

    });


}

Here is the error

Error in component on mouse hover on bar

Getting error in this line on mouse hover

Thanks in Advance.

Best Answer

I was able to solve this for Chart.js.

Apparently CanvasGradient and CanvasPattern are not supported.

Commenting these out via: 

helpers.color = function(c) {
        if (!color) {
            console.log('Color.js not found!');
            return c;
        }

        /* global CanvasGradient NOT SUPPORTED*/
        // if (c instanceof CanvasGradient) {
        //  return color(Chart.defaults.global.defaultColor);
        // }

        return color(c);
    };

and:

helpers.getHoverColor = function(color) {
    /* global CanvasPattern IS NOT SUPPORTED*/
    return  helpers.color(color).saturate(0.5).darken(0.1).rgbString();
};

Seems to work.

Let me know if you need my version: rowanxmas at gmail dot com

Related Topic