Charted Data: Complete Chart Types Guide

Introduction

Charted Data includes 7 powerful chart types that let you visualize data directly in your blog posts. Each chart type is fully interactive, responsive, and customizable. Whether you're analyzing trends, comparing categories, or breaking down proportions, there's a chart for every data story.

In this guide, you'll learn about every chart type, see real examples, discover customization options, and understand when to use each one.

Bar Charts
Line Charts
Area Charts
Pie Charts
Radar Charts
Radial Charts
Composed Charts
Chart Features & Interactions
Best Practices

Bar Charts

Overview

Bar charts are the most versatile and commonly used chart type. They excel at comparing values across different categories. Whether stacked, horizontal, or grouped, bar charts make it easy to spot patterns and compare magnitudes at a glance.

When to Use

Comparing categories — Sales by region, revenue by product line
Ranking data — Top performers, most-viewed articles
Part-to-whole comparison — Stacked bars for composition
Distribution analysis — How data spreads across groups

Example: Q4 Sales by Region

<BarChart
  title="Q4 Sales Performance by Region"
  description="Total sales across North America, Europe, and Asia Pacific"
  data={[
    { region: "North America", sales: 45000, returns: 2300, expenses: 8500 },
    { region: "Europe", sales: 38000, returns: 1800, expenses: 7200 },
    { region: "Asia Pacific", sales: 52000, returns: 3100, expenses: 9800 },
    { region: "Latin America", sales: 21000, returns: 900, expenses: 4100 },
  ]}
  xAxisKey="region"
  series={[
    { key: "sales", label: "Sales Revenue" },
    { key: "returns", label: "Returns" },
    { key: "expenses", label: "Operating Expenses" },
  ]}
  height={350}
  download={true}
  downloadImage={true}
  showBranding={true}
/>

Key Features

Feature	Description
Stacked Mode	Stack bars on top of each other to show composition
Horizontal Layout	Rotate bars for better category label readability
Multiple Series	Compare 3-5 data series side-by-side
Goal Lines	Add reference benchmarks or targets
Data Labels	Show exact values on bars
CSV Export	Download raw data for further analysis
Image Export	Screenshot chart as PNG

Usage Example (MDX)

<BarChart
  title="Monthly Revenue"
  description="Revenue breakdown by product line"
  data={[
    { month: "Jan", productA: 12000, productB: 8500, productC: 5200 },
    { month: "Feb", productA: 15000, productB: 9200, productC: 6100 },
    { month: "Mar", productA: 18500, productB: 11000, productC: 7300 },
  ]}
  xAxisKey="month"
  series={[
    { key: "productA", label: "Product A" },
    { key: "productB", label: "Product B" },
    { key: "productC", label: "Product C" },
  ]}
  stacked={false}
  horizontal={false}
  download={true}
  downloadImage={true}
/>

Customization Options

interface BarChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle/context
  xAxisKey?: string;          // Data field for X-axis (default: "name")
  series: Array<{
    key: string;              // Data field name
    label: string;            // Display label
    color?: string;           // Custom color (optional)
  }>;
  stacked?: boolean;          // Stack bars (default: false)
  horizontal?: boolean;       // Rotate 90° (default: false)
  height?: number;            // Height in px (default: 300)
  hideXAxis?: boolean;        // Hide X-axis labels
  hideYAxis?: boolean;        // Hide Y-axis
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide hover tooltip
  download?: boolean;         // CSV download button
  downloadImage?: boolean;    // PNG download button
  goalLine?: number;          // Add reference line at Y value
  logScale?: boolean;         // Use logarithmic scale
  filter?: boolean;           // Enable data filtering
  colors?: string[];          // Custom color palette
}

Pro Tips

💡 Stack bars to show composition — Use stacked={true} when showing how parts make up a whole (budget breakdown, market share)

💡 Use horizontal for long labels — When category names are long, rotate with horizontal={true}

💡 Add goal lines for targets — Use goalLine={50000} to show sales targets or benchmarks

💡 Enable filtering for exploration — Use filter={true} to let readers explore subsets of data

Line Charts

Overview

Line charts visualize trends over time. They're perfect for time-series data where you want to see patterns, acceleration, and inflection points. Multiple line series let you compare trends side-by-side.

When to Use

Time-series trends — Stock prices, user growth, page views over months
Comparing trajectories — Multiple products/regions over time
Detecting patterns — Seasonality, cycles, anomalies
Forecasting visualization — Historical data + projections
Monitoring metrics — System uptime, performance over time

Example: Website Traffic Trends

<LineChart
  title="Website Traffic Over 12 Months"
  description="Monthly visits, unique users, and page views"
  data={[
    { month: "Jan", visits: 12000, users: 8500, pageViews: 34000 },
    { month: "Feb", visits: 15500, users: 10200, pageViews: 41000 },
    { month: "Mar", visits: 18200, users: 12100, pageViews: 51000 },
    { month: "Apr", visits: 21000, users: 14300, pageViews: 58000 },
    { month: "May", visits: 24500, users: 16800, pageViews: 67000 },
    { month: "Jun", visits: 28000, users: 19200, pageViews: 76000 },
    { month: "Jul", visits: 32500, users: 22100, pageViews: 88000 },
    { month: "Aug", visits: 35800, users: 24500, pageViews: 96000 },
    { month: "Sep", visits: 38200, users: 26300, pageViews: 103000 },
    { month: "Oct", visits: 41500, users: 28600, pageViews: 112000 },
    { month: "Nov", visits: 45000, users: 31000, pageViews: 121000 },
    { month: "Dec", visits: 52000, users: 35800, pageViews: 142000 },
  ]}
  xAxisKey="month"
  series={[
    { key: "visits", label: "Total Visits" },
    { key: "users", label: "Unique Users" },
    { key: "pageViews", label: "Page Views" },
  ]}
  curved={true}
  showDots={true}
  height={350}
  download={true}
  downloadImage={true}
/>

Key Features

Feature	Description
Curved vs Linear	Smooth curves or straight lines between points
Dot Display	Show/hide data points on the line
Multiple Series	Compare 2-5 trends simultaneously
Goal Lines	Add target or threshold lines
Logarithmic Scale	Best for data with huge value ranges
Y-Axis Auto Scaling	Automatically adjusts for data range
Data Labels	Show values above/beside points

Usage Example (MDX)

<LineChart
  title="User Growth"
  description="Total active users from launch to present"
  data={[
    { month: "Jan", users: 1500 },
    { month: "Feb", users: 2200 },
    { month: "Mar", users: 3100 },
    { month: "Apr", users: 4500 },
    { month: "May", users: 6200 },
    { month: "Jun", users: 8500 },
  ]}
  xAxisKey="month"
  series={[
    { key: "users", label: "Active Users" },
  ]}
  curved={true}
  showDots={true}
  goalLine={5000}
  download={true}
/>

Customization Options

interface LineChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle
  xAxisKey?: string;          // X-axis field (default: "name")
  series: Array<{
    key: string;              // Data field
    label: string;            // Display label
    color?: string;           // Optional custom color
  }>;
  curved?: boolean;           // Smooth curves (default: true)
  showDots?: boolean;         // Show data points (default: true)
  height?: number;            // Height in px (default: 300)
  hideXAxis?: boolean;        // Hide X-axis
  hideYAxis?: boolean;        // Hide Y-axis
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide tooltip
  download?: boolean;         // CSV download
  downloadImage?: boolean;    // PNG download
  goalLine?: number;          // Reference threshold
  logScale?: boolean;         // Logarithmic scale
  filter?: boolean;           // Enable filtering
  colors?: string[];          // Custom colors
}

Pro Tips

💡 Use curved lines for smooth trends — curved={true} for natural-looking data, curved={false} for precise point plotting

💡 Show dots for precise values — Readers can hover over dots to see exact numbers

💡 Logarithmic scale for explosive growth — Use logScale={true} when data goes from 10 to 100,000

💡 Compare multiple metrics — Show visits + conversions + revenue on same chart for correlation analysis

Area Charts

Overview

Area charts are line charts with the area below the line filled with color. They emphasize magnitude and composition, especially useful for stacked area charts showing how parts contribute to a total.

When to Use

Cumulative totals — Stack areas to show how parts add up
Filled trend visualization — More emphasis than line charts
Portfolio composition — How different assets combine
Resource allocation — Budget breakdown over time
Audience growth — Channel contribution to total users

Example: Cloud Infrastructure Costs

<AreaChart
  title="Monthly Cloud Infrastructure Costs"
  description="Cost breakdown: Compute, Storage, Networking, and Database"
  data={[
    { month: "Jan", compute: 4200, storage: 1800, networking: 950, database: 2100 },
    { month: "Feb", compute: 5100, storage: 2100, networking: 1200, database: 2400 },
    { month: "Mar", compute: 6200, storage: 2400, networking: 1450, database: 2800 },
    { month: "Apr", compute: 7100, storage: 2800, networking: 1600, database: 3100 },
    { month: "May", compute: 8200, storage: 3200, networking: 1850, database: 3500 },
    { month: "Jun", compute: 9500, storage: 3600, networking: 2100, database: 4000 },
  ]}
  xAxisKey="month"
  series={[
    { key: "compute", label: "Compute" },
    { key: "storage", label: "Storage" },
    { key: "networking", label: "Networking" },
    { key: "database", label: "Database" },
  ]}
  stacked={true}
  gradient={true}
  height={350}
  download={true}
  downloadImage={true}
/>

Key Features

Feature	Description
Stacked Areas	Show composition and how parts add up
Gradient Fill	Beautiful gradient from color to transparent
Individual Areas	Show overlapping trends without stacking
Smooth Curves	Natural-looking area shapes
Color Opacity	Semi-transparent for overlapping visibility
Goal Lines	Add benchmark thresholds
Filled Emphasis	Greater visual impact than line charts

Usage Example (MDX)

<AreaChart
  title="Revenue by Product Line"
  description="Stacked revenue contribution over time"
  data={[
    { month: "Jan", productA: 15000, productB: 12000, productC: 8000 },
    { month: "Feb", productA: 18000, productB: 14000, productC: 9500 },
    { month: "Mar", productA: 21000, productB: 16500, productC: 11000 },
  ]}
  xAxisKey="month"
  series={[
    { key: "productA", label: "Product A" },
    { key: "productB", label: "Product B" },
    { key: "productC", label: "Product C" },
  ]}
  stacked={true}
  gradient={true}
  download={true}
/>

Customization Options

interface AreaChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle
  xAxisKey?: string;          // X-axis field (default: "name")
  series: Array<{
    key: string;              // Data field
    label: string;            // Display label
    color?: string;           // Optional custom color
  }>;
  stacked?: boolean;          // Stack areas (default: false)
  gradient?: boolean;         // Gradient fill (default: true)
  height?: number;            // Height in px (default: 300)
  hideXAxis?: boolean;        // Hide X-axis
  hideYAxis?: boolean;        // Hide Y-axis
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide tooltip
  download?: boolean;         // CSV download
  downloadImage?: boolean;    // PNG download
  goalLine?: number;          // Reference line
  logScale?: boolean;         // Logarithmic scale
  filter?: boolean;           // Enable filtering
  colors?: string[];          // Custom colors
}

Pro Tips

💡 Stack for composition storytelling — Use stacked={true} to show how parts combine into a whole (great for budget breakdowns)

💡 Gradients for visual polish — gradient={true} makes charts look more professional and modern

💡 Multiple overlapping areas — Use stacked={false} with opacity to compare trends that intersect

💡 Perfect for financial reports — Stacked area charts are industry-standard for portfolio/asset allocation visualization

Pie Charts

Overview

Pie charts display proportional breakdowns of a whole. Each slice represents a percentage of the total, making it instantly clear how parts contribute to the whole.

When to Use

Market share — Browser/OS distribution, market segments
Budget allocation — How money is distributed across categories
Survey responses — Percentage breakdown of answers
Demographic breakdown — Age groups, regions, segments
Composition analysis — Any "part-of-a-whole" scenario

Example: Website Traffic by Device

<PieChart
  title="Website Traffic by Device Type"
  description="Mobile vs Desktop vs Tablet visitors for Q4"
  data={[
    { device: "Mobile", visitors: 142000 },
    { device: "Desktop", visitors: 98000 },
    { device: "Tablet", visitors: 34000 },
  ]}
  dataKey="visitors"
  nameKey="device"
  showLabels={true}
  download={true}
  downloadImage={true}
/>

Key Features

Feature	Description
Custom Radius	Inner/outer radius for donut effect
Data Labels	Show percentages or values on slices
Legend	Display all categories with colors
Hover Tooltips	See exact values on mouseover
Color Customization	Full control over slice colors
Responsive	Adapts to mobile/tablet
Smooth Animations	Beautiful slice animations

Usage Example (MDX)

<PieChart
  title="User Subscription Tiers"
  description="Distribution of active users by plan"
  data={[
    { tier: "Free", users: 45000 },
    { tier: "Pro", users: 12000 },
    { tier: "Enterprise", users: 2800 },
  ]}
  dataKey="users"
  nameKey="tier"
  innerRadius={0}
  outerRadius={100}
  showLabels={true}
  download={true}
/>

Customization Options

interface PieChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle
  data: Array<{
    [nameKey]: string;        // Category name
    [dataKey]: number;        // Value to display
  }>;
  dataKey: string;            // Numeric field for slice size
  nameKey: string;            // Category field for labels
  innerRadius?: number;       // Inner radius (0 = pie, 60+ = donut)
  outerRadius?: number;       // Outer radius (default: 80)
  showLabels?: boolean;       // Show labels on slices
  height?: number;            // Height in px (default: 300)
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide tooltip
  download?: boolean;         // CSV download
  downloadImage?: boolean;    // PNG download
  filter?: boolean;           // Enable filtering
  colors?: string[];          // Custom colors
}

Pro Tips

💡 Donut chart alternative — Use innerRadius={60} to create a donut chart (trendy modern look)

💡 Limit to 3-5 slices — Pie charts work best with few categories. For many categories, use a bar chart instead.

💡 Label positioning — showLabels={true} displays percentages outside slices for clarity

💡 Perfect for pitch decks — Pie charts are great for presentations and executive reports

Radar Charts

Overview

Radar charts (spider/web charts) compare multiple dimensions simultaneously across categories. They're perfect for evaluating multi-aspect performance or comparing feature sets.

When to Use

Multi-dimensional comparison — Compare products on multiple features
Skill assessment — Rate competencies across areas
Performance evaluation — Compare across metrics (speed, quality, cost)
Competitive analysis — Stack competitors on various dimensions
Survey results — Compare satisfaction across topics
Organizational assessment — Evaluate departments on key metrics

Example: Product Feature Comparison

<RadarChart
  title="Feature Comparison: Our Product vs Competitors"
  description="Scoring on price, performance, features, ease-of-use, and support"
  data={[
    { criterion: "Price", ourProduct: 8, competitor1: 6, competitor2: 7 },
    { criterion: "Performance", ourProduct: 9, competitor1: 8, competitor2: 7 },
    { criterion: "Features", ourProduct: 8, competitor1: 7, competitor2: 9 },
    { criterion: "Ease of Use", ourProduct: 9, competitor1: 6, competitor2: 8 },
    { criterion: "Support", ourProduct: 9, competitor1: 7, competitor2: 6 },
  ]}
  angleKey="criterion"
  series={[
    { key: "ourProduct", label: "Our Product" },
    { key: "competitor1", label: "Competitor A" },
    { key: "competitor2", label: "Competitor B" },
  ]}
  height={350}
  download={true}
  downloadImage={true}
/>

Key Features

Feature	Description
Multiple Series	Compare 2-4 datasets simultaneously
Filled Areas	Visualize area coverage for each series
Polar Grid	Angular/radial guidelines
Legend	Identify each series
Tooltips	Hover to see exact values
Smooth Curves	Connecting lines between points
Filtering	Toggle series on/off in real-time

Usage Example (MDX)

<RadarChart
  title="Team Skills Assessment"
  description="Evaluate capabilities across technical and soft skills"
  data={[
    { skill: "React", alice: 9, bob: 7, carol: 8 },
    { skill: "Node.js", alice: 8, bob: 9, carol: 6 },
    { skill: "Design", alice: 6, bob: 5, carol: 9 },
    { skill: "Leadership", alice: 7, bob: 8, carol: 7 },
    { skill: "Communication", alice: 8, bob: 7, carol: 8 },
  ]}
  angleKey="skill"
  series={[
    { key: "alice", label: "Alice" },
    { key: "bob", label: "Bob" },
    { key: "carol", label: "Carol" },
  ]}
  download={true}
/>

Customization Options

interface RadarChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle
  data: Array<{
    [angleKey]: string;       // Dimension/category
    [series[].key]: number;   // Values for each series
  }>;
  angleKey: string;           // Field for axes (dimensions)
  series: Array<{
    key: string;              // Data field
    label: string;            // Display name
    color?: string;           // Optional color
  }>;
  height?: number;            // Height in px (default: 300)
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide tooltip
  download?: boolean;         // CSV download
  downloadImage?: boolean;    // PNG download
  filter?: boolean;           // Enable filtering
  colors?: string[];          // Custom colors
}

Pro Tips

💡 Perfect for competitive analysis — Show how your product stacks up against competitors on key criteria

💡 Scale consistently — Use the same scale (0-10) across all dimensions for fair comparison

💡 3-5 dimensions optimal — More than 6 makes the chart hard to read; stick to key metrics

💡 Great for proposals — Radar charts are impressive in pitch decks and business proposals

💡 Team assessment use case — Perfect for evaluating team members across multiple competencies

Radial Charts

Overview

Radial charts (gauge/donut charts) display values in a circular gauge format. Perfect for showing progress toward goals, performance scores, or highlighting a single key metric with context.

When to Use

Performance gauges — System uptime, accuracy percentage
Goal progress — Show completion toward target
KPI dashboards — Highlight key metrics (NPS, satisfaction)
Score display — Ratings, grades, performance scores
Capacity utilization — CPU usage, storage capacity
Completion status — Project progress, campaign status

Example: Customer Satisfaction Score

<RadialChart
  title="Customer Satisfaction Score"
  description="Q4 NPS (Net Promoter Score)"
  data={[
    { metric: "NPS Score", value: 72 },
  ]}
  dataKey="value"
  nameKey="metric"
  innerRadius={80}
  outerRadius={110}
  download={true}
  downloadImage={true}
/>

Key Features

Feature	Description
Single/Multiple Metrics	Show one or compare several
Customizable Radius	Inner/outer radius control
Center Text	Display large metric value
Gauge Styling	Modern donut gauge appearance
Background Ring	Visual reference for 100% scale
Color Gradients	From red (low) to green (high)
Responsive	Adapts to all screen sizes

Usage Example (MDX)

<RadialChart
  title="System Uptime"
  description="Current month availability"
  data={[
    { status: "Uptime", percentage: 99.87 },
  ]}
  dataKey="percentage"
  nameKey="status"
  innerRadius={90}
  outerRadius={120}
  download={true}
/>

Customization Options

interface RadialChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle
  data: Array<{
    [nameKey]?: string;       // Label (optional)
    [dataKey]: number;        // Numeric value
  }>;
  dataKey: string;            // Field with the value
  nameKey?: string;           // Field with the label
  innerRadius?: number;       // Inner ring size (default: 80)
  outerRadius?: number;       // Outer ring size (default: 110)
  height?: number;            // Height in px (default: 300)
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide tooltip
  download?: boolean;         // CSV download
  downloadImage?: boolean;    // PNG download
  colors?: string[];          // Custom colors
}

Pro Tips

💡 Single metric dashboards — Radial charts are perfect for highlighting one important KPI

💡 Modern alternative to gauges — More visually appealing than traditional speedometer gauges

💡 Great for status pages — Perfect for displaying system health, uptime, or availability

💡 Combine multiple — Show 2-3 radial charts side-by-side for a dashboard effect

Composed Charts

Overview

Composed charts mix multiple chart types (bars, lines, areas) in a single visualization. Perfect for comparing different data types or showing complementary metrics together.

When to Use

Revenue + Growth Rate — Bars for absolute numbers, line for percentage
Sales + Profit Margin — Different scales/perspectives on the same period
Website Traffic + Conversion — Count metric + percentage metric
Costs + Efficiency — Absolute cost bars + efficiency line
Supply + Demand — Compare two related but different metrics
Mixed KPIs — Any scenario requiring multiple metric types

Example: E-Commerce Metrics Dashboard

<ComposedChart
  title="Monthly E-Commerce Performance"
  description="Sales (bars), Average Order Value (line), and Unit Sales (area)"
  data={[
    { month: "Jan", sales: 45000, orderValue: 125, units: 360 },
    { month: "Feb", sales: 52000, orderValue: 132, units: 394 },
    { month: "Mar", sales: 61000, orderValue: 138, units: 442 },
    { month: "Apr", sales: 73500, orderValue: 145, units: 507 },
    { month: "May", sales: 85200, orderValue: 152, units: 560 },
    { month: "Jun", sales: 98500, orderValue: 158, units: 623 },
  ]}
  xAxisKey="month"
  series={[
    { key: "sales", label: "Sales Revenue", type: "bar" },
    { key: "orderValue", label: "Avg Order Value", type: "line" },
    { key: "units", label: "Units Sold", type: "area" },
  ]}
  height={350}
  download={true}
  downloadImage={true}
/>

Key Features

Feature	Description
Mixed Types	Combine bars, lines, and areas
Per-Series Type	Each series can be a different type
Multiple Y-Axes	Potential for different scales
Legend	Identifies each series
Tooltips	Shows all values on hover
Filtering	Toggle series on/off
Advanced Analysis	Compare disparate metrics

Usage Example (MDX)

<ComposedChart
  title="Product Launch Performance"
  description="Units sold vs Marketing spend vs Customer satisfaction"
  data={[
    { week: "Week 1", units: 500, spend: 3000, satisfaction: 8.2 },
    { week: "Week 2", units: 750, spend: 3500, satisfaction: 8.5 },
    { week: "Week 3", units: 1200, spend: 4000, satisfaction: 8.8 },
    { week: "Week 4", units: 1800, spend: 4500, satisfaction: 9.1 },
  ]}
  xAxisKey="week"
  series={[
    { key: "units", label: "Units Sold", type: "bar" },
    { key: "spend", label: "Marketing Spend", type: "line" },
    { key: "satisfaction", label: "Customer Satisfaction", type: "line" },
  ]}
  download={true}
/>

Customization Options

interface ComposedChartProps {
  title?: string;              // Chart title
  description?: string;        // Subtitle
  xAxisKey?: string;          // X-axis field (default: "name")
  series: Array<{
    key: string;              // Data field
    label: string;            // Display label
    type: "bar" | "line" | "area";  // Chart type
    color?: string;           // Optional color
    stackId?: string;         // For stacking bars
  }>;
  height?: number;            // Height in px (default: 300)
  hideXAxis?: boolean;        // Hide X-axis
  hideYAxis?: boolean;        // Hide Y-axis
  hideLegend?: boolean;       // Hide legend
  hideTooltip?: boolean;      // Hide tooltip
  download?: boolean;         // CSV download
  downloadImage?: boolean;    // PNG download
  filter?: boolean;           // Enable filtering
  colors?: string[];          // Custom colors
}

Pro Tips

💡 Mix metric types — Combine a bar (revenue) with a line (growth %) for complete story

💡 Different scales — Great for showing metrics on completely different ranges

💡 Industry reports — Perfect for executive dashboards and quarterly reports

💡 Correlation analysis — Show how two different metrics relate over time

💡 Keep it clear — Limit to 2-3 series to avoid overwhelming the chart

Chart Features & Interactions

All chart types share these powerful features:

🔄 Interactive Filtering

Users can dynamically filter data by toggling series and rows:

Click the Filter icon → Select/deselect columns and rows
→ Chart updates instantly

Perfect for exploration and focused analysis.

📥 Data Export

Download raw data as CSV:

Use in Excel, Sheets, or other tools
Full dataset included (not just displayed points)
Properly formatted with headers and quotes

🖼️ Image Export

Screenshot charts as PNG:

Perfect for presentations, reports
High quality with current styling
No watermarks or branding required

🔗 Embed Anywhere

Generate embed code for external sites:

<iframe 
  src="https://yourdomain.com/charts/chart-slug" 
  width="100%" 
  height="450px" 
  frameborder="0"
></iframe>

🎨 Branding

Charts include optional branding footer:

Site name and URL
Customizable per chart
Can be hidden with showBranding={false}

📊 Responsive Design

Automatically adapt to mobile, tablet, desktop
Touch-friendly interactions
Readable on any screen size

♿ Accessibility

Full keyboard navigation
Screen reader support
ARIA labels and descriptions
High contrast options

Data Format Requirements

Basic Data Structure

All charts accept data as an array of objects:

[
  { category: "Jan", value: 1000, otherValue: 500 },
  { category: "Feb", value: 1200, otherValue: 600 },
  { category: "Mar", value: 1400, otherValue: 700 },
]

Key Fields

Requirement	Description	Example
Array of Objects	Data must be an array; each row is an object	`[{}, {}, {}]`
Consistent Keys	All objects must have the same keys	Every row has `category`, `value`
Numeric Values	Numbers for chart dimensions	`1000`, not `"1000"`
String Categories	Category/axis labels as strings	`"Jan"`, `"Product A"`
Key Matching	Series keys must match data field names	`key: "sales"` → data has `sales` field

Example: Multi-Series Data

const data = [
  { 
    month: "January",           // Category (string)
    productA: 45000,           // Series 1 (number)
    productB: 38000,           // Series 2 (number)
    productC: 52000,           // Series 3 (number)
  },
  { 
    month: "February",
    productA: 52000,
    productB: 41000,
    productC: 58000,
  },
  // ... more months
];

Best Practices

1. Choose the Right Chart Type

Your Goal	Best Chart
Compare values across categories	Bar Chart
Show trends over time	Line Chart
Display composition over time	Area Chart (stacked)
Show parts of a whole	Pie Chart
Compare multiple dimensions	Radar Chart
Highlight a single metric	Radial Chart
Mix different metric types	Composed Chart

2. Keep Data Clean

✅ DO:

Remove outliers unless they're meaningful
Use consistent formatting
Label categories clearly
Include descriptive titles

❌ DON'T:

Include corrupted or incomplete data
Mix different units without explanation
Use ambiguous labels
Overload charts with too much data

3. Optimize for Readability

✅ Color Choices:

Use distinct colors for different series
Ensure sufficient contrast
Consider colorblind-friendly palettes
Limit to 3-5 colors when possible

✅ Labels & Legends:

Use descriptive series names
Include units ($ for money, % for percentages)
Add chart title and description
Keep legend concise

✅ Data Points:

Highlight important values with labels
Use goal lines for targets
Limit series to 2-5 for clarity
Sort data meaningfully

4. Mobile Considerations

Charts automatically resize for mobile
Touch-friendly tooltips
Legend doesn't obscure data
Text remains readable
Avoid overcrowded layouts

5. Accessibility

Use hideTooltip={false} to ensure info is accessible
Include descriptions in chart title/description
Use high contrast colors
Provide CSV export for data accessibility
Test with screen readers

6. Performance Tips

Limit data points to <500 for smooth interaction
Avoid rendering 10+ chart simultaneously
Use lazy loading for charts below the fold
Enable filtering for large datasets
Consider pagination for massive datasets

7. Storytelling with Charts

✅ Every chart should tell a story:

Headline — What is this chart about? (use title)
Context — Why does it matter? (use description)
Finding — What insight does it reveal?
Action — What should readers do with this information?

Example:

<LineChart
  title="User Acquisition Cost Declining"  // Headline
  description="Lower CAC through SEO improvements and referral program"  // Context
  data={...}
  goalLine={50}  // Show target cost
/>

8. When NOT to Use Charts

❌ Skip charts for:

Single data points (just use text)
More than 10 series (use table instead)
Unrelated datasets (confuses readers)
Complex relationships (try multiple simpler charts)
Very small datasets (<4 points)

Advanced Tips & Tricks

Custom Colors

Define your own color palette:

<BarChart
  colors={[
    "#FF6B6B",  // Red
    "#4ECDC4",  // Teal
    "#45B7D1",  // Blue
    "#FFA07A",  // Salmon
  ]}
  {...otherProps}
/>

Goal Lines for Context

Add reference lines to show targets or thresholds:

<LineChart
  goalLine={100000}  // Show $100k target
  {...otherProps}
/>

Stacked vs Grouped Comparisons

Stacked (composition):

<BarChart stacked={true} />  // Parts add to whole

Grouped (direct comparison):

<BarChart stacked={false} />  // Side-by-side comparison

Logarithmic Scale for Huge Ranges

When data spans 10x to 100x range:

<LineChart
  logScale={true}
  data={[
    { month: "Jan", users: 100 },
    { month: "Feb", users: 1000 },    // 10x
    { month: "Mar", users: 100000 },  // 100x
  ]}
/>

Filtering for Exploration

Let readers discover insights:

<BarChart
  filter={true}  // Enable row + series filtering
  {...otherProps}
/>

Combining Charts

Use multiple charts to tell a complete story:

// First: Show overall trend
<LineChart title="Total Revenue Growth" {...} />
 
// Then: Show breakdown
<BarChart title="Revenue by Region" {...} />
 
// Finally: Show composition
<AreaChart title="Revenue Source Mix" {...} />

Conclusion

With 7 chart types, flexible customization, and interactive features, Charted Data makes it easy to tell compelling data stories in your blog. Whether you're visualizing trends, comparing categories, or showcasing proportions, you have the perfect chart type and tooling at your fingertips.

Happy charting! 📊

Charted Data: Complete Chart Types Guide

Introduction

Table of Contents

Bar Charts

Overview

When to Use

Example: Q4 Sales by Region

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Line Charts

Overview

When to Use

Example: Website Traffic Trends

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Area Charts

Overview

When to Use

Example: Cloud Infrastructure Costs

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Pie Charts

Overview

When to Use

Example: Website Traffic by Device

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Radar Charts

Overview

When to Use

Example: Product Feature Comparison

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Radial Charts

Overview

When to Use

Example: Customer Satisfaction Score

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Composed Charts

Overview

When to Use

Example: E-Commerce Metrics Dashboard

Key Features

Usage Example (MDX)

Customization Options

Pro Tips

Chart Features & Interactions

🔄 Interactive Filtering

📥 Data Export

🖼️ Image Export

🔗 Embed Anywhere

🎨 Branding

📊 Responsive Design

♿ Accessibility

Data Format Requirements

Basic Data Structure

Key Fields

Example: Multi-Series Data

Best Practices

1. Choose the Right Chart Type

2. Keep Data Clean

3. Optimize for Readability

4. Mobile Considerations

5. Accessibility

6. Performance Tips

7. Storytelling with Charts

8. When NOT to Use Charts