@oneuptime/common 11.5.1 → 11.5.3

package/UI/Components/Charts/Bar/BarChart.tsx

@@ -1,5 +1,8 @@
 import { BarChart } from "../ChartLibrary/BarChart/BarChart";
-import { AvailableChartColorsKeys } from "../ChartLibrary/Utils/ChartColors";
+import {
+  AvailableChartColorsKeys,
+  ChartColorValue,
+} from "../ChartLibrary/Utils/ChartColors";
 import React, { FunctionComponent, ReactElement, useEffect } from "react";
 import SeriesPoint from "../Types/SeriesPoints";
 import { XAxis } from "../Types/XAxis/XAxis";
@@ -29,6 +32,13 @@ export interface ComponentProps {
   heightInPx?: number | undefined;
   referenceLines?: Array<ChartReferenceLineProps> | undefined;
   showLegend?: boolean | undefined;
+  /*
+   * Optional per-series color override. Each entry may be a named palette key
+   * or a raw hex string. When provided (and non-empty), it replaces the
+   * default BarChartPalette so callers can assign custom colors; the array is
+   * indexed by series position (index % length), matching the default palette.
+   */
+  colors?: Array<ChartColorValue> | undefined;
 }
 
 export interface BarInternalProps extends ComponentProps {
@@ -71,7 +81,11 @@ const BarChartElement: FunctionComponent<BarInternalProps> = (
         tickGap={30}
         index={"Time"}
         categories={categories}
-        colors={BarChartPalette}
+        colors={
+          props.colors && props.colors.length > 0
+            ? props.colors
+            : BarChartPalette
+        }
         valueFormatter={props.yAxis.options.formatter || undefined}
         showTooltip={true}
         showLegend={props.showLegend !== false}

package/UI/Components/Charts/ChartLibrary/AreaChart/AreaChart.tsx

@@ -26,10 +26,11 @@ import { AxisDomain } from "recharts/types/util/types";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import {
   AvailableChartColors,
-  AvailableChartColorsKeys,
+  ChartColorValue,
   constructCategoryColors,
   getColorClassName,
   getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -40,8 +41,8 @@ import ChartCurve from "../../Types/ChartCurve";
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
-  onClick?: (name: string, color: AvailableChartColorsKeys) => void;
+  color: ChartColorValue;
+  onClick?: (name: string, color: ChartColorValue) => void;
   activeLegend?: string;
 }
 
@@ -76,6 +77,11 @@ const LegendItem: ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -163,7 +169,7 @@ const ScrollButton: ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -307,7 +313,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 onClick={onClickLegendItem as any}
                 activeLegend={activeLegend!}
@@ -356,7 +362,7 @@ type PayloadItem = {
   category: string;
   value: number;
   index: string;
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   type?: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   payload: any;
@@ -366,7 +372,7 @@ type PayloadItem = {
 const ChartLegend: (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -376,7 +382,7 @@ const ChartLegend: (
 ) => React.JSX.Element = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -485,6 +491,11 @@ const ChartTooltip: ({
                         "h-[3px] w-3.5 shrink-0 rounded-full",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -534,7 +545,7 @@ interface AreaChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -620,7 +631,7 @@ const AreaChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, string | number> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -716,9 +727,8 @@ const AreaChart: React.ForwardRefExoticComponent<
           >
             <defs>
               {categories.map((category: string, i: number) => {
-                const colorKey: AvailableChartColorsKeys =
-                  (colors[i % colors.length] as AvailableChartColorsKeys) ||
-                  "blue";
+                const colorKey: ChartColorValue =
+                  (colors[i % colors.length] as ChartColorValue) || "blue";
                 const hex: string = getColorHex(colorKey);
                 return (
                   <linearGradient
@@ -833,7 +843,7 @@ const AreaChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -921,10 +931,11 @@ const AreaChart: React.ForwardRefExoticComponent<
             ) : null}
             {categories.map((category: string) => {
               const gradientId: string = `gradient-${category.replace(/[^a-zA-Z0-9]/g, "_")}`;
-              const colorKey: AvailableChartColorsKeys = categoryColors.get(
+              const colorKey: ChartColorValue = categoryColors.get(
                 category,
-              ) as AvailableChartColorsKeys;
+              ) as ChartColorValue;
               const hex: string = getColorHex(colorKey);
+              const isCustomColor: boolean = isHexColorValue(colorKey);
 
               return (
                 <Area
@@ -954,24 +965,18 @@ const AreaChart: React.ForwardRefExoticComponent<
                       strokeLinecap: slc,
                       strokeLinejoin: slj,
                       strokeWidth,
-                      dataKey,
                     } = dotProps;
                     return (
                       <Dot
                         className={cx(
                           "stroke-white",
                           onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(
-                            categoryColors.get(
-                              dataKey,
-                            ) as AvailableChartColorsKeys,
-                            "fill",
-                          ),
+                          getColorClassName(colorKey, "fill"),
                         )}
                         cx={cxCoord}
                         cy={cyCoord}
                         r={5}
-                        fill=""
+                        fill={isCustomColor ? hex : ""}
                         stroke={stroke}
                         strokeLinecap={slc}
                         strokeLinejoin={slj}
@@ -992,7 +997,6 @@ const AreaChart: React.ForwardRefExoticComponent<
                       strokeWidth,
                       cx: cxCoord,
                       cy: cyCoord,
-                      dataKey,
                       index: dotIndex,
                     } = dotProps;
 
@@ -1012,19 +1016,14 @@ const AreaChart: React.ForwardRefExoticComponent<
                           cy={cyCoord}
                           r={5}
                           stroke={stroke}
-                          fill=""
+                          fill={isCustomColor ? hex : ""}
                           strokeLinecap={slc}
                           strokeLinejoin={slj}
                           strokeWidth={strokeWidth}
                           className={cx(
                             "stroke-white",
                             onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(
-                              categoryColors.get(
-                                dataKey,
-                              ) as AvailableChartColorsKeys,
-                              "fill",
-                            ),
+                            getColorClassName(colorKey, "fill"),
                           )}
                         />
                       );

package/UI/Components/Charts/ChartLibrary/BarChart/BarChart.tsx

@@ -22,9 +22,11 @@ import type { AxisDomain } from "recharts/types/util/types";
 
 import {
   AvailableChartColors,
-  type AvailableChartColorsKeys,
+  type ChartColorValue,
   constructCategoryColors,
   getColorClassName,
+  getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -73,7 +75,7 @@ const renderShape: (
   activeLegend: string | undefined,
   layout: string,
 ): React.ReactElement => {
-  const { fillOpacity, name, payload, value } = props;
+  const { fillOpacity, name, payload, value, fill } = props;
   let { x, width, y, height } = props;
 
   if (layout === "horizontal" && height < 0) {
@@ -120,6 +122,12 @@ const renderShape: (
   return (
     <path
       d={path}
+      /*
+       * A custom hex color is passed through as the Bar's `fill` prop; apply
+       * it directly on the path. For named palette colors `fill` is "" and the
+       * path inherits the Tailwind `fill-*` class set on the parent Bar.
+       */
+      {...(fill ? { fill } : {})}
       opacity={
         activeBar || (activeLegend && activeLegend !== name)
           ? deepEqual(activeBar, { ...payload, value })
@@ -135,7 +143,7 @@ const renderShape: (
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   onClick?: (name: string, color: string) => void;
   activeLegend?: string;
 }
@@ -167,6 +175,11 @@ const LegendItem: React.FunctionComponent<LegendItemProps> = ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -252,7 +265,7 @@ const ScrollButton: React.FunctionComponent<ScrollButtonProps> = ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -398,7 +411,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 {...(onClickLegendItem ? { onClick: onClickLegendItem } : {})}
                 {...(activeLegend ? { activeLegend: activeLegend } : {})}
               />
@@ -443,7 +456,7 @@ Legend.displayName = "Legend";
 
 const ChartLegend: (
   payload: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -452,7 +465,7 @@ const ChartLegend: (
   yAxisWidth?: number,
 ) => React.ReactElement = (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -497,7 +510,7 @@ const ChartLegend: (
           return entry.value;
         })}
         colors={filteredPayload.map((entry: any) => {
-          return categoryColors.get(entry.value) as AvailableChartColorsKeys;
+          return categoryColors.get(entry.value) as ChartColorValue;
         })}
         {...(onClick ? { onClickLegendItem: onClick } : {})}
         {...(activeLegend ? { activeLegend: activeLegend } : {})}
@@ -518,7 +531,7 @@ type PayloadItem = {
   category: string; // eslint-disable-line react/no-unused-prop-types
   value: number; // eslint-disable-line react/no-unused-prop-types
   index: string; // eslint-disable-line react/no-unused-prop-types
-  color: AvailableChartColorsKeys; // eslint-disable-line react/no-unused-prop-types
+  color: ChartColorValue; // eslint-disable-line react/no-unused-prop-types
   type?: string; // eslint-disable-line react/no-unused-prop-types
   payload: any;
 };
@@ -575,6 +588,11 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = ({
                         "size-2 shrink-0 rounded-xs",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -622,7 +640,7 @@ interface BarChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -699,7 +717,7 @@ const BarChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const [activeBar, setActiveBar] = React.useState<any | undefined>(
       undefined,
@@ -942,7 +960,7 @@ const BarChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -1000,13 +1018,14 @@ const BarChart: React.ForwardRefExoticComponent<
               />
             ) : null}
             {categories.map((category: string) => {
+              const barColor: ChartColorValue = categoryColors.get(
+                category,
+              ) as ChartColorValue;
+              const isCustomColor: boolean = isHexColorValue(barColor);
               return (
                 <Bar
                   className={cx(
-                    getColorClassName(
-                      categoryColors.get(category) as AvailableChartColorsKeys,
-                      "fill",
-                    ),
+                    getColorClassName(barColor, "fill"),
                     onValueChange ? "cursor-pointer" : "",
                   )}
                   key={category}
@@ -1015,7 +1034,12 @@ const BarChart: React.ForwardRefExoticComponent<
                   dataKey={category}
                   {...(stacked ? { stackId: "stack" } : {})}
                   isAnimationActive={false}
-                  fill=""
+                  /*
+                   * Custom hex → apply the color inline (Tailwind has no class
+                   * for arbitrary user hex); named palette → keep "" so the
+                   * `fill-*` class on the Bar cascades to the shape path.
+                   */
+                  fill={isCustomColor ? getColorHex(barColor) : ""}
                   shape={shapeRenderer}
                   onClick={onBarClick}
                 />

package/UI/Components/Charts/ChartLibrary/LineChart/LineChart.tsx

@@ -27,9 +27,11 @@ import { AxisDomain } from "recharts/types/util/types";
 import { useOnWindowResize } from "../Utils/UseWindowOnResize";
 import {
   AvailableChartColors,
-  AvailableChartColorsKeys,
+  ChartColorValue,
   constructCategoryColors,
   getColorClassName,
+  getColorHex,
+  isHexColorValue,
 } from "../Utils/ChartColors";
 import { cx } from "../Utils/Cx";
 import { getYAxisDomain } from "../Utils/GetYAxisDomain";
@@ -40,8 +42,8 @@ import ChartCurve from "../../Types/ChartCurve";
 
 interface LegendItemProps {
   name: string;
-  color: AvailableChartColorsKeys;
-  onClick?: (name: string, color: AvailableChartColorsKeys) => void;
+  color: ChartColorValue;
+  onClick?: (name: string, color: ChartColorValue) => void;
   activeLegend?: string;
 }
 
@@ -77,6 +79,11 @@ const LegendItem: ({
           getColorClassName(color, "bg"),
           activeLegend && activeLegend !== name ? "opacity-40" : "opacity-100",
         )}
+        style={
+          isHexColorValue(color)
+            ? { backgroundColor: getColorHex(color) }
+            : undefined
+        }
         aria-hidden={true}
       />
       <p
@@ -166,7 +173,7 @@ const ScrollButton: ({
 
 interface LegendProps extends React.OlHTMLAttributes<HTMLOListElement> {
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   onClickLegendItem?: (category: string, color: string) => void;
   activeLegend?: string;
   enableLegendSlider?: boolean;
@@ -310,7 +317,7 @@ const Legend: React.ForwardRefExoticComponent<
               <LegendItem
                 key={`item-${index}`}
                 name={category}
-                color={colors[index] as AvailableChartColorsKeys}
+                color={colors[index] as ChartColorValue}
                 onClick={onClickLegendItem as any}
                 activeLegend={activeLegend!}
               />
@@ -356,7 +363,7 @@ Legend.displayName = "Legend";
 
 const ChartLegend: (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -365,7 +372,7 @@ const ChartLegend: (
   yAxisWidth?: number,
 ) => React.JSX.Element = (
   { payload }: any,
-  categoryColors: Map<string, AvailableChartColorsKeys>,
+  categoryColors: Map<string, ChartColorValue>,
   setLegendHeight: React.Dispatch<React.SetStateAction<number>>,
   activeLegend: string | undefined,
   onClick?: (category: string, color: string) => void,
@@ -432,7 +439,7 @@ export type PayloadItem = {
   // eslint-disable-next-line react/no-unused-prop-types
   index: string;
   // eslint-disable-next-line react/no-unused-prop-types
-  color: AvailableChartColorsKeys;
+  color: ChartColorValue;
   // eslint-disable-next-line react/no-unused-prop-types
   type?: string;
   // eslint-disable-next-line react/no-unused-prop-types
@@ -499,6 +506,11 @@ const ChartTooltip: ({
                         "h-[3px] w-3.5 shrink-0 rounded-full",
                         getColorClassName(color, "bg"),
                       )}
+                      style={
+                        isHexColorValue(color)
+                          ? { backgroundColor: getColorHex(color) }
+                          : undefined
+                      }
                     />
                     <p
                       className={cx(
@@ -551,7 +563,7 @@ interface LineChartProps extends React.HTMLAttributes<HTMLDivElement> {
   data: Record<string, any>[];
   index: string;
   categories: string[];
-  colors?: AvailableChartColorsKeys[];
+  colors?: ChartColorValue[];
   valueFormatter?: (value: number) => string;
   startEndOnly?: boolean;
   showXAxis?: boolean;
@@ -628,7 +640,7 @@ const LineChart: React.ForwardRefExoticComponent<
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(
       undefined,
     );
-    const categoryColors: Map<string, string | number> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: (number | "auto")[] = getYAxisDomain(
@@ -828,7 +840,7 @@ const LineChart: React.ForwardRefExoticComponent<
                         index: item.payload[index],
                         color: categoryColors.get(
                           item.dataKey,
-                        ) as AvailableChartColorsKeys,
+                        ) as ChartColorValue,
                         type: item.type,
                         payload: item.payload,
                       };
@@ -887,14 +899,14 @@ const LineChart: React.ForwardRefExoticComponent<
               />
             ) : null}
             {categories.map((category: string) => {
+              const lineColor: ChartColorValue = categoryColors.get(
+                category,
+              ) as ChartColorValue;
+              const isCustomColor: boolean = isHexColorValue(lineColor);
+              const lineHex: string = getColorHex(lineColor);
               return (
                 <Line
-                  className={cx(
-                    getColorClassName(
-                      categoryColors.get(category) as AvailableChartColorsKeys,
-                      "stroke",
-                    ),
-                  )}
+                  className={cx(getColorClassName(lineColor, "stroke"))}
                   strokeOpacity={
                     activeDot || (activeLegend && activeLegend !== category)
                       ? 0.3
@@ -908,24 +920,18 @@ const LineChart: React.ForwardRefExoticComponent<
                       strokeLinecap,
                       strokeLinejoin,
                       strokeWidth,
-                      dataKey,
                     } = props;
                     return (
                       <Dot
                         className={cx(
                           "stroke-white",
                           onValueChange ? "cursor-pointer" : "",
-                          getColorClassName(
-                            categoryColors.get(
-                              dataKey,
-                            ) as AvailableChartColorsKeys,
-                            "fill",
-                          ),
+                          getColorClassName(lineColor, "fill"),
                         )}
                         cx={cxCoord}
                         cy={cyCoord}
                         r={5}
-                        fill=""
+                        fill={isCustomColor ? lineHex : ""}
                         stroke={stroke}
                         strokeLinecap={strokeLinecap}
                         strokeLinejoin={strokeLinejoin}
@@ -944,7 +950,6 @@ const LineChart: React.ForwardRefExoticComponent<
                       strokeWidth,
                       cx: cxCoord,
                       cy: cyCoord,
-                      dataKey,
                       index,
                     } = props;
 
@@ -964,19 +969,14 @@ const LineChart: React.ForwardRefExoticComponent<
                           cy={cyCoord}
                           r={5}
                           stroke={stroke}
-                          fill=""
+                          fill={isCustomColor ? lineHex : ""}
                           strokeLinecap={strokeLinecap}
                           strokeLinejoin={strokeLinejoin}
                           strokeWidth={strokeWidth}
                           className={cx(
                             "stroke-white",
                             onValueChange ? "cursor-pointer" : "",
-                            getColorClassName(
-                              categoryColors.get(
-                                dataKey,
-                              ) as AvailableChartColorsKeys,
-                              "fill",
-                            ),
+                            getColorClassName(lineColor, "fill"),
                           )}
                         />
                       );
@@ -987,7 +987,11 @@ const LineChart: React.ForwardRefExoticComponent<
                   name={category}
                   type={props.curve || ChartCurve.LINEAR}
                   dataKey={category}
-                  stroke=""
+                  /*
+                   * Custom hex → set the stroke inline; named palette → keep ""
+                   * so the `stroke-*` Tailwind class on the Line applies.
+                   */
+                  stroke={isCustomColor ? lineHex : ""}
                   strokeWidth={2}
                   strokeLinejoin="round"
                   strokeLinecap="round"

package/UI/Components/Charts/ChartLibrary/SparkChart/SparkChart.tsx

@@ -21,6 +21,7 @@ import type { AxisDomain } from "recharts/types/util/types";
 import {
   AvailableChartColors,
   type AvailableChartColorsKeys,
+  type ChartColorValue,
   constructCategoryColors,
   getColorClassName,
 } from "../Utils/ChartColors";
@@ -64,7 +65,7 @@ const SparkAreaChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
@@ -209,7 +210,7 @@ const SparkLineChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
     const yAxisDomain: AxisDomain = getYAxisDomain(
       autoMinValue,
@@ -304,7 +305,7 @@ const SparkBarChart: React.ForwardRefExoticComponent<
       ...other
     } = props;
 
-    const categoryColors: Map<string, AvailableChartColorsKeys> =
+    const categoryColors: Map<string, ChartColorValue> =
       constructCategoryColors(categories, colors);
 
     const yAxisDomain: AxisDomain = getYAxisDomain(