Removed the global styles as they were interferring with the tooltip styles in a way they shouldn't have. Fixed the font style in the pie chart.

Author: Robert Crocker

src/App.tsx

@@ -15,7 +15,6 @@ import { Container } from './styles/componentStyles';
 function App() {
   return (
     <Container className="app">
-      <GlobalStyle />
       <PieChart
         theme="dark"
         data={fruit}
@@ -71,7 +70,7 @@ function App() {
         legendLabel="Markets"
       />
       <ScatterPlot
-        theme="dark"
+        theme="light"
         height="100%"
         width="100%"
         data={penguins}

src/charts/PieChart/PieChart.tsx

@@ -17,6 +17,14 @@ import {
 
 import styled, { ThemeProvider } from 'styled-components';
 
+const PieLabel = styled.text`
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
+  text-anchor: middle;
+  alignment-baseline: middle;
+  fill: black;
+  pointer-events: none;
+`;
+
 const { light, dark } = themes;
 
 export default function PieChart({
@@ -262,16 +270,12 @@ export default function PieChart({
                   setTooltip={setTooltip}
                 />
                 {pieLabel && (
-                  <text
+                  <PieLabel
                     data-testid={`pie-chart-arc-text-${i}`}
-                    style={{ pointerEvents: 'none' }}
                     transform={textTranform(d)}
-                    textAnchor={'middle'}
-                    alignmentBaseline={'middle'}
-                    fill={'black'}
                   >
                     {d.data[value]}
-                  </text>
+                  </PieLabel>
                 )}
               </g>
             ))}

src/components/ColorLegend.tsx

@@ -15,11 +15,13 @@ const Legend = styled.div`
 
 const LegendTitle = styled.text`
   font-size: 14px;
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
   fill: ${(props) => props.theme.textColor};
 `;
 
 const LegendLabel = styled.text`
   font-size: 12px;
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
   fill: ${(props) => props.theme.textColor};
 `;
 

src/components/ContinuousAxis.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components';
 
 const TickText = styled.text`
   font-size: 12px;
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
   fill: ${(props) => props.theme.textColor};
 `;
 

src/components/DiscreteAxis.tsx

@@ -6,6 +6,7 @@ import styled from 'styled-components';
 
 const TickText = styled.text`
   font-size: 12px;
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
   fill: ${(props) => props.theme.textColor};
 `;
 

src/components/Label.tsx

@@ -5,6 +5,7 @@ import { Margin } from '../../types';
 import styled from 'styled-components';
 const AxisLabel = styled.text`
   font-size: 16px;
+  font-family: Tahoma, Geneva, Verdana, sans-serif;
   fill: ${(props) => props.theme.textColor};
 `;
 

src/components/Tooltip.tsx

@@ -22,10 +22,11 @@ const Tooltip = ({
 
   const lightTheme = {
     strokeGridLineColor: '#ebebeb',
-    textColor: '#8c8c8c',
+    textColor: '#212121',
     axisBaseLineColor: '#ebebeb',
     legendBackgroundColor: '#ffffff',
     legendBorder: '1px solid #ebebeb',
+    tooltipTextColor: '#e5e5e5',
     tooltipBackgroundColor: '#ffffff',
     tooltipBorder: '1px solid #ddd',
     tooltipShadow: `0 0 10px 0 rgba(80, 80, 80, 0.2)`,
@@ -37,7 +38,8 @@ const Tooltip = ({
     axisBaseLineColor: '#3d3d3d',
     legendBackgroundColor: '#1d1d1d',
     legendBorder: '1px solid #3d3d3d',
-    tooltipBackgroundColor: '#1d1d1d',
+    tooltipTextColor: '#e5e5e5',
+    tooltipBackgroundColor: '#383838',
     tooltipBorder: '1px solid #3d3d3d',
     tooltipShadow: `0 0 10px 0 rgba(100, 100, 100, 0.2)`,
   };
@@ -125,7 +127,7 @@ const Tooltip = ({
     borderRight: `12px solid ${themes[theme].tooltipBackgroundColor}`,
     borderBottom: `6px solid ${themes[theme].tooltipBackgroundColor}`,
     borderLeft: `12px solid ${themes[theme].tooltipBackgroundColor}`,
-    // padding: '0.6em 1em',
+    padding: '0.6em 1em',
     borderRadius: '4px',
     minWidth: '140px',
     maxWidth: '240px',
@@ -134,7 +136,7 @@ const Tooltip = ({
     textAlign: 'center',
     lineHeight: '1.4em',
     fontSize: '12px',
-    color: `${themes[theme].textColor}`,
+    color: `${themes[theme].tooltipTextColor}`,
     // border: `${themes[theme].tooltipBorder}`,
     zIndex: '9',
     transition: 'all 0.1s ease-out',

src/styles/componentStyles.ts

@@ -3,5 +3,6 @@ import styled from 'styled-components';
 export const Container = styled.div`
   height: 100vh;
   width: 100vw;
-  background-color: #ffffff;
+  /* background-color: #ffffff; */
+  background-color: #1d1d1d;
 `;

src/styles/globals.ts

@@ -7,7 +7,7 @@ const GlobalStyle = createGlobalStyle`
       outline:0;
       box-sizing:border-box;
       font-family: Tahoma, Geneva, Verdana, sans-serif;
-      background-color: #1d1d1d;
+      /* background-color: #1d1d1d; */
       /* background-color: #fff; */
   }
 `;