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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user