Search code examples
javascriptreact-nativesvgreact-native-svgreact-native-svg-charts

Grouping Multiple Data with react-native-svg-charts

Hi I want to achive this kind of chart with 2 datasets

by using react-native-svg-charts

enter image description here

and my data look like this

const data1 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 5},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 15},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 50},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];

and i group them as one data like this

const barDataY = [
    {
      data: data1,
      svg: {
        stroke: 'red',
        strokeWidth: 2,
      },
    },
    {
      data: data2,
      svg: {
        stroke: 'dodgerblue',
        strokeWidth: 2,
      },
    },
    {
      data: data3,
      svg: {
        stroke: 'grey',
        strokeWidth: 2,
      },
    },
  ];

instead getting the chart that i want, my chart look like this

enter image description here

so how could i group them by the datasets?

below is my fullcode

import React, {useEffect} from 'react';
import {View, StyleSheet} from 'react-native';
import {BarChart, Grid, YAxis, XAxis} from 'react-native-svg-charts';
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from 'react-native-responsive-screen';
import Colors from './App/Configs/Colors';

const data1 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 5},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 10},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 20},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 30},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 10},
];
const data2 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 15},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 21},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 32},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 44},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 75},
];
const data3 = [
  {label: 'bad', svg: {fill: '#E55300'}, value: 50},
  {label: 'marginal', svg: {fill: '#EB742F'}, value: 81},
  {label: 'fair', svg: {fill: '#F5A77A'}, value: 77},
  {label: 'good', svg: {fill: '#9BD4DE'}, value: 33},
  {label: 'satisfactory', svg: {fill: '#1D8091'}, value: 21},
];

const SummaryBarChart = ({barData, xData, bardata2}) => {
  const contentInset = {top: 50, bottom: 20};
  let mainData = [{data: bardata2}, {data: barData}];

  const barDataY = [
    {
      data: data1,
      svg: {
        stroke: 'red',
        strokeWidth: 2,
      },
    },
    {
      data: data2,
      svg: {
        stroke: 'dodgerblue',
        strokeWidth: 2,
      },
    },
    {
      data: data3,
      svg: {
        stroke: 'grey',
        strokeWidth: 2,
      },
    },
  ];

  return (
    <View style={styles.barcharContainer}>
      <View style={{width: wp('80%')}}>
        <View style={{height: 200, flexDirection: 'row'}}>
          <BarChart
            contentInset={contentInset}
            style={{height: 200, width: wp('80%')}}
            data={barDataY}
            numberOfTicks={5}
            yAccessor={({item}) => {
              console.log(item);
              return item.value;
            }}>
            <Grid></Grid>
          </BarChart>
        </View>
      </View>
    </View>
  );
};

export default SummaryBarChart;
Solution

  • i've solved it by transforming the data so the bardataY look like this

    
  const barDataY = [
    {
      data: badData,
    },
      data: goodData,
    },
      data: etcdata..,
    },
    
    
  ];