feat - allow passing label as prop

Author: alexbalonperin

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -77,6 +77,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    renderLabel,
     rotateLabelX,
     tickGap = 5,
     xAxisLabel,
@@ -428,6 +429,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 animationDuration={animationDuration}
                 stackId={stack ? "a" : undefined}
                 connectNulls={connectNulls}
+                label={renderLabel}
               />
             ))}
             {onValueChange

src/components/chart-elements/BarChart/BarChart.tsx

@@ -92,6 +92,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    renderLabel,
     rotateLabelX,
     barCategoryGap,
     tickGap = 5,
@@ -395,6 +396,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 animationDuration={animationDuration}
                 shape={(props: any) => renderShape(props, activeBar, activeLegend, layout)}
                 onClick={onBarClick}
+                label={renderLabel}
               />
             ))}
           </ReChartsBarChart>

src/components/chart-elements/LineChart/LineChart.tsx

@@ -72,6 +72,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     onValueChange,
     enableLegendSlider = false,
     customTooltip,
+    renderLabel,
     rotateLabelX,
     tickGap = 5,
     xAxisLabel,
@@ -372,6 +373,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                 isAnimationActive={showAnimation}
                 animationDuration={animationDuration}
                 connectNulls={connectNulls}
+                label={renderLabel}
               />
             ))}
             {onValueChange
@@ -394,6 +396,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                       const { name } = props;
                       onCategoryClick(name);
                     }}
+                    label={renderLabel}
                   />
                 ))
               : null}

src/components/chart-elements/common/BaseChartProps.tsx

@@ -1,3 +1,4 @@
+import { ImplicitLabelType } from "recharts/types/component/Label";
 import { Color, ValueFormatter, IntervalType } from "../../../lib";
 import type BaseAnimationTimingProps from "./BaseAnimationTimingProps";
 import { CustomTooltipProps } from "./CustomTooltipProps";
@@ -43,6 +44,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
   tickGap?: number;
   xAxisLabel?: string;
   yAxisLabel?: string;
+  renderLabel?: ImplicitLabelType;
 }
 
 export default BaseChartProps;

src/stories/chart-elements/AreaChart.stories.tsx

@@ -364,3 +364,29 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "white", fontSize: 20, position: "top" },
+  },
+};
+
+const renderCustomizedLabel = ({ x, y, value }: { x: number; y: number; value: number }) => {
+  return (
+    <text x={x} y={y} fill="white" textAnchor="end" dominantBaseline="central">
+      {value}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+  },
+};

src/stories/chart-elements/BarChart.stories.tsx

@@ -387,3 +387,29 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "white", fontSize: 20, position: "insideTop" },
+  },
+};
+
+const renderCustomizedLabel = ({ x, y, value }: { x: number; y: number; value: number }) => {
+  return (
+    <text x={x} y={y} fill="black" textAnchor="end" dominantBaseline="central">
+      {value}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+  },
+};

src/stories/chart-elements/LineChart.stories.tsx

@@ -324,3 +324,29 @@ export const AxisLabels: Story = {
     yAxisLabel: "Amount (USD)",
   },
 };
+
+export const DataLabelsSimple: Story = {
+  args: {
+    renderLabel: true,
+  },
+};
+
+export const DataLabelsObject: Story = {
+  args: {
+    renderLabel: { fill: "white", fontSize: 20, position: "top" },
+  },
+};
+
+const renderCustomizedLabel = ({ x, y, value }: { x: number; y: number; value: number }) => {
+  return (
+    <text x={x} y={y} fill="white" textAnchor="end" dominantBaseline="central">
+      {value}
+    </text>
+  );
+};
+
+export const DataLabelsFunction: Story = {
+  args: {
+    renderLabel: renderCustomizedLabel,
+  },
+};