From 2e895a26c2ee7332ad207f4b3632e22c36a06341 Mon Sep 17 00:00:00 2001
From: jacobs <jacob@tweddell.net>
Date: Mon, 15 Dec 2025 22:05:19 +0000
Subject: [PATCH 1/2] Added extraCanvasAttributes prop

---
 src/chart.tsx |  3 ++-
 src/types.ts  | 12 +++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/chart.tsx b/src/chart.tsx
index 55a6c52..f64b3d2 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -112,7 +112,8 @@ export default function DefaultChart(props: ChartProps) {
         <canvas
             ref={mergeRefs(props.ref, (el) => setCanvasRef(el))}
             height={merged.height}
-            width={merged.width}>
+            width={merged.width}
+            {...merged.extraCanvasProps}>
             {merged.fallback}
         </canvas>
     )
diff --git a/src/types.ts b/src/types.ts
index b69cc12..9660408 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,6 @@
 import type { Ref } from '@solid-primitives/refs'
 import type { ChartData, ChartOptions, Plugin, ChartTypeRegistry } from 'chart.js'
-import type { JSXElement } from 'solid-js'
+import type { JSXElement, JSX } from 'solid-js'
 
 /**
  * Chart props
@@ -52,4 +52,14 @@ export interface ChartProps {
      * @default null
      */
     ref?: Ref<HTMLCanvasElement | null>
+    /**
+     * Extra props to be forwarded directly to the canvas
+     *
+     * For example for setting the `id`, `role`, or `aria-label`.
+     *
+     * This can be used for any attribute except `width` and `height`,
+     * which can be set directly.
+     * @default {}
+     */
+    extraCanvasProps?: Omit<JSX.CanvasHTMLAttributes<HTMLCanvasElement>, 'width' | 'height'>
 }

From d31bfb3334d0993479b8e0368e5c364ca15c7839 Mon Sep 17 00:00:00 2001
From: jacobs <jacob@tweddell.net>
Date: Tue, 16 Dec 2025 09:13:08 +0000
Subject: [PATCH 2/2] Rename extraCanvasProps to extraCanvasAttributes

---
 src/chart.tsx | 2 +-
 src/types.ts  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/chart.tsx b/src/chart.tsx
index f64b3d2..ca5ce47 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -113,7 +113,7 @@ export default function DefaultChart(props: ChartProps) {
             ref={mergeRefs(props.ref, (el) => setCanvasRef(el))}
             height={merged.height}
             width={merged.width}
-            {...merged.extraCanvasProps}>
+            {...merged.extraCanvasAttributes}>
             {merged.fallback}
         </canvas>
     )
diff --git a/src/types.ts b/src/types.ts
index 9660408..1505a60 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -53,7 +53,7 @@ export interface ChartProps {
      */
     ref?: Ref<HTMLCanvasElement | null>
     /**
-     * Extra props to be forwarded directly to the canvas
+     * Extra attributes to be forwarded directly to the canvas
      *
      * For example for setting the `id`, `role`, or `aria-label`.
      *
@@ -61,5 +61,5 @@ export interface ChartProps {
      * which can be set directly.
      * @default {}
      */
-    extraCanvasProps?: Omit<JSX.CanvasHTMLAttributes<HTMLCanvasElement>, 'width' | 'height'>
+    extraCanvasAttributes?: Omit<JSX.CanvasHTMLAttributes<HTMLCanvasElement>, 'width' | 'height'>
 }