chart kinda done

apps/stock/web-app/src/features/charts/ChartPage.tsx

@@ -169,9 +169,20 @@ export function ChartPage() {
   };
 
   const handleToggleIndicatorVisibility = (id: string) => {
-    setActiveIndicators(prev => prev.map(i => 
+    setActiveIndicators(prev => {
+      const updated = prev.map(i => 
         i.id === id ? { ...i, visible: !i.visible } : i
-    ));
+      );
+      // Force chart update by also updating config
+      if (id === 'VOLUME') {
+        const volumeIndicator = updated.find(i => i.id === 'VOLUME');
+        setConfig(prevConfig => ({ 
+          ...prevConfig, 
+          showVolume: volumeIndicator?.visible ?? true 
+        }));
+      }
+      return updated;
+    });
   };
 
   const handleIndicatorSettings = (id: string) => {

apps/stock/web-app/src/features/charts/components/SymbolChart.tsx

@@ -102,8 +102,8 @@ export function SymbolChart({
 
     chartRef.current = chart;
     
-    // Clear previous indicator series references
+    // Create a new map for this chart instance
-    indicatorSeriesRef.current.clear();
+    indicatorSeriesRef.current = new Map();
 
     // Create main series based on chart type
     if (chartConfig.chartType === 'candlestick') {
@@ -134,14 +134,18 @@ export function SymbolChart({
       });
     }
 
-    // Create volume series if enabled
+    // Create volume series if data has volume
-    if (chartConfig.showVolume && data.some(d => d.volume)) {
+    if (data.some(d => d.volume)) {
+      const volumeIndicator = activeIndicators.find(i => i.id === 'VOLUME');
+      const volumeVisible = volumeIndicator ? volumeIndicator.visible : chartConfig.showVolume;
+      
       volumeSeriesRef.current = chart.addHistogramSeries({
         color: '#3b82f680',
         priceFormat: {
           type: 'volume',
         },
         priceScaleId: 'volume',
+        visible: volumeVisible,
       });
       volumeSeriesRef.current.priceScale().applyOptions({
         scaleMargins: {
@@ -311,6 +315,7 @@ export function SymbolChart({
     // Cleanup
     return () => {
       window.removeEventListener('resize', handleResize);
+      setChartInitialized(false);
       if (chart) {
         chart.remove();
       }
@@ -348,13 +353,12 @@ export function SymbolChart({
 
   // Handle indicator visibility changes without recreating chart
   useEffect(() => {
-    if (!chartRef.current) return;
+    if (!chartRef.current || !chartInitialized) return;
 
-    // Small delay to ensure chart is fully initialized
-    const timeoutId = setTimeout(() => {
     // Update volume visibility
     if (volumeSeriesRef.current) {
-        const volumeVisible = chartConfig.showVolume;
+      const volumeIndicator = activeIndicators.find(i => i.id === 'VOLUME');
+      const volumeVisible = volumeIndicator ? volumeIndicator.visible : chartConfig.showVolume;
       volumeSeriesRef.current.applyOptions({
         visible: volumeVisible,
       });
@@ -380,10 +384,7 @@ export function SymbolChart({
         }
       }
     });
-    }, 100);
+  }, [chartConfig.showVolume, visibilityKey, chartInitialized]);
-
-    return () => clearTimeout(timeoutId);
-  }, [chartConfig.showVolume, visibilityKey]);
 
   // Prepare indicator info for overlay - include all indicators
   const indicatorInfo = activeIndicators.map(indicator => ({