aleleba/chartjs-2-react
1
0
Fork 0
mirror of https://github.com/aleleba/chartjs-2-react.git synced 2025-06-20 05:48:19 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Se agrega ejemplo de MultiAxis Chart.

Browse Source 
Se sube a version 1.1.3
Se sube a GitHub 1.1.3
This commit is contained in:
Alejandro Lembke Barrientos
2020-07-10 19:05:18 +00:00
parent af8bee047b
commit 433a810c46
3 changed files with 71 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
example/src/App.js
View File

@ -24,6 +24,75 @@ 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>
)
}