mirror of
https://github.com/status-im/react-native-gifted-charts.git
synced 2025-02-24 01:28:20 +00:00
62 lines
1.1 KiB
JavaScript
62 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
import {View} from 'react-native';
|
|
import {BarChart} from '../../src/BarChart';
|
|
|
|
const BarThreeD = () => {
|
|
const barData = [
|
|
{
|
|
value: 230,
|
|
label: 'Jan',
|
|
frontColor: '#4ABFF4',
|
|
sideColor: '#23A7F3',
|
|
topColor: '#92e6f6',
|
|
},
|
|
{
|
|
value: 180,
|
|
label: 'Feb',
|
|
frontColor: '#79C3DB',
|
|
sideColor: '#68BCD7',
|
|
topColor: '#9FD4E5',
|
|
},
|
|
{
|
|
value: 195,
|
|
label: 'Mar',
|
|
frontColor: '#28B2B3',
|
|
sideColor: '#0FAAAB',
|
|
topColor: '#66C9C9',
|
|
},
|
|
{
|
|
value: 250,
|
|
label: 'Apr',
|
|
frontColor: '#4ADDBA',
|
|
sideColor: '#36D9B2',
|
|
topColor: '#7DE7CE',
|
|
},
|
|
{
|
|
value: 320,
|
|
label: 'May',
|
|
frontColor: '#91E3E3',
|
|
sideColor: '#85E0E0',
|
|
topColor: '#B0EAEB',
|
|
},
|
|
];
|
|
return (
|
|
<View>
|
|
<BarChart
|
|
showFractionalValue
|
|
showYAxisIndices
|
|
hideRules
|
|
noOfSections={4}
|
|
maxValue={400}
|
|
data={barData}
|
|
barWidth={40}
|
|
sideWidth={15}
|
|
isThreeD
|
|
side="right"
|
|
/>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default BarThreeD;
|