Chart

A professional data visualization component built with Recharts. It supports bar, line, pie, and area charts and offers customizable styling for 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

binding

Query binding for loading chart data dynamically from a data query. When set, chart data comes from query results instead of static ‘data’ array. Query records use xAxisKey/yAxisKey for mapping. Type: object.

Sub‑properties

• query – Query name to bind to. Type: string.
• field – Field name (optional). Type: string.
• isReadOnly – Type: boolean. Default: true.

chartType

Type of chart to display. Choose based on data story you want to tell. Type: string. Options: bar, line, pie, area.

Visual Impact: bar – Vertical bars for comparing discrete categories; line – Connected line showing trends over time; pie – Circular slices showing proportions of a whole; area – Filled area under line showing cumulative trends.

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.

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; values – Use realistic numbers for the context (revenue in thousands, percentages 0‑100, etc.).

xAxisKey

Property name in data objects for x‑axis labels (or pie slice names). CRITICAL when using binding: defaults ‘name’/‘value’ will NOT match query column names — you MUST set this to the actual column name (e.g., ‘month’, ‘category’, ‘product_name’). Type: string. Default: name.

Recommendations: binding – ALWAYS set explicitly when using binding — match the actual query column name; static – Use ‘name’ for static data; timeSeries – Use ‘month’, ‘date’, ‘quarter’ for time‑based data; categories – Use descriptive key like ‘product’, ‘region’, ‘team’.

yAxisKey

Property name in data objects for y‑axis values (or pie slice sizes). CRITICAL when using binding: defaults ‘name’/‘value’ will NOT match query column names — you MUST set this to the actual column name (e.g., ‘revenue’, ‘count’, ‘total_sales’). Type: string. Default: value.

Recommendations: binding – ALWAYS set explicitly when using binding — match the actual query column name; static – Use ‘value’ for static data; 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"].

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.

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.

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.

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

CRITICAL: Using binding without setting xAxisKey and yAxisKey to match query columns

Why it's a problem: Defaults are ‘name’ and ‘value’ which only match static data. Query columns are typically named ‘month’, ‘category’, ‘revenue’, ‘total’, etc. — chart shows nothing because no data matches the default keys.

Fix: ALWAYS set xAxisKey and yAxisKey to the actual column names from the data table when using binding. Example: xAxisKey: ‘month’, yAxisKey: ‘revenue’.

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.