Updated the area chart color.

Author: Robert Crocker

src/App.tsx

@@ -40,7 +40,7 @@ function App() {
         legend={'bottom'}
         tooltipVisible={true}
       />
-      {/*<AreaChart
+      <AreaChart
         theme="dark"
         height="100%"
         width="100%"
@@ -52,7 +52,7 @@ function App() {
         yGrid={true}
         xAxisLabel="Date"
         yAxisLabel="Value"
-      /> */}
+      />
       <LineChart
         theme="light"
         height={'100%'}

src/charts/AreaChart/AreaChart.tsx

@@ -185,10 +185,13 @@ export default function AreaChart({
   // Define how the data will drive your design
   // ********************
 
+  const numberOfKeys = Array.from(keys).length;
   const discreteColors =
-    Array.from(keys).length < 4 ? 3 : Math.min(Array.from(keys).length, 9);
-  const computedScheme = d3[`${colorScheme}`][discreteColors];
-  const colorScale = d3.scaleOrdinal(Array.from(computedScheme).reverse());
+    numberOfKeys < 4 ? 3 : Math.min(Array.from(keys).length, 9);
+  const computedScheme = Array.from(
+    d3[`${colorScheme}`][discreteColors]
+  ).reverse();
+  const colorScale = d3.scaleOrdinal(computedScheme);
   colorScale.domain(keys);
 
   // ********************