From f16de0b128fe18d72a3f3b376aab729a5f1878a0 Mon Sep 17 00:00:00 2001
From: vaishnav k <89403217+vaishnav4281@users.noreply.github.com>
Date: Tue, 17 Dec 2024 23:11:12 +0530
Subject: [PATCH] Update TimeseriesBarChart.js

---
 src/components/Chart/TimeseriesBarChart.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Chart/TimeseriesBarChart.js b/src/components/Chart/TimeseriesBarChart.js
index 736056b..ba7a6a2 100644
--- a/src/components/Chart/TimeseriesBarChart.js
+++ b/src/components/Chart/TimeseriesBarChart.js
@@ -13,9 +13,15 @@ import {
 
 import { SectionTitle } from "../Typography/Title";
 
-function TimeseriesBarChart({ name, data, dataKeys, colors }) {
+function TimeseriesBarChart({ name, data, dataKeys = [], colors = [] }) {
   const { mode } = useContext(WindmillContext);
 
+  // Ensure dataKeys and colors are matched
+  if (dataKeys.length !== colors.length) {
+    console.error("The number of dataKeys must match the number of colors.");
+    return null;
+  }
+
   return (
     <div>
       <SectionTitle>{name}</SectionTitle>
@@ -35,7 +41,7 @@ function TimeseriesBarChart({ name, data, dataKeys, colors }) {
               <XAxis dataKey="date" />
               <YAxis />
               <Tooltip
-                cursor={false}
+                cursor={{ fill: mode === "dark" ? "#333" : "#f5f5f5" }}
                 contentStyle={{
                   backgroundColor:
                     mode === "dark"
@@ -48,6 +54,7 @@ function TimeseriesBarChart({ name, data, dataKeys, colors }) {
                   borderRadius: "0.5rem",
                   borderStyle: "none",
                 }}
+                formatter={(value, name) => [value, name.toUpperCase()]} // Tooltip formatter
               />
               <Legend
                 wrapperStyle={{