diff --git a/frontend/src/components/InstrumentChart.tsx b/frontend/src/components/InstrumentChart.tsx
index d6c36b8..78bbdbe 100644
--- a/frontend/src/components/InstrumentChart.tsx
+++ b/frontend/src/components/InstrumentChart.tsx
@@ -109,7 +109,7 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
       const next = { ...v, [key]: !v[key] }
       seriesRefs.current[key]?.forEach(s => s.applyOptions({ visible: next[key] }))
       if (key === 'volatility') {
-        chartRef.current?.priceScale('volatility').applyOptions({ visible: next[key] })
+        chartRef.current?.priceScale('left').applyOptions({ visible: next[key] })
       }
       return next
     })
@@ -235,17 +235,22 @@ export default function InstrumentChart({ priceData, indicators, events = [], he
         seriesRefs.current.bb = [bbUpper, bbLower]
       }
 
-      // Volatilité réalisée (annualisée, %) — échelle dédiée, cachée par défaut
+      // Volatilité réalisée (annualisée, %) — échelle dédiée, cachée par défaut. Must use
+      // the built-in 'left' scale id, not a custom string: lightweight-charts treats any
+      // non-'left'/'right' priceScaleId as an "overlay" scale, which never renders a visible
+      // axis and ignores `visible` entirely (confirmed in its own typings) — that silently
+      // killed both the axis labels and the hover value tag on this series.
       if (indicators.volatility?.length) {
-        chart.priceScale('volatility').applyOptions({
+        chart.priceScale('left').applyOptions({
           visible: visibleRef.current.volatility,
           borderColor: 'rgba(236,72,153,0.25)',
+          textColor: '#ec4899',
           scaleMargins: { top: 0.78, bottom: 0.02 },
         })
         const volatilitySeries = chart.addLineSeries({
           color: '#ec4899',
           lineWidth: 1,
-          priceScaleId: 'volatility',
+          priceScaleId: 'left',
           title: 'Vol. réalisée %',
           priceLineVisible: false,
           lastValueVisible: true,