DEV Community: Aaron King

Building Interactive Graph Visualizations with React Sigma.js

Aaron King — Mon, 19 Jan 2026 18:10:03 +0000

React Sigma.js is a React wrapper for Sigma.js, a JavaScript library for graph visualization. It provides a React-friendly API for creating interactive network graphs, node-link diagrams, and complex graph visualizations. This guide walks through setting up and creating graph visualizations using React Sigma.js with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useRef)
Familiarity with JavaScript/TypeScript
Understanding of graph data structures

Installation

Install React Sigma.js and Sigma.js:

npm install react-sigma sigma

Or with yarn:

yarn add react-sigma sigma

Or with pnpm:

pnpm add react-sigma sigma

After installation, your package.json should include:

{
  "dependencies": {
    "react-sigma": "^2.0.0",
    "sigma": "^2.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Sigma.js requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple graph. Create a new file src/GraphExample.jsx:

// src/GraphExample.jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function GraphExample() {
  const graph = {
    nodes: [
      { id: '1', label: 'Node 1' },
      { id: '2', label: 'Node 2' },
      { id: '3', label: 'Node 3' },
      { id: '4', label: 'Node 4' }
    ],
    edges: [
      { id: 'e1', source: '1', target: '2' },
      { id: 'e2', source: '2', target: '3' },
      { id: 'e3', source: '3', target: '4' },
      { id: 'e4', source: '4', target: '1' }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Graph Example</h2>
      <div style={{ height: '500px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma graph={graph} settings={{ drawEdges: true, drawNodes: true }}>
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default GraphExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import GraphExample from './GraphExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <GraphExample />
    </div>
  );
}

export default App;

This creates a basic graph with nodes and edges.

Understanding the Basics

React Sigma.js provides graph visualization components:

Sigma component: Main graph container
Graph data: Object with nodes and edges arrays
Nodes: Graph nodes with id and label
Edges: Graph edges connecting nodes
Plugins: Additional features (RandomizeNodePositions, RelativeSize, etc.)

Key concepts:

Graph structure: Object with nodes and edges arrays
Node properties: id, label, x, y, size, color, etc.
Edge properties: id, source, target, size, color, etc.
Settings: Configure graph appearance and behavior
Plugins: Extend functionality with plugins

Here's an example with custom styling:

// src/AdvancedGraphExample.jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function AdvancedGraphExample() {
  const graph = {
    nodes: [
      { id: '1', label: 'Node 1', color: '#ff6b6b', size: 20 },
      { id: '2', label: 'Node 2', color: '#4ecdc4', size: 15 },
      { id: '3', label: 'Node 3', color: '#45b7d1', size: 25 },
      { id: '4', label: 'Node 4', color: '#f9ca24', size: 18 },
      { id: '5', label: 'Node 5', color: '#6c5ce7', size: 22 }
    ],
    edges: [
      { id: 'e1', source: '1', target: '2', color: '#95a5a6' },
      { id: 'e2', source: '2', target: '3', color: '#95a5a6' },
      { id: 'e3', source: '3', target: '4', color: '#95a5a6' },
      { id: 'e4', source: '4', target: '5', color: '#95a5a6' },
      { id: 'e5', source: '5', target: '1', color: '#95a5a6' }
    ]
  };

  const settings = {
    drawEdges: true,
    drawNodes: true,
    defaultNodeColor: '#ec5148',
    defaultEdgeColor: '#ccc'
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Advanced Graph Example</h2>
      <div style={{ height: '600px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma graph={graph} settings={settings}>
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default AdvancedGraphExample;

Practical Example / Building Something Real

Let's build a network visualization:

// src/NetworkGraph.jsx
import React, { useState } from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function NetworkGraph() {
  const [selectedNode, setSelectedNode] = useState(null);

  const graph = {
    nodes: [
      { id: '1', label: 'Server 1', color: '#e74c3c', size: 30 },
      { id: '2', label: 'Server 2', color: '#3498db', size: 25 },
      { id: '3', label: 'Server 3', color: '#2ecc71', size: 28 },
      { id: '4', label: 'Database', color: '#f39c12', size: 35 },
      { id: '5', label: 'Cache', color: '#9b59b6', size: 20 },
      { id: '6', label: 'Load Balancer', color: '#1abc9c', size: 32 }
    ],
    edges: [
      { id: 'e1', source: '6', target: '1', color: '#34495e' },
      { id: 'e2', source: '6', target: '2', color: '#34495e' },
      { id: 'e3', source: '6', target: '3', color: '#34495e' },
      { id: 'e4', source: '1', target: '4', color: '#34495e' },
      { id: 'e5', source: '2', target: '4', color: '#34495e' },
      { id: 'e6', source: '3', target: '4', color: '#34495e' },
      { id: 'e7', source: '1', target: '5', color: '#34495e' },
      { id: 'e8', source: '2', target: '5', color: '#34495e' },
      { id: 'e9', source: '3', target: '5', color: '#34495e' }
    ]
  };

  const settings = {
    drawEdges: true,
    drawNodes: true,
    defaultNodeColor: '#ec5148',
    defaultEdgeColor: '#ccc',
    minNodeSize: 10,
    maxNodeSize: 40
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Network Infrastructure Graph</h1>
      {selectedNode && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {selectedNode.label}
        </div>
      )}
      <div style={{ height: '700px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma
          graph={graph}
          settings={settings}
          onOverNode={(e) => setSelectedNode(e.data.node)}
        >
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default NetworkGraph;

Now create a social network graph:

// src/SocialNetworkGraph.jsx
import React from 'react';
import { Sigma, RandomizeNodePositions, RelativeSize } from 'react-sigma';

function SocialNetworkGraph() {
  const graph = {
    nodes: [
      { id: '1', label: 'Alice', color: '#e74c3c', size: 25 },
      { id: '2', label: 'Bob', color: '#3498db', size: 22 },
      { id: '3', label: 'Charlie', color: '#2ecc71', size: 20 },
      { id: '4', label: 'Diana', color: '#f39c12', size: 24 },
      { id: '5', label: 'Eve', color: '#9b59b6', size: 23 },
      { id: '6', label: 'Frank', color: '#1abc9c', size: 21 }
    ],
    edges: [
      { id: 'e1', source: '1', target: '2', color: '#34495e' },
      { id: 'e2', source: '1', target: '3', color: '#34495e' },
      { id: 'e3', source: '2', target: '4', color: '#34495e' },
      { id: 'e4', source: '3', target: '5', color: '#34495e' },
      { id: 'e5', source: '4', target: '6', color: '#34495e' },
      { id: 'e6', source: '5', target: '6', color: '#34495e' },
      { id: 'e7', source: '1', target: '4', color: '#34495e' }
    ]
  };

  const settings = {
    drawEdges: true,
    drawNodes: true,
    defaultNodeColor: '#ec5148',
    defaultEdgeColor: '#ccc'
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1000px', margin: '0 auto' }}>
      <h2>Social Network Graph</h2>
      <div style={{ height: '600px', border: '1px solid #ddd', borderRadius: '4px' }}>
        <Sigma graph={graph} settings={settings}>
          <RandomizeNodePositions />
          <RelativeSize initialSize={15} />
        </Sigma>
      </div>
    </div>
  );
}

export default SocialNetworkGraph;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import NetworkGraph from './NetworkGraph';
import SocialNetworkGraph from './SocialNetworkGraph';
import './App.css';

function App() {
  return (
    <div className="App">
      <NetworkGraph />
      <SocialNetworkGraph />
    </div>
  );
}

export default App;

This example demonstrates:

Network visualization
Social network graphs
Custom node styling
Interactive features
Event handling
Custom colors and sizes

Common Issues / Troubleshooting

Graph not displaying: Make sure you've installed both react-sigma and sigma. The graph requires Sigma.js core library.
Nodes not showing: Check that the graph data structure is correct with nodes and edges arrays. Each node needs an id property.
Edges not connecting: Ensure edge source and target properties match node id values. Check for typos in node IDs.
Styling issues: Customize node and edge colors through the graph data or settings. Use color property for nodes and edges.
Layout issues: Use RandomizeNodePositions plugin to randomize node positions. For custom layouts, set node x and y properties.
Performance: For large graphs, consider using graph layout algorithms or data sampling. Sigma.js handles large graphs well, but optimization may be needed for very large datasets.

Next Steps

Now that you have an understanding of React Sigma.js:

Explore all available plugins
Learn about advanced graph layouts
Implement custom node renderers
Add animations and transitions
Create interactive graph editors
Learn about other graph libraries
Check the official repository: https://github.com/dunnock/react-sigma

Summary

You've successfully set up React Sigma.js in your React application and created network graphs, social network visualizations, and interactive graph displays. React Sigma.js provides a powerful solution for creating graph visualizations with extensive customization options.

SEO Keywords

react-sigmajs
React Sigma.js
react-sigmajs tutorial
React graph visualization
react-sigmajs installation
React network graph
react-sigmajs example
React graph library
react-sigmajs setup
React node-link diagram
react-sigmajs customization
React graph component
react-sigmajs plugins
React graph visualization
react-sigmajs getting started

Getting Started with React Highcharts: Creating Interactive Charts in React

Aaron King — Mon, 19 Jan 2026 18:09:09 +0000

React Highcharts is a React wrapper for Highcharts, a powerful charting library. It provides a React-friendly API for creating interactive, responsive charts with extensive customization options. This guide walks through setting up and creating charts using React Highcharts with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React Highcharts and Highcharts:

npm install react-highcharts highcharts

Or with yarn:

yarn add react-highcharts highcharts

Or with pnpm:

pnpm add react-highcharts highcharts

After installation, your package.json should include:

{
  "dependencies": {
    "react-highcharts": "^16.0.0",
    "highcharts": "^11.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Highcharts requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import ReactHighcharts from 'react-highcharts';

function ChartExample() {
  const config = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Monthly Sales'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      title: {
        text: 'Sales'
      }
    },
    series: [{
      name: 'Sales',
      data: [35, 28, 34, 32, 40, 32]
    }]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Highcharts Example</h2>
      <ReactHighcharts config={config} />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart with monthly sales data.

Understanding the Basics

React Highcharts provides a React component:

ReactHighcharts component: Main chart component
config prop: Chart configuration object
Chart types: Line, Column, Bar, Pie, Area, etc.
Interactive features: Tooltips, zoom, drilldown, etc.
Responsive: Automatic responsive behavior

Key concepts:

Config object: Configure chart through config prop
Chart structure: chart, title, xAxis, yAxis, series
Series array: Define data series
Categories: X-axis labels
Data: Array of values for each series

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import ReactHighcharts from 'react-highcharts';

function MultipleChartsExample() {
  const lineConfig = {
    chart: { type: 'line' },
    title: { text: 'Line Chart' },
    xAxis: { categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
    yAxis: { title: { text: 'Value' } },
    series: [{ name: 'Sales', data: [120, 132, 101, 134, 90] }]
  };

  const barConfig = {
    chart: { type: 'column' },
    title: { text: 'Bar Chart' },
    xAxis: { categories: ['Product A', 'Product B', 'Product C'] },
    yAxis: { title: { text: 'Value' } },
    series: [{ name: 'Revenue', data: [120, 200, 150] }]
  };

  const pieConfig = {
    chart: { type: 'pie' },
    title: { text: 'Pie Chart' },
    series: [{
      name: 'Distribution',
      data: [
        ['Chrome', 37],
        ['Safari', 19],
        ['Firefox', 18]
      ]
    }]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <ReactHighcharts config={lineConfig} />
        <ReactHighcharts config={barConfig} />
        <ReactHighcharts config={pieConfig} />
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React from 'react';
import ReactHighcharts from 'react-highcharts';

function DashboardCharts() {
  const salesConfig = {
    chart: {
      type: 'line'
    },
    title: {
      text: 'Sales vs Target'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      title: {
        text: 'Sales'
      }
    },
    series: [
      {
        name: 'Sales',
        data: [35, 28, 34, 32, 40, 32]
      },
      {
        name: 'Target',
        data: [40, 35, 38, 36, 42, 38]
      }
    ],
    tooltip: {
      shared: true
    }
  };

  const revenueConfig = {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Quarterly Revenue'
    },
    xAxis: {
      categories: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
      title: {
        text: 'Revenue'
      }
    },
    series: [{
      name: 'Revenue',
      data: [12000, 15000, 18000, 20000]
    }]
  };

  const categoryConfig = {
    chart: {
      type: 'pie'
    },
    title: {
      text: 'Product Distribution'
    },
    series: [{
      name: 'Products',
      data: [
        ['Product A', 35],
        ['Product B', 28],
        ['Product C', 34],
        ['Product D', 32]
      ]
    }]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <ReactHighcharts config={salesConfig} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <ReactHighcharts config={revenueConfig} />
          <ReactHighcharts config={categoryConfig} />
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create an interactive chart with events:

// src/InteractiveChart.jsx
import React, { useState } from 'react';
import ReactHighcharts from 'react-highcharts';

function InteractiveChart() {
  const [selectedPoint, setSelectedPoint] = useState(null);

  const config = {
    chart: {
      type: 'line',
      events: {
        click: function(e) {
          console.log('Chart clicked', e);
        }
      }
    },
    title: {
      text: 'Interactive Sales Chart'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      title: {
        text: 'Sales'
      }
    },
    series: [{
      name: 'Sales',
      data: [35, 28, 34, 32, 40, 32],
      point: {
        events: {
          click: function() {
            setSelectedPoint({
              category: this.category,
              value: this.y
            });
          }
        }
      }
    }],
    tooltip: {
      enabled: true
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Chart</h2>
      {selectedPoint && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {selectedPoint.category} - {selectedPoint.value}
        </div>
      )}
      <ReactHighcharts config={config} />
    </div>
  );
}

export default InteractiveChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import InteractiveChart from './InteractiveChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <InteractiveChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Multiple series
Interactive features
Event handling
Custom styling

Common Issues / Troubleshooting

Chart not displaying: Make sure you've installed both react-highcharts and highcharts. The chart requires Highcharts core library.
Config not working: Check that the config object follows Highcharts configuration format. Refer to Highcharts documentation for correct structure.
Data not showing: Ensure the series array contains data arrays. Check that categories match the data length.
Styling issues: Customize colors and styles in the config object. Use colors array for custom color schemes.
Responsive not working: Charts are responsive by default. Use chart.width and chart.height for fixed dimensions.
Events not working: Use chart.events or series.point.events in the config to attach event handlers. Check Highcharts event documentation for available events.

Next Steps

Now that you have a basic understanding of React Highcharts:

Explore all available chart types
Learn about advanced configurations
Implement custom tooltips
Add animations and transitions
Create real-time updating charts
Learn about other chart libraries
Check the official repository: https://github.com/kirjs/react-highcharts

Summary

You've successfully set up React Highcharts in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. React Highcharts provides a powerful solution for creating interactive data visualizations with extensive customization options.

SEO Keywords

react-highcharts
React Highcharts
react-highcharts tutorial
React data visualization
react-highcharts installation
React chart library
react-highcharts example
React interactive charts
react-highcharts setup
React Highcharts dashboard
react-highcharts customization
React chart component
react-highcharts events
React chart visualization
react-highcharts getting started

Advanced Data Visualizations with React Google Charts

Aaron King — Mon, 19 Jan 2026 18:08:13 +0000

React Google Charts is a React wrapper for Google Charts, providing a React-friendly API for creating interactive, responsive charts. It offers access to all Google Charts types with extensive customization options and real-time data updates. This guide walks through advanced usage of React Google Charts, including complex chart configurations, interactive features, and dashboard implementations.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect)
Familiarity with JavaScript/TypeScript
Understanding of Google Charts API

Installation

Install React Google Charts using your preferred package manager:

npm install react-google-charts

Or with yarn:

yarn add react-google-charts

Or with pnpm:

pnpm add react-google-charts

After installation, your package.json should include:

{
  "dependencies": {
    "react-google-charts": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Google Charts requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import { Chart } from 'react-google-charts';

function ChartExample() {
  const data = [
    ['Month', 'Sales'],
    ['Jan', 35],
    ['Feb', 28],
    ['Mar', 34],
    ['Apr', 32],
    ['May', 40],
    ['Jun', 32]
  ];

  const options = {
    title: 'Monthly Sales',
    hAxis: { title: 'Month' },
    vAxis: { title: 'Sales' },
    legend: 'none'
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Google Charts Example</h2>
      <Chart
        chartType="LineChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart with monthly sales data.

Understanding the Basics

React Google Charts provides a Chart component:

Chart component: Main chart component
chartType prop: Type of chart (LineChart, BarChart, PieChart, etc.)
Data format: Array of arrays, first row is headers
Options: Chart configuration object
Interactive: Built-in interactivity

Key concepts for advanced usage:

Data structure: First row contains column headers, subsequent rows contain data
Chart types: LineChart, BarChart, PieChart, AreaChart, etc.
Options object: Configure chart appearance and behavior
Events: Handle chart events with callbacks
Real-time updates: Update data dynamically

Here's an example with multiple chart types:

// src/AdvancedChartExample.jsx
import React from 'react';
import { Chart } from 'react-google-charts';

function AdvancedChartExample() {
  const lineData = [
    ['Month', 'Sales', 'Target'],
    ['Jan', 35, 40],
    ['Feb', 28, 35],
    ['Mar', 34, 38],
    ['Apr', 32, 36],
    ['May', 40, 42],
    ['Jun', 32, 38]
  ];

  const barData = [
    ['Quarter', 'Revenue'],
    ['Q1', 12000],
    ['Q2', 15000],
    ['Q3', 18000],
    ['Q4', 20000]
  ];

  const pieData = [
    ['Product', 'Sales'],
    ['Product A', 35],
    ['Product B', 28],
    ['Product C', 34],
    ['Product D', 32]
  ];

  const lineOptions = {
    title: 'Sales vs Target',
    hAxis: { title: 'Month' },
    vAxis: { title: 'Sales' },
    legend: { position: 'top' }
  };

  const barOptions = {
    title: 'Quarterly Revenue',
    hAxis: { title: 'Quarter' },
    vAxis: { title: 'Revenue' }
  };

  const pieOptions = {
    title: 'Product Distribution',
    pieHole: 0.4
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Advanced Google Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <Chart
          chartType="LineChart"
          data={lineData}
          options={lineOptions}
          width="100%"
          height="400px"
        />
        <Chart
          chartType="BarChart"
          data={barData}
          options={barOptions}
          width="100%"
          height="400px"
        />
        <Chart
          chartType="PieChart"
          data={pieData}
          options={pieOptions}
          width="100%"
          height="400px"
        />
      </div>
    </div>
  );
}

export default AdvancedChartExample;

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import { Chart } from 'react-google-charts';

function AnalyticsDashboard() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const monthlyData = [
    ['Month', 'Sales', 'Target'],
    ['Jan', 35, 40],
    ['Feb', 28, 35],
    ['Mar', 34, 38],
    ['Apr', 32, 36],
    ['May', 40, 42],
    ['Jun', 32, 38]
  ];

  const quarterlyData = [
    ['Quarter', 'Sales', 'Target'],
    ['Q1', 97, 113],
    ['Q2', 106, 116],
    ['Q3', 112, 120],
    ['Q4', 120, 125]
  ];

  const revenueData = [
    ['Quarter', 'Revenue'],
    ['Q1', 12000],
    ['Q2', 15000],
    ['Q3', 18000],
    ['Q4', 20000]
  ];

  const categoryData = [
    ['Product', 'Sales'],
    ['Product A', 35],
    ['Product B', 28],
    ['Product C', 34],
    ['Product D', 32]
  ];

  const currentData = selectedPeriod === 'monthly' ? monthlyData : quarterlyData;

  const lineOptions = {
    title: 'Sales Performance',
    hAxis: { title: selectedPeriod === 'monthly' ? 'Month' : 'Quarter' },
    vAxis: { title: 'Sales' },
    legend: { position: 'top' },
    curveType: 'function'
  };

  const barOptions = {
    title: 'Quarterly Revenue',
    hAxis: { title: 'Quarter' },
    vAxis: { title: 'Revenue' }
  };

  const pieOptions = {
    title: 'Product Distribution',
    pieHole: 0.4,
    is3D: true
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <Chart
          chartType="LineChart"
          data={currentData}
          options={lineOptions}
          width="100%"
          height="400px"
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <Chart
            chartType="BarChart"
            data={revenueData}
            options={barOptions}
            width="100%"
            height="400px"
          />
          <Chart
            chartType="PieChart"
            data={categoryData}
            options={pieOptions}
            width="100%"
            height="400px"
          />
        </div>
      </div>
    </div>
  );
}

export default AnalyticsDashboard;

Now create an interactive chart with events:

// src/InteractiveChart.jsx
import React, { useState } from 'react';
import { Chart } from 'react-google-charts';

function InteractiveChart() {
  const [selectedData, setSelectedData] = useState(null);

  const data = [
    ['Month', 'Sales'],
    ['Jan', 35],
    ['Feb', 28],
    ['Mar', 34],
    ['Apr', 32],
    ['May', 40],
    ['Jun', 32]
  ];

  const options = {
    title: 'Interactive Sales Chart',
    hAxis: { title: 'Month' },
    vAxis: { title: 'Sales' },
    legend: 'none'
  };

  const chartEvents = [
    {
      eventName: 'select',
      callback: ({ chartWrapper }) => {
        const chart = chartWrapper.getChart();
        const selection = chart.getSelection();
        if (selection.length > 0) {
          const selectedRow = selection[0].row + 1;
          setSelectedData(data[selectedRow]);
        }
      }
    }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Chart</h2>
      {selectedData && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {selectedData[0]} - {selectedData[1]}
        </div>
      )}
      <Chart
        chartType="LineChart"
        data={data}
        options={options}
        width="100%"
        height="500px"
        chartEvents={chartEvents}
      />
    </div>
  );
}

export default InteractiveChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import InteractiveChart from './InteractiveChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <InteractiveChart />
    </div>
  );
}

export default App;

This example demonstrates:

Analytics dashboard
Multiple chart types
Interactive features
Event handling
Dynamic data updates
Custom styling

Common Issues / Troubleshooting

Chart not displaying: Make sure you're importing Chart correctly from 'react-google-charts'. Check that the data array is properly formatted with headers.
Data format error: Ensure data follows the correct format: first row contains headers, subsequent rows contain data values.
Options not working: Check that options object follows Google Charts configuration format. Refer to Google Charts documentation for correct option structure.
Events not firing: Use the chartEvents prop to attach event handlers. Make sure event names match Google Charts event names.
Styling issues: Customize colors and styles in the options object. Use colors array for custom color schemes.
Performance: For large datasets, consider data sampling or pagination. Google Charts handles large datasets well, but optimization may be needed for very large datasets.

Next Steps

Now that you have an advanced understanding of React Google Charts:

Explore all available chart types
Learn about advanced configurations
Implement real-time data updates
Add custom tooltips and formatters
Create combo charts
Learn about other chart libraries
Check the official repository: https://github.com/RakanNimer/react-google-charts

Summary

You've successfully integrated React Google Charts into your React application with advanced features including analytics dashboards, interactive charts, and event handling. React Google Charts provides a powerful solution for creating professional data visualizations with extensive customization options.

SEO Keywords

react-google-charts
React Google Charts
react-google-charts tutorial
React data visualization
react-google-charts installation
React chart library
react-google-charts example
React Google Charts dashboard
react-google-charts setup
React interactive charts
react-google-charts customization
React chart component
react-google-charts events
React chart visualization
react-google-charts getting started

Building Interactive Dashboards with React Dazzle

Aaron King — Mon, 19 Jan 2026 18:07:02 +0000

React Dazzle is a dashboard framework for React that makes it easy to create customizable, drag-and-drop dashboards. It provides a flexible grid system and widget components for building data visualization dashboards with minimal configuration. This guide walks through setting up and creating dashboards using React Dazzle with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install React Dazzle using your preferred package manager:

npm install react-dazzle

Or with yarn:

yarn add react-dazzle

Or with pnpm:

pnpm add react-dazzle

After installation, your package.json should include:

{
  "dependencies": {
    "react-dazzle": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Dazzle requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple dashboard. Create a new file src/DashboardExample.jsx:

// src/DashboardExample.jsx
import React, { useState } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function DashboardExample() {
  const [layout, setLayout] = useState([
    { i: 'widget1', x: 0, y: 0, w: 4, h: 2 },
    { i: 'widget2', x: 4, y: 0, w: 4, h: 2 }
  ]);

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Basic Dashboard Example</h2>
      <Dashboard
        layout={layout}
        onLayoutChange={setLayout}
        cols={12}
        rowHeight={100}
      >
        <Widget key="widget1" i="widget1">
          <div style={{ padding: '20px', backgroundColor: '#f0f0f0', height: '100%' }}>
            <h3>Widget 1</h3>
            <p>This is the first widget</p>
          </div>
        </Widget>
        <Widget key="widget2" i="widget2">
          <div style={{ padding: '20px', backgroundColor: '#e0e0e0', height: '100%' }}>
            <h3>Widget 2</h3>
            <p>This is the second widget</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default DashboardExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardExample from './DashboardExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardExample />
    </div>
  );
}

export default App;

This creates a basic dashboard with two draggable widgets.

Understanding the Basics

React Dazzle provides dashboard components:

Dashboard: Main dashboard container
Widget: Individual dashboard widgets
Layout: Grid layout configuration
Drag and drop: Move and resize widgets
Responsive: Automatic responsive behavior

Key concepts:

Layout array: Array of layout objects defining widget positions
Widget properties: Each widget has an i (id) property
Grid system: 12-column grid by default
Row height: Height of each grid row
Layout change: Handle layout changes with onLayoutChange

Here's an example with multiple widgets:

// src/AdvancedDashboardExample.jsx
import React, { useState } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function AdvancedDashboardExample() {
  const [layout, setLayout] = useState([
    { i: 'sales', x: 0, y: 0, w: 6, h: 3 },
    { i: 'revenue', x: 6, y: 0, w: 6, h: 3 },
    { i: 'users', x: 0, y: 3, w: 4, h: 2 },
    { i: 'products', x: 4, y: 3, w: 4, h: 2 },
    { i: 'analytics', x: 8, y: 3, w: 4, h: 2 }
  ]);

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h2>Advanced Dashboard Example</h2>
      <Dashboard
        layout={layout}
        onLayoutChange={setLayout}
        cols={12}
        rowHeight={100}
      >
        <Widget key="sales" i="sales">
          <div style={{ padding: '20px', backgroundColor: '#f0f0f0', height: '100%' }}>
            <h3>Sales</h3>
            <p>Monthly sales data</p>
          </div>
        </Widget>
        <Widget key="revenue" i="revenue">
          <div style={{ padding: '20px', backgroundColor: '#e0e0e0', height: '100%' }}>
            <h3>Revenue</h3>
            <p>Quarterly revenue</p>
          </div>
        </Widget>
        <Widget key="users" i="users">
          <div style={{ padding: '20px', backgroundColor: '#d0d0d0', height: '100%' }}>
            <h3>Users</h3>
            <p>Active users</p>
          </div>
        </Widget>
        <Widget key="products" i="products">
          <div style={{ padding: '20px', backgroundColor: '#c0c0c0', height: '100%' }}>
            <h3>Products</h3>
            <p>Product catalog</p>
          </div>
        </Widget>
        <Widget key="analytics" i="analytics">
          <div style={{ padding: '20px', backgroundColor: '#b0b0b0', height: '100%' }}>
            <h3>Analytics</h3>
            <p>Analytics data</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default AdvancedDashboardExample;

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function AnalyticsDashboard() {
  const [layout, setLayout] = useState([
    { i: 'sales-chart', x: 0, y: 0, w: 8, h: 4 },
    { i: 'revenue-chart', x: 8, y: 0, w: 4, h: 4 },
    { i: 'users-widget', x: 0, y: 4, w: 4, h: 2 },
    { i: 'products-widget', x: 4, y: 4, w: 4, h: 2 },
    { i: 'stats-widget', x: 8, y: 4, w: 4, h: 2 }
  ]);

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <Dashboard
        layout={layout}
        onLayoutChange={setLayout}
        cols={12}
        rowHeight={100}
      >
        <Widget key="sales-chart" i="sales-chart">
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', height: '100%', border: '1px solid #ddd', borderRadius: '4px' }}>
            <h3>Sales Chart</h3>
            <div style={{ height: 'calc(100% - 60px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <p>Sales visualization would go here</p>
            </div>
          </div>
        </Widget>
        <Widget key="revenue-chart" i="revenue-chart">
          <div style={{ padding: '20px', backgroundColor: '#f8f9fa', height: '100%', border: '1px solid #ddd', borderRadius: '4px' }}>
            <h3>Revenue Chart</h3>
            <div style={{ height: 'calc(100% - 60px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <p>Revenue visualization would go here</p>
            </div>
          </div>
        </Widget>
        <Widget key="users-widget" i="users-widget">
          <div style={{ padding: '20px', backgroundColor: '#e3f2fd', height: '100%', border: '1px solid #2196f3', borderRadius: '4px' }}>
            <h3>Users</h3>
            <div style={{ fontSize: '32px', fontWeight: 'bold', marginTop: '10px' }}>1,234</div>
            <p style={{ marginTop: '10px', color: '#666' }}>Active users</p>
          </div>
        </Widget>
        <Widget key="products-widget" i="products-widget">
          <div style={{ padding: '20px', backgroundColor: '#f3e5f5', height: '100%', border: '1px solid #9c27b0', borderRadius: '4px' }}>
            <h3>Products</h3>
            <div style={{ fontSize: '32px', fontWeight: 'bold', marginTop: '10px' }}>567</div>
            <p style={{ marginTop: '10px', color: '#666' }}>Total products</p>
          </div>
        </Widget>
        <Widget key="stats-widget" i="stats-widget">
          <div style={{ padding: '20px', backgroundColor: '#e8f5e9', height: '100%', border: '1px solid #4caf50', borderRadius: '4px' }}>
            <h3>Stats</h3>
            <div style={{ fontSize: '32px', fontWeight: 'bold', marginTop: '10px' }}>89%</div>
            <p style={{ marginTop: '10px', color: '#666' }}>Performance</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default AnalyticsDashboard;

Now create a customizable dashboard with save/load functionality:

// src/CustomizableDashboard.jsx
import React, { useState, useEffect } from 'react';
import { Dashboard, Widget } from 'react-dazzle';

function CustomizableDashboard() {
  const [layout, setLayout] = useState([
    { i: 'widget1', x: 0, y: 0, w: 6, h: 3 },
    { i: 'widget2', x: 6, y: 0, w: 6, h: 3 },
    { i: 'widget3', x: 0, y: 3, w: 12, h: 2 }
  ]);

  useEffect(() => {
    const savedLayout = localStorage.getItem('dashboard-layout');
    if (savedLayout) {
      setLayout(JSON.parse(savedLayout));
    }
  }, []);

  const handleLayoutChange = (newLayout) => {
    setLayout(newLayout);
    localStorage.setItem('dashboard-layout', JSON.stringify(newLayout));
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1400px', margin: '0 auto' }}>
      <h2>Customizable Dashboard</h2>
      <p>Drag and resize widgets to customize your dashboard. Layout is saved automatically.</p>
      <Dashboard
        layout={layout}
        onLayoutChange={handleLayoutChange}
        cols={12}
        rowHeight={100}
      >
        <Widget key="widget1" i="widget1">
          <div style={{ padding: '20px', backgroundColor: '#fff3cd', height: '100%', border: '1px solid #ffc107', borderRadius: '4px' }}>
            <h3>Widget 1</h3>
            <p>Drag me around!</p>
          </div>
        </Widget>
        <Widget key="widget2" i="widget2">
          <div style={{ padding: '20px', backgroundColor: '#d1ecf1', height: '100%', border: '1px solid #17a2b8', borderRadius: '4px' }}>
            <h3>Widget 2</h3>
            <p>Resize me!</p>
          </div>
        </Widget>
        <Widget key="widget3" i="widget3">
          <div style={{ padding: '20px', backgroundColor: '#d4edda', height: '100%', border: '1px solid #28a745', borderRadius: '4px' }}>
            <h3>Widget 3</h3>
            <p>Full width widget</p>
          </div>
        </Widget>
      </Dashboard>
    </div>
  );
}

export default CustomizableDashboard;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import CustomizableDashboard from './CustomizableDashboard';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <CustomizableDashboard />
    </div>
  );
}

export default App;

This example demonstrates:

Analytics dashboard
Multiple widgets
Drag and drop
Resizable widgets
Layout persistence
Custom styling

Common Issues / Troubleshooting

Dashboard not displaying: Make sure you're importing Dashboard and Widget correctly from 'react-dazzle'. Check that the layout array is properly formatted.
Layout not updating: Use the onLayoutChange callback to update the layout state. The layout state must be controlled.
Widgets not draggable: Ensure the Dashboard component has proper dimensions and the layout is correctly configured.
Styling issues: Customize widget styles through inline styles or CSS. Each widget should have a defined height.
Responsive not working: Set the cols prop to control grid columns. Adjust rowHeight for different screen sizes.
Layout persistence: Save layout to localStorage or a backend. Load saved layout on component mount.

Next Steps

Now that you have an understanding of React Dazzle:

Explore all available widget types
Learn about advanced layout configurations
Add custom widgets
Implement layout templates
Create responsive dashboards
Learn about other dashboard libraries
Check the official repository: https://github.com/Raathigesh/Dazzle

Summary

You've successfully set up React Dazzle in your React application and created customizable dashboards with drag-and-drop widgets, analytics displays, and layout persistence. React Dazzle provides a flexible solution for building interactive dashboards with minimal configuration.

SEO Keywords

react-dazzle
React dashboard
react-dazzle tutorial
React drag and drop dashboard
react-dazzle installation
React dashboard framework
react-dazzle example
React widget dashboard
react-dazzle setup
React customizable dashboard
react-dazzle widgets
React dashboard layout
react-dazzle grid
React dashboard component
react-dazzle getting started

Getting Started with React D3 Components: Creating D3 Charts in React

Aaron King — Mon, 19 Jan 2026 18:06:10 +0000

React D3 Components is a React wrapper for D3.js charting components. It provides React-friendly components for creating various types of charts using D3.js, making it easier to integrate D3 visualizations into React applications. This guide walks through setting up and creating charts using React D3 Components with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React D3 Components and D3:

npm install react-d3-components d3

Or with yarn:

yarn add react-d3-components d3

Or with pnpm:

pnpm add react-d3-components d3

After installation, your package.json should include:

{
  "dependencies": {
    "react-d3-components": "^0.6.0",
    "d3": "^7.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React D3 Components requires minimal setup. Import the components and you're ready to use them.

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import { LineChart } from 'react-d3-components';

function ChartExample() {
  const data = {
    label: 'Sales',
    values: [
      { x: 'Jan', y: 35 },
      { x: 'Feb', y: 28 },
      { x: 'Mar', y: 34 },
      { x: 'Apr', y: 32 },
      { x: 'May', y: 40 },
      { x: 'Jun', y: 32 }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic D3 Line Chart Example</h2>
      <LineChart
        data={data}
        width={600}
        height={400}
        margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
      />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart displaying monthly sales data.

Understanding the Basics

React D3 Components provides several chart components:

LineChart: Line charts
BarChart: Bar charts
PieChart: Pie charts
AreaChart: Area charts
ScatterPlot: Scatter plots
Data format: Object with label and values array

Key concepts:

Data structure: Object with label and values array
Values array: Array of objects with x and y properties
Width and height: Chart dimensions
Margin: Chart margins for axes and labels
Styling: Customize colors and appearance

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { LineChart, BarChart, PieChart } from 'react-d3-components';

function MultipleChartsExample() {
  const lineData = {
    label: 'Sales',
    values: [
      { x: 'Mon', y: 120 },
      { x: 'Tue', y: 132 },
      { x: 'Wed', y: 101 },
      { x: 'Thu', y: 134 },
      { x: 'Fri', y: 90 }
    ]
  };

  const barData = {
    label: 'Revenue',
    values: [
      { x: 'Product A', y: 120 },
      { x: 'Product B', y: 200 },
      { x: 'Product C', y: 150 }
    ]
  };

  const pieData = {
    label: 'Distribution',
    values: [
      { x: 'Chrome', y: 37 },
      { x: 'Safari', y: 19 },
      { x: 'Firefox', y: 18 }
    ]
  };

  const chartProps = {
    width: 600,
    height: 300,
    margin: { top: 10, bottom: 50, left: 50, right: 10 }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Line Chart</h3>
          <LineChart data={lineData} {...chartProps} />
        </div>
        <div>
          <h3>Bar Chart</h3>
          <BarChart data={barData} {...chartProps} />
        </div>
        <div>
          <h3>Pie Chart</h3>
          <PieChart
            data={pieData}
            width={400}
            height={300}
            margin={{ top: 10, bottom: 10, left: 10, right: 10 }}
          />
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React from 'react';
import { LineChart, BarChart, PieChart } from 'react-d3-components';

function DashboardCharts() {
  const salesData = {
    label: 'Sales',
    values: [
      { x: 'Jan', y: 35 },
      { x: 'Feb', y: 28 },
      { x: 'Mar', y: 34 },
      { x: 'Apr', y: 32 },
      { x: 'May', y: 40 },
      { x: 'Jun', y: 32 }
    ]
  };

  const targetData = {
    label: 'Target',
    values: [
      { x: 'Jan', y: 40 },
      { x: 'Feb', y: 35 },
      { x: 'Mar', y: 38 },
      { x: 'Apr', y: 36 },
      { x: 'May', y: 42 },
      { x: 'Jun', y: 38 }
    ]
  };

  const revenueData = {
    label: 'Revenue',
    values: [
      { x: 'Q1', y: 12000 },
      { x: 'Q2', y: 15000 },
      { x: 'Q3', y: 18000 },
      { x: 'Q4', y: 20000 }
    ]
  };

  const categoryData = {
    label: 'Products',
    values: [
      { x: 'Product A', y: 35 },
      { x: 'Product B', y: 28 },
      { x: 'Product C', y: 34 },
      { x: 'Product D', y: 32 }
    ]
  };

  const chartProps = {
    width: 800,
    height: 400,
    margin: { top: 10, bottom: 50, left: 50, right: 10 }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales vs Target</h2>
          <LineChart
            data={[salesData, targetData]}
            {...chartProps}
          />
        </div>
        <div>
          <h2>Quarterly Revenue</h2>
          <BarChart
            data={revenueData}
            {...chartProps}
          />
        </div>
        <div>
          <h2>Product Distribution</h2>
          <PieChart
            data={categoryData}
            width={600}
            height={400}
            margin={{ top: 10, bottom: 10, left: 10, right: 10 }}
          />
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import { BarChart } from 'react-d3-components';

function ProductComparisonChart() {
  const data = {
    label: 'Sales',
    values: [
      { x: 'Product A', y: 120 },
      { x: 'Product B', y: 100 },
      { x: 'Product C', y: 90 },
      { x: 'Product D', y: 110 }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <BarChart
        data={data}
        width={700}
        height={400}
        margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
      />
    </div>
  );
}

export default ProductComparisonChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import ProductComparisonChart from './ProductComparisonChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <ProductComparisonChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Multiple series
Custom margins
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you've installed both react-d3-components and d3. The charts require D3.js for rendering.
Data format error: Ensure data follows the correct format with label and values array. Values should be an array of objects with x and y properties.
Axes not showing: Set proper margins in the margin prop. Axes need space to render properly.
Styling issues: Customize colors and styles through props. Some components support color scales and custom color functions.
Responsive not working: Set width and height props. For responsive charts, you may need to handle window resize events manually.
Multiple series: Pass an array of data objects to display multiple series on the same chart.

Next Steps

Now that you have a basic understanding of React D3 Components:

Explore all available chart types
Learn about advanced D3 features
Customize colors and scales
Add animations
Create interactive charts
Learn about other D3 React libraries
Check the official repository: https://github.com/codesuki/react-d3-components

Summary

You've successfully set up React D3 Components in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. React D3 Components provides a React-friendly interface for creating D3.js visualizations with minimal configuration.

SEO Keywords

react-d3-components
React D3.js
react-d3-components tutorial
React D3 charts
react-d3-components installation
React data visualization
react-d3-components example
React D3 line chart
react-d3-components setup
React D3 bar chart
react-d3-components customization
React D3 pie chart
react-d3-components dashboard
React D3 component
react-d3-components getting started

Advanced Data Visualizations with React Chart.js 2

Aaron King — Mon, 19 Jan 2026 18:05:05 +0000

React Chart.js 2 is a React wrapper for Chart.js, one of the most popular charting libraries. It provides a React-friendly API for creating interactive, responsive charts with extensive customization options. This guide walks through advanced usage of React Chart.js 2, including complex chart configurations, plugins, and dashboard implementations.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useRef)
Familiarity with JavaScript/TypeScript
Understanding of Chart.js concepts

Installation

Install React Chart.js 2 and Chart.js:

npm install react-chartjs-2 chart.js

Or with yarn:

yarn add react-chartjs-2 chart.js

Or with pnpm:

pnpm add react-chartjs-2 chart.js

After installation, your package.json should include:

{
  "dependencies": {
    "react-chartjs-2": "^5.0.0",
    "chart.js": "^4.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ArcElement
} from 'chart.js';
import App from './App';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import { Line } from 'react-chartjs-2';

function ChartExample() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'Sales',
        data: [35, 28, 34, 32, 40, 32],
        borderColor: 'rgb(75, 192, 192)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      }
    ]
  };

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

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Chart.js Example</h2>
      <Line data={data} options={options} />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart with monthly sales data.

Understanding the Basics

React Chart.js 2 provides chart components:

Line: Line charts
Bar: Bar charts
Pie: Pie charts
Doughnut: Doughnut charts
Data structure: Labels and datasets array
Options: Chart configuration
Plugins: Extend functionality

Key concepts for advanced usage:

Data structure: Object with labels and datasets arrays
Datasets: Array of dataset objects, each represents a data series
Options: Configure chart appearance and behavior
Plugins: Register and use plugins for extended features
Responsive: Automatic responsive behavior

Here's an example with multiple datasets and custom styling:

// src/AdvancedChartExample.jsx
import React from 'react';
import { Line, Bar } from 'react-chartjs-2';

function AdvancedChartExample() {
  const lineData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'Sales',
        data: [35, 28, 34, 32, 40, 32],
        borderColor: 'rgb(75, 192, 192)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      },
      {
        label: 'Target',
        data: [40, 35, 38, 36, 42, 38],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
      }
    ]
  };

  const barData = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: 'Revenue',
        data: [12000, 15000, 18000, 20000],
        backgroundColor: 'rgba(54, 162, 235, 0.6)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1
      }
    ]
  };

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      }
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Advanced Chart.js Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Line Chart with Multiple Series</h3>
          <Line data={lineData} options={options} />
        </div>
        <div>
          <h3>Bar Chart</h3>
          <Bar data={barData} options={options} />
        </div>
      </div>
    </div>
  );
}

export default AdvancedChartExample;

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import { Line, Bar, Pie, Doughnut } from 'react-chartjs-2';

function AnalyticsDashboard() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const monthlyData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'Sales',
        data: [35, 28, 34, 32, 40, 32],
        borderColor: 'rgb(75, 192, 192)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      },
      {
        label: 'Target',
        data: [40, 35, 38, 36, 42, 38],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
      }
    ]
  };

  const quarterlyData = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: 'Sales',
        data: [97, 106, 112, 120],
        borderColor: 'rgb(75, 192, 192)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      },
      {
        label: 'Target',
        data: [113, 116, 120, 125],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
      }
    ]
  };

  const revenueData = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: 'Revenue',
        data: [12000, 15000, 18000, 20000],
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
      }
    ]
  };

  const categoryData = {
    labels: ['Product A', 'Product B', 'Product C', 'Product D'],
    datasets: [
      {
        data: [35, 28, 34, 32],
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1
      }
    ]
  };

  const currentData = selectedPeriod === 'monthly' ? monthlyData : quarterlyData;

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

  const barOptions = {
    responsive: true,
    plugins: {
      legend: {
        display: false
      },
      title: {
        display: true,
        text: 'Quarterly Revenue'
      }
    }
  };

  const pieOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'right',
      },
      title: {
        display: true,
        text: 'Product Distribution'
      }
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <Line data={currentData} options={lineOptions} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <Bar data={revenueData} options={barOptions} />
          <Pie data={categoryData} options={pieOptions} />
        </div>
      </div>
    </div>
  );
}

export default AnalyticsDashboard;

Now create an interactive chart with real-time updates:

// src/InteractiveChart.jsx
import React, { useState, useEffect } from 'react';
import { Line } from 'react-chartjs-2';

function InteractiveChart() {
  const [data, setData] = useState({
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [
      {
        label: 'Sales',
        data: [35, 28, 34, 32, 40, 32],
        borderColor: 'rgb(75, 192, 192)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      }
    ]
  });

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prevData => ({
        ...prevData,
        datasets: [{
          ...prevData.datasets[0],
          data: prevData.datasets[0].data.map(value =>
            value + Math.floor(Math.random() * 10) - 5
          )
        }]
      }));
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  const options = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Real-time Sales Data'
      }
    },
    animation: {
      duration: 750
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Real-time Chart</h2>
      <Line data={data} options={options} />
    </div>
  );
}

export default InteractiveChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import InteractiveChart from './InteractiveChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <InteractiveChart />
    </div>
  );
}

export default App;

This example demonstrates:

Analytics dashboard
Multiple chart types
Interactive features
Real-time updates
Dynamic data
Custom styling

Common Issues / Troubleshooting

Chart not displaying: Make sure you've registered Chart.js components in your entry file. Use ChartJS.register() to register required components.
Data format error: Ensure data follows the correct format with labels and datasets arrays. Datasets should be an array of dataset objects.
Plugins not working: Register plugins using ChartJS.register(). Some features require specific plugins to be registered.
Styling issues: Customize colors and styles in the dataset objects. Use backgroundColor and borderColor for styling.
Responsive not working: Charts are responsive by default. Use responsive: true in options. Ensure the container has proper dimensions.
Performance: For large datasets, consider data sampling or pagination. Chart.js handles large datasets well, but optimization may be needed for very large datasets.

Next Steps

Now that you have an advanced understanding of React Chart.js 2:

Explore all available chart types
Learn about advanced configurations
Implement custom plugins
Add animations and transitions
Create real-time updating charts
Learn about other chart libraries
Check the official repository: https://github.com/jerairrest/react-chartjs-2

Summary

You've successfully integrated React Chart.js 2 into your React application with advanced features including analytics dashboards, real-time charts, and interactive visualizations. React Chart.js 2 provides a powerful solution for creating professional data visualizations with extensive customization options.

SEO Keywords

react-chartjs-2
React Chart.js
react-chartjs-2 tutorial
React data visualization
react-chartjs-2 installation
React chart library
react-chartjs-2 example
React Chart.js dashboard
react-chartjs-2 setup
React interactive charts
react-chartjs-2 customization
React chart component
react-chartjs-2 plugins
React chart visualization
react-chartjs-2 getting started

Building Interactive Charts with React Charty

Aaron King — Mon, 19 Jan 2026 18:03:46 +0000

React Charty is a lightweight, flexible charting library for React that provides a simple API for creating various types of charts. It offers customization options and responsive design, making it easy to create beautiful data visualizations. This guide walks through setting up and creating charts using React Charty with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState)
Familiarity with JavaScript/TypeScript

Installation

Install React Charty using your preferred package manager:

npm install react-charty

Or with yarn:

yarn add react-charty

Or with pnpm:

pnpm add react-charty

After installation, your package.json should include:

{
  "dependencies": {
    "react-charty": "^0.1.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

React Charty requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import { Charty } from 'react-charty';

function ChartExample() {
  const data = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 },
    { x: 'Jun', y: 32 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic React Charty Example</h2>
      <Charty
        data={data}
        type="line"
        width={600}
        height={400}
      />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart displaying monthly sales data.

Understanding the Basics

React Charty provides a flexible charting component:

Charty component: Main chart component
Data prop: Array of data points
Type prop: Chart type (line, bar, pie, etc.)
Customization: Width, height, colors, and more
Responsive: Automatic responsive behavior

Key concepts:

Data format: Array of objects with x and y properties
Chart types: Line, bar, pie, area, etc.
Styling: Customize colors, sizes, and appearance
Props: Configure chart through props
Responsive: Charts adapt to container size

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { Charty } from 'react-charty';

function MultipleChartsExample() {
  const lineData = [
    { x: 'Mon', y: 120 },
    { x: 'Tue', y: 132 },
    { x: 'Wed', y: 101 },
    { x: 'Thu', y: 134 },
    { x: 'Fri', y: 90 }
  ];

  const barData = [
    { x: 'Product A', y: 120 },
    { x: 'Product B', y: 200 },
    { x: 'Product C', y: 150 }
  ];

  const pieData = [
    { x: 'Chrome', y: 37 },
    { x: 'Safari', y: 19 },
    { x: 'Firefox', y: 18 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Line Chart</h3>
          <Charty data={lineData} type="line" width={600} height={300} />
        </div>
        <div>
          <h3>Bar Chart</h3>
          <Charty data={barData} type="bar" width={600} height={300} />
        </div>
        <div>
          <h3>Pie Chart</h3>
          <Charty data={pieData} type="pie" width={600} height={300} />
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React, { useState } from 'react';
import { Charty } from 'react-charty';

function DashboardCharts() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const monthlyData = [
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 },
    { x: 'Jun', y: 32 }
  ];

  const quarterlyData = [
    { x: 'Q1', y: 97 },
    { x: 'Q2', y: 106 },
    { x: 'Q3', y: 112 },
    { x: 'Q4', y: 120 }
  ];

  const revenueData = [
    { x: 'Q1', y: 12000 },
    { x: 'Q2', y: 15000 },
    { x: 'Q3', y: 18000 },
    { x: 'Q4', y: 20000 }
  ];

  const categoryData = [
    { x: 'Product A', y: 35 },
    { x: 'Product B', y: 28 },
    { x: 'Product C', y: 34 },
    { x: 'Product D', y: 32 }
  ];

  const currentData = selectedPeriod === 'monthly' ? monthlyData : quarterlyData;

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales Performance</h2>
          <Charty
            data={currentData}
            type="line"
            width={800}
            height={400}
          />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <div>
            <h2>Quarterly Revenue</h2>
            <Charty
              data={revenueData}
              type="bar"
              width={400}
              height={300}
            />
          </div>
          <div>
            <h2>Product Distribution</h2>
            <Charty
              data={categoryData}
              type="pie"
              width={400}
              height={300}
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import { Charty } from 'react-charty';

function ProductComparisonChart() {
  const data = [
    { x: 'Product A', y: 120 },
    { x: 'Product B', y: 100 },
    { x: 'Product C', y: 90 },
    { x: 'Product D', y: 110 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <Charty
        data={data}
        type="bar"
        width={700}
        height={400}
      />
    </div>
  );
}

export default ProductComparisonChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import ProductComparisonChart from './ProductComparisonChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <ProductComparisonChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Dynamic data updates
Interactive controls
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you're importing Charty correctly from 'react-charty'. Check that the data array is properly formatted.
Data format error: Ensure data is an array of objects with x and y properties. The x property can be a string or number.
Type not working: Use valid chart types: 'line', 'bar', 'pie', 'area', etc. Check the library documentation for all available types.
Styling issues: Customize width and height through props. You can also use CSS to style the container.
Responsive not working: Set width and height props. For responsive charts, use percentage-based widths or CSS.
Multiple series: React Charty supports single series by default. For multiple series, you may need to use multiple chart components or check library documentation for advanced features.

Next Steps

Now that you have an understanding of React Charty:

Explore all available chart types
Learn about advanced customization options
Customize colors and styles
Add animations
Create responsive layouts
Learn about other chart libraries (recharts, chart.js)
Check the official repository: https://github.com/99ff00/react-charty

Summary

You've successfully set up React Charty in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. React Charty provides a simple, flexible solution for creating data visualizations with minimal configuration.

SEO Keywords

react-charty
React Charty
react-charty tutorial
React chart library
react-charty installation
React data visualization
react-charty example
React line chart
react-charty setup
React bar chart
react-charty customization
React pie chart
react-charty dashboard
React chart component
react-charty getting started

Getting Started with React Chartist: Creating Beautiful Charts in React

Aaron King — Mon, 19 Jan 2026 18:02:36 +0000

React Chartist is a React wrapper for Chartist.js, a simple responsive charting library. It provides an easy-to-use API for creating beautiful, responsive charts with minimal configuration. This guide walks through setting up and creating charts using React Chartist with React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React components
Familiarity with JavaScript/TypeScript

Installation

Install React Chartist and Chartist CSS:

npm install react-chartist chartist

Or with yarn:

yarn add react-chartist chartist

Or with pnpm:

pnpm add react-chartist chartist

After installation, your package.json should include:

{
  "dependencies": {
    "react-chartist": "^0.14.0",
    "chartist": "^1.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import Chartist CSS in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'chartist/dist/chartist.min.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import { LineChart } from 'react-chartist';

function ChartExample() {
  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [[35, 28, 34, 32, 40, 32]]
  };

  const options = {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic Line Chart Example</h2>
      <LineChart data={data} options={options} type="Line" />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart displaying monthly sales data.

Understanding the Basics

React Chartist provides several chart components:

LineChart: Line charts
BarChart: Bar charts
PieChart: Pie charts
Data format: Labels and series array
Options: Chart configuration
Responsive: Automatic responsive behavior

Key concepts:

Data structure: Object with labels and series arrays
Series array: Array of arrays, each inner array is a data series
Labels: X-axis labels or pie chart labels
Options: Configure chart appearance and behavior
Type prop: Specify chart type

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import { LineChart, BarChart, PieChart } from 'react-chartist';

function MultipleChartsExample() {
  const lineData = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
    series: [[120, 132, 101, 134, 90]]
  };

  const barData = {
    labels: ['Product A', 'Product B', 'Product C'],
    series: [[120, 200, 150]]
  };

  const pieData = {
    labels: ['Chrome', 'Safari', 'Firefox'],
    series: [37, 19, 18]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h3>Line Chart</h3>
          <LineChart data={lineData} type="Line" />
        </div>
        <div>
          <h3>Bar Chart</h3>
          <BarChart data={barData} type="Bar" />
        </div>
        <div>
          <h3>Pie Chart</h3>
          <PieChart data={pieData} type="Pie" />
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React from 'react';
import { LineChart, BarChart, PieChart } from 'react-chartist';

function DashboardCharts() {
  const salesData = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    series: [
      [35, 28, 34, 32, 40, 32],
      [40, 35, 38, 36, 42, 38]
    ]
  };

  const salesOptions = {
    fullWidth: true,
    chartPadding: {
      right: 40
    },
    seriesBarDistance: 10
  };

  const revenueData = {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    series: [[12000, 15000, 18000, 20000]]
  };

  const revenueOptions = {
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  };

  const categoryData = {
    labels: ['Product A', 'Product B', 'Product C', 'Product D'],
    series: [35, 28, 34, 32]
  };

  const categoryOptions = {
    labelInterpolationFnc: function(value) {
      return value[0];
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales vs Target</h2>
          <LineChart
            data={salesData}
            options={salesOptions}
            type="Line"
          />
        </div>
        <div>
          <h2>Quarterly Revenue</h2>
          <BarChart
            data={revenueData}
            options={revenueOptions}
            type="Bar"
          />
        </div>
        <div>
          <h2>Product Distribution</h2>
          <PieChart
            data={categoryData}
            options={categoryOptions}
            type="Pie"
          />
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create a product comparison chart:

// src/ProductComparisonChart.jsx
import React from 'react';
import { BarChart } from 'react-chartist';

function ProductComparisonChart() {
  const data = {
    labels: ['Product A', 'Product B', 'Product C'],
    series: [
      [120, 100, 90],
      [135, 110, 95],
      [150, 125, 105]
    ]
  };

  const options = {
    seriesBarDistance: 10,
    fullWidth: true,
    chartPadding: {
      right: 40
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Product Sales Comparison</h2>
      <BarChart
        data={data}
        options={options}
        type="Bar"
      />
    </div>
  );
}

export default ProductComparisonChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import ProductComparisonChart from './ProductComparisonChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <ProductComparisonChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Multiple series
Custom options
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you've imported the Chartist CSS file. The charts require CSS for proper rendering.
Data format error: Ensure data follows the correct format with labels and series arrays. Series should be an array of arrays for multiple series.
Styling issues: Import Chartist CSS. You can also customize styles using CSS or the options object.
Multiple series: Use nested arrays in the series array. Each inner array represents a data series.
Responsive not working: Chartist is responsive by default. Use fullWidth: true in options to make charts fill their container.
Pie chart labels: Use labelInterpolationFnc in options to customize how labels are displayed in pie charts.

Next Steps

Now that you have a basic understanding of React Chartist:

Explore all available chart types
Learn about advanced chart options
Customize colors and styles
Add animations
Create responsive layouts
Learn about other chart libraries (recharts, chart.js)
Check the official repository: https://github.com/fraserxu/react-chartist

Summary

You've successfully set up React Chartist in your React application and created line charts, bar charts, pie charts, and dashboard visualizations. React Chartist provides a simple, elegant solution for creating responsive charts with minimal configuration.

SEO Keywords

react-chartist
React Chartist
react-chartist tutorial
React chart library
react-chartist installation
React data visualization
react-chartist example
React line chart
react-chartist setup
React bar chart
react-chartist customization
React pie chart
react-chartist dashboard
React chart component
react-chartist getting started

Advanced Data Visualizations with JSCharting React

Aaron King — Mon, 19 Jan 2026 18:01:35 +0000

JSCharting React is a React wrapper for JSCharting, a powerful charting library that provides advanced data visualization capabilities. It offers a wide range of chart types, interactive features, and extensive customization options for creating professional dashboards and analytics visualizations. This guide walks through advanced usage of JSCharting React, including complex chart configurations, interactive features, and dashboard implementations.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useRef)
Familiarity with JavaScript/TypeScript
Understanding of data visualization concepts

Installation

Install JSCharting React using your preferred package manager:

npm install jscharting-react

Or with yarn:

yarn add jscharting-react

Or with pnpm:

pnpm add jscharting-react

After installation, your package.json should include:

{
  "dependencies": {
    "jscharting-react": "^3.0.0",
    "jscharting": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

JSCharting React requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import JSC from 'jscharting-react';

function ChartExample() {
  const config = {
    type: 'line',
    series: [
      {
        points: [
          { x: 'Jan', y: 35 },
          { x: 'Feb', y: 28 },
          { x: 'Mar', y: 34 },
          { x: 'Apr', y: 32 },
          { x: 'May', y: 40 },
          { x: 'Jun', y: 32 }
        ]
      }
    ],
    title: { label: { text: 'Monthly Sales' } }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic JSCharting Example</h2>
      <JSC.Chart options={config} style={{ height: '400px' }} />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart with monthly sales data.

Understanding the Basics

JSCharting React provides a React component:

JSC.Chart component: Main chart component
options prop: Chart configuration object
Chart types: Line, Column, Bar, Pie, Area, etc.
Interactive features: Tooltips, zoom, selection, etc.
Customization: Extensive styling and behavior options

Key concepts for advanced usage:

Configuration object: Configure chart through options prop
Series array: Define data series in series array
Points array: Data points within each series
Styling: Customize colors, fonts, and layouts
Events: Handle chart events with callbacks

Here's an example with multiple series and custom styling:

// src/AdvancedChartExample.jsx
import React from 'react';
import JSC from 'jscharting-react';

function AdvancedChartExample() {
  const config = {
    type: 'column',
    series: [
      {
        name: 'Sales',
        points: [
          { x: 'Q1', y: 12000 },
          { x: 'Q2', y: 15000 },
          { x: 'Q3', y: 18000 },
          { x: 'Q4', y: 20000 }
        ]
      },
      {
        name: 'Target',
        points: [
          { x: 'Q1', y: 13000 },
          { x: 'Q2', y: 16000 },
          { x: 'Q3', y: 19000 },
          { x: 'Q4', y: 21000 }
        ]
      }
    ],
    title: { label: { text: 'Quarterly Performance' } },
    legend: { position: 'bottom' },
    xAxis: { label: { text: 'Quarter' } },
    yAxis: { label: { text: 'Revenue ($)' } }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Advanced JSCharting Example</h2>
      <JSC.Chart options={config} style={{ height: '500px' }} />
    </div>
  );
}

export default AdvancedChartExample;

Practical Example / Building Something Real

Let's build a comprehensive analytics dashboard:

// src/AnalyticsDashboard.jsx
import React, { useState } from 'react';
import JSC from 'jscharting-react';

function AnalyticsDashboard() {
  const [selectedMetric, setSelectedMetric] = useState('sales');

  const metrics = {
    sales: {
      title: 'Sales Performance',
      data: [
        { x: 'Jan', y: 35 },
        { x: 'Feb', y: 28 },
        { x: 'Mar', y: 34 },
        { x: 'Apr', y: 32 },
        { x: 'May', y: 40 },
        { x: 'Jun', y: 32 }
      ]
    },
    revenue: {
      title: 'Revenue Trend',
      data: [
        { x: 'Jan', y: 12000 },
        { x: 'Feb', y: 9800 },
        { x: 'Mar', y: 13400 },
        { x: 'Apr', y: 12800 },
        { x: 'May', y: 16000 },
        { x: 'Jun', y: 12800 }
      ]
    },
    users: {
      title: 'User Growth',
      data: [
        { x: 'Jan', y: 1200 },
        { x: 'Feb', y: 1350 },
        { x: 'Mar', y: 1500 },
        { x: 'Apr', y: 1650 },
        { x: 'May', y: 1800 },
        { x: 'Jun', y: 1950 }
      ]
    }
  };

  const currentMetric = metrics[selectedMetric];

  const lineChartConfig = {
    type: 'line',
    series: [
      {
        points: currentMetric.data,
        defaultPoint: {
          marker: {
            type: 'circle',
            size: 8,
            fill: '#5470c6'
          }
        }
      }
    ],
    title: { label: { text: currentMetric.title } },
    xAxis: { label: { text: 'Month' } },
    yAxis: { label: { text: 'Value' } },
    tooltip: { enabled: true }
  };

  const pieChartConfig = {
    type: 'pie',
    series: [
      {
        points: [
          { name: 'Product A', y: 35 },
          { name: 'Product B', y: 28 },
          { name: 'Product C', y: 34 },
          { name: 'Product D', y: 32 }
        ]
      }
    ],
    title: { label: { text: 'Product Distribution' } },
    legend: { position: 'right' }
  };

  const barChartConfig = {
    type: 'column',
    series: [
      {
        points: [
          { x: 'Week 1', y: 120 },
          { x: 'Week 2', y: 135 },
          { x: 'Week 3', y: 150 },
          { x: 'Week 4', y: 145 }
        ]
      }
    ],
    title: { label: { text: 'Weekly Performance' } },
    xAxis: { label: { text: 'Week' } },
    yAxis: { label: { text: 'Sales' } }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        {Object.keys(metrics).map(metric => (
          <button
            key={metric}
            onClick={() => setSelectedMetric(metric)}
            style={{
              padding: '8px 16px',
              margin: '0 5px',
              backgroundColor: selectedMetric === metric ? '#007bff' : '#6c757d',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            {metrics[metric].title}
          </button>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <JSC.Chart options={lineChartConfig} style={{ height: '400px' }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <JSC.Chart options={pieChartConfig} style={{ height: '400px' }} />
          <JSC.Chart options={barChartConfig} style={{ height: '400px' }} />
        </div>
      </div>
    </div>
  );
}

export default AnalyticsDashboard;

Now create an interactive chart with real-time updates:

// src/InteractiveChart.jsx
import React, { useState, useEffect } from 'react';
import JSC from 'jscharting-react';

function InteractiveChart() {
  const [data, setData] = useState([
    { x: 'Jan', y: 35 },
    { x: 'Feb', y: 28 },
    { x: 'Mar', y: 34 },
    { x: 'Apr', y: 32 },
    { x: 'May', y: 40 },
    { x: 'Jun', y: 32 }
  ]);

  useEffect(() => {
    const interval = setInterval(() => {
      setData(prevData =>
        prevData.map(point => ({
          ...point,
          y: point.y + Math.floor(Math.random() * 10) - 5
        }))
      );
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  const config = {
    type: 'line',
    series: [
      {
        points: data,
        defaultPoint: {
          marker: {
            type: 'circle',
            size: 8,
            fill: '#5470c6'
          }
        }
      }
    ],
    title: { label: { text: 'Real-time Sales Data' } },
    xAxis: { label: { text: 'Month' } },
    yAxis: { label: { text: 'Sales' } },
    tooltip: { enabled: true },
    animation: { enabled: true }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Real-time Chart</h2>
      <JSC.Chart options={config} style={{ height: '500px' }} />
    </div>
  );
}

export default InteractiveChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import AnalyticsDashboard from './AnalyticsDashboard';
import InteractiveChart from './InteractiveChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <AnalyticsDashboard />
      <InteractiveChart />
    </div>
  );
}

export default App;

This example demonstrates:

Analytics dashboard
Multiple chart types
Interactive features
Real-time updates
Dynamic data
Custom styling

Common Issues / Troubleshooting

Chart not displaying: Make sure you've installed both jscharting-react and jscharting. The chart requires the JSCharting core library.
Configuration not working: Check that the options object follows JSCharting configuration format. Refer to JSCharting documentation for correct structure.
Data not showing: Ensure the series array contains points with proper x and y values. Check that data format matches the chart type requirements.
Styling issues: Customize colors and styles in the configuration object. Use defaultPoint for point styling and title/legend for layout.
Performance: For large datasets, consider data sampling or pagination. JSCharting handles large datasets well, but optimization may be needed for very large datasets.
Events not working: Use the on prop or event handlers in the configuration to attach event listeners. Check JSCharting event documentation for available events.

Next Steps

Now that you have an advanced understanding of JSCharting React:

Explore all available chart types
Learn about advanced configurations
Implement custom tooltips and formatters
Add animations and transitions
Create 3D charts and maps
Integrate with data APIs
Learn about other chart libraries
Check the official repository: https://github.com/jscharting/jscharting-react

Summary

You've successfully integrated JSCharting React into your React application with advanced features including analytics dashboards, real-time charts, and interactive visualizations. JSCharting React provides a powerful solution for creating professional data visualizations with extensive customization options.

SEO Keywords

jscharting-react
React JSCharting
jscharting-react tutorial
React data visualization
jscharting-react installation
React chart library
jscharting-react example
React analytics dashboard
jscharting-react setup
React interactive charts
jscharting-react customization
React chart component
jscharting-react dashboard
React chart visualization
jscharting-react getting started

Building Interactive Charts with ECharts for React

Aaron King — Mon, 19 Jan 2026 18:00:34 +0000

ECharts for React is a React wrapper for Apache ECharts, a powerful charting library. It provides a React-friendly API for creating interactive, responsive charts with extensive customization options. This guide walks through setting up and creating charts using ECharts for React, from installation to a working implementation.

Prerequisites

Before you begin, make sure you have:

Node.js version 14.0 or higher installed
npm, yarn, or pnpm package manager
A React project (version 16.8 or higher) or create-react-app setup
Basic knowledge of React hooks (useState, useEffect, useRef)
Familiarity with JavaScript/TypeScript

Installation

Install ECharts for React and ECharts core:

npm install echarts echarts-for-react

Or with yarn:

yarn add echarts echarts-for-react

Or with pnpm:

pnpm add echarts echarts-for-react

After installation, your package.json should include:

{
  "dependencies": {
    "echarts": "^5.0.0",
    "echarts-for-react": "^3.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

ECharts for React requires minimal setup. Import the component and you're ready to use it.

First Example / Basic Usage

Let's create a simple line chart. Create a new file src/ChartExample.jsx:

// src/ChartExample.jsx
import React from 'react';
import ReactECharts from 'echarts-for-react';

function ChartExample() {
  const option = {
    title: {
      text: 'Monthly Sales'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Sales',
        type: 'line',
        data: [35, 28, 34, 32, 40, 32],
        smooth: true
      }
    ]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic ECharts Example</h2>
      <ReactECharts option={option} style={{ height: '400px' }} />
    </div>
  );
}

export default ChartExample;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import ChartExample from './ChartExample';
import './App.css';

function App() {
  return (
    <div className="App">
      <ChartExample />
    </div>
  );
}

export default App;

This creates a basic line chart with tooltips and smooth animations.

Understanding the Basics

ECharts for React uses an option-based configuration:

ReactECharts component: Main chart component
option object: Chart configuration
Chart types: Line, Bar, Pie, Scatter, etc.
Interactive features: Tooltip, zoom, brush, etc.
Responsive: Automatic responsive behavior

Key concepts:

Option object: Configure chart through an option prop
Chart structure: title, tooltip, xAxis, yAxis, series
Series array: Define data series
Styling: Customize colors, themes, and styles
Events: Handle chart events with callbacks

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import ReactECharts from 'echarts-for-react';

function MultipleChartsExample() {
  const lineOption = {
    title: { text: 'Line Chart' },
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', data: [120, 132, 101, 134, 90] }]
  };

  const barOption = {
    title: { text: 'Bar Chart' },
    xAxis: { type: 'category', data: ['Product A', 'Product B', 'Product C'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [120, 200, 150] }]
  };

  const pieOption = {
    title: { text: 'Pie Chart' },
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' }
      ]
    }]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h2>Multiple Charts Example</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <ReactECharts option={lineOption} style={{ height: '300px' }} />
        <ReactECharts option={barOption} style={{ height: '300px' }} />
        <ReactECharts option={pieOption} style={{ height: '300px' }} />
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple charts:

// src/DashboardCharts.jsx
import React, { useState } from 'react';
import ReactECharts from 'echarts-for-react';

function DashboardCharts() {
  const [selectedPeriod, setSelectedPeriod] = useState('monthly');

  const salesData = {
    monthly: {
      xAxis: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      sales: [35, 28, 34, 32, 40, 32],
      target: [40, 35, 38, 36, 42, 38]
    },
    quarterly: {
      xAxis: ['Q1', 'Q2', 'Q3', 'Q4'],
      sales: [97, 106, 112, 120],
      target: [113, 116, 120, 125]
    }
  };

  const currentData = salesData[selectedPeriod];

  const salesOption = {
    title: {
      text: 'Sales Performance',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Sales', 'Target'],
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: currentData.xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Sales',
        type: 'line',
        data: currentData.sales,
        smooth: true,
        itemStyle: { color: '#5470c6' }
      },
      {
        name: 'Target',
        type: 'line',
        data: currentData.target,
        smooth: true,
        itemStyle: { color: '#91cc75' }
      }
    ]
  };

  const revenueOption = {
    title: {
      text: 'Revenue by Category',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Product A' },
        { value: 735, name: 'Product B' },
        { value: 580, name: 'Product C' },
        { value: 484, name: 'Product D' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };

  const barOption = {
    title: {
      text: 'Monthly Comparison',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: [35, 28, 34, 32, 40, 32],
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      }
    }]
  };

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Sales Dashboard</h1>
      <div style={{ marginBottom: '20px', textAlign: 'center' }}>
        <button
          onClick={() => setSelectedPeriod('monthly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'monthly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Monthly
        </button>
        <button
          onClick={() => setSelectedPeriod('quarterly')}
          style={{
            padding: '8px 16px',
            margin: '0 5px',
            backgroundColor: selectedPeriod === 'quarterly' ? '#007bff' : '#6c757d',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Quarterly
        </button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <ReactECharts option={salesOption} style={{ height: '400px' }} />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
          <ReactECharts option={revenueOption} style={{ height: '400px' }} />
          <ReactECharts option={barOption} style={{ height: '400px' }} />
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create an interactive chart with events:

// src/InteractiveChart.jsx
import React, { useState } from 'react';
import ReactECharts from 'echarts-for-react';

function InteractiveChart() {
  const [selectedData, setSelectedData] = useState(null);

  const option = {
    title: {
      text: 'Interactive Sales Chart',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['Sales', 'Profit'],
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    yAxis: [
      {
        type: 'value',
        name: 'Sales',
        position: 'left'
      },
      {
        type: 'value',
        name: 'Profit',
        position: 'right'
      }
    ],
    series: [
      {
        name: 'Sales',
        type: 'bar',
        data: [35, 28, 34, 32, 40, 32],
        yAxisIndex: 0
      },
      {
        name: 'Profit',
        type: 'line',
        data: [10, 8, 12, 9, 15, 11],
        yAxisIndex: 1,
        smooth: true
      }
    ],
    dataZoom: [
      {
        type: 'slider',
        start: 0,
        end: 100
      }
    ]
  };

  const onChartReady = (echarts) => {
    console.log('Chart is ready', echarts);
  };

  const onEvents = {
    click: (params) => {
      console.log('Chart clicked', params);
      setSelectedData(params.data);
    }
  };

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Chart</h2>
      {selectedData && (
        <div style={{
          padding: '10px',
          backgroundColor: '#f8f9fa',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          Selected: {JSON.stringify(selectedData)}
        </div>
      )}
      <ReactECharts
        option={option}
        style={{ height: '500px' }}
        onChartReady={onChartReady}
        onEvents={onEvents}
      />
    </div>
  );
}

export default InteractiveChart;

Update your App.jsx:

// src/App.jsx
import React from 'react';
import DashboardCharts from './DashboardCharts';
import InteractiveChart from './InteractiveChart';
import './App.css';

function App() {
  return (
    <div className="App">
      <DashboardCharts />
      <InteractiveChart />
    </div>
  );
}

export default App;

This example demonstrates:

Multiple chart types
Dashboard layout
Interactive features
Event handling
Dynamic data updates
Custom styling

Common Issues / Troubleshooting

Chart not displaying: Make sure you've installed both echarts and echarts-for-react. The chart requires the ECharts core library.
Option not working: Check that the option object follows ECharts configuration format. Refer to ECharts documentation for correct option structure.
Responsive issues: ECharts handles responsiveness automatically. If charts aren't resizing, ensure the container has proper dimensions.
Events not firing: Use the onEvents prop to attach event handlers. Make sure event names match ECharts event names.
Styling issues: Customize colors and styles in the option object. Use itemStyle for series styling and textStyle for text styling.
Performance: For large datasets, consider using data sampling or lazy loading. ECharts handles large datasets well, but optimization may be needed.

Next Steps

Now that you have an understanding of ECharts for React:

Explore all available chart types
Learn about advanced configurations
Implement real-time data updates
Add custom tooltips and formatters
Create 3D charts and maps
Learn about other chart libraries (recharts, chart.js)
Check the official repository: https://github.com/hustcc/echarts-for-react

Summary

You've successfully set up ECharts for React in your React application and created interactive charts, dashboards, and data visualizations. ECharts for React provides a powerful solution for creating professional charts with extensive customization and interactive features.

SEO Keywords

echarts-for-react
React ECharts
echarts-for-react tutorial
React Apache ECharts
echarts-for-react installation
React interactive charts
echarts-for-react example
React data visualization
echarts-for-react setup
React chart library
echarts-for-react customization
React ECharts dashboard
echarts-for-react events
React chart component
echarts-for-react getting started