Add label at the top of StackedBar

[mMarcos208]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Feature Request

Add label at the top of StackedBar

                <CartesianChart
                  data={data}
                  xKey="x"
                  yKeys={yKeys as never[]}
                  domainPadding={{left: 50, right: 50, top: 30}}
                  domain={{y: [0, maxDomain]}}
                  padding={5}
                  axisOptions={{
                    lineColor: {
                      grid: {
                        x: theme.backgroundColor,
                        y: theme.colors.input.label,
                      },
                      frame: theme.backgroundColor,
                    },
                    labelColor: {
                      x: colors.silverTree,
                      y: colors.silverTree,
                    },
                    font: InterRegularFont,
                    formatYLabel: (value) => integerFormatter(value as number),
                    formatXLabel: () => '',
                  }}
                >
                  {({points, chartBounds}) => {
                    const pointsKeyed = yKeys.map((x) => points[x as keyof typeof points])
                    return (
                      <StackedBar
                        animate={{type: 'spring'}}
                        innerPadding={innerPadding}
                        chartBounds={chartBounds}
                        points={pointsKeyed}
                        colors={[
                          colors.pastelPink,
                          colors.contessa,
                          colors.nightShadz,
                          colors.redDevil,
                          colors.rosewood,
                          colors.castro,
                          colors.temptress,
                        ]}
                        barOptions={({isBottom, isTop}) => {
                          return {
                            roundedCorners: isTop
                              ? {
                                  topLeft: 5,
                                  topRight: 5,
                                }
                              : isBottom
                              ? {
                                  bottomRight: 5,
                                  bottomLeft: 5,
                                }
                              : undefined,
                          }
                        }}
                      />
                    )
                  }}
                </CartesianChart>

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[Haze787]

Hi, I managed to do this using skia text.

 <>
                        <StackedBar 
                          //stackedbar props
                        />
                        {/* Add SkiaText labels on top of bars */}
                        {font && getCustomerChartData().map((item, index) => {                      
                          // Calculate position based on bar drawn
             
                          return (
                            <SkiaText
                              key={index}
                              x={x}
                              y={y}
                              text={formatNumber(total)}
                              font={font}
                              color="#000000"
                            />
                          );
                        })}
                      </>

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.