diff --git a/.changeset/empty-lies-clap.md b/.changeset/empty-lies-clap.md
new file mode 100644
index 00000000..f58cdff4
--- /dev/null
+++ b/.changeset/empty-lies-clap.md
@@ -0,0 +1,5 @@
+---
+"@igloo-ui/area-chart": patch
+---
+
+UI fix - Reverting to a solid colored line for complexity reasons
diff --git a/packages/AreaChart/src/AreaChart.tsx b/packages/AreaChart/src/AreaChart.tsx
index d054fc20..4602565d 100644
--- a/packages/AreaChart/src/AreaChart.tsx
+++ b/packages/AreaChart/src/AreaChart.tsx
@@ -88,7 +88,7 @@ export interface AreaChartProps extends React.ComponentProps<"div"> {
     /** Whether or not the chart should resize */
     isResponsive?: boolean;
     /** Update the default locale
-     * @deprecated This prop is deprecated and will be removed 
+     * @deprecated This prop is deprecated and will be removed
      * in the next major version in favor of Igloo's provider
      */
     locale?: string;
@@ -111,24 +111,6 @@ export interface AreaChartProps extends React.ComponentProps<"div"> {
 const DEFAULT_SKELETON_WIDTH = 24;
 const DEFAULT_SKELETON_HEIGHT = 8;
 
-const getScores = (data: DataSet[]): number[] => {
-    const scores = data.filter(score => score !== null).map(dataSet => dataSet.score) as number[];
-
-    return scores;
-};
-
-const getScoreMin = (data: DataSet[]): number => {
-    const min = Math.min(...getScores(data));
-
-    return min;
-};
-
-const getScoreMax = (data: DataSet[]): number => {
-    const max = Math.max(...getScores(data));
-
-    return max;
-};
-
 const AreaChart: React.FunctionComponent<AreaChartProps> = ({
     className,
     dataSet,
@@ -419,50 +401,6 @@ const AreaChart: React.FunctionComponent<AreaChartProps> = ({
         fill: "none"
     };
 
-    const getDataHue = (score: number, scoreRange: DataRange): string => {
-        const scoreMin = (typeof scoreRange.min === "number") ? scoreRange.min : getScoreMin(dataSet);
-        const scoreMax = (typeof scoreRange.max === "number") ? scoreRange.max : getScoreMax(dataSet);
-        const relativeScore = Math.round((score - scoreMin) * 100) / 100;
-        const scale = Math.round((scoreMax - scoreMin) * 100) / 100;
-        const ratio = relativeScore / scale;
-    
-        if (ratio <= 0.06) { return "var(--hop-dataviz-diverging-sequence-1-negative5)"; }
-        if (ratio <= 0.12) { return "var(--hop-dataviz-diverging-sequence-1-negative4)"; }
-        if (ratio <= 0.3) { return "var(--hop-dataviz-diverging-sequence-1-negative3)"; }
-        if (ratio <= 0.43) { return "var(--hop-dataviz-diverging-sequence-1-negative2)"; }
-        if (ratio <= 0.56) { return "var(--hop-dataviz-diverging-sequence-1-neutral)"; }
-        if (ratio <= 0.68) { return "var(--hop-dataviz-diverging-sequence-1-positive2)"; }
-        if (ratio <= 0.81) { return "var(--hop-dataviz-diverging-sequence-1-positive3)"; }
-        if (ratio <= 0.94) { return "var(--hop-dataviz-diverging-sequence-1-positive4)"; }
-    
-        return "var(--hop-dataviz-diverging-sequence-1-positive5)";
-    };
-
-    const buildAreaDefs = (): JSX.Element => {
-        return (
-            <defs>
-                <linearGradient 
-                    id="areaChartLineGradient" 
-                    x1="0" 
-                    y1="0" 
-                    x2="0"
-                    y2="96%"
-                    gradientUnits="userSpaceOnUse"
-                >
-                    <stop stopColor="var(--hop-dataviz-diverging-sequence-1-positive5)" />
-                    <stop offset="0.119792" stopColor="var(--hop-dataviz-diverging-sequence-1-positive4)" />
-                    <stop offset="0.239583" stopColor="var(--hop-dataviz-diverging-sequence-1-positive3)" />
-                    <stop offset="0.369792" stopColor="var(--hop-dataviz-diverging-sequence-1-positive2)" />
-                    <stop offset="0.498366" stopColor="var(--hop-dataviz-diverging-sequence-1-neutral)" />
-                    <stop offset="0.625" stopColor="var(--hop-dataviz-diverging-sequence-1-negative2)" />
-                    <stop offset="0.75" stopColor="var(--hop-dataviz-diverging-sequence-1-negative3)" />
-                    <stop offset="0.875" stopColor="var(--hop-dataviz-diverging-sequence-1-negative4)" />
-                    <stop offset="1" stopColor="var(--hop-dataviz-diverging-sequence-1-negative5)" />
-                </linearGradient>
-            </defs>
-        );
-    };
-
     React.useEffect(() => {
         let updatedAreaChartData = [];
 
@@ -556,7 +494,6 @@ const AreaChart: React.FunctionComponent<AreaChartProps> = ({
             margin={{ right: 26, top: 10, bottom: 10, left: 0 }}
             ref={setChartRef}
         >
-            {buildAreaDefs()}
             <CartesianGrid {...cartesianGridConfig} />
             <XAxis {...xAxisConfig} />
             <YAxis {...yAxisConfig} />
@@ -581,7 +518,6 @@ const AreaChart: React.FunctionComponent<AreaChartProps> = ({
                             dateFormatter={tooltipDateFormatter}
                             scoreFormatter={tooltipScoreFormatter}
                             unavailableDataMessage={unavailableDataMessage}
-                            getDataScoreHue={score => getDataHue(score, range)}
                         />
                     }
                 />
diff --git a/packages/AreaChart/src/ChartTooltip.tsx b/packages/AreaChart/src/ChartTooltip.tsx
index 2c39c0c8..7d3e3666 100644
--- a/packages/AreaChart/src/ChartTooltip.tsx
+++ b/packages/AreaChart/src/ChartTooltip.tsx
@@ -46,7 +46,7 @@ const ChartTooltip: React.FunctionComponent<ChartTooltipProps> = (
         const formattedScore = formatter ? formatter(score) : score;
 
         return (
-            <div className="ids-tooltip-score" 
+            <div className="ids-tooltip-score"
                 style={{
                     "--ids-tooltip-score-dot-color": dotColor ? dotColor : undefined
                 } as React.CSSProperties}
diff --git a/packages/AreaChart/src/area-chart.scss b/packages/AreaChart/src/area-chart.scss
index 69540928..64191eaa 100644
--- a/packages/AreaChart/src/area-chart.scss
+++ b/packages/AreaChart/src/area-chart.scss
@@ -38,7 +38,7 @@
         --ids-area-chart-grid-color: var(--hop-neutral-border-weakest);
         --ids-area-chart-axis-color: var(--hop-neutral-border-weak);
         --ids-area-chart-dot-stroke-color: var(--hop-neutral-icon-strong);
-        --ids-area-chart-line-color: url("#areaChartLineGradient");
+        --ids-area-chart-line-color: var(--hop-dataviz-categorical-2colorgroup-option4-category2);
         --ids-area-chart-null-line-color: var(--hop-neutral-border-weak);
 
         /* Empty Label */
diff --git a/packages/AreaChart/src/chart-tooltip.scss b/packages/AreaChart/src/chart-tooltip.scss
index 127e6ede..86ee505a 100644
--- a/packages/AreaChart/src/chart-tooltip.scss
+++ b/packages/AreaChart/src/chart-tooltip.scss
@@ -60,12 +60,12 @@
         --ids-chart-tooltip-score-text-font-weight: var(--hop-body-sm-font-weight);
 
         /* Circle */
-        --ids-chart-tooltip-circle-secondary-background: var(--hop-dataviz-categorical-2colorgroup-option4-category2);
+        --ids-chart-tooltip-circle-secondary-background: var(--hop-dataviz-categorical-2colorgroup-option4-category1);
         --ids-chart-tooltip-circle-margin-right: var(--hop-space-inline-sm);
         --ids-chart-tooltip-circle-size: 0.75rem;
 
         .ids-tooltip-score__circle {
-            --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category1));
+            --ids-chart-tooltip-circle-background: var(--ids-tooltip-score-dot-color, var(--hop-dataviz-categorical-2colorgroup-option4-category2));
         }
     }
 
diff --git a/packages/VerticalBarChart/src/VerticalBarChart.tsx b/packages/VerticalBarChart/src/VerticalBarChart.tsx
index faee5a10..b43d5f79 100644
--- a/packages/VerticalBarChart/src/VerticalBarChart.tsx
+++ b/packages/VerticalBarChart/src/VerticalBarChart.tsx
@@ -77,7 +77,7 @@ const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> = ({
                     barCategoryGap="15%"
                     margin={{ top: 2, left: 2, right: 2, bottom: 2 }}
                     width={800}
-                    /* Width and height here are ignored because of ResponsiveContainer, 
+                    /* Width and height here are ignored because of ResponsiveContainer,
           but are useful for tests. */
                     height={height}
                 >