Custom chart horizontal stack

[L2Develop96]

Hello,
Is there anyway to get something like this ?

I came with an approach to show something similar to it with the following:

const RenderBarChartStackText = (value: number): React.JSX.Element => {
  const { layout, fonts } = useTheme();
  return (
    <View style={[layout.fullHeight, layout.justifyCenter, layout.itemsCenter]}>
      <BaseText style={[layout.rotate90Inverse, fonts.white, fonts.size_11]}>
        {value}%
      </BaseText>
    </View>
  );
};

const ExpensesChart = () => {
  const { layout, gutters, fonts, colors, borders, backgrounds } = useTheme();
  return (
    <BarChart
      barWidth={35}
      showLine={false}
      showXAxisIndices={false}
      hideAxesAndRules
      noOfSections={1}
      horizontal
      barBorderRadius={10}
     stackData={[
        {
          stacks: [
            {
              value: 60,
              color: '#75B2E8',
              gradientColor: '#005AA9',
              innerBarComponent: RenderBarChartStackText(60),
            },
            {
              value: 40,
              color: '#264D7A',
              gradientColor: '#00224B',
              innerBarComponent: RenderBarChartStackText(40),
            },
            {
              value: 20,
              color: '#EA3A55',
              gradientColor: '#420109',
              innerBarComponent: RenderBarChartStackText(20),
            },
            {
              value: 20,
              color: '#ecedee',
              gradientColor: '#C7CCCF',
              innerBarComponent: RenderBarChartStackText(20),
            },
          ],
        },
      ]}
    />
  );
};` 

Here's the result