Eric Lewis

Posted on Jan 19

Building Interactive Data Visualizations with React Vis

#react #webdev #tutorial #beginners

React Vis is a comprehensive visualization library for React developed by Uber. It provides a wide range of chart types and visualization components with built-in interactivity, animations, and responsive design. This guide walks through setting up and creating visualizations using React Vis 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
Understanding of data visualization concepts

Installation

Install React Vis and required CSS:

npm install react-vis

Or with yarn:

yarn add react-vis

Or with pnpm:

pnpm add react-vis

After installation, your package.json should include:

{
  "dependencies": {
    "react-vis": "^1.11.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

Project Setup

Import React Vis CSS in your main entry file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'react-vis/dist/style.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 {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  LineSeries
} from 'react-vis';

function ChartExample() {
  const data = [
    { x: 0, y: 35 },
    { x: 1, y: 28 },
    { x: 2, y: 34 },
    { x: 3, y: 32 },
    { x: 4, y: 40 },
    { x: 5, y: 32 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Basic React Vis Example</h2>
      <XYPlot width={600} height={400}>
        <HorizontalGridLines />
        <VerticalGridLines />
        <XAxis />
        <YAxis />
        <LineSeries data={data} />
      </XYPlot>
    </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 grid lines and axes.

Understanding the Basics

React Vis provides several chart components:

XYPlot: Main chart container
LineSeries: Line chart series
AreaSeries: Area chart series
BarSeries: Bar chart series
MarkSeries: Scatter plot series
XAxis, YAxis: Axis components
GridLines: Grid line components

Key concepts:

Data format: Array of objects with x and y properties
XYPlot: Container that defines chart dimensions
Series components: Define chart type and data
Axis components: Configure axes
Styling: Customize colors and styles through props

Here's an example with multiple chart types:

// src/MultipleChartsExample.jsx
import React from 'react';
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  LineSeries,
  AreaSeries,
  BarSeries
} from 'react-vis';

function MultipleChartsExample() {
  const lineData = [
    { x: 0, y: 120 },
    { x: 1, y: 132 },
    { x: 2, y: 101 },
    { x: 3, y: 134 },
    { x: 4, y: 90 }
  ];

  const areaData = [
    { x: 0, y: 100 },
    { x: 1, y: 110 },
    { x: 2, y: 105 },
    { x: 3, y: 115 },
    { x: 4, y: 120 }
  ];

  const barData = [
    { x: 0, y: 120 },
    { x: 1, y: 200 },
    { x: 2, y: 150 }
  ];

  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>
          <XYPlot width={600} height={300}>
            <HorizontalGridLines />
            <XAxis />
            <YAxis />
            <LineSeries data={lineData} />
          </XYPlot>
        </div>
        <div>
          <h3>Area Chart</h3>
          <XYPlot width={600} height={300}>
            <HorizontalGridLines />
            <XAxis />
            <YAxis />
            <AreaSeries data={areaData} />
          </XYPlot>
        </div>
        <div>
          <h3>Bar Chart</h3>
          <XYPlot width={600} height={300} xType="ordinal">
            <XAxis />
            <YAxis />
            <BarSeries data={barData} />
          </XYPlot>
        </div>
      </div>
    </div>
  );
}

export default MultipleChartsExample;

Practical Example / Building Something Real

Let's build a comprehensive dashboard with multiple visualizations:

// src/DashboardCharts.jsx
import React, { useState } from 'react';
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  VerticalGridLines,
  LineSeries,
  AreaSeries,
  MarkSeries,
  Crosshair
} from 'react-vis';

function DashboardCharts() {
  const [crosshairValues, setCrosshairValues] = useState([]);

  const salesData = [
    { x: 0, y: 35 },
    { x: 1, y: 28 },
    { x: 2, y: 34 },
    { x: 3, y: 32 },
    { x: 4, y: 40 },
    { x: 5, y: 32 }
  ];

  const targetData = [
    { x: 0, y: 40 },
    { x: 1, y: 35 },
    { x: 2, y: 38 },
    { x: 3, y: 36 },
    { x: 4, y: 42 },
    { x: 5, y: 38 }
  ];

  const revenueData = [
    { x: 0, y: 12000 },
    { x: 1, y: 15000 },
    { x: 2, y: 18000 },
    { x: 3, y: 20000 }
  ];

  const scatterData = [
    { x: 10, y: 20 },
    { x: 20, y: 30 },
    { x: 30, y: 25 },
    { x: 40, y: 35 },
    { x: 50, y: 40 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>
      <h1>Analytics Dashboard</h1>
      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
        <div>
          <h2>Sales vs Target</h2>
          <XYPlot
            width={800}
            height={400}
            onMouseLeave={() => setCrosshairValues([])}
          >
            <HorizontalGridLines />
            <VerticalGridLines />
            <XAxis />
            <YAxis />
            <LineSeries
              data={salesData}
              style={{ stroke: '#1f77b4', strokeWidth: 2 }}
              onNearestX={(value) => setCrosshairValues([value])}
            />
            <LineSeries
              data={targetData}
              style={{ stroke: '#ff7f0e', strokeWidth: 2 }}
            />
            <Crosshair values={crosshairValues} />
          </XYPlot>
        </div>
        <div>
          <h2>Quarterly Revenue</h2>
          <XYPlot width={800} height={400}>
            <HorizontalGridLines />
            <XAxis />
            <YAxis />
            <AreaSeries
              data={revenueData}
              style={{ fill: '#2ca02c', fillOpacity: 0.6 }}
            />
          </XYPlot>
        </div>
        <div>
          <h2>Scatter Plot</h2>
          <XYPlot width={800} height={400}>
            <HorizontalGridLines />
            <VerticalGridLines />
            <XAxis />
            <YAxis />
            <MarkSeries data={scatterData} />
          </XYPlot>
        </div>
      </div>
    </div>
  );
}

export default DashboardCharts;

Now create an interactive chart with tooltips:

// src/InteractiveChart.jsx
import React, { useState } from 'react';
import {
  XYPlot,
  XAxis,
  YAxis,
  HorizontalGridLines,
  LineSeries,
  MarkSeries,
  Crosshair
} from 'react-vis';

function InteractiveChart() {
  const [crosshairValues, setCrosshairValues] = useState([]);

  const data = [
    { x: 0, y: 35 },
    { x: 1, y: 28 },
    { x: 2, y: 34 },
    { x: 3, y: 32 },
    { x: 4, y: 40 },
    { x: 5, y: 32 }
  ];

  return (
    <div style={{ padding: '20px', maxWidth: '900px', margin: '0 auto' }}>
      <h2>Interactive Chart</h2>
      <XYPlot
        width={700}
        height={500}
        onMouseLeave={() => setCrosshairValues([])}
      >
        <HorizontalGridLines />
        <XAxis />
        <YAxis />
        <LineSeries
          data={data}
          style={{ stroke: '#1f77b4', strokeWidth: 2 }}
          onNearestX={(value) => setCrosshairValues([value])}
        />
        <MarkSeries
          data={data}
          style={{ stroke: '#1f77b4', fill: '#1f77b4' }}
        />
        <Crosshair values={crosshairValues} />
      </XYPlot>
    </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
Crosshair tooltips
Custom styling
Responsive design

Common Issues / Troubleshooting

Chart not displaying: Make sure you've imported the CSS file. React Vis requires CSS for proper styling.
Data format error: Ensure data is an array of objects with x and y properties. Both should be numeric values.
Styling issues: Customize colors through the style prop. Use stroke for line color and fill for area/bar colors.
Axis not showing: Add XAxis and YAxis components inside XYPlot. Configure them with labels and formatting.
Interactive not working: Use onNearestX or onNearestY callbacks to handle mouse interactions. Update state to show tooltips.
Performance: For large datasets, consider data sampling or using MarkSeries with optimized rendering. React Vis handles large datasets well, but optimization may be needed for very large datasets.

Next Steps

Now that you have an understanding of React Vis:

Explore all available chart types
Learn about advanced configurations
Implement custom tooltips
Add animations
Create complex visualizations
Learn about other visualization libraries
Check the official repository: https://github.com/uber/react-vis

Summary

You've successfully set up React Vis in your React application and created line charts, area charts, bar charts, and interactive visualizations. React Vis provides a comprehensive solution for creating data visualizations with extensive customization options and built-in interactivity.

SEO Keywords

react-vis
React Vis
react-vis tutorial
React data visualization
react-vis installation
React chart library
react-vis example
React Uber visualization
react-vis setup
React interactive charts
react-vis customization
React chart component
react-vis dashboard
React visualization library
react-vis getting started

DEV Community