7 React Libraries that will blow your mind with their data visualization capabilities 🤯
Data visualization is essential to any application dealing with large data sets. It helps users understand and analyze the data more intuitively. React, being one of the most popular JavaScript libraries, offers a wide range of options for data visualization. This article will discuss the top 7 React libraries for data visualization that you should check out.
1. D3.js 📈
D3.js is a JavaScript library that allows you to create dynamic and interactive data visualizations. It uses a declarative approach and allows you to bind data to the Document Object Model (DOM). D3.js is a powerful tool that can create various visualizations, from simple bar charts to complex network diagrams.
import { useRef } from 'react';
import * as d3 from 'd3';
const MyComponent = () => {
const d3Container = useRef(null);
useEffect(() => {
const data = [1, 2, 3, 4, 5];
const svg = d3.select(d3Container.current)
.append("svg")
.attr("width", 400)
.attr("height", 200);
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", (d, i) => i * 50)
.attr("y", 50)
.attr("width", 40)
.attr("height", (d) => d * 10)
.attr("fill", "orange");
}, []);
return <div ref={d3Container} />;
};2. Recharts 📊
Recharts is a composable charting library built on top of D3.js. It provides a set of reusable charts that are easy to customize and style. Recharts support various chart types, including line charts, bar charts, and pie charts.
import { LineChart, Line, XAxis, YAxis } from 'recharts';
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
{ name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
{ name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
{ name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];
const MyComponent = () => {
return (
<LineChart width={600} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
</LineChart>
);
};3. Victory 🏆
Victory is a set of composable React components for building interactive data visualizations. It is built on top of D3 and provides customizable and easy-to-use charts, such as bar charts, line charts, and scatter plots. Victory also supports animations and interaction, making it an excellent choice for building dynamic and engaging visualizations.
import { VictoryChart, VictoryBar, VictoryAxis } from 'victory';
const data = [
{ quarter: 1, earnings: 13000 },
{ quarter: 2, earnings: 16500 },
{ quarter: 3, earnings: 14250 },
{ quarter: 4, earnings: 19000 }
];
const MyComponent = () => {
return (
<VictoryChart>
<VictoryAxis
tickValues={[1, 2, 3, 4]}
tickFormat={["Q1", "Q2", "Q3", "Q4"]}
/>
<VictoryAxis
dependentAxis
tickFormat={(x) => $${x / 1000}k}
/>
<VictoryBar
data={data}
x="quarter"
y="earnings"
/>
</VictoryChart>
);
};4. Chart.js 📊
Chart.js is a popular open-source library for creating simple and responsive charts. It has a wide range of chart types, including line, bar, and pie charts. Chart.js also supports many customization options, making it an excellent choice for building charts that fit your specific needs.
import { useEffect, useRef } from 'react';
import Chart from 'chart.js';
const MyComponent = () => {
const chartContainer = useRef(null);
useEffect(() => {
const myChart = new Chart(chartContainer.current, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}, []);
return (
<div>
<canvas ref={chartContainer} />
</div>
);
};5. Recharts 📈
Recharts is a powerful and flexible charting library built for React. It has a wide range of chart types, including line charts, bar charts, and area charts. Recharts also supports responsive design and animations, making them great for building dynamic and engaging visualizations.
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
const data = [
{ name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
{ name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
{ name: 'Page C', uv: 2000, pv: 9800, amt: 2290 },
{ name: 'Page D', uv: 2780, pv: 3908, amt: 2000 },
{ name: 'Page E', uv: 1890, pv: 4800, amt: 2181 },
{ name: 'Page F', uv: 2390, pv: 3800, amt: 2500 },
{ name: 'Page G', uv: 3490, pv: 4300, amt: 2100 },
];
const MyComponent = () => {
return (
<LineChart width={500} height={300} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
);
};6. Nivo 📊
Nivo provides a set of reusable components for building beautiful and responsive data visualizations. It offers a wide range of chart types, including bar charts, line charts, and pie charts. Nivo also supports animations and interactions, making it an excellent choice for building dynamic and engaging visualizations.
import {
ResponsiveBar
} from 'nivo';
const data = [{
"country": "AD",
"hot dog": 95,
"hot dogColor": "hsl(319, 70%, 50%)",
"burger": 119,
"burgerColor": "hsl(71, 70%, 50%)",
"sandwich": 97,
"sandwichColor": "hsl(193, 70%, 50%)",
"kebab": 160,
"kebabColor": "hsl(81, 70%, 50%)",
"fries": 55,
"friesColor": "hsl(208, 70%, 50%)",
"donut": 157,
"donutColor": "hsl(56, 70%, 50%)"
},
// more data
];
const MyComponent = () => {
return ( <
ResponsiveBar data = {
data
}
keys = {
["hot dog", "burger", "sandwich", "kebab", "fries", "donut"]
}
indexBy = "country"
margin = {
{
top: 50,
right: 130,
bottom: 50,
left: 60
}
}
padding = {
0.3
}
colors = {
{
scheme: 'nivo'
}
}
defs = {
[{
id: 'dots',
type: 'patternDots',
background: 'inherit',
color: '#38bcb2',
size: 4,
padding: 1,
stagger: true
},
{
id: 'lines',
type: 'patternLines',
background: 'inherit',
color: '#eed312',
rotation: -45,
lineWidth: 6,
spacing: 10
}
]
}
fill = {
[{
match: {
id: 'fries'
},
id: 'dots'
},
{
match: {
id: 'sandwich'
},
id: 'lines'
}
]
}
borderColor = {
{
from: 'color',
modifiers: [
['darker', 1.6]
]
}
}
axisTop = {
null
}
axisRight = {
null
}
axisBottom = {
{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'country',
legendPosition: 'middle',
legendOffset: 32
}
}
axisLeft = {
{
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: 'food',
legendPosition: 'middle',
legendOffset: -40
}
}
labelSkipWidth = {
12
}
labelSkipHeight = {
12
}
labelTextColor = {
{
from: 'color',
modifiers: [
['darker', 1.6]
]
}
}
legends = {
[{
dataFrom: 'keys',
anchor: 'bottom-right',
direction: 'column',
justify: false,
translateX: 120,
translateY: 0,
itemsSpacing: 2,
itemWidth: 100,
itemHeight: 20,
itemDirection: 'left-to-right',
itemOpacity: 0.85,
symbolSize: 20,
effects: [{
on: 'hover',
style: {
itemOpacity: 1
}
}]
}]
}
animate = {
true
}
motionStiffness = {
90
}
motionDamping = {
15
}
/>
);
};7. Plotly.js 📉
Plotly.js is a powerful and flexible open-source charting library for JavaScript. It offers various chart types, including scatter plots, bar charts, and heat maps. Plotly.js also allows for interactive charts, with features such as zooming and panning, as well as the ability to export charts to various formats like PNG and SVG.
One of the unique features of Plotly.js is the ability to create 3D plots, making it an excellent choice for data visualization in the fields of science and engineering.
Here’s an example of a 3D scatter plot created with Plotly.js:
import Plotly from 'plotly.js/lib/core';
import Scatter3D from 'plotly.js/lib/scatter3d';
Plotly.register([ Scatter3D ]);
const data = [{ x: [1, 2, 3],
y: [2, 1, 3],
z: [1, 2, 1],
mode: 'markers',
marker: {
color: 'rgb(127, 127, 127)',
size: 12,
symbol: 'circle',
line: {
color: 'rgb(204, 204, 204)',
width: 1
},
opacity: 0.8
},
type: 'scatter3d'
}];
const layout = {
margin: {
l: 0,
r: 0,
b: 0,
t: 0
}
};
const config = {};
const div = document.getElementById('myDiv');
Plotly.newPlot(div, data, layout, config);In conclusion, many React libraries are available for data visualization, each with its strengths and unique features. D3.js and Victory are great for creating complex, customizable charts, while Chart.js and Recharts are more beginner-friendly options. Nivo provides a wide range of pre-built chart components, and Plotly.js is excellent for creating interactive 3D plots.
No matter which library you choose, data visualization can significantly enhance the impact of your data and make it more accessible to your audience. So, go ahead and experiment with different libraries and see which one works best for your project!