From ab50c04230b4ee4716df5ceac8b958bb882e928b Mon Sep 17 00:00:00 2001
From: Sambo Chea <sombochea@cubetiqs.com>
Date: Thu, 11 Nov 2021 16:30:02 +0700
Subject: [PATCH] Updated to 1.1.9

---
 examples/line-chart-example/package.json      |  2 +-
 .../src/LineChartExample.tsx                  | 35 +++++--------------
 package.json                                  |  2 +-
 src/ReactChartJs.tsx                          |  9 ++---
 4 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/examples/line-chart-example/package.json b/examples/line-chart-example/package.json
index 59653f7..6d72b0c 100644
--- a/examples/line-chart-example/package.json
+++ b/examples/line-chart-example/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@cubetiq/react-chart-js": "^1.1.7",
+    "@cubetiq/react-chart-js": "^1.1.8",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
diff --git a/examples/line-chart-example/src/LineChartExample.tsx b/examples/line-chart-example/src/LineChartExample.tsx
index fc41e60..326a27a 100644
--- a/examples/line-chart-example/src/LineChartExample.tsx
+++ b/examples/line-chart-example/src/LineChartExample.tsx
@@ -5,40 +5,21 @@ function LineChartExample(props: any) {
     return (
         <ReactChartJs
             chartConfig={{
-                type: 'line',
-                options: {
-                    responsive: true,
-                    title: {
-                        display: true,
-                        text: 'Monthly Payments',
-                    },
-                    tooltips: {
-                        mode: 'index',
-                        intersect: false,
-                    },
-                    hover: {
-                        mode: 'nearest',
-                        intersect: true,
-                    },
-                },
+                type: 'pie',
                 data: {
+                    labels: ['Red', 'Blue', 'Yellow'],
                     datasets: [
                         {
-                            label: 'Part-time',
-                            data: [5, 10, 30],
-                            fill: false,
-                            borderColor: '#ff6384',
-                        },
-                        {
-                            label: 'Full-time',
-                            data: [10, 15, 45],
-                            fill: false,
-                            borderColor: '#36a2eb',
+                            label: 'My First Dataset',
+                            data: [300, 50, 100],
+                            backgroundColor: ['rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)'],
+                            hoverOffset: 4,
                         },
                     ],
-                    labels: ['Jan', 'Feb', 'Mar'],
                 },
             }}
+            containerProps={null}
+            canvasProps={null}
         />
     );
 }
diff --git a/package.json b/package.json
index a7d043d..2e1220f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@cubetiq/react-chart-js",
-    "version": "1.1.8",
+    "version": "1.1.9",
     "description": "Chart.js for React and TypeScript",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
diff --git a/src/ReactChartJs.tsx b/src/ReactChartJs.tsx
index 1758eb5..2152c28 100644
--- a/src/ReactChartJs.tsx
+++ b/src/ReactChartJs.tsx
@@ -1,12 +1,13 @@
-import { Chart, ChartConfiguration } from 'chart.js';
+import Chart from 'chart.js/auto';
+import { ChartConfiguration } from 'chart.js';
 import React, { FunctionComponent, useEffect, useRef } from 'react';
 
 interface ReactChartJSProps {
-    chartConfig?: ChartConfiguration;
+    chartConfig: ChartConfiguration;
     width?: number;
     height?: number;
-    containerProps: any;
-    canvasProps: any;
+    containerProps?: any;
+    canvasProps?: any;
 }
 
 interface RefForChartInstance {