Updated examples and package

.gitignore

@@ -10,4 +10,7 @@
 
 
 # Error File
-yarn-error.log
+yarn-error.log
+
+build
+dist

.npmignore

@@ -8,3 +8,18 @@
 # Lock File
 yarn.lock
 package.lock.json
+examples
+test
+jest.config.js
+yarn-error.log
+.eslintrc.js
+.prettierrc.js
+.stylelintrc.js
+.babelrc
+.eslintignore
+.prettierignore
+.stylelintignore
+.gitignore
+.gitattributes
+.editorconfig
+.env

README.md

@@ -5,7 +5,7 @@
 Using NPM
 
 ```shell
-npm add @cubetiq/react-chart-js
+npm install @cubetiq/react-chart-js
 ```
 
 OR using Yarn
@@ -14,7 +14,8 @@ OR using Yarn
 yarn add @cubetiq/react-chart-js
 ```
 
-### Link to examples: [https://git.cubetiqs.com/CUBETIQ/react-chart-js/src/branch/master/examples/line-chart-example](https://git.cubetiqs.com/CUBETIQ/react-chart-js/src/branch/master/examples/line-chart-example)
+
+### View a [Demo](https://cubetiq.github.io/chartjs-demos)
 
 ### Line Chart Example
 ```typescript

dist/ReactChartJs.d.ts

@@ -1,8 +0,0 @@
-import { ChartConfiguration } from 'chart.js';
-import { FunctionComponent } from 'react';
-interface ReactChartJSProps {
-    chartConfig?: ChartConfiguration;
-}
-declare const ReactChartJs: FunctionComponent<ReactChartJSProps>;
-export default ReactChartJs;
-//# sourceMappingURL=ReactChartJs.d.ts.map

dist/ReactChartJs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactChartJs.d.ts","sourceRoot":"","sources":["../src/ReactChartJs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,kBAAkB,EAAE,MAAM,UAAU,CAAC;AACrD,OAAc,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAEpE,UAAU,iBAAiB;IACvB,WAAW,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAMD,QAAA,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA4BtD,CAAC;AAEF,eAAe,YAAY,CAAC"}

dist/ReactChartJs.js

@@ -1,41 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var chart_js_1 = require("chart.js");
-var react_1 = __importStar(require("react"));
-var ReactChartJs = function (props) {
-    var chartConfig = props.chartConfig;
-    var canvasDomRef = react_1.useRef();
-    var chartInstanceRef = react_1.useRef({});
-    react_1.useEffect(function () {
-        var canvasDom = canvasDomRef.current;
-        var chartInstance = chartInstanceRef.current.chartInstance;
-        if (chartInstance) {
-            chartInstance.destroy();
-        }
-        chartInstanceRef.current.chartInstance = new chart_js_1.Chart(canvasDom, chartConfig);
-    }, [chartConfig]);
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("canvas", { ref: function (instance) {
-                canvasDomRef.current = instance;
-            }, width: "400", height: "200" })));
-};
-exports.default = ReactChartJs;

dist/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ReactChartJs } from "./ReactChartJs";
-//# sourceMappingURL=index.d.ts.map

dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

dist/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReactChartJs = void 0;
-var ReactChartJs_1 = require("./ReactChartJs");
-Object.defineProperty(exports, "ReactChartJs", { enumerable: true, get: function () { return __importDefault(ReactChartJs_1).default; } });

examples/line-chart-example/.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+build
+dist

examples/line-chart-example/dist/asset-manifest.json

@@ -1,22 +0,0 @@
-{
-  "files": {
-    "main.css": "/static/css/main.d0318b9a.chunk.css",
-    "main.js": "/static/js/main.8b5d3ab1.chunk.js",
-    "main.js.map": "/static/js/main.8b5d3ab1.chunk.js.map",
-    "runtime-main.js": "/static/js/runtime-main.88c5baa2.js",
-    "runtime-main.js.map": "/static/js/runtime-main.88c5baa2.js.map",
-    "static/js/2.0a2404c5.chunk.js": "/static/js/2.0a2404c5.chunk.js",
-    "static/js/2.0a2404c5.chunk.js.map": "/static/js/2.0a2404c5.chunk.js.map",
-    "index.html": "/index.html",
-    "precache-manifest.388547c8a5546bf2062f15580f0fe75b.js": "/precache-manifest.388547c8a5546bf2062f15580f0fe75b.js",
-    "service-worker.js": "/service-worker.js",
-    "static/css/main.d0318b9a.chunk.css.map": "/static/css/main.d0318b9a.chunk.css.map",
-    "static/js/2.0a2404c5.chunk.js.LICENSE.txt": "/static/js/2.0a2404c5.chunk.js.LICENSE.txt"
-  },
-  "entrypoints": [
-    "static/js/runtime-main.88c5baa2.js",
-    "static/js/2.0a2404c5.chunk.js",
-    "static/css/main.d0318b9a.chunk.css",
-    "static/js/main.8b5d3ab1.chunk.js"
-  ]
-}

examples/line-chart-example/dist/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Line Chart Example</title><link href="/static/css/main.d0318b9a.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,l,a=r[0],i=r[1],p=r[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var i=t[a];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonpline-chart-example"]=this["webpackJsonpline-chart-example"]||[],i=a.push.bind(a);a.push=r,a=a.slice();for(var p=0;p<a.length;p++)r(a[p]);var f=i;t()}([])</script><script src="/static/js/2.0a2404c5.chunk.js"></script><script src="/static/js/main.8b5d3ab1.chunk.js"></script></body></html>

examples/line-chart-example/dist/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

examples/line-chart-example/dist/precache-manifest.388547c8a5546bf2062f15580f0fe75b.js

@@ -1,26 +0,0 @@
-self.__precacheManifest = (self.__precacheManifest || []).concat([
-  {
-    "revision": "caa45228c98c35ebcdd94d455ebcc076",
-    "url": "/index.html"
-  },
-  {
-    "revision": "092e5934930817e7b123",
-    "url": "/static/css/main.d0318b9a.chunk.css"
-  },
-  {
-    "revision": "5a83249d3b75a29162d8",
-    "url": "/static/js/2.0a2404c5.chunk.js"
-  },
-  {
-    "revision": "d0ad795f6b2d2d87bd5b5e69bbd90ddb",
-    "url": "/static/js/2.0a2404c5.chunk.js.LICENSE.txt"
-  },
-  {
-    "revision": "092e5934930817e7b123",
-    "url": "/static/js/main.8b5d3ab1.chunk.js"
-  },
-  {
-    "revision": "9824a2c8a54cc4dee024",
-    "url": "/static/js/runtime-main.88c5baa2.js"
-  }
-]);

examples/line-chart-example/dist/robots.txt

@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:

examples/line-chart-example/dist/service-worker.js

@@ -1,39 +0,0 @@
-/**
- * Welcome to your Workbox-powered service worker!
- *
- * You'll need to register this file in your web app and you should
- * disable HTTP caching for this file too.
- * See https://goo.gl/nhQhGp
- *
- * The rest of the code is auto-generated. Please don't update this file
- * directly; instead, make changes to your Workbox build configuration
- * and re-run your build process.
- * See https://goo.gl/2aRDsh
- */
-
-importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
-
-importScripts(
-  "/precache-manifest.388547c8a5546bf2062f15580f0fe75b.js"
-);
-
-self.addEventListener('message', (event) => {
-  if (event.data && event.data.type === 'SKIP_WAITING') {
-    self.skipWaiting();
-  }
-});
-
-workbox.core.clientsClaim();
-
-/**
- * The workboxSW.precacheAndRoute() method efficiently caches and responds to
- * requests for URLs in the manifest.
- * See https://goo.gl/S9QRab
- */
-self.__precacheManifest = [].concat(self.__precacheManifest || []);
-workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
-
-workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
-  
-  blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/],
-});

examples/line-chart-example/dist/static/css/main.d0318b9a.chunk.css

@@ -1,2 +0,0 @@
-body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.app{margin:0 20px}
-/*# sourceMappingURL=main.d0318b9a.chunk.css.map */

examples/line-chart-example/dist/static/css/main.d0318b9a.chunk.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["index.css","App.css"],"names":[],"mappings":"AAAA,KACE,QAAS,CACT,mJAEY,CACZ,kCAAmC,CACnC,iCACF,CAEA,KACE,yEAEF,CCZA,KACI,aACJ","file":"main.d0318b9a.chunk.css","sourcesContent":["body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n",".app {\n    margin: 0px 20px;\n}\n"]}

examples/line-chart-example/dist/static/js/2.0a2404c5.chunk.js.LICENSE.txt

@@ -1,41 +0,0 @@
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-/*!
- * Chart.js v2.9.3
- * https://www.chartjs.org
- * (c) 2019 Chart.js Contributors
- * Released under the MIT License
- */
-
-/** @license React v0.19.1
- * scheduler.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.14.0
- * react-dom.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/** @license React v16.14.0
- * react.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-//! moment.js

examples/line-chart-example/dist/static/js/main.8b5d3ab1.chunk.js

@@ -1,2 +0,0 @@
-(this["webpackJsonpline-chart-example"]=this["webpackJsonpline-chart-example"]||[]).push([[0],{10:function(e,t,n){},15:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(2),l=n.n(r),i=(n(9),n(10),n(3));var c=function(e){return o.a.createElement(i.ReactChartJs,{chartConfig:{type:"line",options:{responsive:!0,title:{display:!0,text:"Monthly Payments"},tooltips:{mode:"index",intersect:!1},hover:{mode:"nearest",intersect:!0}},data:{datasets:[{label:"Part-time",data:[5,10,30],fill:!1,borderColor:"#ff6384"},{label:"Full-time",data:[10,15,45],fill:!1,borderColor:"#36a2eb"}],labels:["Jan","Feb","Mar"]}}})};var s=function(){return o.a.createElement("div",{className:"app"},o.a.createElement(c,null))};Boolean("localhost"===window.location.hostname||"[::1]"===window.location.hostname||window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/));l.a.render(o.a.createElement(o.a.StrictMode,null,o.a.createElement(s,null)),document.getElementById("root")),"serviceWorker"in navigator&&navigator.serviceWorker.ready.then((function(e){e.unregister()})).catch((function(e){console.error(e.message)}))},4:function(e,t,n){e.exports=n(15)},9:function(e,t,n){}},[[4,1,2]]]);
-//# sourceMappingURL=main.8b5d3ab1.chunk.js.map

examples/line-chart-example/dist/static/js/runtime-main.88c5baa2.js

@@ -1,2 +0,0 @@
-!function(e){function r(r){for(var n,l,a=r[0],i=r[1],p=r[2],c=0,s=[];c<a.length;c++)l=a[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,p||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var i=t[a];0!==o[i]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"===typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var a=this["webpackJsonpline-chart-example"]=this["webpackJsonpline-chart-example"]||[],i=a.push.bind(a);a.push=r,a=a.slice();for(var p=0;p<a.length;p++)r(a[p]);var f=i;t()}([]);
-//# sourceMappingURL=runtime-main.88c5baa2.js.map

examples/line-chart-example/package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@cubetiq/react-chart-js": "^1.0.0",
+    "@cubetiq/react-chart-js": "^1.1.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-scripts": "3.4.3",
     "typescript": "~3.7.2"
   },

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

@@ -5,38 +5,17 @@ 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'],
                 },
             }}
         />

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cubetiq/react-chart-js",
-    "version": "1.1.2",
+    "version": "1.1.9",
     "description": "Chart.js for React and TypeScript",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -30,6 +30,7 @@
     "scripts": {
         "build": "tsc",
         "test": "jest",
+        "pub": "npm publish --access public --registry https://registry.npmjs.org",
         "build:test": "yarn jest && yarn build",
         "run:example": "cd examples/line-chart-example && yarn start"
     },
@@ -40,7 +41,7 @@
         "@types/chart.js": "^2.9.25",
         "@types/jest": "^26.0.10",
         "@types/node": "^14.6.1",
-        "@types/react": "^16.9.52",
+        "@types/react": "^17.0.34",
         "@typescript-eslint/eslint-plugin": "^3.10.1",
         "@typescript-eslint/parser": "^3.10.1",
         "babel-jest": "^26.3.0",
@@ -51,10 +52,10 @@
         "jest": "^26.4.2",
         "lint-staged": "^10.2.13",
         "prettier": "^2.1.1",
-        "react": "^16.14.0",
+        "react": "^17.0.2",
         "ts-jest": "^26.3.0",
         "tsc": "^1.20150623.0",
-        "typescript": "^4.0.2"
+        "typescript": "^4.4.4"
     },
     "husky": {
         "hooks": {
@@ -70,6 +71,6 @@
         ]
     },
     "dependencies": {
-        "chart.js": "^2.9.3"
+        "chart.js": "^3.6.0"
     }
 }

src/ReactChartJs.tsx

@@ -1,8 +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;
 }
 
 interface RefForChartInstance {
@@ -10,7 +15,7 @@ interface RefForChartInstance {
 }
 
 const ReactChartJs: FunctionComponent<ReactChartJSProps> = (props: any) => {
-    const { chartConfig } = props;
+    const { chartConfig, containerProps, canvasProps } = props;
 
     const canvasDomRef = useRef<HTMLCanvasElement>();
 
@@ -27,13 +32,14 @@ const ReactChartJs: FunctionComponent<ReactChartJSProps> = (props: any) => {
     }, [chartConfig]);
 
     return (
-        <div>
+        <div {...containerProps}>
             <canvas
                 ref={(instance: any) => {
                     canvasDomRef.current = instance!;
                 }}
-                width="400"
-                height="200"
+                width={props.width || 'auto'}
+                height={props.height || 'auto'}
+                {...canvasProps}
             />
         </div>
     );