Feature request: Icons inside BarChart and PieChart

[georgekal2798]

Hello there!

I would like to request a feature, that was inspired by the specs of an app I am developing.

Inside the bars of a BarChart and the slices of a PieChart (in this case, donut), I need to show an icon, something like this.

I know in the PieChart it is possible to show text, but it is not as customisable as I would want to. I tried to make it work with a custom icon font, but I can't change the font family of the text.

Also, with the BarChart, I was able to show the icons using the font family and I display the respective icons as the x axis labels, but again this is not optimal, as I can't recreate the round white background.

I would really appreciate it if this could be made into a feature: either placing a custom element in the bar/slices, or being able to further customise the text and the background. Please let me know if this is possible and how much time it would take, because I have to know if I can implement it like this in the coming days. Also, if I have missed something and this is feasible using the current version, please tell me how to do it.

Thank you very much in advance!

[Abhinandan-Kushwaha]

Hi @georgekal2798 👋
Thanks for requesting this feature. I will look into this and come up with a solution by tomorrow.

[Abhinandan-Kushwaha]

Hi @georgekal2798 👋
This feature is now available from version 1.3.33 onwards.🎉

Added 2 new props- barInnerComponent and pieInnerComponent.
Both of these are callback functions that accept 2 parameters - item and index and should return a UI element (React node)

For Bar charts, the UI element is rendered inside the bars. It is positioned at the top of the Bar by default. It can be repositioned using CSS techniques.

Here's an example-

const barData = [
  {value: 15},
  {value: 30},
  {
    value: 26,
    barInnerComponent: (item, index) => {
      return (
        <View
          style={{
            flex: 1,
            alignItems: 'center',
            backgroundColor: 'green',
          }}>
          <View
            style={{
              height: 20,
              width: 20,
              borderRadius: 10,
              backgroundColor: 'red',
            }}>
            <Text style={{color: 'blue', textAlign: 'center'}}>
              {item.value}
            </Text>
          </View>
        </View>
      );
    },
  },
  {value: 40},
];
return (
  <BarChart
    data={barData}
    barInnerComponent={(item, index) => {
      return (
        <View
          style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
          <View
            style={{
              height: 20,
              width: 20,
              borderRadius: 10,
              backgroundColor: 'yellow',
            }}>
            <Text style={{color: 'blue', textAlign: 'center'}}>{item.value}</Text>
          </View>
        </View>
      );
    }}
  />
);

The output of the above code is-

For Pie and Donut charts, the pieInnerComponent is a callback function that should return a svg element imported from react-native-svg.
Here's an example of pieInnerComponent -

pieInnerComponent={(item,index)=><SvgText x={0} y={0} height={20} width={40} fill={'red'} stroke={'blue'}>
  {item.value}
</SvgText>}

Note- Both barInnerComponent and pieInnerComponent can be also be added as a property to the data objects.

[georgekal2798]

WOW! Thank you for your fast response! Amazing work! Keep it up 👍

[georgekal2798]

I managed to make it work but I faced a bug when I enabled the focusOnPress property: When the slice is expanded, the inner component is now hidden


Also, pressing on the inner component does not trigger the focus of the slice, only when pressing the slice (blue area).

[Abhinandan-Kushwaha]

Hi @georgekal2798 Can you share the code?

[ahsan85]

Hello there, i am using "react-native-gifted-charts": "^1.4.3" barInnerComponent does not work .

const mapData = data => {
    let report = data.map(item => {
      return {
        label: timeFormat(item.day * 1000, 'ddd'),
        frontColor: colors.primary,
        value: item.sumRegularInSec / 3600,
        totalTime: formatDuration(item.sumRegularInSec),
        barInnerComponent: (item, index) => {
          return (
            <View
              style={{
                flex: 1,
                alignItems: 'center',
                backgroundColor: 'green',
              }}>
              <View
                style={{
                  height: 20,
                  width: 20,
                  borderRadius: 10,
                  backgroundColor: 'red',
                }}>
                <Text style={{color: 'blue', textAlign: 'center'}}>
                  {item.value}
                </Text>
              </View>
            </View>
          );
        },
      };
    });
    setBarChartData(report);
  };  

<BarChart
              width={wp('100%') - 100}
              data={barChartData}
              barWidth={30}
              barBorderRadius={4}
              yAxisOffset={0}
              yAxisThickness={0}
              xAxisType={'dotted'}
              xAxisColor={'lightgray'}
              yAxisTextStyle={{color: 'lightgray'}}
              stepValue={1}
              noOfSections={8}
              yAxisLabelTexts={['0', '1', '2', '3', '4', '5', '6', '7', '8']}
              labelWidth={30}
              xAxisLabelTextStyle={{color: 'lightgray', textAlign: 'center'}}
              isAnimated
            />

[Abhinandan-Kushwaha]

Hi @ahsan85
Can you please share the screenshots of the current output and the desired output

[ahsan85]

@Abhinandan-Kushwaha i want to display text in bars..

[Abhinandan-Kushwaha]

Hi @ahsan85 👋
Thanks for reporting this issue. I will release a new version with the fix today.

For now, I can suggest you a workaround. The barInnerComponent is currently working fine for gradient bar charts. Just pass the prop showGradient. Additionally, you should pass the prop gradientColor={colors.primary} to remove the gradient effect from bars.

[Abhinandan-Kushwaha]

Hi @ahsan85
This has been fixed in version 1.4.5
Please use the latest version of the library.

[ahsan85]

@Abhinandan-Kushwaha Thanks for your immediate response. It works now.