Chart

Professional data visualization component using Recharts. Supports bar, line, pie, and area charts with customizable styling. Universal component suitable for any site type that displays data such as dashboards, analytics, reports, statistics, progress tracking, and comparisons.

Use Cases

• Sales dashboards (revenue trends, product performance, regional comparisons)
• Analytics pages (user growth, traffic sources, conversion funnels)
• Business metrics (KPIs, financial reports, quarterly performance)
• Survey results (poll responses, feedback analysis, satisfaction ratings)
• Progress tracking (project milestones, goal completion, fundraising)
• Product comparisons (feature matrices, pricing comparisons, performance benchmarks)
• Educational statistics (test scores, enrollment trends, course completion)
• E-commerce analytics (sales by category, top products, inventory levels)
• Portfolio performance (investment returns, asset allocation, growth charts)
• Team dashboards (task completion, velocity charts, burn-down charts)

Properties

chartType

Type of chart to display. Choose based on data story you want to tell. Type: string. Options: bar, line, pie, area. Recommendations: comparisons – Use bar for comparing categories side‑by‑side; trends – Use line for showing change over time; proportions – Use pie for parts of a whole (max 5 slices); cumulative – Use area for running totals or cumulative data. Visual Impact: bar – Vertical bars for comparing discrete categories. Best for: sales by product, users by region, performance by team.; line – Connected line showing trends over time. Best for: revenue growth, user signups, monthly metrics.; pie – Circular slices showing proportions of a whole. Best for: market share, budget breakdown, survey responses (3‑7 categories only).; area – Filled area under line showing cumulative trends. Best for: total revenue over time, running totals, stacked contributions.

data

Array of data objects. Each object must have properties matching xAxisKey and yAxisKey. Example: [{name: 'Jan', value: 4000}, {name: 'Feb', value: 3000}]. Type: array. Recommendations: sampleData – Provide realistic sample data matching the domain (sales, users, metrics); dataPoints – 3‑12 data points for readability. Too many = cluttered chart.; values – Use realistic numbers for the context (revenue in thousands, percentages 0‑100, etc.).

xAxisKey

Property name in data objects to use for x‑axis labels (or pie slice names). Example: 'name', 'month', 'category', 'product'. Type: string. Default: name. Recommendations: default – Use 'name' for most charts (already default); timeSeries – Use 'month', 'date', 'quarter' for time‑based data; categories – Use descriptive key like 'product', 'region', 'team'.

yAxisKey

Property name in data objects to use for y‑axis values (or pie slice sizes). Example: 'value', 'revenue', 'count', 'percentage'. Type: string. Default: value. Recommendations: default – Use 'value' for most charts (already default); specific – Use descriptive key like 'revenue', 'users', 'sales' for clarity.

colors

Array of color hex codes for chart elements. For bar/line/area, first color is used. For pie, colors cycle through slices. Type: array. Default: ["#3b82f6","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899"]. Recommendations: default – Use default palette – well‑tested, accessible, contrasting colors.; branding – Override with brand colors for consistent look.; accessibility – Ensure sufficient contrast between colors for readability.; pieCharts – Provide at least as many colors as data points for pie charts. Visual Impact: bar – First color fills all bars.; line – First color for line stroke.; pie – Colors cycle through slices (slice 1 = colors[0], slice 2 = colors[1], etc.).; area – First color for fill and stroke.

title

Optional chart title displayed above the chart. Explains what data represents. Type: string. Recommendations: always – Always provide a title – users need context for what chart shows.; descriptive – Be specific: 'Q4 2024 Sales by Region' better than 'Sales Chart'.; concise – Keep under 50 characters for clean display.

height

Chart height in pixels. Width is always 100% (responsive). Type: number. Default: 400. Recommendations: default – 400px works well for most charts.; compact – 300px for sidebar widgets or cards.; detailed – 500‑600px for charts with many data points or complex data.; mobile – Avoid heights over 600px – too much scrolling on mobile.

showGrid

Show grid lines on bar, line, and area charts. Helps read exact values. Ignored for pie charts. Type: boolean. Default: true. Visual Impact: true – Horizontal grid lines make it easier to read exact values from y‑axis.; false – Cleaner look but harder to read precise values. Recommendations: default – Use true for data accuracy.; aesthetic – Use false only for decorative charts where exact values don’t matter.

showLegend

Show legend below chart. For pie charts, shows slice names and colors. For bar/line/area, shows data series name. Type: boolean. Default: true. Visual Impact: true – Legend appears below chart explaining colors/data series.; false – No legend – user must infer meaning from context. Recommendations: pie – Always true for pie charts – users need to know what slices represent.; simple – Can be false for single‑series bar/line if chart title is clear.

customCss

Custom CSS styles for advanced styling. Parsed as CSS property‑value pairs. Applies to outermost Section container. Type: string. Recommendations: none. Security Note: Parsed by cssParser utility. Tenants only affect their own pages (multi‑tenant isolation enforced).

Best Practices

• Choose chart type based on data story: bar (comparisons), line (trends over time), pie (proportions), area (cumulative trends)
• Use bar charts for comparing discrete categories (sales by product, users by region)
• Use line charts for showing trends over time (revenue growth, user signups)
• Use pie charts ONLY for 3‑7 categories showing parts of a whole (market share, budget allocation)
• Use area charts for cumulative data over time (total revenue, running totals)
• Limit pie charts to 5 categories max – too many slices are unreadable
• Use descriptive axis labels – ‘name’ and ‘value’ are clear for most charts
• Pick contrasting colors for readability – default palette works well
• Set appropriate height: 300‑400px for most charts, 500‑600px for detailed data
• Always add title to explain what chart shows
• Keep showGrid: true for bar/line/area charts (helps read values)
• Keep showLegend: true unless chart is self‑explanatory
• Provide context around chart – add Heading + Text explaining what data represents

Common Mistakes

Using pie chart with 10+ categories

Why it's a problem: Too many slices become unreadable. Pie charts only work for 3‑7 categories.

Fix: Use bar chart for comparing many categories. Reserve pie for simple proportions.

Wrong chart type for data story

Why it's a problem: Pie chart for trends over time, or line chart for comparing categories – confusing to users.

Fix: Bar = comparisons, Line = trends over time, Pie = proportions (parts of whole), Area = cumulative.

Data format doesn’t match xAxisKey/yAxisKey

Why it's a problem: Chart expects data[0].name but you provided data[0].label – chart breaks.

Fix: Ensure every data object has properties matching xAxisKey and yAxisKey. Default: ‘name’ and ‘value’.

Too many data points on small chart

Why it's a problem: 20 bars on 300px chart = illegible labels, cluttered display.

Fix: Limit to 3‑12 data points. For more data, increase height or show top N items only.

No title or context around chart

Why it's a problem: Users don’t know what data represents. Is it revenue? Users? Widgets sold?

Fix: Always add title property AND surrounding Heading/Text components for context.

Not providing enough colors for pie chart

Why it's a problem: 5 slices but only 3 colors = colors repeat, confusing legend.

Fix: Default palette has 6 colors. For more slices, provide more colors in array.

Setting showGrid: false on data‑dense charts

Why it's a problem: Users can’t read exact values without grid lines. Just decoration, not useful.

Fix: Keep showGrid: true for charts where precise values matter.