More Charts and Data Visualization Libraries

While Recharts and ApexCharts are excellent choices, there are many other powerful visualization libraries worth considering. Each has unique strengths and use cases.

1. Chart.js

Chart.js is a simple yet flexible JavaScript charting library for designers and developers.

Overview

• Size: ~60KB
• Rendering: Canvas-based
• Framework: Framework-agnostic
• License: MIT (Free)
• Best For: Simple charts, canvas performance

Key Features

• Simple API: Easy to learn and use
• 8 Chart Types: Line, bar, radar, doughnut, pie, polar area, bubble, scatter
• Canvas-Based: Better performance with large datasets
• Responsive: Built-in responsive design
• Animations: Smooth, customizable animations
• Plugins: Extensible plugin system

Installation

npm install chart.js

Basic Usage

import { Chart } from 'chart.js/auto';

const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

React Integration

npm install react-chartjs-2 chart.js

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

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

function LineChart() {
  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Sales',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
        borderColor: 'rgb(75, 192, 192)',
        tension: 0.1
      }
    ]
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Monthly Sales'
      }
    }
  };

  return <Line data={data} options={options} />;
}

Advantages

Very simple and easy to learn

Canvas-based (good performance)

Lightweight and fast

Great documentation

Active community

Free and open source

Disadvantages

Limited chart types (8 basic types)

Less customization than competitors

Canvas-based (harder to style)

No built-in advanced features (zoom, pan)

Use Cases

• Simple business charts
• Performance-critical applications
• Projects with strict bundle size limits
• Quick prototypes and demos

Resources

• Official Website
• Documentation
• Samples
• GitHub

2. D3.js (Data-Driven Documents)

D3.js is a JavaScript library for manipulating documents based on data.

Overview

• Size: ~240KB (tree-shakeable)
• Rendering: SVG-based
• Framework: Framework-agnostic
• License: BSD (Free)
• Best For: Custom visualizations, maximum control

Key Features

• Maximum Flexibility: Create any visualization you can imagine
• Data Binding: Powerful data-to-DOM binding
• Transitions: Smooth, physics-based animations
• Selections: jQuery-like DOM manipulation
• Scales: Transform data to visual properties
• Layouts: Pre-built layouts (force, tree, chord, etc.)

Installation

npm install d3

Basic Usage

import * as d3 from 'd3';

const data = [30, 86, 168, 281, 303, 365];

d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter()
  .append("div")
  .style("width", d => d + "px")
  .text(d => d);

Bar Chart Example

import * as d3 from 'd3';

const data = [30, 86, 168, 281, 303, 365];

const width = 420;
const barHeight = 20;

const x = d3.scaleLinear()
  .domain([0, d3.max(data)])
  .range([0, width]);

const chart = d3.select(".chart")
  .attr("width", width)
  .attr("height", barHeight * data.length);

const bar = chart.selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("transform", (d, i) => `translate(0,${i * barHeight})`);

bar.append("rect")
  .attr("width", x)
  .attr("height", barHeight - 1);

bar.append("text")
  .attr("x", d => x(d) - 3)
  .attr("y", barHeight / 2)
  .attr("dy", ".35em")
  .text(d => d);

React Integration (with Visx)

Visx provides low-level React components for D3:

npm install @visx/visx

import { BarChart } from '@visx/shape';
import { Group } from '@visx/group';
import { scaleLinear, scaleBand } from '@visx/scale';

function VisxBarChart({ width, height, data }) {
  const xMax = width;
  const yMax = height;

  const xScale = scaleBand({
    range: [0, xMax],
    domain: data.map(d => d.label),
    padding: 0.4,
  });

  const yScale = scaleLinear({
    range: [yMax, 0],
    domain: [0, Math.max(...data.map(d => d.value))],
  });

  return (
    <svg width={width} height={height}>
      <Group>
        {data.map(d => {
          const barHeight = yMax - yScale(d.value);
          return (
            <rect
              key={d.label}
              x={xScale(d.label)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#8884d8"
            />
          );
        })}
      </Group>
    </svg>
  );
}

Advantages

Maximum flexibility and control

Create any visualization imaginable

Powerful data manipulation

Rich ecosystem of examples

Tree-shakeable (import only what you need)

Industry standard for custom viz

Disadvantages

Steep learning curve

Low-level API (more code needed)

No pre-built charts

Requires understanding of SVG

Time-consuming for simple charts

Use Cases

• Custom, unique visualizations
• Complex data relationships
• Interactive data exploration
• Academic and scientific visualizations
• When you need complete control

Resources

• Official Website
• Documentation
• Examples Gallery
• GitHub
• Visx (React + D3)

3. Nivo

Nivo provides a rich set of dataviz components built on top of D3 and React.

Overview

• Size: ~35KB (per chart component)
• Rendering: SVG and Canvas
• Framework: React only
• License: MIT (Free)
• Best For: Beautiful defaults, React apps

Key Features

• Beautiful Defaults: Professional-looking charts out of the box
• Rich Features: 20+ chart types
• Responsive: Built-in responsiveness
• Customizable: Extensive theming options
• Animations: Smooth transitions
• TypeScript: Full TypeScript support

Installation

npm install @nivo/core @nivo/line @nivo/bar

Basic Usage

import { ResponsiveLine } from '@nivo/line';

const data = [
  {
    id: 'sales',
    data: [
      { x: 'Jan', y: 7 },
      { x: 'Feb', y: 5 },
      { x: 'Mar', y: 11 },
      { x: 'Apr', y: 9 },
      { x: 'May', y: 12 },
    ]
  }
];

function LineChart() {
  return (
    <div style={{ height: 400 }}>
      <ResponsiveLine
        data={data}
        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 'auto', max: 'auto' }}
        axisBottom={{
          legend: 'Month',
          legendOffset: 36,
          legendPosition: 'middle'
        }}
        axisLeft={{
          legend: 'Value',
          legendOffset: -40,
          legendPosition: 'middle'
        }}
        pointSize={10}
        pointColor={{ theme: 'background' }}
        pointBorderWidth={2}
        pointBorderColor={{ from: 'serieColor' }}
        enableSlices="x"
      />
    </div>
  );
}

Advantages

Beautiful, professional defaults

Rich set of chart types

Great React integration

Excellent documentation

Interactive examples

TypeScript support

Disadvantages

React only

Larger bundle size (each chart separate)

Less popular than alternatives

Can be complex to customize

Use Cases

• React applications
• Design-focused projects
• Dashboards requiring beautiful charts
• Projects valuing aesthetics

Resources

• Official Website
• Storybook
• Components
• GitHub

4. Victory

Victory is a collection of composable React components for building interactive data visualizations.

Overview

• Size: ~55KB
• Rendering: SVG-based
• Framework: React and React Native
• License: MIT (Free)
• Best For: Animated charts, React/React Native

Key Features

• Composable: Build complex charts from simple components
• Animations: Rich animation support
• Cross-Platform: Works on web and React Native
• Modular: Import only what you need
• Theming: Comprehensive theming system

Installation

npm install victory

Basic Usage

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

function LineChart() {
  const data = [
    { x: 1, y: 2 },
    { x: 2, y: 3 },
    { x: 3, y: 5 },
    { x: 4, y: 4 },
    { x: 5, y: 7 }
  ];

  return (
    <VictoryChart height={400} width={400}>
      <VictoryLine
        data={data}
        style={{
          data: { stroke: "#c43a31" },
          parent: { border: "1px solid #ccc" }
        }}
      />
      <VictoryAxis />
      <VictoryAxis dependentAxis />
    </VictoryChart>
  );
}

Advantages

React and React Native support

Great animation support

Composable architecture

Good documentation

Active development

Disadvantages

React only

Verbose API

Smaller community

Bundle size can grow

Use Cases

• React applications
• React Native mobile apps
• Animated visualizations
• Cross-platform projects

Resources

• Official Website
• Documentation
• Gallery
• GitHub

5. Plotly.js

Plotly.js is a high-level, declarative charting library built on D3.js and stack.gl.

Overview

• Size: ~3MB (can be reduced with custom builds)
• Rendering: SVG, Canvas, and WebGL
• Framework: Framework-agnostic
• License: MIT (Free)
• Best For: Scientific charts, 3D plots, statistical analysis

Key Features

• 40+ Chart Types: Including 3D charts and scientific plots
• WebGL: Hardware-accelerated rendering
• Statistical: Built-in statistical charts
• 3D Visualizations: 3D scatter, surface, mesh plots
• Interactive: Zoom, pan, hover, click events
• Export: Export to PNG, SVG, PDF

Installation

npm install plotly.js-dist-min
# Or for React
npm install react-plotly.js plotly.js

Basic Usage (React)

import Plot from 'react-plotly.js';

function ScatterPlot() {
  return (
    <Plot
      data={[
        {
          x: [1, 2, 3, 4],
          y: [10, 15, 13, 17],
          type: 'scatter',
          mode: 'lines+markers',
          marker: { color: 'red' },
        },
        {
          x: [1, 2, 3, 4],
          y: [12, 9, 15, 12],
          type: 'bar'
        },
      ]}
      layout={{ width: 600, height: 400, title: 'A Plotly Chart' }}
    />
  );
}

Advantages

Extensive chart types (40+)

3D visualization support

Scientific and statistical charts

WebGL for performance

Export capabilities

Disadvantages

Very large bundle size (3MB)

Complex API

Overkill for simple charts

Slower initial load

Use Cases

• Scientific visualizations
• 3D charts and plots
• Statistical analysis
• Research and academia
• Complex data exploration

Resources

• Official Website
• Documentation
• React Plotly
• GitHub

6. ECharts (Apache ECharts)

ECharts is a powerful charting and visualization library offering an easy way to add interactive charts to web applications.

Overview

• Size: ~400KB (tree-shakeable)
• Rendering: Canvas and SVG
• Framework: Framework-agnostic
• License: Apache 2.0 (Free)
• Best For: Complex visualizations, large datasets

Key Features

• Rich Chart Types: 20+ chart types
• Large Data: Handles millions of data points
• Canvas Rendering: Better performance
• Dataset: Built-in data management
• Responsive: Auto-resize and responsive
• Visual Encoding: Map data to visual channels

Installation

npm install echarts

Basic Usage

import * as echarts from 'echarts';

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);

const option = {
  title: {
    text: 'ECharts Example'
  },
  tooltip: {},
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      name: 'Sales',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 4]
    }
  ]
};

myChart.setOption(option);

React Integration

npm install echarts-for-react

import ReactECharts from 'echarts-for-react';

function EChartsExample() {
  const option = {
    title: { text: 'Sales Data' },
    tooltip: {},
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {},
    series: [{
      name: 'Sales',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20, 4]
    }]
  };

  return <ReactECharts option={option} />;
}

Advantages

Handles large datasets well

Rich feature set

Great performance (Canvas)

Beautiful default designs

Good documentation

Free and open source

Disadvantages

Large bundle size

Complex API

Learning curve

Primarily Chinese community

Use Cases

• Large-scale dashboards
• Big data visualization
• Complex charts
• Enterprise applications

Resources

• Official Website
• Documentation
• Examples
• GitHub

Comparison Table

Choosing Guide

By Framework

React:

• Recharts (easiest)
• Nivo (beautiful)
• Victory (animations)
• ApexCharts (feature-rich)

Vue/Angular:

• ApexCharts
• Chart.js
• ECharts

Vanilla JS:

• Chart.js (simplest)
• ApexCharts (modern)
• D3.js (custom)

By Use Case

Simple Business Charts:

• Chart.js
• Recharts

Dashboards:

• ApexCharts
• ECharts
• Nivo

Scientific/3D:

• Plotly.js
• D3.js

Custom Visualizations:

• D3.js
• Visx (React + D3)

Large Datasets:

• ECharts
• Chart.js
• Plotly.js (WebGL)

Mobile (React Native):

• Victory
• react-native-svg-charts

By Priority

Smallest Bundle:

1. Nivo (~35KB per component)
2. Chart.js (~60KB)
3. Victory (~55KB)

Easiest:

1. Chart.js
2. Recharts
3. ApexCharts

Most Flexible:

1. D3.js
2. Visx
3. ECharts

Best Performance:

1. Chart.js (Canvas)
2. ECharts (Canvas)
3. Plotly.js (WebGL)

Best Free Option:

1. ApexCharts (feature-rich)
2. Recharts (React)
3. Chart.js (simple)

Resources

Learning Resources

• Observable - Interactive notebooks for D3
• Data Viz Project - Chart type reference
• Chart Chooser - Help choosing chart types

Tools

• RAWGraphs - Visual data exploration
• Flourish - No-code visualizations
• Datawrapper - Quick charts and maps

Communities

• r/dataisbeautiful
• Data Visualization Society
• Observable Community

The charting library landscape is rich and diverse. While Recharts and ApexCharts are excellent choices for most projects, these alternatives offer unique benefits for specific use cases. Choose based on your framework, chart complexity, performance needs, and team expertise.