data-visualizer

    <select
      value={region}
      onChange={(e) => setRegion(e.target.value as Region)}
      className="px-4 py-2 border rounded"
    >
      <option value="all">All Regions</option>
      <option value="us">United States</option>
      <option value="eu">Europe</option>
      <option value="asia">Asia</option>
    </select>
  </div>

  {/* Chart */}
  {loading ? (
    <div>Loading...</div>
  ) : (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart data={data}>
        <XAxis dataKey="date" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="sales" fill="#8884d8" />
      </BarChart>
    </ResponsiveContainer>
  )}
</div>

) }

// Custom hook for data fetching function useSalesData({ period, region }: { period: Period, region: Region }) { const [data, setData] = useState([]) const [loading, setLoading] = useState(true)

useEffect(() => { setLoading(true) fetch(/api/sales?period=${period}&region=${region}) .then(res => res.json()) .then(data => { setData(data) setLoading(false) }) }, [period, region])

return { data, loading } }

Chart Types Guide Line Chart

Best for: Trends over time, continuous data

Use when:

Stock prices, temperature, website traffic Showing change over time Multiple data series comparison Bar Chart

Best for: Comparing categories

Use when:

Sales by product, users by country Discrete categories Ranking/comparison Pie/Donut Chart

Best for: Part-to-whole relationships

Use when:

Market share, budget allocation Proportions (max 5-7 slices) Simple percentages

⚠️ Avoid when:

Too many categories (> 7) Precise comparison needed (use bar chart) Area Chart

Best for: Volume over time

Use when:

Cumulative totals Filled regions show magnitude Stacked categories Scatter Plot

Best for: Correlation between variables

Use when:

Finding correlations Outlier detection Distribution analysis Heatmap

Best for: Intensity across two dimensions

// Using D3 const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([0, d3.max(data)])

svg .selectAll('rect') .data(data) .join('rect') .attr('fill', d => colorScale(d.value))

Use when:

Time-based patterns (day/hour) Geographic intensity Matrix data Responsive Design Pattern: Mobile-Friendly Charts 'use client'

import { useEffect, useState } from 'react' import { LineChart, Line, ResponsiveContainer } from 'recharts'

export default function ResponsiveChart({ data }) { const [isMobile, setIsMobile] = useState(false)

useEffect(() => { const checkMobile = () => setIsMobile(window.innerWidth < 768) checkMobile() window.addEventListener('resize', checkMobile) return () => window.removeEventListener('resize', checkMobile) }, [])

return ( ) }

Color Schemes Accessible Colors // colors.ts export const chartColors = { // WCAG AA compliant primary: '#0066CC', // Blue success: '#007A3D', // Green warning: '#C87000', // Orange danger: '#D32F2F', // Red

// Multi-series (colorblind-safe) series: [ '#0066CC', // Blue '#CC6600', // Orange '#7A00CC', // Purple '#00CC66', // Green '#CC0066' // Magenta ] }

Colorblind-Safe Palettes:

// For up to 5 data series const colorblindSafe = [ '#000000', // Black '#E69F00', // Orange '#56B4E9', // Sky Blue '#009E73', // Green '#F0E442' // Yellow ]

Data Formatting Number Formatting // utils/formatters.ts

export function formatCurrency(value: number): string { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0, maximumFractionDigits: 0, }).format(value) }

export function formatPercent(value: number): string { return new Intl.NumberFormat('en-US', { style: 'percent', minimumFractionDigits: 1, maximumFractionDigits: 1, }).format(value / 100) }

export function formatNumber(value: number): string { if (value >= 1000000) { return ${(value / 1000000).toFixed(1)}M } if (value >= 1000) { return ${(value / 1000).toFixed(1)}K } return value.toFixed(0) }

// Usage in chart

Export Functionality Export Chart as PNG 'use client'

import html2canvas from 'html2canvas'

export function ExportableChart({ children }) { const chartRef = useRef(null)

const exportToPNG = async () => { if (!chartRef.current) return

const canvas = await html2canvas(chartRef.current)
const link = document.createElement('a')
link.download = 'chart.png'
link.href = canvas.toDataURL()
link.click()

}

return (

Export Data as CSV export function exportToCSV(data: any[], filename: string) { const headers = Object.keys(data[0]) const csv = [ headers.join(','), ...data.map(row => headers.map(h => row[h]).join(',')) ].join('\n')

const blob = new Blob([csv], { type: 'text/csv' }) const link = document.createElement('a') link.download = ${filename}.csv link.href = URL.createObjectURL(blob) link.click() }

// Usage exportToCSV(data, 'sales-data')}> Export to CSV

Performance Optimization Lazy Loading Charts // Lazy load chart libraries (reduce initial bundle) import dynamic from 'next/dynamic'

const LineChart = dynamic( () => import('recharts').then(mod => mod.LineChart), { ssr: false } )

export default function ChartPage() { return }

Virtualization for Large Datasets import { useVirtualizer } from '@tanstack/react-virtual'

export function LargeDataTable({ data }: { data: any[] }) { const parentRef = useRef(null)

const virtualizer = useVirtualizer({ count: data.length, getScrollElement: () => parentRef.current, estimateSize: () => 50, })

return (

Animation Best Practices Smooth Transitions

Disable Animation for Real-Time // For real-time dashboards, disable animation

Common Patterns Pattern: Drill-Down Chart 'use client'

import { useState } from 'react' import { BarChart, Bar, XAxis, YAxis } from 'recharts'

export default function DrillDownChart() { const [level, setLevel] = useState<'year' | 'month' | 'day'>('year') const [selectedYear, setSelectedYear] = useState(null)

const handleBarClick = (data: any) => { if (level === 'year') { setSelectedYear(data.year) setLevel('month') } else if (level === 'month') { setLevel('day') } }

const goBack = () => { if (level === 'day') setLevel('month') else if (level === 'month') { setLevel('year') setSelectedYear(null) } }

return (

  <BarChart data={getData(level, selectedYear)} width={600} height={300}>
    <Bar dataKey="value" fill="#8884d8" onClick={handleBarClick} />
    <XAxis dataKey="name" />
    <YAxis />
  </BarChart>
</div>