import {
LineChart,
ChartSelectEvent,
BarChart,
BubbleChart,
CandleStickChart,
HorizontalBarChart,
CombinedChart,
PieChart,
} from 'react-native-charts-wrapper';
import * as React from 'react';
import { View, processColor, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
chart: {
flex: 1,
},
});
const COLOR_PURPLE = processColor('#697dfb');
function _randomYValues(range: number, size: number) {
const nextValueMaxDiff = 0.2;
const lastValue = range / 2;
return Array.from({ length: size })
.fill(0)
.map(() => {
const min = lastValue * (1 - nextValueMaxDiff);
const max = lastValue * (1 + nextValueMaxDiff);
return { y: Math.random() * (max - min) + min };
});
}
class AxisLineChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
/>
);
}
}
class BarChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
/>
);
}
}
function _randomYSizeValues(range: number, size: number) {
return Array.from({ length: size })
.fill(0)
.map(() => {
return {
y: Math.random() * range,
size: Math.random() * range,
};
});
}
class BubbleChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
/>
);
}
}
class CandleStickChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
{
return {
limit: 5 * (i + 1) + 0.5,
lineColor: processColor('darkgray'),
lineWidth: 1,
label: (i + 1).toString(),
};
}),
}}
yAxis={{
left: {
valueFormatter: '$ #',
limitLines: [
{
limit: 112.4,
lineColor: processColor('red'),
lineDashPhase: 2,
lineDashLengths: [10, 20],
},
{
limit: 89.47,
lineColor: processColor('red'),
lineDashPhase: 2,
lineDashLengths: [10, 20],
},
],
},
right: {
enabled: false,
},
}}
maxVisibleValueCount={16}
autoScaleMinMaxEnabled={true}
// zoom={{scaleX: 2, scaleY: 1, xValue: 400000, yValue: 1}}
zoom={{ scaleX: 15.41, scaleY: 1, xValue: 40, yValue: 916, axisDependency: 'LEFT' }}
onSelect={this.handleSelect.bind(this)}
ref="chart"
onChange={event => console.log(event.nativeEvent)}
/>
);
}
}
class StackedBarChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
highlights={[
{ x: 1, y: 40 },
{ x: 2, y: 50 },
]}
marker={{
enabled: true,
markerColor: processColor('#F0C0FF8C'),
textColor: processColor('white'),
textSize: 14,
}}
/>
);
}
}
class HorizontalBarChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
/>
);
}
}
class Combined extends React.Component {
static displayName = 'Combined';
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
marker={{
enabled: true,
markerColor: processColor('#F0C0FF8C'),
textColor: processColor('white'),
textSize: 14,
}}
highlights={[
{ x: 1, y: 150, dataIndex: 4 },
{ x: 2, y: 106, dataIndex: 4 },
]}
highlightFullBarEnabled={false}
drawOrder={['SCATTER', 'LINE', 'BAR']}
style={styles.container}
/>
);
}
}
class PieChartScreen extends React.Component {
handleSelect(event: ChartSelectEvent) {
console.log(event.nativeEvent);
}
render() {
return (
console.log(event.nativeEvent)}
/>
);
}
}