2

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.

2

1 Answer 1

3

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

2
  • Thanks @Rowan. I have modified the JS and it working as expected. For my curiosity, shall I get any impact in future for comment out this two method? Jul 4, 2016 at 15:40
  • 1
    I honestly don't know :) I think it's something that needs to be raised to Salesforce. I imagine it's being looked at since Salesforce publishes a Chartjs Lightning Component. Jul 4, 2016 at 15:50

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .