PRANESH
PRANESH

Reputation: 43

How to group bars using react-native-chart-kit

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 ??

enter image description here

Upvotes: 0

Views: 85

Answers (0)

Related Questions