@shohojdhara/atomix 0.3.15 → 0.4.1

package/src/components/Chart/AreaChart.tsx

@@ -49,7 +49,7 @@ const AreaChart = memo(
                 y: scales.yScale(point.value),
               }));
 
-              const areaPath = `M ${areaPoints.map((p) => `${p.x},${p.y}`).join(' L ')} L ${areaPoints[areaPoints.length - 1]?.x},${scales.height} L ${areaPoints[0]?.x},${scales.height} Z`;
+              const areaPath = `M ${areaPoints.map(p => `${p.x},${p.y}`).join(' L ')} L ${areaPoints[areaPoints.length - 1]?.x},${scales.height} L ${areaPoints[0]?.x},${scales.height} Z`;
 
               return (
                 <g key={`dataset-${datasetIndex}`}>

package/src/components/Chart/CandlestickChart.tsx

@@ -125,7 +125,10 @@ const CandlestickChart = memo(
         borderColor = 'var(--atomix-primary-border-subtle)',
         showMovingAverages = false,
         movingAveragePeriods = [7, 21],
-        movingAverageColors = ['var(--atomix-warning-bg-subtle)', 'var(--atomix-warning-border-subtle)'],
+        movingAverageColors = [
+          'var(--atomix-warning-bg-subtle)',
+          'var(--atomix-warning-border-subtle)',
+        ],
         dateFormat = 'short',
         dateFormatter,
         showGrid = true,
@@ -189,7 +192,11 @@ const CandlestickChart = memo(
       }: ChartRenderContentParams) => {
         if (!candlestickData.length) return null;
 
-        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? candlestickOptions.showTooltips ?? true;
+        const showTooltips =
+          toolbarState?.showTooltips ??
+          renderConfig?.showTooltips ??
+          candlestickOptions.showTooltips ??
+          true;
 
         const padding = 40;
         const chartWidth = scales.width - padding * 2;
@@ -298,7 +305,9 @@ const CandlestickChart = memo(
                   );
                 }}
                 onMouseLeave={handlers.onPointLeave}
-                onClick={() => handlers.onDataPointClick?.(candle as unknown as ChartDataPoint, 0, index)}
+                onClick={() =>
+                  handlers.onDataPointClick?.(candle as unknown as ChartDataPoint, 0, index)
+                }
               />
             </g>
           );
@@ -372,19 +381,17 @@ const CandlestickChart = memo(
             {candles}
             {volumeBars}
             {movingAverages}
-            {showTooltips &&
-              hoveredPoint &&
-              candlestickData[hoveredPoint.pointIndex] && (
-                <ChartTooltip
-                  dataPoint={candlestickData[hoveredPoint.pointIndex] as unknown as ChartDataPoint}
-                  datasetLabel="Candlestick"
-                  position={{
-                    x: hoveredPoint.clientX,
-                    y: hoveredPoint.clientY,
-                  }}
-                  visible={true}
-                />
-              )}
+            {showTooltips && hoveredPoint && candlestickData[hoveredPoint.pointIndex] && (
+              <ChartTooltip
+                dataPoint={candlestickData[hoveredPoint.pointIndex] as unknown as ChartDataPoint}
+                datasetLabel="Candlestick"
+                position={{
+                  x: hoveredPoint.clientX,
+                  y: hoveredPoint.clientY,
+                }}
+                visible={true}
+              />
+            )}
           </>
         );
       };

package/src/components/Chart/Chart.stories.tsx

@@ -179,7 +179,7 @@ type Story = StoryObj<typeof meta>;
 
 // Glass Variant Story
 export const GlassVariant: Story = {
-  render: (args) => {
+  render: args => {
     const sampleData = [
       { label: 'Jan', value: 65 },
       { label: 'Feb', value: 78 },
@@ -240,12 +240,7 @@ export const GlassVariant: Story = {
               />
             </GridCol>
             <GridCol col={12} md={6}>
-              <PieChart
-                title="Market Share"
-                data={sampleData}
-                glass={true}
-                showToolbar={true}
-              />
+              <PieChart title="Market Share" data={sampleData} glass={true} showToolbar={true} />
             </GridCol>
             <GridCol col={12} md={6}>
               <AreaChart
@@ -356,7 +351,7 @@ const generateTreemapData = (count = 12) => {
     'Agriculture',
     'Construction',
   ];
-  
+
   return Array.from({ length: count }, (_, i) => ({
     id: `category-${i}`,
     label: categories[i % categories.length] || `Category ${i + 1}`,
@@ -377,7 +372,7 @@ const generateFunnelData = () => {
     { label: 'Evaluation', value: 600 },
     { label: 'Purchase', value: 300 },
   ];
-  
+
   return stages.map(stage => ({
     ...stage,
     percentage: ((stage.value / stages[0].value) * 100).toFixed(1),

package/src/components/Chart/Chart.tsx

@@ -351,57 +351,53 @@ const Chart = memo(
           tabIndex={0}
           {...props}
         >
-            {(title || subtitle || showToolbar) && (
-              <div
-                className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`}
-              >
-                <div className={`${CHART.HEADER_CONTENT_CLASS} u-flex-1`}>
-                  {title && <h3 className={`${CHART.TITLE_CLASS} u-mb-1`}>{title}</h3>}
-                  {subtitle && <p className={`${CHART.SUBTITLE_CLASS} u-mb-0`}>{subtitle}</p>}
-                </div>
-                {renderToolbar()}
+          {(title || subtitle || showToolbar) && (
+            <div className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-items-start u-gap-4`}>
+              <div className={`${CHART.HEADER_CONTENT_CLASS} u-flex-1`}>
+                {title && <h3 className={`${CHART.TITLE_CLASS} u-mb-1`}>{title}</h3>}
+                {subtitle && <p className={`${CHART.SUBTITLE_CLASS} u-mb-0`}>{subtitle}</p>}
+              </div>
+              {renderToolbar()}
+            </div>
+          )}
+
+          <div className={CHART.CONTENT_CLASS}>
+            {loading && (
+              <div className={CHART.LOADING_CLASS}>
+                <div className={CHART.LOADING_SPINNER_CLASS}></div>
+                <span className={CHART.LOADING_TEXT_CLASS}>
+                  {toolbarState.isExporting
+                    ? 'Exporting chart...'
+                    : toolbarState.isRefreshing
+                      ? 'Refreshing chart...'
+                      : 'Loading chart...'}
+                </span>
               </div>
             )}
 
-            <div className={CHART.CONTENT_CLASS}>
-              {loading && (
-                <div className={CHART.LOADING_CLASS}>
-                  <div className={CHART.LOADING_SPINNER_CLASS}></div>
-                  <span className={CHART.LOADING_TEXT_CLASS}>
-                    {toolbarState.isExporting
-                      ? 'Exporting chart...'
-                      : toolbarState.isRefreshing
-                        ? 'Refreshing chart...'
-                        : 'Loading chart...'}
-                  </span>
+            {error && (
+              <div className={CHART.ERROR_CLASS}>
+                <div className={CHART.ERROR_ICON_CLASS}>⚠</div>
+                <div className={CHART.ERROR_CONTENT_CLASS}>
+                  <div className={CHART.ERROR_MESSAGE_CLASS}>Chart Error</div>
+                  <div className={CHART.ERROR_DETAILS_CLASS}>{error}</div>
                 </div>
-              )}
-
-              {error && (
-                <div className={CHART.ERROR_CLASS}>
-                  <div className={CHART.ERROR_ICON_CLASS}>⚠</div>
-                  <div className={CHART.ERROR_CONTENT_CLASS}>
-                    <div className={CHART.ERROR_MESSAGE_CLASS}>Chart Error</div>
-                    <div className={CHART.ERROR_DETAILS_CLASS}>{error}</div>
-                  </div>
-                </div>
-              )}
-
-              {!loading && !error && !children && (
-                <div className={CHART.EMPTY_CLASS}>
-                  <div className={CHART.EMPTY_ICON_CLASS}>📊</div>
-                  <div className={CHART.EMPTY_MESSAGE_CLASS}>No data available</div>
-                  <div className={CHART.EMPTY_DETAILS_CLASS}>
-                    Add data to your chart to see visualizations
-                  </div>
+              </div>
+            )}
+
+            {!loading && !error && !children && (
+              <div className={CHART.EMPTY_CLASS}>
+                <div className={CHART.EMPTY_ICON_CLASS}>📊</div>
+                <div className={CHART.EMPTY_MESSAGE_CLASS}>No data available</div>
+                <div className={CHART.EMPTY_DETAILS_CLASS}>
+                  Add data to your chart to see visualizations
                 </div>
-              )}
+              </div>
+            )}
 
-              {!loading && !error && children && (
-                <div className={CHART.CANVAS_CLASS}>{children}</div>
-              )}
-            </div>
+            {!loading && !error && children && <div className={CHART.CANVAS_CLASS}>{children}</div>}
           </div>
+        </div>
       );
 
       // Wrap with AtomixGlass if glass is enabled

package/src/components/Chart/ChartRenderer.tsx

@@ -1,4 +1,13 @@
-import { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   useChart,
   useChartAccessibility,
@@ -88,7 +97,7 @@ const ChartRenderer = memo(
       const svgRef = useRef<SVGSVGElement>(null);
       const containerRef = useRef<HTMLDivElement>(null);
       const [isInitialized, setIsInitialized] = useState(false);
-      
+
       // Responsive dimensions state - initialize with 0 to prevent layout shifts
       const [dimensions, setDimensions] = useState({
         width: 0,
@@ -121,7 +130,7 @@ const ChartRenderer = memo(
         });
 
         // Use ResizeObserver to track container size changes
-        const resizeObserver = new ResizeObserver((entries) => {
+        const resizeObserver = new ResizeObserver(entries => {
           for (const entry of entries) {
             const { width: containerWidth, height: containerHeight } = entry.contentRect;
             if (containerWidth > 0 && containerHeight > 0) {
@@ -274,7 +283,13 @@ const ChartRenderer = memo(
           return null;
         }
 
-        const scales = calculateScales(processedData, dimensions.width, dimensions.height, undefined, config);
+        const scales = calculateScales(
+          processedData,
+          dimensions.width,
+          dimensions.height,
+          undefined,
+          config
+        );
         if (!scales) return null;
 
         const colors = getChartColors(processedData.length).filter(
@@ -289,7 +304,15 @@ const ChartRenderer = memo(
             color: dataset.color || colors[i],
           })),
         };
-      }, [processedData, config, dimensions.width, dimensions.height, isInitialized, calculateScales, getChartColors]);
+      }, [
+        processedData,
+        config,
+        dimensions.width,
+        dimensions.height,
+        isInitialized,
+        calculateScales,
+        getChartColors,
+      ]);
 
       useEffect(() => {
         return () => {
@@ -335,12 +358,12 @@ const ChartRenderer = memo(
       // Don't render until dimensions are initialized to prevent layout shifts
       if (!isInitialized || dimensions.width === 0 || dimensions.height === 0) {
         return (
-          <div 
-            ref={containerRef} 
-            className={CHART.CANVAS_CLASS} 
-            style={{ 
-              width: '100%', 
-              height: '100%', 
+          <div
+            ref={containerRef}
+            className={CHART.CANVAS_CLASS}
+            style={{
+              width: '100%',
+              height: '100%',
               minHeight: '200px',
               display: 'flex',
               alignItems: 'center',
@@ -359,7 +382,11 @@ const ChartRenderer = memo(
 
       return (
         <>
-          <div ref={containerRef} className={CHART.CANVAS_CLASS} style={{ width: '100%', height: '100%' }}>
+          <div
+            ref={containerRef}
+            className={CHART.CANVAS_CLASS}
+            style={{ width: '100%', height: '100%' }}
+          >
             <svg
               ref={svgRef}
               width={svgWidth}

package/src/components/Chart/ChartToolbar.tsx

@@ -569,14 +569,20 @@ const ChartToolbar = memo(
                   onRefresh?.();
                   break;
                 default:
-                  console.warn(`No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`);
+                  console.warn(
+                    `No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`
+                  );
               }
             }
           }
         };
 
         const buttonRef =
-          action.id === 'export' ? exportButtonRef : action.id === 'settings' ? settingsButtonRef : null;
+          action.id === 'export'
+            ? exportButtonRef
+            : action.id === 'settings'
+              ? settingsButtonRef
+              : null;
 
         return (
           <button
@@ -589,7 +595,13 @@ const ChartToolbar = memo(
             type="button"
             aria-label={action.label}
             aria-pressed={action.active ? 'true' : 'false'}
-            aria-expanded={action.id === 'export' ? showExportMenu : action.id === 'settings' ? showSettingsMenu : undefined}
+            aria-expanded={
+              action.id === 'export'
+                ? showExportMenu
+                : action.id === 'settings'
+                  ? showSettingsMenu
+                  : undefined
+            }
           >
             <Icon name={action.icon} size="sm" />
             {size === 'lg' && <span className={`${CHART.ACTION_CLASS}-label`}>{action.label}</span>}
@@ -698,14 +710,18 @@ const ChartToolbar = memo(
 
               {/* Info items */}
               {state.zoomLevel !== undefined && (
-                <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+                <div
+                  className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}
+                >
                   <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Zoom Level</span>
                   <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>
                     {Math.round((state.zoomLevel || 1) * 100)}%
                   </span>
                 </div>
               )}
-              <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+              <div
+                className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}
+              >
                 <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Chart Type</span>
                 <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>{chartType}</span>
               </div>

package/src/components/Chart/DonutChart.tsx

@@ -125,7 +125,7 @@ const DonutChart = memo(
         // Calculate angles for each slice
         const padAngleRad = ((pieOptions.padAngle || 1) * Math.PI) / 180;
         let currentAngle = ((pieOptions.startAngle || 0) * Math.PI) / 180;
-        
+
         const slices = chartData.validDataPoints.map((point, index) => {
           const percentage = point.value / total;
           const sliceAngle = percentage * (2 * Math.PI) - padAngleRad;

package/src/components/Chart/FunnelChart.tsx

@@ -282,7 +282,10 @@ const FunnelChart = memo(
               <ChartTooltip
                 dataPoint={funnelData[hoveredPoint.pointIndex]!}
                 datasetLabel="Funnel Data"
-                datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
+                datasetColor={
+                  funnelData[hoveredPoint.pointIndex]?.color ||
+                  colors[hoveredPoint.pointIndex % colors.length]
+                }
                 position={{
                   x: hoveredPoint.clientX,
                   y: hoveredPoint.clientY,

package/src/components/Chart/GaugeChart.tsx

@@ -335,7 +335,9 @@ const GaugeChart = memo(
               d={createArcPath(centerX, centerY, radius, startAngleRad, valueAngle, thickness)}
               fill="var(--atomix-brand-bg-subtle)"
               style={{
-                transition: shouldAnimate ? `all ${animationDuration}ms ${animationEasing}` : 'none',
+                transition: shouldAnimate
+                  ? `all ${animationDuration}ms ${animationEasing}`
+                  : 'none',
               }}
             />
 

package/src/components/Chart/HeatmapChart.tsx

@@ -288,21 +288,28 @@ const HeatmapChart = memo(
             <g>
               {/* Gradient definitions */}
               <defs>
-                {showColorLegend && (() => {
-                  const schemeColors = colorSchemes[colorScale.scheme] || colorSchemes.viridis;
-                  if (!schemeColors || schemeColors.length === 0) return null;
-                  return (
-                    <linearGradient id="heatmap-legend-gradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                      {schemeColors.map((color, i) => (
-                        <stop
-                          key={i}
-                          offset={`${(i / (schemeColors.length - 1)) * 100}%`}
-                          stopColor={color}
-                        />
-                      ))}
-                    </linearGradient>
-                  );
-                })()}
+                {showColorLegend &&
+                  (() => {
+                    const schemeColors = colorSchemes[colorScale.scheme] || colorSchemes.viridis;
+                    if (!schemeColors || schemeColors.length === 0) return null;
+                    return (
+                      <linearGradient
+                        id="heatmap-legend-gradient"
+                        x1="0%"
+                        y1="100%"
+                        x2="0%"
+                        y2="0%"
+                      >
+                        {schemeColors.map((color, i) => (
+                          <stop
+                            key={i}
+                            offset={`${(i / (schemeColors.length - 1)) * 100}%`}
+                            stopColor={color}
+                          />
+                        ))}
+                      </linearGradient>
+                    );
+                  })()}
               </defs>
 
               {/* Grid cells */}
@@ -333,11 +340,15 @@ const HeatmapChart = memo(
                         }}
                         onClick={() => {
                           if (cell) {
-                            handlers.onDataPointClick?.({
-                              ...cell,
-                              label: cell.label || `${cell.x}, ${cell.y}`,
-                              value: cell.value,
-                            } as any, rowIndex, colIndex);
+                            handlers.onDataPointClick?.(
+                              {
+                                ...cell,
+                                label: cell.label || `${cell.x}, ${cell.y}`,
+                                value: cell.value,
+                              } as any,
+                              rowIndex,
+                              colIndex
+                            );
                           }
                         }}
                         onMouseEnter={e => {
@@ -422,23 +433,25 @@ const HeatmapChart = memo(
                 </g>
               )}
             </g>
-            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-              <ChartTooltip
-                dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
-                }
-                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
-                datasetColor={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
-                  colors[hoveredPoint.datasetIndex % colors.length]
-                }
-                position={{
-                  x: hoveredPoint.clientX,
-                  y: hoveredPoint.clientY,
-                }}
-                visible={true}
-              />
-            )}
+            {showTooltips &&
+              hoveredPoint &&
+              renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+                <ChartTooltip
+                  dataPoint={
+                    renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                  }
+                  datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                  datasetColor={
+                    renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                    colors[hoveredPoint.datasetIndex % colors.length]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
           </>
         );
       };

package/src/components/Chart/LineChart.tsx

@@ -81,7 +81,8 @@ const LineChart = memo(
         if (!renderedDatasets.length) return null;
 
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
-        const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
+        const shouldAnimate =
+          toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
 
         return (
           <>
@@ -101,7 +102,7 @@ const LineChart = memo(
               // Generate line path - ensure proper SVG path format
               const path = mergedLineOptions.smooth
                 ? generateSmoothPath(points)
-                : `M ${points.map((p) => `${p.x},${p.y}`).join(' L ')}`;
+                : `M ${points.map(p => `${p.x},${p.y}`).join(' L ')}`;
 
               return (
                 <g key={`dataset-${datasetIndex}`}>

package/src/components/Chart/MultiAxisChart.tsx

@@ -164,7 +164,8 @@ const MultiAxisChart = memo(
       }: ChartRenderContentParams) => {
         if (!datasets.length) return null;
 
-        const effectiveShowTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? showTooltips ?? true;
+        const effectiveShowTooltips =
+          toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? showTooltips ?? true;
         const effectiveShowGrid = toolbarState?.showGrid ?? true; // Grid visibility from toolbar
 
         const padding = 60;
@@ -221,19 +222,19 @@ const MultiAxisChart = memo(
 
         // Draw grid lines
         if (effectiveShowGrid) {
-        for (let i = 0; i <= 5; i++) {
-          const y = padding + (i / 5) * chartHeight;
-          elements.push(
-            <line
-              key={`grid-${i}`}
-              x1={padding}
-              y1={y}
-              x2={padding + chartWidth}
-              y2={y}
-              className="c-chart__grid"
-            />
-          );
-        }
+          for (let i = 0; i <= 5; i++) {
+            const y = padding + (i / 5) * chartHeight;
+            elements.push(
+              <line
+                key={`grid-${i}`}
+                x1={padding}
+                y1={y}
+                x2={padding + chartWidth}
+                y2={y}
+                className="c-chart__grid"
+              />
+            );
+          }
         }
 
         // Draw datasets
@@ -253,7 +254,7 @@ const MultiAxisChart = memo(
           // Generate line path
           let linePath = '';
           if (points.length > 0) {
-            linePath = `M ${points.map((p) => `${p.x},${p.y}`).join(' L ')}`;
+            linePath = `M ${points.map(p => `${p.x},${p.y}`).join(' L ')}`;
           }
 
           // Draw area under line
@@ -338,7 +339,14 @@ const MultiAxisChart = memo(
 
             elements.push(
               <g key={`legend-${index}`}>
-                <rect x={legendX} y={legendY} width="12" height="12" fill={color} className="c-chart__legend-item-color" />
+                <rect
+                  x={legendX}
+                  y={legendY}
+                  width="12"
+                  height="12"
+                  fill={color}
+                  className="c-chart__legend-item-color"
+                />
                 <text x={legendX + 16} y={legendY + 10} className="c-chart__legend-item-text">
                   {dataset.label}
                 </text>

package/src/components/Chart/RadarChart.tsx

@@ -282,23 +282,25 @@ const RadarChart = memo(
               {dataPaths}
               {axisLabels}
             </g>
-            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-              <ChartTooltip
-                dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
-                }
-                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
-                datasetColor={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
-                  colors[hoveredPoint.datasetIndex]
-                }
-                position={{
-                  x: hoveredPoint.clientX,
-                  y: hoveredPoint.clientY,
-                }}
-                visible={true}
-              />
-            )}
+            {showTooltips &&
+              hoveredPoint &&
+              renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+                <ChartTooltip
+                  dataPoint={
+                    renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                  }
+                  datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                  datasetColor={
+                    renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                    colors[hoveredPoint.datasetIndex]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
           </>
         );
       };