diff --git a/packages/propel/src/charts/area-chart/root.tsx b/packages/propel/src/charts/area-chart/root.tsx
index 11a1db2efa4..db602fedb12 100644
--- a/packages/propel/src/charts/area-chart/root.tsx
+++ b/packages/propel/src/charts/area-chart/root.tsx
@@ -23,6 +23,7 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
       x: undefined,
       y: 10,
     },
+    customTicks,
     showTooltip = true,
     comparisonLine,
   } = props;
@@ -114,7 +115,10 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
           <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
-            tick={(props) => <CustomXAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickLine={false}
             axisLine={false}
             label={
@@ -140,7 +144,10 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
                 className: AXIS_LABEL_CLASSNAME,
               }
             }
-            tick={(props) => <CustomYAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickCount={tickCount.y}
             allowDecimals={!!yAxis.allowDecimals}
           />
diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx
index 558e73ad603..e586ff2458e 100644
--- a/packages/propel/src/charts/bar-chart/bar.tsx
+++ b/packages/propel/src/charts/bar-chart/bar.tsx
@@ -10,6 +10,7 @@ const BAR_TOP_BORDER_RADIUS = 4; // Border radius for the top of bars
 const BAR_BOTTOM_BORDER_RADIUS = 4; // Border radius for the bottom of bars
 const DEFAULT_LOLLIPOP_LINE_WIDTH = 2; // Width of lollipop stick
 const DEFAULT_LOLLIPOP_CIRCLE_RADIUS = 8; // Radius of lollipop circle
+const DEFAULT_BAR_FILL_COLOR = "#6B7280"; // Default color when fill is a function - using a neutral gray from design system
 
 // Types
 interface TShapeProps {
@@ -108,7 +109,7 @@ const CustomBar = React.memo((props: TBarProps) => {
       <path
         d={getBarPath(x, y, width, height, topBorderRadius, bottomBorderRadius)}
         className="transition-opacity duration-200"
-        fill={typeof fill === "function" ? fill(payload) : fill}
+        fill={typeof fill === "function" ? DEFAULT_BAR_FILL_COLOR : fill}
         opacity={opacity}
       />
       {showText && (
@@ -139,7 +140,7 @@ const CustomBarLollipop = React.memo((props: TBarProps) => {
         cx={x + width / 2}
         cy={y}
         r={DEFAULT_LOLLIPOP_CIRCLE_RADIUS}
-        fill={typeof fill === "function" ? fill(payload) : fill}
+        fill={typeof fill === "function" ? DEFAULT_BAR_FILL_COLOR : fill}
         stroke="none"
       />
       {showPercentage && (
@@ -176,6 +177,8 @@ const createShapeVariant =
     );
   };
 
+export { DEFAULT_BAR_FILL_COLOR };
+
 export const barShapeVariants: Record<
   TBarChartShapeVariant,
   (props: TShapeProps, bar: TBarItem<string>, stackKeys: string[]) => React.ReactNode
diff --git a/packages/propel/src/charts/bar-chart/root.tsx b/packages/propel/src/charts/bar-chart/root.tsx
index 96efff32c78..8d78ae5fd3e 100644
--- a/packages/propel/src/charts/bar-chart/root.tsx
+++ b/packages/propel/src/charts/bar-chart/root.tsx
@@ -19,7 +19,7 @@ import { TBarChartProps } from "@plane/types";
 import { getLegendProps } from "../components/legend";
 import { CustomXAxisTick, CustomYAxisTick } from "../components/tick";
 import { CustomTooltip } from "../components/tooltip";
-import { barShapeVariants } from "./bar";
+import { barShapeVariants, DEFAULT_BAR_FILL_COLOR } from "./bar";
 
 export const BarChart = React.memo(<K extends string, T extends string>(props: TBarChartProps<K, T>) => {
   const {
@@ -35,6 +35,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
       x: undefined,
       y: 10,
     },
+    customTicks,
     showTooltip = true,
     customTooltipContent,
   } = props;
@@ -65,6 +66,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           key={bar.key}
           dataKey={bar.key}
           stackId={bar.stackId}
+          fill={typeof bar.fill === "function" ? DEFAULT_BAR_FILL_COLOR : bar.fill}
           opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
           shape={(shapeProps: any) => {
             const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
@@ -96,7 +98,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
           <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
-            tick={(props) => <CustomXAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickLine={false}
             axisLine={false}
             label={{
@@ -118,7 +123,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
               dx: yAxis.dx ?? -16,
               className: AXIS_LABEL_CLASSNAME,
             }}
-            tick={(props) => <CustomYAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickCount={tickCount.y}
             allowDecimals={!!yAxis.allowDecimals}
           />
diff --git a/packages/propel/src/charts/line-chart/root.tsx b/packages/propel/src/charts/line-chart/root.tsx
index 28a02fc30ef..a79cb4fbe7f 100644
--- a/packages/propel/src/charts/line-chart/root.tsx
+++ b/packages/propel/src/charts/line-chart/root.tsx
@@ -32,6 +32,7 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
       x: undefined,
       y: 10,
     },
+    customTicks,
     legend,
     showTooltip = true,
   } = props;
@@ -100,7 +101,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
           <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
-            tick={(props) => <CustomXAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickLine={false}
             axisLine={false}
             label={
@@ -126,7 +130,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
                 className: AXIS_LABEL_CLASSNAME,
               }
             }
-            tick={(props) => <CustomYAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickCount={tickCount.y}
             allowDecimals={!!yAxis.allowDecimals}
           />
diff --git a/packages/propel/src/charts/scatter-chart/root.tsx b/packages/propel/src/charts/scatter-chart/root.tsx
index 25d7b84b476..4ed4eecc11c 100644
--- a/packages/propel/src/charts/scatter-chart/root.tsx
+++ b/packages/propel/src/charts/scatter-chart/root.tsx
@@ -28,6 +28,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
     xAxis,
     yAxis,
     className,
+    customTicks,
     tickCount = {
       x: undefined,
       y: 10,
@@ -85,7 +86,10 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
           <CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
           <XAxis
             dataKey={xAxis.key}
-            tick={(props) => <CustomXAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.x || CustomXAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickLine={false}
             axisLine={false}
             label={
@@ -111,7 +115,10 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
                 className: AXIS_LABEL_CLASSNAME,
               }
             }
-            tick={(props) => <CustomYAxisTick {...props} />}
+            tick={(props) => {
+              const TickComponent = customTicks?.y || CustomYAxisTick;
+              return <TickComponent {...props} />;
+            }}
             tickCount={tickCount.y}
             allowDecimals={!!yAxis.allowDecimals}
           />
diff --git a/packages/types/src/charts/index.ts b/packages/types/src/charts/index.ts
index fb49c717291..df92ae6c9b2 100644
--- a/packages/types/src/charts/index.ts
+++ b/packages/types/src/charts/index.ts
@@ -21,8 +21,17 @@ export type TChartData<K extends string, T extends string> = {
   [key in K]: string | number;
 } & Record<T, any>;
 
-export type TChartProps<K extends string, T extends string> = {
+export type TBaseChartProps<K extends string, T extends string> = {
   data: TChartData<K, T>[];
+  className?: string;
+  legend?: TChartLegend;
+  margin?: TChartMargin;
+  showTooltip?: boolean;
+  customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
+};
+
+// Props specific to charts with X and Y axes
+export type TAxisChartProps<K extends string, T extends string> = TBaseChartProps<K, T> & {
   xAxis: {
     key: keyof TChartData<K, T>;
     label?: string;
@@ -38,15 +47,14 @@ export type TChartProps<K extends string, T extends string> = {
     offset?: number;
     dx?: number;
   };
-  className?: string;
-  legend?: TChartLegend;
-  margin?: TChartMargin;
   tickCount?: {
     x?: number;
     y?: number;
   };
-  showTooltip?: boolean;
-  customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
+  customTicks?: {
+    x?: React.ComponentType<any>;
+    y?: React.ComponentType<any>;
+  };
 };
 
 // ============================================================
@@ -67,7 +75,7 @@ export type TBarItem<T extends string> = {
   shapeVariant?: TBarChartShapeVariant;
 };
 
-export type TBarChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+export type TBarChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
   bars: TBarItem<T>[];
   barSize?: number;
 };
@@ -87,7 +95,7 @@ export type TLineItem<T extends string> = {
   style?: Record<string, string | number>;
 };
 
-export type TLineChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+export type TLineChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
   lines: TLineItem<T>[];
 };
 
@@ -102,7 +110,7 @@ export type TScatterPointItem<T extends string> = {
   stroke: string;
 };
 
-export type TScatterChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+export type TScatterChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
   scatterPoints: TScatterPointItem<T>[];
 };
 
@@ -123,7 +131,7 @@ export type TAreaItem<T extends string> = {
   style?: Record<string, string | number>;
 };
 
-export type TAreaChartProps<K extends string, T extends string> = TChartProps<K, T> & {
+export type TAreaChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
   areas: TAreaItem<T>[];
   comparisonLine?: {
     dashedLine: boolean;
@@ -141,7 +149,7 @@ export type TCellItem<T extends string> = {
 };
 
 export type TPieChartProps<K extends string, T extends string> = Pick<
-  TChartProps<K, T>,
+  TBaseChartProps<K, T>,
   "className" | "data" | "showTooltip" | "legend" | "margin"
 > & {
   dataKey: T;
@@ -223,7 +231,7 @@ export type TRadarItem<T extends string> = {
 };
 
 export type TRadarChartProps<K extends string, T extends string> = Pick<
-  TChartProps<K, T>,
+  TBaseChartProps<K, T>,
   "className" | "showTooltip" | "margin" | "data" | "legend"
 > & {
   dataKey: T;