Do you work with charts and ever faced a situation where you have to define the animated arcs arbitrarily.

Today, in this detailed tutorial, we will show you how to create arc charts with animation in React app. To make the arc charts, we will use the react-vis library in react application.

Arc charts help create pie charts, sunbursts, and everything concluding circular.

React-vis components are similar to React components. This package comes with eloquent properties, children, and callbacks. You won’t have to deal with uncomplicated stuff regarding react-vis.

If you are familiar with React components, you can work with React-Vis. We will show you how to create an arc chart component in react, and here is the process for that.

How to Create Animated Arc Chart in React using react-vis Package

• Step 1: Install New React Project
• Step 2: Install react-vis Library
• Step 3: Build Arc Chart Component
• Step 4: Register Chart Component
• Step 5: View App in Browser

Install New React Project

In this step, you will find out how to install a new react app.

Hence, open the command prompt, type the below command and let the project install.

npx create-react-app carthium

After that, get inside the project folder.

cd carthium

Install react-vis Library

Now, the app has been created, again type the command and install the react-vis package.

npm install react-vis --force

At the time of creating this tutorial, there are some issue installing this package.

To tackle that issue we are using the --force tag. However, if the issue is resolved, then remove the –force tag before installing this package.

Build Arc Chart Component

To build the animated arc chart component, you will need to create the components/VisChart.js folder and file, thereafter you need to add the given below code in the file.

import React from 'react'

import { XYPlot, ArcSeries, XAxis, YAxis } from 'react-vis'
import { EXTENDED_DISCRETE_COLOR_RANGE as COLORS } from '../../node_modules/react-vis/dist/theme'
const PI = Math.PI

function updateData() {
  const divider = Math.floor(Math.random() * 8 + 3)
  const newData = [...new Array(5)].map((row, index) => {
    return {
      color: index,
      radius0: Math.random() > 0.8 ? Math.random() + 1 : 0,
      radius: Math.random() * 3 + 1,
      angle: ((index + 1) * PI) / divider,
      angle0: (index * PI) / divider,
    }
  })
  return newData.concat([
    { angle0: 0, angle: PI * 2 * Math.random(), radius: 1.1, radius0: 0.8 },
  ])
}

function updateLittleData() {
  const portion = Math.random()
  return [
    {
      angle0: 0,
      angle: portion * PI * 2,
      radius0: 0,
      radius: 10,
      color: COLORS[13],
    },
    {
      angle0: portion * PI * 2,
      angle: 2 * PI,
      radius0: 0,
      radius: 10,
      color: COLORS[12],
    },
  ]
}

export default class VisChart extends React.Component {
  state = {
    data: updateData(),
    littleData: updateLittleData(),
    value: false,
  }
  render() {
    return (
      <div>
        <h2>React Vis Animated Arc Chart Example</h2>

        <button
          onClick={() =>
            this.setState({
              data: updateData(),
              littleData: updateLittleData(),
            })
          }
        >
          Update Chart
        </button>
        <XYPlot xDomain={[-5, 5]} yDomain={[-5, 5]} width={300} height={300}>
          <XAxis />
          <YAxis />
          <ArcSeries
            animation
            radiusDomain={[0, 4]}
            data={this.state.data.map((row) => {
              if (this.state.value && this.state.value.color === row.color) {
                return {
                  ...row,
                  style: { stroke: 'black', strokeWidth: '5px' },
                }
              }
              return row
            })}
            colorRange={COLORS}
            onValueMouseOver={(row) => this.setState({ value: row })}
            onSeriesMouseOut={() => this.setState({ value: false })}
            colorType={'category'}
          />
          <ArcSeries
            animation
            radiusType={'literal'}
            center={{ x: -2, y: 2 }}
            data={this.state.littleData}
            colorType={'literal'}
          />
        </XYPlot>
      </div>
    )
  }
}

You may customize the arc chart as per your requirement, it offers plenty of properties, options and you can find them here.

Register Chart Component

We have integrated the arc chart with animation in VisChart.js component, addiontally it needs to be registered in the App.js.

import './App.css';
import VisChart from './components/VisChart';

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

export default App;

View App in Browser

In the next step we will start the app and view the chart on the browser.

Consequently, go to command prompt, type and execute the given command.

npm start

Summary

React-vis comes with a variety of charts and tons of features. In this quick tutorial, we taught you how to create an animated arc chart in react. Apart from that, we have also discussed how to add animation and customization.