charts.md

Data Visualization 📊

Libraries for creating charts and data visualizations in React applications.

Recharts

Description: Redefined chart library built on React and D3 with declarative components and responsive design.

Key Features:

• React-native components
• Declarative API
• Responsive design
• Built on D3
• TypeScript support
• Extensive chart types
• Customizable styling

Installation:

npm install recharts

Basic Usage:

import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts';

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 200 },
  { name: 'Apr', value: 278 },
  { name: 'May', value: 189 },
];

function SimpleChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

// Bar Chart
import { BarChart, Bar } from 'recharts';

function BarChartExample() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <BarChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Bar dataKey="value" fill="#8884d8" />
      </BarChart>
    </ResponsiveContainer>
  );
}

// Pie Chart
import { PieChart, Pie, Cell } from 'recharts';

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];

function PieChartExample() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <PieChart>
        <Pie
          data={data}
          cx="50%"
          cy="50%"
          labelLine={false}
          label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
          outerRadius={80}
          fill="#8884d8"
          dataKey="value"
        >
          {data.map((entry, index) => (
            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
          ))}
        </Pie>
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  );
}

Use Cases: Business dashboards, analytics, data visualization, responsive charts

Chart.js

Description: Simple yet flexible JavaScript charting library with canvas rendering and extensive customization options.

Key Features:

• Canvas-based rendering
• Responsive design
• Animation support
• Plugin system
• TypeScript support
• Wide browser support
• Extensive chart types

Installation:

npm install chart.js react-chartjs-2

Basic Usage:

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';
import { Line } from 'react-chartjs-2';

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

const data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [400, 300, 200, 278, 189],
      borderColor: 'rgb(255, 99, 132)',
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
    },
  ],
};

const options = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Line Chart',
    },
  },
};

function ChartJSExample() {
  return <Line options={options} data={data} />;
}

// Bar Chart
import { Bar } from 'react-chartjs-2';

function BarChartExample() {
  return <Bar options={options} data={data} />;
}

// Doughnut Chart
import { Doughnut } from 'react-chartjs-2';

const doughnutData = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [
    {
      data: [300, 50, 100],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
      hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
    },
  ],
};

function DoughnutChartExample() {
  return <Doughnut data={doughnutData} />;
}

Use Cases: Complex visualizations, custom styling, performance-critical charts

Victory

Description: Modular charting components for React with built-in accessibility and animation features.

Key Features:

• Modular components
• Built-in accessibility
• Animation support
• Theme system
• Event handling
• Responsive design
• TypeScript support

Installation:

npm install victory

Basic Usage:

import {
  VictoryChart,
  VictoryLine,
  VictoryAxis,
  VictoryTheme,
  VictoryContainer
} from 'victory';

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 },
  { x: 4, y: 4 },
  { x: 5, y: 6 },
];

function VictoryChartExample() {
  return (
    <VictoryChart
      theme={VictoryTheme.material}
      containerComponent={<VictoryContainer responsive />}
    >
      <VictoryAxis />
      <VictoryAxis dependentAxis />
      <VictoryLine
        data={data}
        style={{
          data: { stroke: "#c43a31" },
          parent: { border: "1px solid #ccc" }
        }}
      />
    </VictoryChart>
  );
}

// Bar Chart
import { VictoryBar, VictoryChart, VictoryAxis } from 'victory';

function VictoryBarExample() {
  return (
    <VictoryChart>
      <VictoryAxis />
      <VictoryAxis dependentAxis />
      <VictoryBar
        data={[
          { x: 1, y: 2 },
          { x: 2, y: 3 },
          { x: 3, y: 5 },
          { x: 4, y: 4 },
          { x: 5, y: 6 },
        ]}
      />
    </VictoryChart>
  );
}

// Pie Chart
import { VictoryPie } from 'victory';

function VictoryPieExample() {
  return (
    <VictoryPie
      data={[
        { x: "Cats", y: 35 },
        { x: "Dogs", y: 40 },
        { x: "Birds", y: 25 }
      ]}
      colorScale={["tomato", "orange", "gold"]}
    />
  );
}

Use Cases: Accessible charts, educational applications, interactive visualizations

Comparison Table

Library	Bundle Size	Performance	Customization	Accessibility
Recharts	Medium	Good	High	Good
Chart.js	Medium	High	Very High	Good
Victory	Large	Medium	High	Excellent

When to Use Each

• Recharts: When you need React-native components with good performance and customization
• Chart.js: When you need maximum performance and extensive customization options
• Victory: When accessibility is a priority and you need modular components

Best Practices

1. Responsive Design: Always use responsive containers for charts
2. Performance: Consider data size and rendering performance
3. Accessibility: Ensure charts are accessible to screen readers
4. Loading States: Show loading indicators while data is being fetched
5. Error Handling: Handle cases where data might be missing or invalid
6. Color Schemes: Use accessible color combinations
7. Interactions: Provide meaningful interactions and tooltips
8. Data Formatting: Format data appropriately for display

Advanced Patterns

Dynamic Data Loading

import { useState, useEffect } from 'react';

function DynamicChart() {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await fetch('/api/chart-data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching chart data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <div>Loading chart...</div>;

  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

Custom Tooltips

import { Tooltip } from 'recharts';

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {
    return (
      <div className="custom-tooltip">
        <p className="label">{`${label} : ${payload[0].value}`}</p>
        <p className="intro">{`Custom info: ${payload[0].payload.customInfo}`}</p>
      </div>
    );
  }
  return null;
};

// Usage
<LineChart data={data}>
  <Tooltip content={<CustomTooltip />} />
  {/* other components */}
</LineChart>