Reputation: 43
import React from 'react';
import { ScrollView, View } from 'react-native';
import { BarChart } from 'react-native-chart-kit';
import { hp, wp } from '../../../../utils/Dimensions';
const WeeklyBarChart = () => {
const dummyData = {
type1: [50, 70, 30, 40, 60, 80, 90], // Dummy data for type1
type2: [10, 40, 20, 50, 70, 60, 80], // Dummy data for type2
};
const chartConfig = {
backgroundGradientFrom: '#ffffff',
backgroundGradientTo: '#ffffff',
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
strokeWidth: 2,
yAxisSuffix: '', // Add your preferred suffix here
};
return (
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View>
<BarChart
data={{
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
datasets: [
{
data: dummyData.type1,
color: 'yellow',
},
{
data: dummyData.type2,
color: 'black', // Change the color for dbill
},
],
}}
width={wp(100)}
height={hp(60)} // Increased height for better visualization
yAxisLabel=""
chartConfig={chartConfig}
verticalLabelRotation={30}
withInnerLines={false} // Set withInnerLines to false
/>
</View>
</ScrollView>
);
};
export default WeeklyBarChart;
I have been trying to group type1, type2 data to show in each day, below code only shows type1 data, am i doing anything wrong here ???
i have attached image, i need something like that... or is there any other package ??
Upvotes: 0
Views: 85