Fix ChartContainer CSS to work without ShadCN theme, match ShadCN bar chart exactly

- ChartContainer: replace stroke-border/fill-muted (ShadCN tokens we
  don't have) with var(--chart-grid) so recharts CSS overrides actually work
- Dashboard chart: remove YAxis (ShadCN interactive bar has none)
- Remove unused formatAxisValue, formatAxisDuration, tick calculations
- Exact ShadCN structure: CartesianGrid vertical={false}, XAxis with
  tickMargin/minTickGap, single Bar with fill var(--color-{metric})

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Usman Baig
2026-03-09 13:45:13 +01:00
parent 56225bb1ad
commit 0dfd0ccb3c
2 changed files with 12 additions and 58 deletions

View File

@@ -61,12 +61,10 @@ const ChartContainer = React.forwardRef<
data-chart={chartId}
ref={ref}
className={cn(
'[&_.recharts-cartesian-grid_line[stroke=\'#ccc\']]:stroke-border/50',
'[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border',
'[&_.recharts-polar-grid_[stroke=\'#ccc\']]:stroke-border',
'[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted',
'[&_.recharts-reference-line_[stroke=\'#ccc\']]:stroke-border',
'[&_.recharts-sector[stroke=\'#fff\']]:stroke-transparent',
"[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-[var(--chart-grid)]",
"[&_.recharts-curve.recharts-tooltip-cursor]:stroke-[var(--chart-grid)]",
"[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-[var(--chart-grid)]",
"[&_.recharts-reference-line_[stroke='#ccc']]:stroke-[var(--chart-grid)]",
'[&_.recharts-sector]:outline-none',
'[&_.recharts-surface]:outline-none',
className,