How can show Legend for Piechart ??

PieChart and legend,about abhinandan-kushwaha/react-native-gifted-charts

Comments (1)

Abhinandan-Kushwaha commented on June 7, 2024

Hi @stefan55574 👋
Currently, we don't have pre-built legends, but you can easily make your own legend component.
Here's an example-

The code for the above Pie chart is-

const App = () => {
  const renderLegend = (text, color) => {
    return (
      <View style={{flexDirection: 'row', marginBottom: 12}}>
        <View
          style={{
            height: 18,
            width: 18,
            marginRight: 10,
            borderRadius: 4,
            backgroundColor: color || 'white',
          }}
        />
        <Text style={{color: 'white', fontSize: 16}}>{text || ''}</Text>
      </View>
    );
  };

  return (
    <View>
      <View
        style={{
          marginVertical: 100,
          marginHorizontal: 30,
          borderRadius: 10,
          paddingVertical: 50,
          backgroundColor: '#414141',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <PieChart
          strokeColor="white"
          strokeWidth={4}
          donut
          data={[
            {value: 30, color: 'rgb(84,219,234)'},
            {value: 40, color: 'lightgreen'},
            {value: 20, color: 'orange'},
          ]}
          innerCircleColor="#414141"
          innerCircleBorderWidth={4}
          innerCircleBorderColor={'white'}
          showValuesAsLabels={true}
          showText
          textSize={18}
          showTextBackground={true}
        />
        
        {/********************    Your own Legend component      ********************/}
        <View
          style={{
            width: '100%',
            flexDirection: 'row',
            justifyContent: 'space-evenly',
            marginTop: 20,
          }}>
          {renderLegend('Jan', 'rgb(84,219,234)')}
          {renderLegend('Feb', 'lightgreen')}
          {renderLegend('Mar', 'orange')}
        </View>
      </View>
    </View>
   )
 }