All Docs
FeaturesDepositClearUpdated March 15, 2026

MOB-21: Responsive Charts — Audit & Fix Guide

MOB-21: Responsive Charts — Audit & Fix Guide

Version introduced: v0.1.337 Category: Component Patterns

Overview

This page documents the MOB-21 finding and explains how to audit and fix recharts components to ensure they render correctly on mobile viewports.

The platform uses recharts for all analytics and reporting charts, with CSS custom properties (--chart-1 through --chart-5) providing the colour palette. For charts to be responsive, every recharts root component must be wrapped in <ResponsiveContainer>.

The Problem: Fixed-Width Charts on Mobile

Recharts components accept an explicit width prop. If a fixed pixel value is provided (e.g. width={600}), the chart will not shrink on narrow viewports, causing horizontal overflow and broken layouts on mobile devices.

Problematic pattern:

// ❌ DO NOT do this — will overflow on mobile
<BarChart width={600} height={300} data={data}>
  <Bar dataKey="value" />
</BarChart>

The Fix: Wrap Every Chart in <ResponsiveContainer>

<ResponsiveContainer> observes its parent element's width and passes the correct dimensions down to the chart. Use width="100%" to fill the container, and supply a fixed height (in pixels) or a percentage-based height.

Correct pattern:

// ✅ Correct — chart scales to its container on all viewports
import { BarChart, Bar, XAxis, YAxis, ResponsiveContainer } from 'recharts';

<ResponsiveContainer width="100%" height={300}>
  <BarChart data={data}>
    <XAxis dataKey="name" />
    <YAxis />
    <Bar dataKey="value" fill="var(--chart-1)" />
  </BarChart>
</ResponsiveContainer>

Audit Checklist

Use the following checklist when auditing chart components:

  • Locate all recharts imports in src/app/dashboard/analytics
  • Locate all recharts imports in report components
  • Confirm every recharts root component (<BarChart>, <LineChart>, <AreaChart>, <PieChart>, <RadarChart>, <ScatterChart>) is a direct child of <ResponsiveContainer>
  • Confirm no width prop is set directly on recharts root components
  • Confirm <ResponsiveContainer width="100%" height={N}> is used consistently
  • Test each chart at 375 px, 768 px, and 1280 px viewport widths

Applying the Chart Colour Palette

The platform exposes five chart colours as CSS variables. Reference them via fill or stroke props:

VariableUsage
--chart-1Primary data series
--chart-2Secondary data series
--chart-3Tertiary data series
--chart-4Quaternary data series
--chart-5Quinary / accent series
<Bar dataKey="deposits" fill="var(--chart-1)" />
<Bar dataKey="disputes" fill="var(--chart-2)" />

Affected Locations

LocationStatus
src/app/dashboard/analytics⚠️ Not confirmed — audit required
Report components (recharts usages)⚠️ Not confirmed — audit required

References