From 4a3fc7f1269cf8072cc5e066f6e94f8ba6caee44 Mon Sep 17 00:00:00 2001
From: Johnny D <jvdomino@gmail.com>
Date: Mon, 20 Jan 2025 11:38:25 -0500
Subject: [PATCH 1/2] Update chart.ts

---
 src/components/charts/chart.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/charts/chart.ts b/src/components/charts/chart.ts
index ca2cad07..831d55ec 100644
--- a/src/components/charts/chart.ts
+++ b/src/components/charts/chart.ts
@@ -364,6 +364,8 @@ export default class AstraChart extends ClassifiedElement {
     const isXAxisDate = !!(this.columns[0] && formattedSource.some((item) => isDate(item[this.columns[0]] as string)))
     const isYAxisDate = !!(this.columns[1] && formattedSource.some((item) => isDate(item[this.columns[1]] as string)))
 
+    const tooltipBgColor = this.theme === 'light' ? 'white' : 'black'
+
     if (this.type === 'radar') {
       return {
         radar: {
@@ -385,6 +387,7 @@ export default class AstraChart extends ClassifiedElement {
         tooltip: {
           trigger: 'item',
           borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
+          backgroundColor: tooltipBgColor,
         },
       }
     }
@@ -398,6 +401,7 @@ export default class AstraChart extends ClassifiedElement {
       tooltip: {
         trigger: this.type === 'scatter' ? 'item' : 'axis',
         borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
+        backgroundColor: tooltipBgColor,
       },
       legend: {
         show: !this.omitLegend && isTall,
@@ -583,6 +587,7 @@ export default class AstraChart extends ClassifiedElement {
 
   private addSeries(_options: EChartsOption) {
     const options = { ..._options }
+    const tooltipBgColor = this.theme !== 'dark' ? 'black' : 'dark'
 
     switch (this.type) {
       case 'column':
@@ -679,6 +684,7 @@ export default class AstraChart extends ClassifiedElement {
           tooltip: {
             trigger: 'item',
             borderColor: this.theme === 'dark' ? '#FFFFFF08' : '#00000010', // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
+            backgroundColor: tooltipBgColor,
           },
         })
 

From 8da195687412392880f62f62543759c026b5d1c2 Mon Sep 17 00:00:00 2001
From: Johnny D <jvdomino@gmail.com>
Date: Mon, 20 Jan 2025 11:46:41 -0500
Subject: [PATCH 2/2] update tooltip text color

---
 src/components/charts/chart.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/charts/chart.ts b/src/components/charts/chart.ts
index 831d55ec..04adc340 100644
--- a/src/components/charts/chart.ts
+++ b/src/components/charts/chart.ts
@@ -388,6 +388,9 @@ export default class AstraChart extends ClassifiedElement {
           trigger: 'item',
           borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
           backgroundColor: tooltipBgColor,
+          textStyle: {
+            color: this.theme === 'dark' ? '#FFFFFF' : '#000000',
+          },
         },
       }
     }
@@ -402,6 +405,9 @@ export default class AstraChart extends ClassifiedElement {
         trigger: this.type === 'scatter' ? 'item' : 'axis',
         borderColor: gridLineColors, // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
         backgroundColor: tooltipBgColor,
+        textStyle: {
+          color: this.theme === 'dark' ? '#FFFFFF' : '#000000',
+        },
       },
       legend: {
         show: !this.omitLegend && isTall,
@@ -685,6 +691,9 @@ export default class AstraChart extends ClassifiedElement {
             trigger: 'item',
             borderColor: this.theme === 'dark' ? '#FFFFFF08' : '#00000010', // fix issue where 'item' tooltips were a different color than the rest (maybe it matched the series color)
             backgroundColor: tooltipBgColor,
+            textStyle: {
+              color: this.theme === 'dark' ? '#FFFFFF' : '#000000',
+            },
           },
         })