Don't show the normal recharts legend

matt-aitken · matt-aitken · commit 58d0d8e7c889 · 2026-01-21T12:51:23.000Z
diff --git a/apps/webapp/app/components/code/QueryResultsChart.tsx b/apps/webapp/app/components/code/QueryResultsChart.tsx
@@ -819,13 +819,13 @@ export const QueryResultsChart = memo(function QueryResultsChart({
   // This properly represents time gaps between data points
   const xAxisPropsForLine = isDateBased
     ? {
-        type: "number" as const,
-        domain: timeDomain ?? (["auto", "auto"] as [string, string]),
-        scale: "time" as const,
-        // Explicitly specify tick positions so labels appear across the entire range
-        ticks: timeTicks ?? undefined,
-        ...baseXAxisProps,
-      }
+      type: "number" as const,
+      domain: timeDomain ?? (["auto", "auto"] as [string, string]),
+      scale: "time" as const,
+      // Explicitly specify tick positions so labels appear across the entire range
+      ticks: timeTicks ?? undefined,
+      ...baseXAxisProps,
+    }
     : baseXAxisProps;
 
   // Bar charts always use categorical axis positioning
@@ -849,7 +849,7 @@ export const QueryResultsChart = memo(function QueryResultsChart({
         series={series}
         labelFormatter={legendLabelFormatter}
         showLegend={showLegend}
-        maxLegendItems={6}
+        maxLegendItems={5}
         minHeight="300px"
       >
         <Chart.Bar
diff --git a/apps/webapp/app/components/primitives/charts/ChartBar.tsx b/apps/webapp/app/components/primitives/charts/ChartBar.tsx
@@ -75,7 +75,7 @@ export function ChartBarRenderer({
   width,
   height,
 }: ChartBarRendererProps) {
-  const { config, data, dataKey, dataKeys, state, highlight, zoom } = useChartContext();
+  const { config, data, dataKey, dataKeys, state, highlight, zoom, showLegend } = useChartContext();
   const hasNoData = useHasNoData();
   const zoomHandlers = useZoomHandlers();
   const enableZoom = zoom !== null;
@@ -162,23 +162,26 @@ export function ChartBarRenderer({
         domain={["auto", (dataMax: number) => dataMax * 1.15]}
         {...yAxisPropsProp}
       />
-      <ChartTooltip
-        cursor={{ fill: "#2C3034" }}
-        content={
-          tooltipLabelFormatter ? (
-            <ChartTooltipContent />
-          ) : (
-            <ZoomTooltip
-              isSelecting={zoom?.isSelecting}
-              refAreaLeft={zoom?.refAreaLeft}
-              refAreaRight={zoom?.refAreaRight}
-              invalidSelection={zoom?.invalidSelection}
-            />
-          )
-        }
-        labelFormatter={tooltipLabelFormatter}
-        allowEscapeViewBox={{ x: false, y: true }}
-      />
+      {/* Hide tooltip when legend is shown - legend displays hover data instead */}
+      {!showLegend && (
+        <ChartTooltip
+          cursor={{ fill: "#2C3034" }}
+          content={
+            tooltipLabelFormatter ? (
+              <ChartTooltipContent />
+            ) : (
+              <ZoomTooltip
+                isSelecting={zoom?.isSelecting}
+                refAreaLeft={zoom?.refAreaLeft}
+                refAreaRight={zoom?.refAreaRight}
+                invalidSelection={zoom?.invalidSelection}
+              />
+            )
+          }
+          labelFormatter={tooltipLabelFormatter}
+          allowEscapeViewBox={{ x: false, y: true }}
+        />
+      )}
 
       {/* Zoom selection area - rendered before bars to appear behind them */}
       {enableZoom && zoom?.refAreaLeft && zoom?.refAreaRight && (
@@ -269,37 +272,3 @@ export function ChartBarRenderer({
     </BarChart>
   );
 }
-
-// ============================================================================
-// LEGACY API (for backward compatibility)
-// ============================================================================
-
-type LegacyChartBarProps = {
-  config: ChartConfig;
-  data: any[];
-  dataKey: string;
-  state?: ChartState;
-  maxLegendItems?: number;
-  referenceLine?: ReferenceLineProps;
-  minHeight?: string;
-  stackId?: string;
-  /** Series keys to render (if not provided, derived from config keys) */
-  series?: string[];
-  /** Custom X-axis props to merge with defaults */
-  xAxisProps?: Partial<XAxisProps>;
-  /** Custom Y-axis props to merge with defaults */
-  yAxisProps?: Partial<YAxisProps>;
-  /** Show legend (default true) */
-  showLegend?: boolean;
-  /** Enable zoom selection (default true) */
-  enableZoom?: boolean;
-  /** Callback when zoom range changes */
-  onZoomChange?: (range: ZoomRange) => void;
-  /** Custom tooltip label formatter */
-  tooltipLabelFormatter?: (label: string, payload: any[]) => string;
-  /** Use simple inline legend instead of row-based legend */
-  simpleLegend?: boolean;
-  /** Additional className for the container */
-  className?: string;
-};
-
diff --git a/apps/webapp/app/components/primitives/charts/ChartContext.tsx b/apps/webapp/app/components/primitives/charts/ChartContext.tsx
@@ -33,6 +33,9 @@ export type ChartContextValue = {
 
   // Zoom callback (only present when zoom is enabled)
   onZoomChange?: (range: ZoomRange) => void;
+
+  // Whether the compound legend is shown (disables tooltip when true)
+  showLegend: boolean;
 };
 
 const ChartCompoundContext = createContext<ChartContextValue | null>(null);
@@ -58,6 +61,8 @@ export type ChartProviderProps = {
   enableZoom?: boolean;
   /** Callback when zoom range changes */
   onZoomChange?: (range: ZoomRange) => void;
+  /** Whether the compound legend is shown (disables tooltip when true) */
+  showLegend?: boolean;
   children: React.ReactNode;
 };
 
@@ -70,6 +75,7 @@ export function ChartProvider({
   labelFormatter,
   enableZoom = false,
   onZoomChange,
+  showLegend = false,
   children,
 }: ChartProviderProps) {
   const highlight = useHighlightState();
@@ -92,8 +98,9 @@ export function ChartProvider({
       highlight,
       zoom: enableZoom ? zoomState : null,
       onZoomChange: enableZoom ? onZoomChange : undefined,
+      showLegend,
     }),
-    [config, data, dataKey, dataKeys, state, labelFormatter, highlight, zoomState, enableZoom, onZoomChange]
+    [config, data, dataKey, dataKeys, state, labelFormatter, highlight, zoomState, enableZoom, onZoomChange, showLegend]
   );
 
   return <ChartCompoundContext.Provider value={value}>{children}</ChartCompoundContext.Provider>;
diff --git a/apps/webapp/app/components/primitives/charts/ChartLine.tsx b/apps/webapp/app/components/primitives/charts/ChartLine.tsx
@@ -78,7 +78,7 @@ export function ChartLineRenderer({
   width,
   height,
 }: ChartLineRendererProps) {
-  const { config, data, dataKey, dataKeys, state, highlight } = useChartContext();
+  const { config, data, dataKey, dataKeys, state, highlight, showLegend } = useChartContext();
   const hasNoData = useHasNoData();
 
   // Render loading/error states
@@ -155,11 +155,14 @@ export function ChartLineRenderer({
         <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
         <XAxis {...xAxisConfig} />
         <YAxis {...yAxisConfig} />
-        <ChartTooltip
-          cursor={false}
-          content={<ChartTooltipContent indicator="line" />}
-          labelFormatter={tooltipLabelFormatter}
-        />
+        {/* Hide tooltip when legend is shown - legend displays hover data instead */}
+        {!showLegend && (
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" />}
+            labelFormatter={tooltipLabelFormatter}
+          />
+        )}
         {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
         {dataKeys.map((key) => (
           <Area
@@ -202,11 +205,14 @@ export function ChartLineRenderer({
       <CartesianGrid vertical={false} stroke="#272A2E" strokeDasharray="3 3" />
       <XAxis {...xAxisConfig} />
       <YAxis {...yAxisConfig} />
-      <ChartTooltip
-        cursor={false}
-        content={<ChartTooltipContent />}
-        labelFormatter={tooltipLabelFormatter}
-      />
+      {/* Hide tooltip when legend is shown - legend displays hover data instead */}
+      {!showLegend && (
+        <ChartTooltip
+          cursor={false}
+          content={<ChartTooltipContent />}
+          labelFormatter={tooltipLabelFormatter}
+        />
+      )}
       {/* Note: Legend is now rendered by ChartRoot outside the chart container */}
       {dataKeys.map((key) => (
         <Line
diff --git a/apps/webapp/app/components/primitives/charts/ChartRoot.tsx b/apps/webapp/app/components/primitives/charts/ChartRoot.tsx
@@ -79,6 +79,7 @@ export function ChartRoot({
       labelFormatter={labelFormatter}
       enableZoom={enableZoom}
       onZoomChange={onZoomChange}
+      showLegend={showLegend}
     >
       <ChartRootInner
         minHeight={minHeight}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -721,7 +721,7 @@ export default function Page() {
                     {results?.rows && results?.columns && results.rows.length > 0 ? (
                       <ResizablePanelGroup className="h-full overflow-hidden">
                         <ResizablePanel id="chart-results">
-                          <div className="h-full bg-charcoal-900 p-2">
+                          <div className="h-full bg-charcoal-900 p-2 overflow-y-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
                             <Card>
                               <Card.Content>
                                 <QueryResultsChart

Original file line number	Diff line number	Diff line change
`@@ -79,6 +79,7 @@ export function ChartRoot({`
`79`	`79`	`labelFormatter={labelFormatter}`
`80`	`80`	`enableZoom={enableZoom}`
`81`	`81`	`onZoomChange={onZoomChange}`
	`82`	`+ showLegend={showLegend}`
`82`	`83`	`>`
`83`	`84`	`<ChartRootInner`
`84`	`85`	`minHeight={minHeight}`