[bug]: Invalid CSS variable name in chart component

[ianmuscat]

Describe the bug

The chart component appears to set a CSS variable dynamically as --color-${key}. However, the value of key is allowed to contain characters that are invalid as part of a CSS variable name. For example, the . character is not valid in CSS identifiers as per the CSS specification.

Actual result

Expected result

Affected component/components

Chart

How to reproduce

(see linked StackBlitz example, based off-of this)

1. Use the chart component with data/chart config which contains a key that would be an invalid in a CSS variable (e.g. example.com). As a workaround, you can use a legal CSS variable name as the key, and customize the name using the label (however it was not immediately obvious where the issue lay).

Codesandbox/StackBlitz link

https://stackblitz.com/edit/shadcn-chart-cssvar-issue

Logs

No response

System Info

Chrome, macOS

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues