Se agrega ejemplo de MultiAxis Chart.

Se sube a version 1.1.3
Se sube a GitHub 1.1.3

README.md

@@ -2,7 +2,7 @@
 
 > Libreria de chart.js para React.js
 
-[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chart-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![NPM](https://img.shields.io/npm/v/chart-2-react.svg)](https://www.npmjs.com/package/chartjs-2-react) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
 ## Install
 

example/src/App.js

@@ -1,18 +1,100 @@
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 
-import { RadialGauge } from 'chartjs-2-react'
+import { RadialGauge, Bar, Line } from 'chartjs-2-react';
 
 export default class App extends Component {
-  render () {
-    return (
-      <div>
 
-        <div style={{maxWidth: '600px', marginTop: '25px'}}>
+  render () {
+
+    return (
+      <div style={{paddingBottom: '100px'}}>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
           <h3 style={{textAlign: 'center'}}>RadialGauge Component:</h3>
           <RadialGauge />
         </div>
 
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Bar Component:</h3>
+          <Bar />
+        </div>
+
+        <div style={{maxWidth: '600px', marginTop: '25px', margin: 'auto'}}>
+          <h3 style={{textAlign: 'center'}}>Line Component:</h3>
+          <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.10",
+  "version": "1.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chartjs-2-react",
-  "version": "1.0.13",
+  "version": "1.1.3",
   "description": "Libreria de chart.js para React.js",
   "author": "aleleba",
   "license": "MIT",

src/Bar.jsx

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+
+import ID from './Service/ID.js';
+
+class BarComponent extends Component {
+
+    constructor(props) {
+
+        super(props)
+
+        let id = this.props.id ? this.props.id : ID(),
+            data = {
+                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+                datasets: [{
+                    label: 'Valor',
+                    data: [],
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options = {
+                responsive: true,
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }]
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom'
+                }
+            }
+
+        for(let i = 0; i < 5 ; i ++){
+    
+            let dato = Math.round(Math.random() * 25)
+    
+            data.datasets[0].data.push(dato)
+    
+        }
+    
+        this.state = {
+            id,
+            chart: null,
+            data,
+            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,
+            chart: new Chart(ctx, config)
+        })
+
+    }
+
+    render(){
+
+        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}`} />
+        }
+
+    }
+}
+
+export default BarComponent

src/Line.jsx

@@ -0,0 +1,98 @@
+import React, { Component } from 'react';
+
+import ID from './Service/ID.js';
+
+class LineComponent extends Component {
+
+    constructor(props) {
+
+        super(props)
+
+        let id = this.props.id ? this.props.id : ID(),
+            data = {
+                labels: ['Valor 1', 'Valor 2', 'Valor 3', 'Valor 4', 'Valor 5'],
+                datasets: [{
+                    label: 'Valor',
+                    fill: false,
+                    data: [],
+                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options = {
+                responsive: true,
+                scales: {
+                    yAxes: [{
+                        ticks: {
+                            beginAtZero: true
+                        }
+                    }]
+                },
+                legend: {
+                    display: true,
+                    position: 'bottom'
+                }
+            }
+
+        for(let i = 0; i < 5 ; i ++){
+    
+            let dato = Math.round(Math.random() * 25)
+    
+            data.datasets[0].data.push(dato)
+    
+        }
+    
+        this.state = {
+            id,
+            chart: null,
+            data,
+            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,
+            chart: new Chart(ctx, config)
+        })
+
+    }
+
+    render(){
+      
+        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}`} />
+        }
+
+        
+    }
+}
+
+export default LineComponent

src/index.js

@@ -1,5 +1,9 @@
 import RadialGauge from './RadialGauge.jsx';
+import Bar from './Bar.jsx';
+import Line from './Line.jsx';
 
 export { RadialGauge }
+export { Bar }
+export { Line }
 
 export default { RadialGauge }