fix: minor

s0ftik3 · May 16, 2023 · 52a6b9a · 52a6b9a
1 parent 73ebd82
commit 52a6b9a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -60,14 +60,15 @@ function MyChart() {
 ```
 
 ## Chart Props
-| Prop        | Description                                    | Type    |
-|-------------|------------------------------------------------|---------|
-| width       | The width of the chart canvas in pixels.        | number \| undefined   |
-| height      | The height of the chart canvas in pixels.       | number \| undefined   |
-| fallback    | A fallback element to display when chart fails. | JSX.Element |
-| type        | The type of the chart.                          | keyof [ChartTypeRegistry](https://www.chartjs.org/docs/latest/api/interfaces/ChartTypeRegistry.html) |
-| data        | The chart data object.                          | [ChartData](https://www.chartjs.org/docs/latest/api/interfaces/ChartData.html) \| undefined |
-| options     | The chart options object.                       | [ChartOptions](https://www.chartjs.org/docs/latest/api/interfaces/CoreChartOptions.html) \| undefined |
+| Prop     | Description                                     | Type    |
+|----------|-------------------------------------------------|---------|
+| width    | The width of the chart canvas in pixels.        | number \| undefined   |
+| height   | The height of the chart canvas in pixels.       | number \| undefined   |
+| fallback | A fallback element to display when chart fails. | JSX.Element |
+| type     | The type of the chart.                          | keyof [ChartTypeRegistry](https://www.chartjs.org/docs/latest/api/interfaces/ChartTypeRegistry.html) |
+| data     | The chart data object.                          | [ChartData](https://www.chartjs.org/docs/latest/api/interfaces/ChartData.html) \| undefined |
+| options  | The chart options object.                       | [ChartOptions](https://www.chartjs.org/docs/latest/api/interfaces/CoreChartOptions.html) \| undefined |
+| plugins  | The chart plugins object.                       | [Plugin](https://www.chartjs.org/docs/latest/api/interfaces/Plugin.html)[] \| undefined |
 
 ## Examples
 Check out `/dev` folder and run the SolidJs application to see how it works.

diff --git a/dev/App.tsx b/dev/App.tsx
@@ -53,7 +53,7 @@ const App: Component = () => {
     }
 
     const onDimensionsInput = (type: 'width' | 'height', event: any) => {
-        setChartConfig(type, () => event.target.value)
+        setChartConfig(type, () => +event.target.value)
     }
 
     const onTypeSelect = (event: any) => {

diff --git a/src/chart.tsx b/src/chart.tsx
@@ -14,6 +14,7 @@ export default function ChartJs(props: ChartJsProps) {
             type: 'line',
             data: {} as ChartData,
             options: { responsive: true } as ChartOptions,
+            plugins: [],
         },
         props
     )
@@ -25,6 +26,7 @@ export default function ChartJs(props: ChartJsProps) {
             type: config.type,
             data: config.data,
             options: config.options,
+            plugins: config.plugins,
         })
     }
 
@@ -61,8 +63,10 @@ export default function ChartJs(props: ChartJsProps) {
         on(
             () => merged.type,
             () => {
+                const dimensions = [chart.width, chart.height]
                 chart.destroy()
                 init()
+                chart.resize(...dimensions)
             },
             {
                 defer: true,

diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,9 @@
-import { ChartData, ChartOptions, ChartTypeRegistry } from 'chart.js/auto'
+import {
+    ChartData,
+    ChartOptions,
+    ChartTypeRegistry,
+    Plugin,
+} from 'chart.js/auto'
 import { JSX } from 'solid-js/types/jsx'
 
 export interface ChartJsProps {
@@ -8,5 +13,6 @@ export interface ChartJsProps {
     type: keyof ChartTypeRegistry
     data?: ChartData
     options?: ChartOptions
+    plugins?: Plugin[]
     [key: string]: any
 }