Se actualizan todas las dependencias para que no existan vulnerabilidades.

Se sube a version 1.1.4
Se sube a Github 1.1.4

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.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.1.0",
+  "version": "1.1.4",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",
@@ -46,13 +46,13 @@
     "gh-pages": "^1.2.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
+    "react-scripts": "^4.0.1",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
-    "rollup-plugin-postcss": "^1.6.2",
+    "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-url": "^1.4.0"
   },
   "files": [
@@ -61,6 +61,6 @@
   "dependencies": {
     "chart.js": "^2.9.3",
     "chartjs-chart-radial-gauge": "^1.0.3",
-    "react-chartjs-2": "^2.9.0"
+    "request": "^2.88.2"
   }
 }

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(){
       
-        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.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}`} />
+        }
+
+        
     }
 }