react-native-chart-kit
Version:
If you're looking to **build a website or a cross-platform mobile app** – we will be happy to help you! Send a note to clients@ui1.io and we will be in touch with you shortly.
201 lines (197 loc) • 6.03 kB
JavaScript
import 'babel-polyfill'
import React from 'react'
import {ScrollView, StatusBar, Dimensions, Text} from 'react-native'
import ScrollableTabView from 'react-native-scrollable-tab-view'
import FlashMessage, {showMessage} from 'react-native-flash-message'
import LineChart from './src/line-chart'
import PieChart from './src/pie-chart'
import ProgressChart from './src/progress-chart'
import BarChart from './src/bar-chart'
import StackedBarChart from './src/stackedbar-chart'
import ContributionGraph from './src/contribution-graph'
import {
data,
contributionData,
pieChartData,
progressChartData,
stackedBarGraphData
} from './data'
// in Expo - swipe left to see the following styling, or create your own
const chartConfigs = [
{
backgroundColor: '#000000',
backgroundGradientFrom: '#1E2923',
backgroundGradientTo: '#08130D',
color: (opacity = 1) => `rgba(26, 255, 146, ${opacity})`,
style: {
borderRadius: 16
}
},
{
backgroundColor: '#022173',
backgroundGradientFrom: '#022173',
backgroundGradientTo: '#1b3fa0',
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
}
},
{
backgroundColor: '#ffffff',
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#ffffff',
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`
},
{
backgroundColor: '#26872a',
backgroundGradientFrom: '#43a047',
backgroundGradientTo: '#66bb6a',
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
}
},
{
backgroundColor: '#000000',
backgroundGradientFrom: '#000000',
backgroundGradientTo: '#000000',
color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
},
{
backgroundColor: '#0091EA',
backgroundGradientFrom: '#0091EA',
backgroundGradientTo: '#0091EA',
color: (opacity = 1) => `rgba(${255}, ${255}, ${255}, ${opacity})`
},
{
backgroundColor: '#e26a00',
backgroundGradientFrom: '#fb8c00',
backgroundGradientTo: '#ffa726',
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
}
},
{
backgroundColor: '#b90602',
backgroundGradientFrom: '#e53935',
backgroundGradientTo: '#ef5350',
color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
style: {
borderRadius: 16
}
},
{
backgroundColor: '#ff3e03',
backgroundGradientFrom: '#ff3e03',
backgroundGradientTo: '#ff3e03',
color: (opacity = 1) => `rgba(${0}, ${0}, ${0}, ${opacity})`
}
]
export default class App extends React.Component {
renderTabBar() {
return <StatusBar hidden />
}
render() {
const {width} = Dimensions.get('window')
const height = 220
return (
<ScrollableTabView renderTabBar={this.renderTabBar}>
{chartConfigs.map(chartConfig => {
const labelStyle = {
color: chartConfig.color(),
marginVertical: 10,
textAlign: 'center',
fontSize: 16
}
const graphStyle = {
marginVertical: 8,
...chartConfig.style
}
return (
<ScrollView
key={Math.random()}
style={{
backgroundColor: chartConfig.backgroundColor
}}
>
<Text style={labelStyle}>Bezier Line Chart</Text>
<LineChart
bezier
data={data}
width={width}
height={height}
yAxisLabel="$"
chartConfig={chartConfig}
style={graphStyle}
onDataPointClick={({value, getColor}) =>
showMessage({
message: `${value}`,
description: 'You selected this value',
backgroundColor: getColor(0.9)
})
}
/>
<FlashMessage duration={1000} />
<Text style={labelStyle}>Progress Chart</Text>
<ProgressChart
data={progressChartData}
width={width}
height={height}
chartConfig={chartConfig}
style={graphStyle}
/>
<Text style={labelStyle}>Bar Graph</Text>
<BarChart
width={width}
height={height}
data={data}
yAxisLabel="$"
chartConfig={chartConfig}
style={graphStyle}
/>
<Text style={labelStyle}>Stacked Bar Graph</Text>
<StackedBarChart
style={graphStyle}
data={stackedBarGraphData}
width={width}
height={220}
chartConfig={chartConfig}
/>
<Text style={labelStyle}>Pie Chart</Text>
<PieChart
data={pieChartData}
height={height}
width={width}
chartConfig={chartConfig}
accessor="population"
style={graphStyle}
backgroundColor="transparent"
paddingLeft="15"
/>
<Text style={labelStyle}>Line Chart</Text>
<LineChart
data={data}
width={width}
height={height}
yAxisLabel="$"
chartConfig={chartConfig}
style={graphStyle}
/>
<Text style={labelStyle}>Contribution Graph</Text>
<ContributionGraph
values={contributionData}
width={width}
height={height}
endDate={new Date('2016-05-01')}
numDays={105}
chartConfig={chartConfig}
style={graphStyle}
/>
</ScrollView>
)
})}
</ScrollableTabView>
)
}
}