search

chartjs / Chart.js

Simple HTML5 Charts using the <canvas> tag
https://www.chartjs.org/
MIT License
64.83k stars 11.92k forks source link

radar || polarArea chart -TypeError: Cannot set property 'backdropColor' of undefined #7948

Closed zibous closed 4 years ago

zibous commented 4 years ago

Expected Behavior

There should be a backgroundColor /backdropColor Chart.default property for the scale/ticks options.

Current Behavior

I can change the font color with fontColor only but not the background.

Chart.defaults.ticks.backgroundColor = 'transparent'
Chart.defaults.ticks.backdropColor = 'transparent'

Error:

Render Graph Error on polarArea :  TypeError: Cannot set property 'backgroundColor' of undefined
Render Graph Error on radar :  TypeError: Cannot set property 'backgroundColor' of undefined
Render Graph Error on radar :  TypeError: Cannot set property 'backdropColor' of undefined

I am trying to display a radar || polarArea chart on a page with a dark background.

Thank you!

Possible Solution

I'm looking for a way to set the background color via the global.default settings for the ticks in radar and polarArea. You can use the options, but I would always have to do this explicitly for all displays. It would be easier for me if I could do this with the global settings.

Environment

etimberg commented 4 years ago

I believe this only currently exists for the labels around the side of the radar chart. #7700 requests this as well, but for cartesian axes.

zibous commented 4 years ago

@etimberg Thanks. So i try to find a workaround..

etimberg commented 4 years ago

@zibous I'm sorry, but I didn't notice this earlier. I think you're setting the backdrop colour in the wrong spot. The following is the correct way to set it for all radial scales.

Chart.defaults.scales.radialLinear.ticks.backdropColor = 'transparent';

If you only want to do it for the radar chart, this should work. Chart.defaults.set will create objects as needed on the way down so that you don't need to possibly create them if Chart.defaults.radar.scales does not exist for example. 

Chart.defaults.set('radar.scales.r.ticks', { backdropColor: 'red' });

Live sample: https://jsfiddle.net/vuc4k1jq/

zibous commented 4 years ago

@etimberg Thanks, but this only work with version 3, not with 2.9.4

Chart.defaults.polarArea.scales.r.ticks = { backdropColor: "transparent" };  
// Chart.defaults.set('polarArea.scales.r.ticks', { backdropColor: 'transparent' });

I'm still looking for a way to test version 3, but can't integrate it.

import Chart from "chart.js";  // works for 2.9.4
// NOT WORKING - ERROR 
import { Chart, LineController, Line, Point, LinearScale, Title } from './libs/chart.js'
Chart.register(LineController, Line, Point, LinearScale, Title);

ERROR ON Build:

> rollup -c
src/main.js → dist/graph-chartjs-card.js...
[!] Error: 'Chart' is not exported by src/libs/chart.js, imported by src/graphchart.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/graphchart.js (8:9)
6:  */
7: 
8: import { Chart, LineController, Line, Point, LinearScale, Title } from './libs/chart.js'
            ^
9: Chart.register(LineController, Line, Point, LinearScale, Title);
Error: 'Chart' is not exported by src/libs/chart.js, imported by src/graphchart.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! graph-chartjs-card@0.0.1 rollup: `rollup -c`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the graph-chartjs-card@0.0.1 rollup script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Project see: https://github.com/zibous/lovelace-graph-chart-card

kurkle commented 4 years ago

What is in libs/chart.js? You should do npm i chart.js@next

zibous commented 4 years ago

@kurkle Yes installed with node npm i chart.js@next and than copy the folder to the projects folder ./libs. see: https://github.com/zibous/lovelace-graph-chart-card/tree/main/src/libs/chart.js

The reason why I use version 3.0 in the project folder is that I could test both versions with it.

Also testet :

Same error.

etimberg commented 4 years ago

In v2, Chart.defaults.set isn't available, but you can set the defaults in a similar way. https://jsfiddle.net/am8pe3rv/

There might be some relative paths in node_modules/dist/chart.esm.js that are causing problems. That's my hunch, but I don't have time to confirm it right now.

zibous commented 4 years ago

@etimberg Thanks it works with 2.9.4 👍 

Chart.defaults.polarArea.scale.ticks = { backdropColor: 'transparent' };
Chart.defaults.radar.scale.ticks = { backdropColor: 'transparent' };

There might be some relative paths in node_modules/dist/chart.esm.js that are causing problems

OK. This is one approach, maybe I can find a workaround ....

zibous commented 4 years ago

@etimberg

I have now found a way how I can use both versions (2.9.4 and v3.0.0-beta.4). Build the dist file with gulp instead of rollup and use the your prepared chart.js files.

I use simple settings, only "Title, Legend and Chart Type". At the moment I am not overwriting any of the default settings. With the title I can only change the fontStyle, fontSize:

title: { 
   display: true, 
   fontStyle: "normal", 
   text: "This is the chart title", 
   fontSize: 18
 },

Am I doing something wrong ?

The 3.0 version is a lot better than the 2.9 version, if this would also work for Chrome and Safarie.

etimberg commented 4 years ago

I haven't seen those issues before with the tooltip/legend. Were there any console errors?

zibous commented 4 years ago

@etimberg Negativ, no error ? If i switch to developer view and use "responsive mode" and i click to a pie segment, the tooltip comes and goes away:

see: http://www.ipscon.com/transfer/chartjs_tooltips.gif On Desktop view i can't see the tooltips.

Can i disable the animation ?

Settings

{
  "type": "pie",
  "options": {
    "color": "rgba(0,0,0,0.1)",
    "elements": {
      "arc": {
        "borderAlign": "center",
        "borderColor": "#fff",
        "borderWidth": 2,
        "offset": 0,
        "backgroundColor": "rgba(0,0,0,0.1)"
      },
      "line": {
        "borderCapStyle": "butt",
        "borderDash": [],
        "borderDashOffset": 0,
        "borderJoinStyle": "miter",
        "borderWidth": 3,
        "capBezierPoints": true,
        "fill": true,
        "tension": 0,
        "backgroundColor": "rgba(0,0,0,0.1)",
        "borderColor": "rgba(0,0,0,0.1)"
      },
      "point": {
        "borderWidth": 1,
        "hitRadius": 8,
        "hoverBorderWidth": 1,
        "hoverRadius": 4,
        "pointStyle": "circle",
        "radius": 0.2,
        "backgroundColor": "rgba(0,0,0,0.1)",
        "borderColor": "rgba(0,0,0,0.1)"
      },
      "rectangle": {
        "borderSkipped": "start",
        "borderWidth": 0,
        "backgroundColor": "rgba(0,0,0,0.1)",
        "borderColor": "rgba(0,0,0,0.1)"
      }
    },
    "events": [
      "mousemove",
      "mouseout",
      "click",
      "touchstart",
      "touchmove"
    ],
    "font": {
      "color": "#666",
      "family": "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
      "size": 12,
      "style": "normal",
      "lineHeight": 1.2,
      "weight": null,
      "lineWidth": 0
    },
    "hover": {
      "onHover": null,
      "mode": "nearest",
      "intersect": true
    },
    "maintainAspectRatio": false,
    "onClick": null,
    "responsive": true,
    "showLines": true,
    "plugins": {
      "filler": {
        "propagate": true
      },
      "legend": {
        "display": true,
        "position": "top",
        "align": "center",
        "fullWidth": true,
        "reverse": false,
        "weight": 1000,
        "onHover": null,
        "onLeave": null,
        "labels": {
          "boxWidth": 40,
          "padding": 10
        },
        "title": {
          "display": false,
          "position": "center",
          "text": ""
        }
      },
      "title": {
        "align": "center",
        "display": false,
        "font": {
          "style": "bold"
        },
        "fullWidth": true,
        "padding": 10,
        "position": "top",
        "text": "",
        "weight": 2000
      },
      "tooltip": {
        "enabled": true,
        "custom": null,
        "mode": "nearest",
        "position": "average",
        "intersect": true,
        "backgroundColor": "rgba(0,0,0,0.8)",
        "titleFont": {
          "style": "bold",
          "color": "#fff"
        },
        "titleSpacing": 2,
        "titleMarginBottom": 6,
        "titleAlign": "left",
        "bodySpacing": 2,
        "bodyFont": {
          "color": "#fff"
        },
        "bodyAlign": "left",
        "footerSpacing": 2,
        "footerMarginTop": 6,
        "footerFont": {
          "color": "#fff",
          "style": "bold"
        },
        "footerAlign": "left",
        "yPadding": 6,
        "xPadding": 6,
        "caretPadding": 2,
        "caretSize": 5,
        "cornerRadius": 6,
        "multiKeyBackground": "#fff",
        "displayColors": true,
        "borderColor": "rgba(0,0,0,0)",
        "borderWidth": 0,
        "animation": {
          "duration": 400,
          "easing": "easeOutQuart",
          "numbers": {
            "type": "number",
            "properties": [
              "x",
              "y",
              "width",
              "height",
              "caretX",
              "caretY"
            ]
          },
          "opacity": {
            "easing": "linear",
            "duration": 200
          }
        },
        "callbacks": {}
      },
      "autocolors": {
        "useAutoColors": true,
        "enabled": true,
        "mode": "data"
      },
      "gradient": {}
    },
    "doughnut": {
      "datasetElementType": false,
      "dataElementType": "arc",
      "dataElementOptions": [
        "backgroundColor",
        "borderColor",
        "borderWidth",
        "borderAlign",
        "offset"
      ],
      "animation": {
        "numbers": {
          "type": "number",
          "properties": [
            "circumference",
            "endAngle",
            "innerRadius",
            "outerRadius",
            "startAngle",
            "x",
            "y",
            "offset",
            "borderWidth"
          ]
        },
        "animateRotate": true,
        "animateScale": false
      },
      "aspectRatio": 1,
      "legend": {
        "labels": {}
      },
      "cutoutPercentage": 50,
      "rotation": 0,
      "circumference": 360,
      "tooltips": {
        "callbacks": {}
      }
    },
    "layout": {
      "padding": {
        "top": 0,
        "right": 8,
        "bottom": 20,
        "left": 8
      }
    },
    "animation": {
      "duration": 0,
      "easing": "easeOutQuart",
      "colors": {
        "type": "color",
        "properties": [
          "borderColor",
          "backgroundColor"
        ]
      },
      "numbers": {
        "type": "number",
        "properties": [
          "circumference",
          "endAngle",
          "innerRadius",
          "outerRadius",
          "startAngle",
          "x",
          "y",
          "offset",
          "borderWidth"
        ]
      },
      "active": {
        "duration": 400
      },
      "resize": {
        "duration": 0
      },
      "show": {
        "colors": {
          "type": "color",
          "properties": [
            "borderColor",
            "backgroundColor"
          ],
          "from": "transparent"
        },
        "visible": {
          "type": "boolean",
          "duration": 0
        }
      },
      "hide": {
        "colors": {
          "type": "color",
          "properties": [
            "borderColor",
            "backgroundColor"
          ],
          "to": "transparent"
        },
        "visible": {
          "type": "boolean",
          "easing": "easeInExpo"
        }
      },
      "animateRotate": true,
      "animateScale": false
    },
    "bar": {
      "datasetElementType": false,
      "dataElementType": "rectangle",
      "dataElementOptions": [
        "backgroundColor",
        "borderColor",
        "borderSkipped",
        "borderWidth",
        "barPercentage",
        "barThickness",
        "categoryPercentage",
        "maxBarThickness",
        "minBarLength"
      ],
      "hover": {
        "mode": "index"
      },
      "datasets": {
        "categoryPercentage": 0.8,
        "barPercentage": 0.9,
        "animation": {
          "numbers": {
            "type": "number",
            "properties": [
              "x",
              "y",
              "base",
              "width",
              "height"
            ]
          }
        }
      },
      "scales": {
        "_index_": {
          "type": "category",
          "offset": true,
          "gridLines": {
            "offsetGridLines": true
          }
        },
        "_value_": {
          "type": "linear",
          "beginAtZero": true
        }
      }
    },
    "bubble": {
      "datasetElementType": false,
      "dataElementType": "point",
      "dataElementOptions": [
        "backgroundColor",
        "borderColor",
        "borderWidth",
        "hitRadius",
        "radius",
        "pointStyle",
        "rotation"
      ],
      "animation": {
        "numbers": {
          "properties": [
            "x",
            "y",
            "borderWidth",
            "radius"
          ]
        }
      },
      "scales": {
        "x": {
          "type": "linear"
        },
        "y": {
          "type": "linear"
        }
      },
      "tooltips": {
        "callbacks": {}
      }
    },
    "line": {
      "datasetElementType": "line",
      "datasetElementOptions": [
        "backgroundColor",
        "borderCapStyle",
        "borderColor",
        "borderDash",
        "borderDashOffset",
        "borderJoinStyle",
        "borderWidth",
        "capBezierPoints",
        "cubicInterpolationMode",
        "fill"
      ],
      "dataElementType": "point",
      "dataElementOptions": {
        "backgroundColor": "pointBackgroundColor",
        "borderColor": "pointBorderColor",
        "borderWidth": "pointBorderWidth",
        "hitRadius": "pointHitRadius",
        "hoverHitRadius": "pointHitRadius",
        "hoverBackgroundColor": "pointHoverBackgroundColor",
        "hoverBorderColor": "pointHoverBorderColor",
        "hoverBorderWidth": "pointHoverBorderWidth",
        "hoverRadius": "pointHoverRadius",
        "pointStyle": "pointStyle",
        "radius": "pointRadius",
        "rotation": "pointRotation"
      },
      "showLines": true,
      "spanGaps": false,
      "hover": {
        "mode": "index"
      },
      "scales": {
        "_index_": {
          "type": "category"
        },
        "_value_": {
          "type": "linear"
        }
      }
    },
    "polarArea": {
      "dataElementType": "arc",
      "dataElementOptions": [
        "backgroundColor",
        "borderColor",
        "borderWidth",
        "borderAlign",
        "offset"
      ],
      "animation": {
        "numbers": {
          "type": "number",
          "properties": [
            "x",
            "y",
            "startAngle",
            "endAngle",
            "innerRadius",
            "outerRadius"
          ]
        },
        "animateRotate": true,
        "animateScale": true
      },
      "aspectRatio": 1,
      "datasets": {
        "indexAxis": "r"
      },
      "scales": {
        "r": {
          "type": "radialLinear",
          "angleLines": {
            "display": false
          },
          "beginAtZero": true,
          "gridLines": {
            "circular": true
          },
          "pointLabels": {
            "display": false
          }
        }
      },
      "startAngle": 0,
      "legend": {
        "labels": {}
      },
      "tooltips": {
        "callbacks": {}
      }
    },
    "pie": {
      "datasetElementType": false,
      "dataElementType": "arc",
      "dataElementOptions": [
        "backgroundColor",
        "borderColor",
        "borderWidth",
        "borderAlign",
        "offset"
      ],
      "animation": {
        "numbers": {
          "type": "number",
          "properties": [
            "circumference",
            "endAngle",
            "innerRadius",
            "outerRadius",
            "startAngle",
            "x",
            "y",
            "offset",
            "borderWidth"
          ]
        },
        "animateRotate": true,
        "animateScale": false
      },
      "aspectRatio": 1,
      "legend": {
        "labels": {}
      },
      "cutoutPercentage": 0,
      "rotation": 0,
      "circumference": 360,
      "tooltips": {
        "callbacks": {}
      }
    },
    "radar": {
      "datasetElementType": "line",
      "datasetElementOptions": [
        "backgroundColor",
        "borderColor",
        "borderCapStyle",
        "borderDash",
        "borderDashOffset",
        "borderJoinStyle",
        "borderWidth",
        "fill"
      ],
      "dataElementType": "point",
      "dataElementOptions": {
        "backgroundColor": "pointBackgroundColor",
        "borderColor": "pointBorderColor",
        "borderWidth": "pointBorderWidth",
        "hitRadius": "pointHitRadius",
        "hoverBackgroundColor": "pointHoverBackgroundColor",
        "hoverBorderColor": "pointHoverBorderColor",
        "hoverBorderWidth": "pointHoverBorderWidth",
        "hoverRadius": "pointHoverRadius",
        "pointStyle": "pointStyle",
        "radius": "pointRadius",
        "rotation": "pointRotation"
      },
      "aspectRatio": 1,
      "spanGaps": false,
      "scales": {
        "r": {
          "type": "radialLinear",
          "ticks": {
            "backdropColor": "transparent"
          }
        }
      },
      "datasets": {
        "indexAxis": "r"
      },
      "elements": {
        "line": {
          "fill": "start",
          "tension": 0
        }
      }
    },
    "scatter": {
      "datasetElementType": "line",
      "datasetElementOptions": [
        "backgroundColor",
        "borderCapStyle",
        "borderColor",
        "borderDash",
        "borderDashOffset",
        "borderJoinStyle",
        "borderWidth",
        "capBezierPoints",
        "cubicInterpolationMode",
        "fill"
      ],
      "dataElementType": "point",
      "dataElementOptions": {
        "backgroundColor": "pointBackgroundColor",
        "borderColor": "pointBorderColor",
        "borderWidth": "pointBorderWidth",
        "hitRadius": "pointHitRadius",
        "hoverHitRadius": "pointHitRadius",
        "hoverBackgroundColor": "pointHoverBackgroundColor",
        "hoverBorderColor": "pointHoverBorderColor",
        "hoverBorderWidth": "pointHoverBorderWidth",
        "hoverRadius": "pointHoverRadius",
        "pointStyle": "pointStyle",
        "radius": "pointRadius",
        "rotation": "pointRotation"
      },
      "showLines": true,
      "spanGaps": false,
      "hover": {
        "mode": "index"
      },
      "scales": {
        "x": {
          "type": "linear"
        },
        "y": {
          "type": "linear"
        }
      },
      "datasets": {
        "showLine": false,
        "fill": false
      },
      "tooltips": {
        "callbacks": {}
      }
    },
    "datasetElementType": false,
    "dataElementType": "arc",
    "dataElementOptions": [
      "backgroundColor",
      "borderColor",
      "borderWidth",
      "borderAlign",
      "offset"
    ],
    "aspectRatio": 1,
    "legend": {
      "labels": {},
      "display": true,
      "position": "bottom",
      "lineWidth": 0
    },
    "cutoutPercentage": 0,
    "rotation": 0,
    "circumference": 360,
    "tooltips": {
      "callbacks": {},
      "enabled": true,
      "custom": null,
      "mode": "nearest",
      "position": "nearest",
      "intersect": true,
      "backgroundColor": "rgba(0,0,0,0.8)",
      "titleFont": {
        "style": "bold",
        "color": "#fff"
      },
      "titleSpacing": 2,
      "titleMarginBottom": 6,
      "titleAlign": "left",
      "bodySpacing": 2,
      "bodyFont": {
        "color": "#fff"
      },
      "bodyAlign": "left",
      "footerSpacing": 2,
      "footerMarginTop": 6,
      "footerFont": {
        "color": "#fff",
        "style": "bold"
      },
      "footerAlign": "left",
      "yPadding": 6,
      "xPadding": 6,
      "caretPadding": 2,
      "caretSize": 5,
      "cornerRadius": 6,
      "multiKeyBackground": "#fff",
      "displayColors": true,
      "borderColor": "rgba(0,0,0,0)",
      "borderWidth": 0,
      "animation": {
        "duration": 400,
        "easing": "easeOutQuart",
        "numbers": {
          "type": "number",
          "properties": [
            "x",
            "y",
            "width",
            "height",
            "caretX",
            "caretY"
          ]
        },
        "opacity": {
          "easing": "linear",
          "duration": 200
        }
      }
    },
    "charttype": "pie",
    "units": "",
    "title": {
      "align": "center",
      "display": true,
      "font": {
        "style": "bold"
      },
      "fullWidth": true,
      "padding": 10,
      "position": "top",
      "text": "Aufteilung Nährstoffe (kal) pro Tag",
      "weight": 2000,
      "fontStyle": "normal",
      "fontSize": "18"
    },
    "chartArea": {
      "backgroundColor": "transparent"
    },
    "scales": {}
  },
  "data": {
    "labels": [
      "Eiweis",
      "Fett",
      "Kohlenhydrate"
    ],
    "datasets": [
      {
        "data": [
          "869.0",
          "373.0",
          "1242.0"
        ],
        "borderWidth": 0,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "fill": true,
        "unit": "",
        "mode": "current",
        "backgroundColor": [
          "rgba(204, 82, 82, 0.75)",
          "rgba(128, 51, 51, 0.75)",
          "rgba(82, 204, 204, 0.75)"
        ],
        "borderColor": [
          "rgba(204, 82, 82, 0.56)",
          "rgba(128, 51, 51, 0.56)",
          "rgba(82, 204, 204, 0.56)"
        ]
      }
    ]
  }
}
etimberg commented 4 years ago

You can disable the tooltip animation (@kurkle would have the exact config needed for that). One thing you could try is to change options.events to just be ['click'] so that only click events would trigger the tooltip. I suspect there's some interaction between the click & mousemove handlers. If you can put together a jsfiddle that reproduces, I can debug it and see.

zibous commented 4 years ago

@etimberg I made a few attempts with different browsers. With a simple HTML page, the tooltips work perfectly for all of them. Only with the Homeassistant (https://www.home-assistant.io/) View

I suspect that it is due to the registration of the mouse events, because at the time when I instantiate a new chart object, it is not yet visible and I cannot register any mouse events at that time.

        // ------------------------------------------------------
        // register new chart
        // ------------------------------------------------------
        this.chart = new Chart(this.ctx, this.chartCurrentConfig);
        if (this.chart) {
            this.chart_ready = true;
            this.chart_update = true;
        }
                // TESTCASE MOUSE EVENS
        var canvs = document.getElementById(this.canvasId);
        console.log(this.canvasId, canvs);

                ---> chart-e7urqaasg null

        if(canvs){
          canvs.addEventListener("mousemove", function (event) {
          console.log(
            "mousemove: " +
            event.clientX +
            "/" +
            event.clientY +
            " buttons: " +
            event.buttons
          );
        });
                    }

So far I haven't found a workaround for it.

kurkle commented 4 years ago

@zibous looks like you made some progress and backdropColor is not an issue anymore? Animations can be disabled by setting options.animation = false or just for tooltips: options.tooltips.animation = false

Now, to you last message, you are suspecting the registration of mouse events. I see in your previous gif that the tooltip is briefly displayed. That would mean at least some of the events get registered alright, unless you are triggering the tooltip manually.

You can easily test the events by adding a plugin to your chart:

new Chart(ctx, {
  data: (...),
  options: (...),
  plugins: [{
    id: 'eventlogger', 
    afterEvent(chart, event) { 
      console.log(event); 
    } 
  }]
});

plugin demo

zibous commented 4 years ago

@kurkle Thanks for the information.

{
  "type": "pie",
  "data": {
    "labels": [
      "Eiweis",
      "Fett",
      "Kohlenhydrate"
    ],
    "datasets": [
      {
        "data": [
          "875.0",
          "375.0",
          "1250.0"
        ],
        "borderWidth": 0,
        "hoverBorderWidth": 0,
        "pointRadius": 0,
        "fill": true,
        "unit": "",
        "mode": "current"
      }
    ]
  },
  "options": {
    "type": "pie",
    "responsive": true,
    "maintainAspectRatio": false,
    "animation": false,
    "units": "",
    "font": {
      "color": "#e1e1e1",
      "family": "\"Roboto\", \"Noto\", sans-serif",
      "size": 12,
      "style": "normal",
      "lineHeight": 1.2,
      "lineWidth": 0
    },
    "title": {
      "display": true,
      "text": "Aufteilung Nährstoffe (kal) pro Tag",
      "font": {
        "style": "normal",
        "color": "#ff9500",
        "family": "Quicksand, Roboto, 'Open Sans','Rubik',sans-serif"
      }
    },
    "layout": {
      "padding": {
        "left": 16,
        "right": 16,
        "top": 0,
        "bottom": 20
      }
    },
    "chartArea": {
      "backgroundColor": "transparent"
    },
    "legend": {
      "display": true,
      "position": "bottom",
      "lineWidth": 0,
      "labels": {
        "usePointStyle": true,
        "boxWidth": 8
      }
    },
    "tooltips": {
      "enabled": true,
      "mode": "nearest",
      "position": "nearest",
      "backgroundColor": "#ecf0f1",
      "titleFont": {
        "style": "normal",
        "color": "#647687"
      },
      "bodyFont": {
        "style": "normal",
        "color": "#647687"
      },
      "footerFont": {
        "style": "normal",
        "color": "#647687"
      },
      "animation": false
    },
    "hover": {
      "mode": "nearest",
      "intersect": true
    },
    "elements": {
      "point": {
        "radius": 0.33,
        "hitRadius": 8
      }
    },
    "spanGaps": true,
    "plugins": {
      "autocolors": {
        "useAutoColors": true,
        "enabled": true,
        "mode": "data"
      }
    }
  }
}

Now i can see the mouse events and the coordinate are different, Firefox works, Chrome do not work !

Chrome
------
{type: "mousemove", chart: t, native: MouseEvent, x: 437, y: 259, …}
chart: t {platform: e, id: 24, ctx: CanvasRenderingContext2D, canvas: canvas#chart-sf06rnuzp, config: {…}, …}
native: MouseEvent {isTrusted: true, screenX: 530, screenY: 355, clientX: 438, clientY: 258, …}
offsetX: undefined
offsetY: undefined
type: "mousemove"
x: 437
y: 259

Firefox
-------
chart: Object { id: 24, width: 352, height: 240, … }
native: mousemove { target: home-assistant
, clientX: 496, clientY: 285, … }
offsetX: undefined
offsetY: undefined
type: "mousemove"
x: 16
y: 36
zibous commented 4 years ago

@kurkle

@zibous looks like you made some progress and backdropColor is not an issue anymore?

With 3.0 it works:

Bildschirmfoto 2020-10-30 um 15 30 06

kurkle commented 4 years ago

Ok. So this issue seems resolved. Your current issue must be about events and shadow dom.

I don't currently have the time to start debugging that, but you could step through getRelativePosition and see what goes wrong.

etimberg commented 4 years ago

Inside the shadowroot, I would make sure that there's a div before the canvas. The sizing goes really bad when inside the shadowroot directly.

zibous commented 4 years ago

@etimberg

Inside the shadowroot, I would make sure that there's a div before the canvas. The sizing goes really bad when inside the shadowroot directly.

Yes there is a div before the canvas

<ha-card id="card-cjv4hls21" class="type-custom-chart-card">
    <div class="card-header" style="padding-bottom: 0px !important;">
           <ha-icon icon="mdi:nutrition" style="position: relative; top: -4px; padding: 0px 12px 0px 4px;"></ha-icon>
           <span><!---->Makro Nährstoffe<!----></span>
    </div>
    <div id="content-cjv4hls21" style="height: 240px; width: 100%;">
          <canvas id="chart-cjv4hls21" height="240" width="352" 
                        style="user-select: none; display: block; 
                        box-sizing: border-box; width: 352px; height: 240px;">
          </canvas>
    </div>
</ha-card>
zibous commented 4 years ago

@etimberg I suspect it is due to the getCanvasPosition, because with this the geometry is calculated differently than with version 2.9.4.

In my particular case v 2.9.4. works for all browsers, v3.0.0-beta.4 only for FIREFOX.

function getCanvasPosition(evt, canvas) {
  var e = evt.originalEvent || evt;
  var touches = e.touches;
  var source = touches && touches.length ? touches[0] : e;
  var offsetX = source.offsetX,
      offsetY = source.offsetY;

  // -----------------------------------
  //  TEST --> NOW WORKS FOR ALL
  // JUST IGNORE THE OFFSET   
  // -----------------------------------
  offsetX = offsetY = 0;

  var box = false;
  var x, y;
  if (offsetX > 0 || offsetY > 0) {
    x = offsetX;
    y = offsetY;
  } else {
    var rect = canvas.getBoundingClientRect();
    x = source.clientX - rect.left;
    y = source.clientY - rect.top;
    box = true;
  }
  return {
    x: x,
    y: y,
    box: box
  };
}

Firefox always returns 0 for offsetX, offsetY, but Chrome returns values> 0.

Results Firefox: return { x: 164.5, y: 292, box: true } Result Chrome: ' return {x: 613, y: 79, box: false}`

Can I change something on the DIV or CANVAS element with inline CSS?

zibous commented 4 years ago 
Chart.defaults.set('radar.scales.r.ticks', { backdropColor: 'red' });

Do not work any more... Downloaded Chart.js-3.0.0-beta.5.zip

But in package.json I see '"version": "3.0.0-beta.3"'. So I'm not sure if it's really version "3.0 beta-5".

kurkle commented 4 years ago

We moved the controller defaults under controllers. So defaults.controllers.radar.

zibous commented 4 years ago

@kurkle Thanks, works now with:

Chart.defaults.set("controllers.radar.scales.r", {....)
Chart.defaults.set("controllers.polarArea.scales.r", {...)
kurkle commented 4 years ago

Closing in favor of #8056