mirror of
https://github.com/aleleba/chartjs-2-react.git
synced 2025-07-02 19:58:18 -06:00
Compare commits
3 Commits
Author | SHA1 | Date | |
---|---|---|---|
54eaf0675a | |||
433a810c46 | |||
af8bee047b |
@ -24,6 +24,75 @@ export default class App extends Component {
|
|||||||
<Line />
|
<Line />
|
||||||
</div>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
24878
package-lock.json
generated
24878
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "chartjs-2-react",
|
"name": "chartjs-2-react",
|
||||||
"version": "1.1.1",
|
"version": "1.1.4",
|
||||||
"description": "Libreria de chart.js para React.js",
|
"description": "Libreria de chart.js para React.js",
|
||||||
"author": "aleleba",
|
"author": "aleleba",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
@ -46,13 +46,13 @@
|
|||||||
"gh-pages": "^1.2.0",
|
"gh-pages": "^1.2.0",
|
||||||
"react": "^16.4.1",
|
"react": "^16.4.1",
|
||||||
"react-dom": "^16.4.1",
|
"react-dom": "^16.4.1",
|
||||||
"react-scripts": "^1.1.4",
|
"react-scripts": "^4.0.1",
|
||||||
"rollup": "^0.64.1",
|
"rollup": "^0.64.1",
|
||||||
"rollup-plugin-babel": "^3.0.7",
|
"rollup-plugin-babel": "^3.0.7",
|
||||||
"rollup-plugin-commonjs": "^9.1.3",
|
"rollup-plugin-commonjs": "^9.1.3",
|
||||||
"rollup-plugin-node-resolve": "^3.3.0",
|
"rollup-plugin-node-resolve": "^3.3.0",
|
||||||
"rollup-plugin-peer-deps-external": "^2.2.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"
|
"rollup-plugin-url": "^1.4.0"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
@ -60,6 +60,7 @@
|
|||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"chart.js": "^2.9.3",
|
"chart.js": "^2.9.3",
|
||||||
"chartjs-chart-radial-gauge": "^1.0.3"
|
"chartjs-chart-radial-gauge": "^1.0.3",
|
||||||
|
"request": "^2.88.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -71,6 +71,15 @@ class BarComponent extends Component {
|
|||||||
render(){
|
render(){
|
||||||
|
|
||||||
if (this.state.chart !== null) {
|
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();
|
this.state.chart.update();
|
||||||
|
|
||||||
|
11
src/Line.jsx
11
src/Line.jsx
@ -70,8 +70,17 @@ class LineComponent extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
|
|
||||||
if (this.state.chart !== null) {
|
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();
|
this.state.chart.update();
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user