From 3302eb9b87a74a3183b68611d82bc6bc619307a5 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Tue, 14 Jul 2026 14:55:18 -0400
Subject: [PATCH] chore(docs): Custom color example should use fewer sections

Two blue sections were being used. This caused a problem in high contrast mode since the sections are highlighted. This commit should adjust us down to one section, but allow us to keep the cute pyramid-in-sky effect.

Fixes https://github.com/patternfly/patternfly-react/issues/12423

Assisted-by: Cursor
---
 .../ChartPie/examples/ChartPieCustomColorScale.tsx         | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-charts/src/victory/components/ChartPie/examples/ChartPieCustomColorScale.tsx b/packages/react-charts/src/victory/components/ChartPie/examples/ChartPieCustomColorScale.tsx
index b531671f617..06dde8e5c8f 100644
--- a/packages/react-charts/src/victory/components/ChartPie/examples/ChartPieCustomColorScale.tsx
+++ b/packages/react-charts/src/victory/components/ChartPie/examples/ChartPieCustomColorScale.tsx
@@ -11,12 +11,12 @@ interface Data {
 
 export const ChartPieCustomColorScale: React.FunctionComponent = () => {
   const data: Data[] = [
-    { x: 'Sky', y: 38 },
     { x: 'Shady side of pyramid', y: 7 },
     { x: 'Sunny side of pyramid', y: 17 },
-    { x: 'Sky', y: 38 }
+    { x: 'Sky', y: 76 }
   ];
   const legendData: Data[] = [{ name: 'Sky' }, { name: 'Shady side of pyramid' }, { name: 'Sunny side of pyramid' }];
+  const pyramidStartAngle = 0.38 * 360;
 
   return (
     <div style={{ height: '230px', width: '450px' }}>
@@ -24,7 +24,6 @@ export const ChartPieCustomColorScale: React.FunctionComponent = () => {
         ariaDesc="Average number of pets"
         ariaTitle="Pie chart example"
         colorScale={[
-          chart_theme_blue_ColorScale_100.var,
           chart_theme_orange_ColorScale_300.var,
           chart_theme_yellow_ColorScale_100.var,
           chart_theme_blue_ColorScale_100.var
@@ -37,6 +36,8 @@ export const ChartPieCustomColorScale: React.FunctionComponent = () => {
         legendOrientation="vertical"
         legendPosition="right"
         name="chart2"
+        endAngle={pyramidStartAngle + 360}
+        startAngle={pyramidStartAngle}
         padding={{
           bottom: 20,
           left: 20,