Charted Data: Data Interactivity & Export/Sharing Guide

Introduction

Charted Data empowers your readers to go beyond passive viewing. Charts are fully interactive—readers can filter data, explore details, and export insights for further analysis. Combined with easy sharing and embedding capabilities, your data visualizations become powerful tools for discovery, collaboration, and deeper understanding.

This comprehensive guide covers everything about chart interactivity, exporting, and sharing.

Table of Contents

1. Live Data Filtering
2. Hover Tooltips & Details
3. Responsive Design
4. Accessibility Features
5. Exporting Charts as Images
6. Exporting Data as CSV
7. Embedding Charts
8. Shareable Chart Links
9. Chart Gallery
10. Interaction Best Practices
11. Troubleshooting

Live Data Filtering

Overview

Live data filtering transforms charts into interactive exploration tools. Readers can toggle data series on/off and filter rows in real-time, instantly seeing how the visualization updates. No page refreshes, no loading screens—just immediate, responsive interaction.

Enabling Filtering

Add filter={true} to any chart:

<BarChart
  title="Sales by Region"
  data={salesData}
  filter={true}  // Enable live filtering
  {...otherProps}
/>

What Readers Can Filter

1. Series Filtering (Columns)

Toggle entire data series on/off:

Chart: Revenue by Product (3 series: Product A, B, C)
Reader clicks Filter icon → Can toggle:
  ✓ Product A
  ✓ Product B
  ✓ Product C

Use Case: "I only want to see Product A and C trends, hide B"

Result: Chart instantly removes Product B data, adjusts scales, updates legend.

2. Row Filtering (Categories/Time Points)

Filter by specific categories or time periods:

Chart: Monthly Sales for 12 months
Reader clicks Filter icon → Can select:
  ✓ January    ✓ May       ✓ September
  ✓ February   ✓ June      ✓ October
  ✓ March      ✓ July      ✓ November
  ✓ April      ✓ August    ✓ December

Use Case: "Show me only Q4 performance" or "Compare summer months only"

Result: Chart updates to show only selected months, scales adjust for subset.

Example: Sales Data with Filtering

<BarChart
  title="Quarterly Sales by Region (Interactive)"
  description="Click the Filter icon to explore by region or quarter"
  data={[
    { quarter: "Q1", northAmerica: 125000, europe: 98000, asiaPacific: 112000, latinAmerica: 65000 },
    { quarter: "Q2", northAmerica: 145000, europe: 115000, asiaPacific: 135000, latinAmerica: 78000 },
    { quarter: "Q3", northAmerica: 165000, europe: 128000, asiaPacific: 158000, latinAmerica: 92000 },
    { quarter: "Q4", northAmerica: 195000, europe: 152000, asiaPacific: 185000, latinAmerica: 118000 },
  ]}
  xAxisKey="quarter"
  series={[
    { key: "northAmerica", label: "North America" },
    { key: "europe", label: "Europe" },
    { key: "asiaPacific", label: "Asia Pacific" },
    { key: "latinAmerica", label: "Latin America" },
  ]}
  filter={true}
  download={true}
  downloadImage={true}
  height={350}
/>

Filtering UI

The Filter button appears in the chart header (top-right corner):

[Chart Title]                    [Icon: Data Filter] [Other Icons]

Click to open dropdown with:

• Filter Columns (Series) section
  • Checkboxes for each series
  • "All" / "None" quick-select buttons
• Filter Rows (Categories) section
  • Checkboxes for each row/category
  • "All" / "None" quick-select buttons

Real-World Scenarios

Scenario 1: Executive Dashboard

User: Sales Manager reviewing Q4 performance

1. Opens chart showing all 4 regions for all 12 months
2. Filters out Latin America (small market, not relevant to meeting)
3. Selects only Q4 months (Oct, Nov, Dec)
4. Sees focused comparison: Top 3 regions, final quarter only
5. Exports as PNG for presentation

Result: Cleaner, more focused visualization for audience

Scenario 2: Data Exploration

User: Analyst investigating anomaly

1. Opens chart with all company departments and all metrics
2. Toggles off most departments, keeps only "Engineering"
3. Filters to show only the month with the anomaly
4. Hovers over specific data points to see exact values
5. Exports CSV to dig deeper in spreadsheet

Result: Efficient root cause analysis

Scenario 3: Student Research

User: Researching climate data

1. Opens chart with multiple countries' temperature trends over 50 years
2. Filters to show only Northern Hemisphere countries
3. Selects only winter months to focus on seasonal pattern
4. Compares how different regions respond to climate change
5. Exports data to use in research paper

Result: Tailored dataset for specific research question

Filtering Best Practices

✅ DO:

• Enable filtering for exploratory data (3+ series, 6+ rows)
• Provide meaningful series names (readers understand what they're toggling)
• Use consistent data ranges so scaling makes sense
• Include description explaining what can be filtered
• Combine with CSV export for deeper analysis

❌ DON'T:

• Enable filtering on simple charts (1-2 series, 3-4 rows)
• Use filtering as substitute for multiple focused charts
• Filter out important context (always provide "All" option)
• Overwhelm with 20+ filter options (group related data)

When to Enable Filtering

✅ Perfect for:

• Multi-region/product/department comparisons
• Long time-series (12+ data points)
• Exploratory dashboards
• Academic/research content
• Interactive reports
• Customer-facing analytics

❌ Skip filtering for:

• Simple before/after comparisons
• Highly focused stories (one metric only)
• Mobile-only content (filtering UI can feel cramped)
• Heavily curated narratives where exploration would confuse

Hover Tooltips & Details

Overview

Tooltips appear when readers hover over (or tap on mobile) chart data points, displaying exact values and additional context. They transform abstract visual elements into precise, readable information.

What Tooltips Show

Single Series Tooltip

┌─────────────────┐
│ Sales Revenue   │
│ $45,200         │
│ Jan 2024        │
└─────────────────┘

Multi-Series Tooltip

┌──────────────────────┐
│ January 2024         │
│                      │
│ Product A: $45,200   │
│ Product B: $38,900   │
│ Product C: $52,100   │
└──────────────────────┘

Enabling/Disabling Tooltips

By default, tooltips are enabled. Disable if needed:

<BarChart
  hideTooltip={false}  // Default: show tooltips
  {...otherProps}
/>
 
// Or hide tooltips
<BarChart
  hideTooltip={true}   // Don't show tooltips
  {...otherProps}
/>

Tooltip Behavior

Example: Tooltips in Action

<LineChart
  title="Website Traffic with Detailed Tooltips"
  description="Hover over data points to see exact visitor counts by source"
  data={[
    { month: "Jan", organic: 12500, paid: 8200, direct: 3100, social: 2400 },
    { month: "Feb", organic: 14200, paid: 9100, direct: 3500, social: 2800 },
    { month: "Mar", organic: 16800, paid: 10500, direct: 4100, social: 3200 },
    { month: "Apr", organic: 19500, paid: 12100, direct: 4600, social: 3600 },
    { month: "May", organic: 22100, paid: 13800, direct: 5200, social: 4100 },
    { month: "Jun", organic: 25300, paid: 15600, direct: 5800, social: 4600 },
  ]}
  xAxisKey="month"
  series={[
    { key: "organic", label: "Organic Search" },
    { key: "paid", label: "Paid Ads" },
    { key: "direct", label: "Direct" },
    { key: "social", label: "Social Media" },
  ]}
  curved={true}
  showDots={true}
  hideTooltip={false}
  height={350}
/>

Try hovering over the data points above to see tooltips!

Tooltip Information Hierarchy

Tooltips are smart about what they display:

Bar Charts

Category Name
Series 1 Name: Value
Series 2 Name: Value
Series 3 Name: Value

Line Charts

X-Axis Label
Series 1 Name: Value
Series 2 Name: Value

Pie Charts

Slice Label
Value
Percentage of Total

Radar Charts

Dimension Name
Series 1 Name: Value
Series 2 Name: Value

Formatting in Tooltips

Tooltips automatically format values:

Why Tooltips Matter

✅ Precision: Readers see exact values, not estimated from visual position ✅ Context: See which series/category each value belongs to ✅ Mobile-Friendly: Essential for touch devices where clicking is needed ✅ Accessibility: Screen readers can access tooltip information ✅ Prevents Misinterpretation: No guessing at axis scale

Tooltip Best Practices

✅ DO:

• Keep tooltips enabled (default setting)
• Ensure tooltips don't cover other data
• Use clear, abbreviated labels in tooltips
• Format numbers for readability ($45K instead of 45000)
• Test on mobile to ensure tooltips appear correctly

❌ DON'T:

• Disable tooltips unless absolutely necessary
• Put excessive information in tooltips (keep it concise)
• Use jargon readers won't understand
• Hide critical data in tooltips (should be visible in chart too)

Responsive Design

Overview

All charts automatically adapt to any screen size—desktop, tablet, mobile—ensuring perfect readability and interactivity everywhere. No separate mobile version needed. One chart definition works on all devices.

How Responsiveness Works

Charts use viewport-aware sizing:

1. Detect screen size — Automatically sense device width
2. Adjust dimensions — Scale chart proportionally
3. Reflow layout — Reorganize elements for small screens
4. Maintain clarity — All labels/values stay readable
5. Optimize interaction — Touch-friendly on mobile

Desktop View (1920px+)

┌─────────────────────────────────────┐
│  Chart Title                        │
│  Chart description for context      │
├─────────────────────────────────────┤
│                                     │
│    ██  ██                           │
│    ██  ██  ██                       │
│    ██  ██  ██  ██                   │
│    ██  ██  ██  ██  ██               │
│                                     │
├─────────────────────────────────────┤
│ Jan  Feb  Mar  Apr  May             │
│                                     │
│ Legend: Series A  Series B  Series C│
└─────────────────────────────────────┘

Tablet View (768px - 1024px)

┌───────────────────────┐
│ Chart Title           │
│ Description           │
├───────────────────────┤
│                       │
│  ██      ██           │
│  ██  ██  ██  ██       │
│  ██  ██  ██  ██  ██   │
│                       │
├───────────────────────┤
│ Jan Feb Mar Apr May   │
│                       │
│ Legend:               │
│ • Series A  • Series B│
│ • Series C            │
└───────────────────────┘

Mobile View (320px - 480px)

┌──────────────┐
│ Chart Title  │
│ Description  │
├──────────────┤
│              │
│   ██         │
│   ██  ██     │
│   ██  ██  ██ │
│   ██  ██  ██ │
│   ██  ██  ██ │
│              │
├──────────────┤
│ J F M A M    │
│              │
│ Legend:      │
│ • Series A   │
│ • Series B   │
│ • Series C   │
└──────────────┘

Example: Responsive Chart

<BarChart
  title="Responsive Chart (Try Resizing Your Browser)"
  description="Resize your window from desktop to mobile to see responsiveness in action"
  data={[
    { month: "January", sales: 45000, returns: 2300, expenses: 8500 },
    { month: "February", sales: 52000, returns: 2800, expenses: 9200 },
    { month: "March", sales: 61000, returns: 3100, expenses: 10100 },
    { month: "April", sales: 73500, returns: 3500, expenses: 11800 },
    { month: "May", sales: 85200, returns: 4200, expenses: 13600 },
  ]}
  xAxisKey="month"
  series={[
    { key: "sales", label: "Sales" },
    { key: "returns", label: "Returns" },
    { key: "expenses", label: "Expenses" },
  ]}
  height={350}
  download={true}
  downloadImage={true}
/>

What Adapts

Mobile-Specific Features

Touch Interactions

• Tap to see tooltip — No hover on mobile, tap reveals values
• Drag to pan — Swipe across chart on very wide datasets
• Pinch to zoom — Expand sections of large charts
• Double-tap for details — Quick access to tooltip info

Readability

• Fonts scale up on small screens
• Legend wraps to vertical on mobile
• Category labels rotate for space efficiency
• Numbers format compactly (12K vs 12,000)

Performance

• Charts load quickly even on slow connections
• Touch interactions are smooth (60fps)
• No janky animations or stuttering
• Efficient re-rendering on resize

Viewport Breakpoints

Charted Data uses standard responsive breakpoints:

// Mobile-first approach
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+

Testing Responsiveness

Desktop browsers:

1. Open browser DevTools (F12)
2. Click "Device Toolbar" icon (or Ctrl+Shift+M)
3. Select device or drag to resize
4. Watch chart adapt in real-time

Physical devices:

• Open blog on phone, tablet, desktop
• Verify all elements readable
• Test touch interactions work smoothly
• Confirm tooltips appear on tap

Responsive Design Best Practices

✅ DO:

• Set reasonable chart heights (350px-400px optimal)
• Use descriptive labels that abbreviate well
• Test on multiple real devices
• Ensure legends are visible on all screens
• Keep series count under 5 for mobile readability

❌ DON'T:

• Set fixed widths (always use percentages)
• Use tiny fonts expecting desktop view
• Cram too much data (hard to read on mobile)
• Forget to test on actual phones/tablets
• Override responsive styles

Responsive Images Export

When exporting as PNG on mobile:

✅ Image matches current viewport size ✅ Resolution is sufficient for phone screens ✅ All text remains readable ✅ File size is optimized

Accessibility Features

Overview

Charted Data charts are fully accessible to all users, including those using assistive technologies. Keyboard navigation, screen reader support, and semantic HTML ensure no one is left out.

WCAG Compliance

Charts meet WCAG 2.1 AA standards:

• ✅ Perceivable — All information accessible to all senses
• ✅ Operable — Full keyboard navigation support
• ✅ Understandable — Clear labels and descriptions
• ✅ Robust — Compatible with assistive technologies

Keyboard Navigation

Users can navigate charts entirely with keyboard:

Example: Keyboard Navigation Workflow

1. Tab → Focus on chart container
2. Tab → Focus on Filter button
3. Enter → Open filter dropdown
4. Tab/Space → Toggle series/rows
5. Escape → Close filter menu
6. Tab → Focus on Download Image button
7. Enter → Export chart as PNG

Screen Reader Support

Screen readers (JAWS, NVDA, VoiceOver) automatically:

✅ Announce chart type — "Bar chart" ✅ Read title — "Sales by Region" ✅ Read description — Provides context ✅ Announce axis labels — Category names and values ✅ Describe data points — "Region: North America, Sales: $125,000" ✅ Identify interactive controls — "Filter button", "Export options" ✅ Announce focus changes — When tabbing between elements

Example: Screen Reader Announcements

NVDA/JAWS User navigating with keyboard:

User: [Tab into chart]
SR: "Chart, bar chart, Sales by Region"

User: [Tab to data area]
SR: "Chart region, group. January, 45 thousand"

User: [Tab to Filter button]
SR: "Button, Filter data, press Enter to activate"

User: [Press Enter]
SR: "Dialog, Filter data. Checkbox, Product A, checked.
     Checkbox, Product B, checked. Checkbox, Product C, unchecked"

Color Accessibility

Chart colors are designed with accessibility in mind:

✅ High Contrast — Text/data easily distinguishable from background ✅ Colorblind-Friendly — Avoid red-green combinations ✅ Multiple Cues — Don't rely only on color (include labels, patterns) ✅ WCAG AA Compliance — 4.5:1 contrast ratio minimum

Example Color Palette (Colorblind-Safe)

Primary:    #0066CC (Blue)
Secondary:  #FF6600 (Orange)
Tertiary:   #00CC99 (Teal)
Success:    #33CC33 (Green)

These colors are distinguishable for:

• Normal vision
• Red-green colorblindness (protanopia/deuteranopia)
• Blue-yellow colorblindness (tritanopia)

Alternative Text & Descriptions

Chart Title

<BarChart
  title="Sales Performance Q4 2024"
  // Appears as <h2> heading for screen readers
/>

Chart Description

<BarChart
  description="Total sales across four regions: 
              North America, Europe, Asia Pacific, and Latin America"
  // Provides context for screen reader users
/>

Axis Labels

<BarChart
  series={[
    { key: "sales", label: "Sales Revenue ($)" },  // Explicit unit label
    { key: "units", label: "Units Sold" },
  ]}
/>

Focus Management

Charts properly manage keyboard focus:

✅ Visible Focus Indicators — Blue outline shows current focus ✅ Logical Tab Order — Follows reading order (left-to-right, top-to-bottom) ✅ Focus Trap Prevention — Can tab through and out of charts ✅ Focus Restoration — Returns focus appropriately after actions

Data Table Alternative

For complex charts, provide data as a table:

// Chart for visual learners
<BarChart {...props} />
 
// Table for everyone else (also accessible)
| Region | Q1 | Q2 | Q3 | Q4 |
|--------|----|----|----|----|
| NA | $125K | $145K | $165K | $195K |
| EU | $98K | $115K | $128K | $152K |

Accessibility Best Practices

✅ DO:

• Always include descriptive titles and descriptions
• Use semantic headings for chart titles
• Provide high contrast between elements
• Test with actual screen reader software
• Enable data export (CSV) for alternative access
• Use clear, simple language in labels
• Test keyboard navigation

❌ DON'T:

• Rely solely on color to convey meaning
• Use images of charts instead of actual interactive charts
• Hide important information in tooltips only
• Create charts with complex nested data structures
• Use tiny fonts or poor contrast
• Forget to label axes and series

Testing for Accessibility

Automated Testing

# Browser DevTools (Chrome/Edge)
1. Open DevTools (F12)
2. Go to "Lighthouse" tab
3. Run accessibility audit
4. Check for issues

Manual Testing with Keyboard

1. Remove mouse from desk
2. Use only Tab, Enter, Arrow keys
3. Verify all interactive elements are reachable
4. Confirm focus is always visible
5. Try opening all menus and dialogs

Screen Reader Testing

1. Install NVDA (Windows, free) or JAWS (trial)
2. Enable screen reader
3. Navigate to chart
4. Listen for announcements
5. Verify all content is readable

Accessibility Features Checklist

• Chart has descriptive title
• Chart has context description
• All series have clear labels
• Axes are labeled with units
• Keyboard navigation works
• Focus indicators are visible
• Colors have sufficient contrast
• Screen reader announces chart
• Data export available (CSV)
• No information relies solely on color
• Touch targets are 44px+ for mobile
• Tested with real screen reader

Exporting Charts as Images

Overview

Export charts as PNG images with one click. Perfect for presentations, reports, emails, and social sharing. Images are high-quality, properly sized, and ready to use immediately.

How to Export as Image

1. Locate Export Button — Look for camera/image icon in chart header

   [Chart Title]    [Filter] [📥 CSV] [🖼️ Image] [Embed] [View]
   

2. Click Image Icon — Initiates PNG export

3. Wait for Download — Browser downloads PNG file (usually 2-3 seconds)

4. File Appears — chart-title.png in Downloads folder

Example: Image Export Button

<BarChart
  title="Export Me as Image"
  description="Click the Image icon in the top-right corner to export as PNG"
  data={[
    { product: "Product A", sales: 45000 },
    { product: "Product B", sales: 52000 },
    { product: "Product C", sales: 38500 },
  ]}
  xAxisKey="product"
  series={[
    { key: "sales", label: "Sales Revenue" },
  ]}
  downloadImage={true}
  height={300}
/>

What's Included in Export

The exported PNG includes:

✅ Chart visualization — Bars, lines, areas, exactly as displayed ✅ Title — Chart title at the top ✅ Legend — Color legend for series ✅ Labels — Axis labels and data labels ✅ Grid — Reference lines (if enabled) ✅ Current styling — Colors, fonts, theme ✅ Current data — Filtered data (if filters applied)

What's NOT Included

❌ Branding footer — Can be toggled off anyway ❌ Export buttons — UI elements don't appear in image ❌ Tooltips — Static image (tooltips are interactive only) ❌ Filters menu — Only visible data appears

Image Specifications

Use Cases

1. PowerPoint Presentations

1. Export chart as PNG from Charted Data
2. Open PowerPoint presentation
3. Click Insert → Images → Select PNG file
4. Slide now has professional chart
5. Present with confidence

2. Email Reports

1. Export multiple charts as PNG
2. Create email in Gmail/Outlook
3. Attach images or embed inline
4. Recipients see charts without clicking links
5. Professional appearance guaranteed

3. PDF Documents

1. Export charts from blog
2. Open Word/Google Docs
3. Insert images into document
4. Export document as PDF
5. Send to stakeholders

4. Social Media Posts

1. Export chart as PNG
2. Open Twitter/LinkedIn/Facebook
3. Upload image to post
4. Add caption with insights
5. Share findings with network

5. Documentation & Wikis

1. Export chart as PNG
2. Upload to wiki/documentation system
3. Reference in articles
4. Create permanent record
5. Offline access available

Customizing Export Size

Charts automatically export at their displayed size. To export larger:

// Chart displays at 350px height
<BarChart
  height={350}  // Displayed size
  downloadImage={true}
/>
 
// Exported PNG will be approximately:
// - Width: container width
// - Height: 350px
// - Resolution: 72 DPI

To export larger image:

1. Set larger height: height={700}
2. Chart displays larger on page
3. Exported PNG will be larger
4. Higher quality for printing

Image Export Best Practices

✅ DO:

• Disable branding if confidential: showBranding={false}
• Enable image export for all charts: downloadImage={true}
• Export before applying heavy filters (cleaner image)
• Name exports descriptively: "Q4-Sales-Analysis.png"
• Archive exports for documentation
• Test export quality before sharing

❌ DON'T:

• Export animated charts (static image only)
• Assume export matches color exactly (monitor settings vary)
• Export as image then re-upload to website (use interactive chart instead)
• Forget to resize if printing (may be pixelated)

Printing Charts

Charts can also be printed directly:

1. Open chart in browser
2. Press Ctrl+P (or Cmd+P on Mac)
3. Choose "Save as PDF" or print settings
4. Adjust paper size/margins as needed
5. Print or save to PDF

Troubleshooting Image Export

Exporting Data as CSV

Overview

Export raw data as CSV (Comma-Separated Values) files. Perfect for further analysis in Excel, Google Sheets, or data tools. Readers get the underlying data to explore, analyze, and use in their own work.

How to Export as CSV

1. Locate Export Button — Look for download icon in chart header

   [Chart Title]    [Filter] [📥 CSV] [Image] [Embed] [View]
   

2. Click CSV Icon — Initiates data download

3. Save File — Browser downloads CSV file

4. Open in Excel/Sheets — Double-click to open in spreadsheet

Example: CSV Export Button

<LineChart
  title="Export Data as CSV"
  description="Click the CSV icon to download raw data for your own analysis"
  data={[
    { month: "January", visits: 12500, conversions: 425, revenue: 15750 },
    { month: "February", visits: 14200, conversions: 498, revenue: 18540 },
    { month: "March", visits: 16800, conversions: 587, revenue: 21705 },
    { month: "April", visits: 19500, conversions: 682, revenue: 25185 },
    { month: "May", visits: 22100, conversions: 773, revenue: 28505 },
  ]}
  xAxisKey="month"
  series={[
    { key: "visits", label: "Website Visits" },
    { key: "conversions", label: "Conversions" },
    { key: "revenue", label: "Revenue ($)" },
  ]}
  download={true}
  height={300}
/>

CSV File Structure

Exported CSV follows standard format:

month,visits,conversions,revenue
January,12500,425,15750
February,14200,498,18540
March,16800,587,21705
April,19500,682,25185
May,22100,773,28505

Can be opened in:

• Excel
• Google Sheets
• CSV viewers
• Python (pandas)
• R
• Any spreadsheet application

What's Included in CSV Export

✅ All data points — Every row in the chart ✅ All series — Every column/metric ✅ Filtered data — If filters were applied, export reflects filters ✅ Headers — Column names for clarity ✅ Formatting — Numbers properly formatted (comma-separated, decimals preserved) ✅ Standard CSV — No special characters, universal format

What's NOT Included

❌ Chart styling — Only raw data ❌ Titles/descriptions — Data only, no metadata ❌ Filtered-out rows — Only visible data included ❌ Calculations — Formulas (only values)

Use Cases

1. Further Analysis in Excel

1. Download CSV from chart
2. Open in Excel
3. Create pivot tables
4. Generate additional charts
5. Perform statistical analysis

2. Academic Research

1. Find chart with relevant data
2. Export as CSV
3. Import into R or Python
4. Run statistical tests
5. Cite in research paper

3. Data Journalism

1. Download dataset as CSV
2. Import into data visualization tool
3. Create new perspectives
4. Publish findings
5. Link back to source

4. Business Intelligence

1. Export multiple CSV files
2. Load into SQL database
3. Combine datasets
4. Run queries
5. Build dashboards

5. Backup & Archival

1. Download CSV
2. Store in data archive
3. Create permanent record
4. Ensure data preservation
5. Enable future reuse

Filtering Before Export

Pro tip: Apply filters, then export only what you need

1. Open chart with 12 months of data
2. Apply filter: Select only Q4 (Oct, Nov, Dec)
3. Click Export CSV
4. Downloaded file contains only 3 rows (Q4 data)
5. Cleaner, focused dataset

Working with Exported CSV

In Excel

1. Open Excel
2. File → Open → Select CSV
3. Data import dialog appears
4. Click OK to import
5. Data ready to analyze

In Google Sheets

1. Open Google Drive
2. Click New → File Upload → Select CSV
3. Or File → Import → Upload
4. Data appears in spreadsheet
5. Cloud-based analysis

In Python/Pandas

import pandas as pd
 
# Read CSV
df = pd.read_csv('chart-data.csv')
 
# View data
print(df.head())
 
# Analyze
print(df.describe())
 
# Create visualizations
df.plot()

In R

# Read CSV
data <- read.csv("chart-data.csv")
 
# View structure
str(data)
 
# Statistical analysis
summary(data)
 
# Visualize
plot(data)

CSV Export Best Practices

✅ DO:

• Enable export for all charts: download={true}
• Use filtering to export only relevant data
• Give exported file descriptive name
• Document data source/date in filename
• Share CSV with reports for reproducibility
• Include units in column headers (e.g., "Revenue ($)")

❌ DON'T:

• Export just to re-visualize in another tool (use original chart)
• Assume CSV data is always current (export date may be old)
• Share CSV without context (where did data come from?)
• Forget to verify data integrity after import
• Store sensitive data in easily-shared CSV files

Automating CSV Workflows

Script to download and process CSV:

#!/bin/bash
 
# Download CSV from blog
curl -O https://yourdomain.com/charts/data.csv
 
# Open in default spreadsheet app
open chart-data.csv
 
# Or process with Python
python analyze_data.py chart-data.csv

CSV Specifications

Troubleshooting CSV Export

Embedding Charts

Overview

Embed charts anywhere on the web—other websites, blogs, forums, wikis, documentation. Charts remain fully interactive when embedded, with all filtering, tooltips, and export features working seamlessly.

How to Get Embed Code

1. Open Chart — Display the chart on your blog

2. Click Embed Button — Look for code icon in header

   [Chart Title]    [Filter] [CSV] [Image] [</> Embed] [View]
   

3. Copy Code — Dialog shows iframe code

4. Paste Anywhere — Any website supporting HTML

Example: Embed Code

<BarChart
  title="Click the Embed Icon to Get Code"
  description="Generate embed code to place this chart on any website"
  data={[
    { region: "North America", sales: 125000 },
    { region: "Europe", sales: 98000 },
    { region: "Asia Pacific", sales: 152000 },
  ]}
  xAxisKey="region"
  series={[
    { key: "sales", label: "Sales Revenue" },
  ]}
  showEmbed={true}
  height={300}
/>

Embed Code Structure

Generated code looks like:

<iframe 
  src="https://yourdomain.com/charts/chart-slug-name" 
  width="100%" 
  height="450px" 
  frameborder="0"
  style="border: 1px solid #e5e7eb; border-radius: 8px;">
</iframe>

Understanding the Code

Where to Embed

1. Blog Posts

WordPress, Ghost, Medium:

<!-- In WordPress: Use "Custom HTML" block -->
<iframe 
  src="https://yourdomain.com/charts/sales-q4" 
  width="100%" 
  height="450px" 
  frameborder="0"
></iframe>
 
<!-- Or use WordPress plugin -->
[embedded_chart url="https://yourdomain.com/charts/sales-q4"]

2. External Websites

Any website you own or can edit HTML:

<!-- In website HTML -->
<div class="chart-container">
  <h3>Our Performance Metrics</h3>
  <iframe 
    src="https://yourdomain.com/charts/performance" 
    width="100%" 
    height="500px"
    frameborder="0"
  ></iframe>
</div>

3. Documentation Sites

Gitbook, Confluence, ReadTheDocs:

# Performance Report
 
Check out our Q4 performance:
 
<iframe 
  src="https://yourdomain.com/charts/q4-performance" 
  width="100%" 
  height="450px" 
  frameborder="0"
></iframe>

4. Presentations

Google Slides, PowerPoint (limited support):

Google Slides:
1. Insert → Embed → Paste iframe URL
2. Chart appears in slide
3. Click to view full-screen

PowerPoint:
1. Insert → Web → Paste iframe URL
2. Chart displays (basic support)

5. Discussion Forums & Comments

Discourse, Reddit (if allowed):

Some forums support iframe embedding:

<iframe 
  src="https://yourdomain.com/charts/analysis" 
  width="100%" 
  height="400px"
  frameborder="0"
></iframe>

Customizing Embedded Charts

Adjust Height

<!-- Default height -->
<iframe height="450px" ...></iframe>
 
<!-- Shorter for mobile-friendly -->
<iframe height="300px" ...></iframe>
 
<!-- Taller for detailed viewing -->
<iframe height="600px" ...></iframe>

Responsive Container

<!-- Responsive iframe that maintains aspect ratio -->
<div style="position: relative; padding-bottom: 66.66%; height: 0; overflow: hidden;">
  <iframe 
    src="https://yourdomain.com/charts/sales" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
  ></iframe>
</div>

Add Custom Styling

<iframe 
  src="https://yourdomain.com/charts/data" 
  width="100%" 
  height="450px" 
  frameborder="0"
  style="border: 2px solid #3b82f6; 
         border-radius: 12px; 
         box-shadow: 0 4px 6px rgba(0,0,0,0.1);"
></iframe>

Embedded Chart Features

✅ All interactive features work:

• Live filtering (toggle series/rows)
• Hover tooltips (see exact values)
• Responsive (adapts to container)
• Download as CSV
• Download as PNG
• View full screen
• Dark/light mode matching (if supported)

❌ Not available when embedded:

• Opening/closing related charts (navigation disabled)
• Accessing chart metadata/author info
• Commenting on charts (separate system needed)

Embedding Best Practices

✅ DO:

• Include context: Add title/description before embed
• Test responsiveness: Verify looks good on mobile
• Set appropriate height: Not too tall, not too short
• Link to original: "See original interactive chart"
• Consider page load: Embedded iframes can affect performance
• Use HTTPS: Secure connection required

❌ DON'T:

• Embed without permission (copyright/attribution)
• Embed from untrusted sources (security risk)
• Embed too many charts on one page (slows loading)
• Assume embed will look identical everywhere (varies by site)
• Hide chart source (always cite original)

Troubleshooting Embedded Charts

Embedding Code Generator

Charts automatically generate unique embed codes:

Chart URL:     https://yourdomain.com/charts/q4-sales
Auto-ID:       q4-sales
Embed URL:     https://yourdomain.com/charts/embed/q4-sales
Slug Format:   [chart-name]

Each chart gets a unique slug for easy embedding.

Shareable Chart Links

Overview

Each chart on Charted Data gets its own unique, shareable URL. Share links directly with anyone—they see the interactive chart without needing to access the full blog.

How Chart Links Work

Every chart automatically gets:

✅ Unique URL — yourdomain.com/charts/chart-slug ✅ Direct access — Can be shared independently ✅ Full interactivity — Filtering, tooltips, exports all work ✅ SEO optimized — Google can index chart pages ✅ Social-friendly — Previews nicely on Twitter, LinkedIn ✅ Permanent — Links don't break over time

Chart Slug Generation

Slugs are automatically generated from chart title:

Accessing Chart Links

From Chart Header

[Chart]    [View →]
                  ↑
            "View Chart" link

Click the view icon to open full-page chart view.

Direct URL Construction

Blog post: yourdomain.com/blog/q4-report
Chart in post: yourdomain.com/charts/q4-sales-metrics
Share with others: same URL, opens full chart

Sharing Chart Links

1. Copy & Paste in Email

Subject: Check out our Q4 Sales Performance

Hi team,

Here's our latest performance analysis:
https://yourdomain.com/charts/q4-sales-performance

You can explore the data interactively, download as CSV, etc.

Thanks!

2. Social Media Posts

Twitter/X:
"Just published our Q4 sales data! 📊 Explore the interactive chart:
https://yourdomain.com/charts/q4-sales
#DataViz #Analytics"

LinkedIn:
"Our Q4 performance exceeded expectations! Check the breakdown:
https://yourdomain.com/charts/q4-sales-performance
#BusinessAnalytics #Growth"

3. Discussion Forums

Reddit/HackerNews:
"I analyzed market trends and created an interactive visualization:
https://yourdomain.com/charts/market-trends

Feel free to explore the data!"

4. Messaging Apps

Slack:
"Team, here's the updated sales dashboard:
https://yourdomain.com/charts/team-sales-dashboard"

WhatsApp:
"Check out this analysis: https://yourdomain.com/charts/analysis"

What Appears When Sharing

Social Media Preview (OpenGraph)

When shared on Twitter/LinkedIn/Facebook:

┌─────────────────────────┐
│ Q4 Sales Performance    │
│                         │
│ [Chart preview image]   │
│                         │
│ yourdomain.com          │
└─────────────────────────┘

Shows:

• Chart title
• Description
• Chart preview image
• Domain name
• Link to full chart

Link Preview (Rich Snippet)

In messaging apps/chat:

📊 Q4 Sales Performance

Interactive chart showing sales by region
and product line. Explore data, filter,
and export as CSV or PNG.

yourdomain.com/charts/q4-sales

Customizing Chart Links

URL Parameters (Advanced)

Charts support URL parameters for configuration:

# Standard
https://yourdomain.com/charts/q4-sales

# With filters pre-applied
https://yourdomain.com/charts/q4-sales?filter=product-a,product-b

# Full-screen view
https://yourdomain.com/charts/q4-sales?fullscreen=true

# Specific theme
https://yourdomain.com/charts/q4-sales?theme=dark

Chart Link Metadata

Each chart page includes:

✅ Title tag — <title>Q4 Sales Performance - Charted Data</title> ✅ Description — OpenGraph description for sharing ✅ Image — Chart preview for social media ✅ URL — Canonical URL for SEO ✅ Author — Your site/domain attribution ✅ Date — Publication/update date

Sharing Best Practices

✅ DO:

• Include chart link in data-focused posts
• Share on social media with insights
• Use in emails/reports with context
• Mention data source in share message
• Include chart title in link text
• Add brief description of what readers will find

❌ DON'T:

• Share raw chart links without context
• Assume recipients will explore (explain what it shows)
• Share sensitive/confidential data publicly
• Link to charts without permission
• Change chart data then share old links (links point to current data)

Link Permanence

Chart links are designed to be permanent:

✅ Chart URL stays the same even if:

• Chart data updates
• Blog post moves
• Theme changes
• Chart styling modified

✅ Link redirects work if chart is archived

❌ Link breaks only if:

• Chart is permanently deleted
• Domain changes (301 redirect recommended)
• Site moves to different platform

Analytics on Chart Shares

Track which charts are shared most:

Analytics insight:
- Chart link clicks: 2,450
- Most shared chart: "Q4 Sales"
- Typical share source: LinkedIn
- Most shared on: Mondays
- Most viewed from: Mobile

This helps understand which data stories resonate most.

Chart Gallery

Overview

The Chart Gallery (/charts) is a dedicated page showcasing all interactive charts on your Charted Data blog. It's a hub for data exploration, providing readers a single place to discover, filter, and analyze all visualizations.

Gallery Page Features

1. Chart Grid Display

Charts organized in responsive grid:

Desktop (3 columns)
┌──────────┬──────────┬──────────┐
│ Chart 1  │ Chart 2  │ Chart 3  │
├──────────┼──────────┼──────────┤
│ Chart 4  │ Chart 5  │ Chart 6  │
└──────────┴──────────┴──────────┘

Tablet (2 columns)
┌──────────┬──────────┐
│ Chart 1  │ Chart 2  │
├──────────┼──────────┤
│ Chart 3  │ Chart 4  │
└──────────┴──────────┘

Mobile (1 column)
┌──────────┐
│ Chart 1  │
├──────────┤
│ Chart 2  │
├──────────┤
│ Chart 3  │
└──────────┘

2. Chart Cards

Each chart displayed with:

┌─────────────────────────┐
│  [Chart Preview Image]  │
├─────────────────────────┤
│  Chart Title            │
│  Brief description      │
│  Category Badge         │
│  View → Share → Embed   │
└─────────────────────────┘

Elements:

• Preview image of chart
• Title and description
• Category/topic badge
• View/Share/Embed buttons
• Date published
• Related blog post link

3. Filtering & Sorting

Browse gallery with controls:

Search: [Search charts...] 🔍

Filter by Category:
[ All ] [ Sales ] [ Analytics ] [ Performance ] [ Trends ]

Sort by:
[ Most Recent ] [ Most Viewed ] [ Title A-Z ]

4. Search Functionality

Full-text search across all charts:

Search: "revenue" → Returns:
1. Q4 Revenue Performance
2. Annual Revenue by Region
3. Revenue Growth Trends
4. Product Line Revenue Analysis

Gallery Page URL

https://yourdomain.com/charts

What Appears in Gallery

Charts appear if: ✅ Published (not draft) ✅ Have a title and description ✅ Have chart type enabled for gallery display

Example Gallery Layout

┌──────────────────────────────────────────┐
│     📊 Charted Data Gallery              │
│  Browse all interactive data charts      │
├──────────────────────────────────────────┤
│                                          │
│ Search: [______________________]  🔍     │
│                                          │
│ Categories:                              │
│ [All] [Sales] [Analytics] [Trends]      │
│                                          │
│ Sort: [Most Recent ▼]                   │
│                                          │
├──────────────────────────────────────────┤
│                                          │
│ ┌────────────┐ ┌────────────┐           │
│ │ Q4 Sales   │ │ Website    │           │
│ │ [chart]    │ │ Traffic    │           │
│ │ Growth 📈  │ │ [chart]    │           │
│ │ View Share │ │ View Share │           │
│ └────────────┘ └────────────┘           │
│                                          │
│ ┌────────────┐ ┌────────────┐           │
│ │ Customer   │ │ Regional   │           │
│ │ Satisfaction│ │ Performance│           │
│ │ [chart]    │ │ [chart]    │           │
│ │ View Share │ │ View Share │           │
│ └────────────┘ └────────────┘           │
│                                          │
└──────────────────────────────────────────┘

Using the Gallery

For Blog Readers

User Journey:
1. Visit /charts page
2. Browse gallery of all visualizations
3. Search for specific topic ("sales", "performance")
4. Filter by category ("Analytics", "Trends")
5. Click on chart to view full-page version
6. Interact: filter, export, share

For Content Creators

Use Gallery to:
- Showcase data visualization capabilities
- Organize all charts in one place
- Drive traffic to data-rich content
- Demonstrate SEO optimization
- Provide data hub for readers
- Boost engagement metrics

Gallery Benefits

✅ Discovery — Readers find all your data content in one place ✅ Organization — Charts organized by category/date ✅ SEO — Gallery page ranks for data/analytics keywords ✅ Engagement — Readers spend more time exploring ✅ Professional — Shows commitment to data transparency ✅ Sharing — Easy way to direct people to your best charts

Gallery Customization

1. Gallery Description

Customize gallery page intro:

# In config/site.ts
gallery:
  title: "📊 Data Hub"
  description: "Explore all our interactive charts and visualizations"
  showRecent: true
  recentCount: 5

2. Category Organization

Organize charts by topic:

// Chart frontmatter
<BarChart
  category="Sales"
  tags={["Q4", "Revenue", "Regional"]}
  {...props}
/>

3. Custom Gallery Styling

Personalize appearance:

.gallery-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
 
.chart-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

Gallery SEO

The gallery page is automatically SEO optimized:

✅ Page title — "Data Charts & Visualizations - [Your Site]" ✅ Meta description — Describes gallery contents ✅ Structured data — JSON-LD for gallery schema ✅ Open Graph — Preview when shared on social media ✅ Sitemap — Included in XML sitemap ✅ Mobile optimized — Fully responsive design

Linking to Gallery

Promote gallery from other pages:

<!-- Homepage -->
<a href="/charts">View all our data visualizations →</a>
 
<!-- Blog post -->
<p>Check out more charts in our <a href="/charts">data gallery</a></p>
 
<!-- Navigation -->
<nav>
  <a href="/">Home</a>
  <a href="/blog">Blog</a>
  <a href="/charts">Gallery</a>
  <a href="/about">About</a>
</nav>

Embedding Gallery

Embed entire gallery in external sites:

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

Analytics on Gallery

Track gallery performance:

Gallery Analytics:
- Total visits: 5,420
- Bounce rate: 32%
- Avg time on page: 3:45
- Most viewed chart: Q4 Sales (1,240 views)
- Most clicked: View →
- Most shared: Export CSV
- Most searched: "revenue"

Interaction Best Practices

1. Enable All Features

For maximum reader value:

<BarChart
  filter={true}              // Enable live filtering
  download={true}            // CSV export
  downloadImage={true}       // PNG export
  showEmbed={true}          // Embed code generation
  hideTooltip={false}       // Hover tooltips
  {...otherProps}
/>

2. Label Everything Clearly

✅ Clear series names → readers understand what they're filtering ✅ Descriptive chart title → context at a glance ✅ Full description → why this data matters ✅ Axis labels with units → ($, %, numbers, etc.)

3. Balance Complexity

✅ 2-3 series — Easiest to read and filter ⚠️ 4-5 series — Can handle, but busy ❌ 6+ series — Too complex, consider breaking into multiple charts

4. Mobile-First Thinking

• Test on actual phones
• Ensure touch targets are large (44px+)
• Verify tooltips appear on tap
• Check legend wraps properly
• Confirm filters are accessible

5. Performance Considerations

✅ Don't embed 20+ charts on one page ✅ Lazy-load charts below the fold ✅ Limit data points (<500 rows) ✅ Use reasonable heights (300-400px) ✅ Archive old data to speed up loading

6. Accessibility First

✅ Always include title + description ✅ Ensure sufficient color contrast ✅ Test with keyboard navigation ✅ Verify screen reader support ✅ Provide CSV export for data access

7. Storytelling Focus

Every chart should:

1. Headline — What's the story? (title)
2. Context — Why matters? (description)
3. Insight — What did you find? (call out key data)
4. Action — What should readers do? (export, share, explore)

8. Consistent Styling

Maintain visual coherence:

✅ Use brand colors consistently ✅ Keep fonts readable and sized well ✅ Maintain same height for similar charts ✅ Use consistent labeling format ✅ Apply same theme across all charts

Troubleshooting

Filtering Issues

Tooltip Issues

Export Issues

Responsive Issues

Sharing/Embedding Issues

Summary: Feature Comparison

Happy exploring, sharing, and analyzing! 📊✨