examples/line-chart-example/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@cubetiq/react-chart-js": "^1.1.9",
+    "@cubetiq/react-chart-js": "^1.1.6",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

examples/line-chart-example/src/LineChartExample.tsx

@@ -5,17 +5,38 @@ function LineChartExample(props: any) {
     return (
         <ReactChartJs
             chartConfig={{
-                type: 'pie',
+                type: 'line',
+                options: {
+                    responsive: true,
+                    title: {
+                        display: true,
+                        text: 'Monthly Payments',
+                    },
+                    tooltips: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                    hover: {
+                        mode: 'nearest',
+                        intersect: true,
+                    },
+                },
                 data: {
-                    labels: ['Red', 'Blue', 'Yellow'],
                     datasets: [
                         {
-                            label: 'My First Dataset',
+                            label: 'Part-time',
-                            data: [300, 50, 100],
+                            data: [5, 10, 30],
-                            backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
+                            fill: false,
-                            hoverOffset: 4,
+                            borderColor: '#ff6384',
+                        },
+                        {
+                            label: 'Full-time',
+                            data: [10, 15, 45],
+                            fill: false,
+                            borderColor: '#36a2eb',
                         },
                     ],
+                    labels: ['Jan', 'Feb', 'Mar'],
                 },
             }}
         />

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cubetiq/react-chart-js",
-    "version": "1.1.9",
+    "version": "1.1.7",
     "description": "Chart.js for React and TypeScript",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
     "scripts": {
         "build": "tsc",
         "test": "jest",
-        "pub": "npm publish --access public --registry https://registry.npmjs.org",
+        "pub": "yarn build && npm publish --access public",
         "build:test": "yarn jest && yarn build",
         "run:example": "cd examples/line-chart-example && yarn start"
     },

src/ReactChartJs.tsx

@@ -1,13 +1,12 @@
-import Chart from 'chart.js/auto';
+import { Chart, ChartConfiguration } from 'chart.js';
-import { ChartConfiguration } from 'chart.js';
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 
 interface ReactChartJSProps {
-    chartConfig: ChartConfiguration;
+    chartConfig?: ChartConfiguration;
     width?: number;
     height?: number;
-    containerProps?: any;
+    containerProps: any;
-    canvasProps?: any;
+    canvasProps: any;
 }
 
 interface RefForChartInstance {