Se agrega ejemplo de MultiAxis Chart.

Se sube a version 1.1.3
Se sube a GitHub 1.1.3

example/src/App.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { RadialGauge, Bar, Line } from 'chartjs-2-react';
 
 export default class App extends Component {
+
   render () {
 
     return (
@@ -23,7 +24,77 @@ export default class App extends Component {
           <Line />
         </div>
 
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Multi Axis Bar Line Component:</h3>
+          <Bar config={{
+            data: {
+              datasets: [{
+                  label: 'Bar Dataset',
+                  data: [10, 20, 30, 40],
+                  yAxisID: 'A',
+                  backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                  borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                label: 'Bar Dataset',
+                data: [10, 20, 30, 40],
+                yAxisID: 'A',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                label: 'Bar Dataset',
+                data: [10, 20, 30, 40],
+                yAxisID: 'A',
+                backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                // Changes this dataset to become a line
+                type: 'line',
+                yAxisID: 'B',
+                label: 'Line Dataset',
+                data: [5, 8, 10, 30],
+                backgroundColor: 'transparent',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              },
+              {
+                // Changes this dataset to become a line
+                type: 'line',
+                yAxisID: 'B',
+                label: 'Line Dataset',
+                data: [15, 20, 25, 30],
+                backgroundColor: 'transparent',
+                borderColor: 'rgba(75, 192, 192, 1)'
+              }],
+              labels: ['January', 'February', 'March', 'April'],
+          },
+          options: {
+            scales: {
+              yAxes: [{
+                id: 'A',
+                type: 'linear',
+                position: 'left',
+                /*ticks: {
+                  max: 1,
+                  min: 0
+                }*/
+              }, {
+                id: 'B',
+                type: 'linear',
+                position: 'right',
+                /*ticks: {
+                  max: 1,
+                  min: 0
+                }*/
+              }]
+            }
+          }
+          }}/>
+        </div>
+
       </div>
     )
   }
+  
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.13",
+  "version": "1.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -8956,7 +8956,8 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
     },
     "js-yaml": {
       "version": "3.13.1",
@@ -9290,7 +9291,8 @@
     "lodash": {
       "version": "4.17.15",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
-      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
+      "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+      "dev": true
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -9369,6 +9371,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -10076,7 +10079,8 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
     },
     "object-copy": {
       "version": "0.1.0",
@@ -12704,6 +12708,7 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -12900,15 +12905,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-chartjs-2": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz",
-      "integrity": "sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==",
-      "requires": {
-        "lodash": "^4.17.4",
-        "prop-types": "^15.5.8"
-      }
-    },
     "react-dev-utils": {
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.3.tgz",
@@ -13079,7 +13075,8 @@
     "react-is": {
       "version": "16.12.0",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz",
-      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q=="
+      "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==",
+      "dev": true
     },
     "react-scripts": {
       "version": "1.1.5",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.1.0",
+  "version": "1.1.3",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",
@@ -60,7 +60,6 @@
   ],
   "dependencies": {
     "chart.js": "^2.9.3",
-    "chartjs-chart-radial-gauge": "^1.0.3",
-    "react-chartjs-2": "^2.9.0"
+    "chartjs-chart-radial-gauge": "^1.0.3"
   }
 }

src/Bar.jsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 
-import { Bar } from 'react-chartjs-2';
-
 import ID from './Service/ID.js';
 
 class BarComponent extends Component {
@@ -34,10 +32,6 @@ class BarComponent extends Component {
                     display: true,
                     position: 'bottom'
                 }
-            },
-            legend = {
-                display: true,
-                position: 'bottom'
             }
 
         for(let i = 0; i < 5 ; i ++){
@@ -50,35 +44,52 @@ class BarComponent extends Component {
     
         this.state = {
             id,
+            chart: null,
             data,
-            width: 100,
-            height: 50,
-            options,
-            legend,
-            redraw: false
+            options
         }
     
     }
 
     componentDidMount(){
-            
+
+        var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
+
+        let config = {
+            type: 'bar',
+            data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
+            options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
+        }
+
         this.setState({
             id: this.props.id !== undefined ? this.props.id : this.state.id,
-            data: this.props.data !== undefined ? this.props.data : this.state.data,
-            options: this.props.options !== undefined ? this.props.options : this.state.options,
-            width: this.props.width !== undefined ? this.props.width : this.state.width,
-            height: this.props.height !== undefined ? this.props.height : this.state.height,
-            legend: this.props.legend !== undefined ? this.props.legend : this.state.legend,
-            redraw: this.props.redraw !== undefined ? this.props.redraw : this.state.redraw
+            chart: new Chart(ctx, config)
         })
 
     }
 
     render(){
 
-        return(
-            <Bar id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} />
-        )
+        if (this.state.chart !== null) {
+
+            if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
+                this.state.chart.data.labels = this.props.config.data.labels
+                this.state.chart.data.datasets = this.props.config.data.datasets
+            }
+
+            if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
+                this.state.chart.options = this.props.config.options
+            }
+      
+            this.state.chart.update();
+    
+            return <canvas id={`${this.state.id}`} />
+
+    
+        } else { 
+            return <canvas id={`${this.state.id}`} />
+        }
+
     }
 }
 

src/Line.jsx

@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
 
-import { Line } from 'react-chartjs-2';
-
 import ID from './Service/ID.js';
 
 class LineComponent extends Component {
@@ -35,10 +33,6 @@ class LineComponent extends Component {
                     display: true,
                     position: 'bottom'
                 }
-            },
-            legend = {
-                display: true,
-                position: 'bottom'
             }
 
         for(let i = 0; i < 5 ; i ++){
@@ -51,35 +45,53 @@ class LineComponent extends Component {
     
         this.state = {
             id,
+            chart: null,
             data,
-            width: 100,
-            height: 50,
-            options,
-            legend,
-            redraw: false
+            options
         }
     
     }
 
     componentDidMount(){
-            
+
+        var ctx = document.getElementById(`${this.state.id}`).getContext('2d');
+
+        let config = {
+            type: 'line',
+            data: (this.props.config !== undefined) && (this.props.config.data !== undefined) ? this.props.config.data : this.state.data,
+            options: (this.props.config !== undefined) && (this.props.config.options !== undefined) ? this.props.config.options : this.state.options
+        }
+
         this.setState({
             id: this.props.id !== undefined ? this.props.id : this.state.id,
-            data: this.props.data !== undefined ? this.props.data : this.state.data,
-            options: this.props.options !== undefined ? this.props.options : this.state.options,
-            width: this.props.width !== undefined ? this.props.width : this.state.width,
-            height: this.props.height !== undefined ? this.props.height : this.state.height,
-            legend: this.props.legend !== undefined ? this.props.legend : this.state.legend,
-            redraw: this.props.redraw !== undefined ? this.props.redraw : this.state.redraw
+            chart: new Chart(ctx, config)
         })
 
     }
 
     render(){
+      
+        if (this.state.chart !== null) {
 
-        return(
-            <Line id={this.state.id} data={this.state.data} options={this.state.options} width={this.state.width} height={this.state.height} legend={this.state.legend} redraw={this.state.redraw} fill={false} />
-        )
+            if((this.props.config !== undefined) && (this.props.config.data !== undefined)){
+                this.state.chart.data.labels = this.props.config.data.labels
+                this.state.chart.data.datasets = this.props.config.data.datasets
+            }
+
+            if((this.props.config !== undefined) && (this.props.config.options !== undefined)){
+                this.state.chart.options = this.props.config.options
+            }
+      
+            this.state.chart.update();
+    
+            return <canvas id={`${this.state.id}`} />
+
+    
+        } else { 
+            return <canvas id={`${this.state.id}`} />
+        }
+
+        
     }
 }