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: [
        datasets: [{
            data: [100, 200, 50],
            backgroundColor: [
            hoverBackgroundColor: [

    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.


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);


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

  • 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 '16 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 '16 at 15:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.