Adding a label above each bar in a barchart

[DragomirAndrei19]

Question

I'm using a grouped BarChart and I want to do something like this, where each bar value is shown in a label just above the corresponding bar (see the red text).

Background Info/Attempts

I tried to add a Text component from react-native-skia between <BarGroup.Bar></BarGroup.Bar> but it doesn't seem to work. React Native's Text component won't work.

import { LinearGradient, useFont, vec, Text as TextSkia, Canvas, Fill } from "@shopify/react-native-skia"
const ptsans = require("../../../../assets/fonts/PTSans-Bold.ttf");
  <View style={{ height: 300 }}>
          {
            listAPIData &&
            <CartesianChart
              data={transformChartData(listAPIData)}
              xKey="category"
              yKeys={["sales", "collections", "payment"]}
              padding={{ left: 10, right: 10, bottom: 5, top: 15 }}
              domainPadding={{ left: 30, right: 40, top: 50 }}
              axisOptions={{
                font,
                tickCount: { y: 10, x: 5 },
                lineColor: "black",
                labelColor: "black",
              }}
            >
              {({ points, chartBounds }) => (
                <BarGroup
                  chartBounds={chartBounds}
                  betweenGroupPadding={0.4}
                  withinGroupPadding={0.1}
                  roundedCorners={{
                    topLeft: 10,
                    topRight: 10,
                  }}
                >
                  <BarGroup.Bar points={points.sales} animate={{ type: "timing" }}>

                    {/* TRIED THIS */}
                    <TextSkia
                      x={0}
                      y={15}
                      text="TEST"
                      font={font}
                    />
                    {/* TRIED THIS */}

                    <LinearGradient
                      start={vec(0, 0)}
                      end={vec(0, 540)}
                      colors={[COLORS.ligthBlue, "#4783FE50"]}
                    />
                  </BarGroup.Bar>
                  <BarGroup.Bar points={points.collections} animate={{ type: "timing" }}>
                    <LinearGradient
                      start={vec(0, 0)}
                      end={vec(0, 500)}
                      colors={[COLORS.errorPrimary, "#BE161D50"]}
                    />
                  </BarGroup.Bar>
                  <BarGroup.Bar points={points.payment} animate={{ type: "timing" }}>
                    <LinearGradient
                      start={vec(0, 0)}
                      end={vec(0, 500)}
                      colors={[COLORS.primaryColor, "#00144750"]}
                    />
                  </BarGroup.Bar>
                </BarGroup>
              )}
            </CartesianChart>
          }
        </View>

Also, doing it exactly as in react-native-skia documentation seems to produce error 'Unexhaustive handling for SkiaDomView'.

<BarGroup.Bar points={points.vanzari} animate={{ type: "timing" }}>
                    {/* TRIED THIS */}
                    <Canvas style={{ flex: 1 }}>
                      <Fill color="white" />
                      <TextSkia
                        x={0}
                        y={15}
                        text="Hello World"
                        font={font}
                      />
                    </Canvas>
                    {/* TRIED THIS */}

                    <LinearGradient
                      start={vec(0, 0)}
                      end={vec(0, 540)}
                      colors={[COLORS.ligthBlue, "#4783FE50"]}
                    />
                  </BarGroup.Bar>

[zibs]

Hey @DragomirAndrei19 -- I don't think this is possible at the moment. I think you could experiment with gestures to reveal the label when the user taps or pans over the bar if you wanted...

[zibs]

Here's an example from the community of someone doing this with Bar charts:

https://github.com/FormidableLabs/victory-native-xl/issues/318