fix: multitype chart typings (#792)

reactchartjs · Oct 20, 2021 · 2f19eb3 · 2f19eb3
1 parent 5594170
commit 2f19eb3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/types.ts b/src/types.ts
@@ -17,15 +17,17 @@ import type {
 export interface Props<
   TType extends ChartType = ChartType,
   TData = DefaultDataPoint<TType>,
-  TLabel = unknown,
-  TOtherType extends TType = TType
+  TLabel = unknown
 > extends CanvasHTMLAttributes<HTMLCanvasElement> {
   type: TType;
+  /**
+   * @todo Remove function variant.
+   */
   data:
-    | ChartData<TOtherType, TData, TLabel>
-    | ((canvas: HTMLCanvasElement) => ChartData<TOtherType, TData, TLabel>);
-  options?: ChartOptions<TOtherType>;
-  plugins?: Plugin<TOtherType>[];
+    | ChartData<TType, TData, TLabel>
+    | ((canvas: HTMLCanvasElement) => ChartData<TType, TData, TLabel>);
+  options?: ChartOptions<TType>;
+  plugins?: Plugin<TType>[];
   redraw?: boolean;
   /**
    * @todo Replace with `children` prop.
@@ -66,10 +68,9 @@ export type TypedChartComponent<
   : <
       TType extends ChartType = ChartType,
       TData = DefaultDataPoint<TType>,
-      TLabel = unknown,
-      TOtherType extends TType = TType
+      TLabel = unknown
     >(
-      props: Props<TType, TData, TLabel, TOtherType> & {
+      props: Props<TType, TData, TLabel> & {
         ref?: ForwardedRef<ChartJSOrUndefined<TType, TData, TLabel>>;
       }
     ) => JSX.Element;
diff --git a/stories/Chart.data.ts b/stories/Chart.data.ts
@@ -5,7 +5,7 @@ export const multiTypeData = {
   labels: months,
   datasets: [
     {
-      type: 'line',
+      type: 'line' as const,
       label: 'Dataset 1',
       borderColor: colorRed,
       borderWidth: 2,
@@ -15,7 +15,7 @@ export const multiTypeData = {
       ),
     },
     {
-      type: 'bar',
+      type: 'bar' as const,
       label: 'Dataset 2',
       backgroundColor: colorGreen,
       data: Array.from({ length: 7 }, () =>
@@ -25,7 +25,7 @@ export const multiTypeData = {
       borderWidth: 2,
     },
     {
-      type: 'bar',
+      type: 'bar' as const,
       label: 'Dataset 3',
       backgroundColor: colorBlue,
       data: Array.from({ length: 7 }, () =>

diff --git a/test/chart.test-d.tsx b/test/chart.test-d.tsx
@@ -2,6 +2,7 @@ import { expectError } from 'tsd';
 import React from 'react';
 import { Plugin } from 'chart.js';
 import Chart, { Scatter, Doughnut } from '../src';
+import { multiTypeData } from '../stories/Chart.data';
 
 const data = {
   datasets: [],
@@ -13,8 +14,9 @@ const data = {
 
 <Chart type='radar' data={data} plugins={[] as Plugin<'radar'>[]} />;
 <Scatter data={data} plugins={[] as Plugin<'scatter'>[]} />;
+<Chart type='bar' data={multiTypeData} />;
+<Chart type='scatter' data={data} plugins={[] as Plugin<'bar'>[]} />;
 
-expectError(<Chart type='radar' data={data} plugins={[] as Plugin<'bar'>[]} />);
 expectError(<Scatter data={data} plugins={[] as Plugin<'bar'>[]} />);
 
 /**