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.