Opemipo DisuMany applications use charts or graphs for data visualization, which can be implemented using libraries or underlying technologies. Libraries offer time efficiency, a variety of chart types, and customization options.
As a developer, understanding these options is crucial. While some projects might choose manual implementation, many benefit from the efficiency of chart libraries. Using these libraries results in time savings and access to a variety of chart types and styling options to suit your needs.
In this article, we will embark on a journey through seven amazing charting libraries, their features, and how to use them. Let's take a look!
1. Latitude for React: The perfect companion for integrating charts into your frontend application
Website: https://docs.latitude.so/react/getting-started/introduction
Yes, that's us!
Latitude is an open-source framework for embedded analytics that allows you to quickly expose your SQL queries as API endpoints. Included in their offering is @latitude-data/react, a set of native React components for easily plotting data from Latitude's API. It can also serve as a standalone charting library if you choose to bring your own data.
Key Features of Latitude for React
- Variety of Chart types: It provides a variety of chart types to display. Examples include bar charts, pie chart, area charts, scattered charts, mixed charts, etc.
- Highly customizable components: Components come pre-bundled with a set of available themes, or you can choose to easily create your own custom theme. On top of that, most components can be extended with custom html classes.
- Automatically Run Queries or Provide Your Own Data: Latitude offers two versions of each chart component. One version automatically runs your Latitude queries. The other version expects to receive data as a prop, leaving the user in charge of fetching it.
How to use Latitude for React 👀
First, install Latitude’s react package in your React project:
npm install --save @latitude-data/react
After, import the core styles used for Latitude's components:
import '@latitude-data/react/dist/index.css';
With a Latitude backend
If you are going to fetch data from a Latitude backend, wrap your application with the LatitudeProvider at the root of your project:
import { LatitudeProvider } from '@latitude-data/react';
function App() {
return (
<LatitudeProviderapiConfig={{
host: <YOUR_LATITUDE_API_HOST>
}}>
{/* Your app content */}
</LatitudeProvider>);
}
And use Latitude’s any of the chart components prefixed with Query:
import { QueryLineChart } from '@latitude-data/react';
function MyComponent() {
return (
<QueryLineChart
queryPath='titles'
params={{
start_year: 2012,
end_year: 2014
}}
x='release_year'y={[
{ name: 'count_shows' },
{ name: 'count_movies' }
]}
xTitle='Year'
yTitle='Titles'/>
);
}
In this example, queryPath corresponds to the path of a query defined in your Latitude backend.
As a standalone chart library
Just use the standalone components such as:
import { LineChart } from '@latitude-data/react';
function MyComponent() {
const data = [
{
release_year: 2010,
count_shows: 10,
count_movies: 2
}
]
return (
<LineChart
data={data}
x='release_year'
y={[
{ name: 'count_shows' },
{ name: 'count_movies' }
]}
/>
);
}
Read the documentation for a more in-depth guide on how to display data dynamically with Latitude.
You can feel free to contribute to our project on GitHub and we'll appreciate if you can give us a star on our project!
🌟 Star Latitude for React on GitHub
2. D3.js: JavaScript Library for Data Visualization
D3's website: https://d3js.org
D3 is a low-level charting library that provides unparalleled levels of customization and flexibility. The tradeoff is a steep learning curve and harder integration with common frontend framework such as React or Svelte. If you have some very specific charting needs d3.js might be your only option but, if you are looking to quickly integrate some simple charts in your application, there are better options elsewhere.
Key Features of D3.js
- Customization and Flexibility: D3.js provides low-level access to the SVG, HTML, and CSS, allowing for fine-grained control over the visual elements. This makes it highly flexible and customizable.
- Modularity: D3.js is highly modular, with various modules that can be used independently or together. This allows for more control over the bundle size and performance optimizations.
- Powerful Transitions and Animations: D3.js offers robust support for transitions and animations, enabling smooth and complex animations for data updates.
- Community and Ecosystem: D3.js has a large and active community, with extensive documentation, examples, and plugins available. This makes it easier to find support and resources.
How to use D3.js 👀
Install d3’s npm package in your project:
npm install d3
Here’s an example code on how to add a chart to an html component with id #chart:
import * as d3 from 'd3';
// Data for the bar chart
const data = [
{ name: 'A', value: 30 },
{ name: 'B', value: 80 },
{ name: 'C', value: 45 },
{ name: 'D', value: 60 },
{ name: 'E', value: 20 },
{ name: 'F', value: 90 },
{ name: 'G', value: 55 }
];
// Set the dimensions and margins of the graph
const margin = { top: 20, right: 30, bottom: 40, left: 40 };
const width = 500 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
// Append the svg object to the body of the page
const svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// X axis
const x = d3.scaleBand()
.range([0, width])
.domain(data.map(d => d.name))
.padding(0.1);
svg.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("class", "axis-label")
.attr("transform", "translate(-10,0)rotate(-45)")
.style("text-anchor", "end");
// Y axis
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.nice()
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y))
.selectAll("text")
.attr("class", "axis-label");
// Bars
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("width", x.bandwidth())
.attr("height", d => height - y(d.value));
As you can see, D3.js is often more verbose than other alternatives, yet it gives you the most control over all aspects of your visualization.
D3 is free and open source. If you find the project fun, give them a Star ⭐️ on GitHub! They are currently at over 108k stars!
3. Chart.js: Flexible JavaScript library for HTML-based charts
Website: https://www.chartjs.org
Currently one of the most popular charting libraries on the block, also one of the easiest charting libraries to use. Majorly known for its rendition through the use of Canvas, unlike some charting libraries that render their data exclusively as SVG.
Key Features of Chart.js
- Performance: Chart.js can accept an internal data structure that reduces the need for parsing and normalization, increasing performance. You can also configure data decimation to reduce the size of the dataset before rendering it, to make it faster. The use of canvas compresses the toll on the DOM tree; this helps to minimize the size of the Chart.js code in the bundle, which results in faster load times.
- Accessibility: Compared to most charting libraries, Chart.js has a very straight-forward approach, knowing fully well that everything you do runs on canvas. You don’t need complex customization, as it allows you to use any of its customization options for styling, themes, etc.
- Great developer experience: Apart from having a very great community presence, Chart.js has straightforward documentation that gets updated frequently when there’s something new on the block. It also provides integrations with your favourite JavaScript frameworks such as React, Svelte, etc.
- Chart responsiveness: By default, Chart.js provides responsive charts. You can automatically adjust your screen to different sizes, and it gives the chart an adjustable size. It ensures you have a good visualization of data across all devices.
How to use Chart.js 👀
Chartjs can be installed via npm or directly downloaded at runtime via a cdn:
<div>
<canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
If you find this project to be very cool, you can go ahead and give it a Star ⭐️ on GitHub! They are currently at over 63k stars.
4. Apache ECharts: JavaScript visualization tool for fast construction of charts
Website: https://echarts.apache.org
ECharts is an open-source data visualization library that has been gaining popularity lately. It's built by the popular Apache foundation and relies on ZRender for the rendition of its graphics. It's more complex compared to others; it only renders dynamic data and has different ways of displaying it.
Key Features of ECharts
- Wide Range of Chart Types: ECharts supports a vast array of chart types, more than most other competitors in fact. These include bar charts, line charts, pie charts, scatter plots, maps, radar charts, boxplots, heatmaps, parallel coordinates, sankey diagrams, and more. This versatility allows users to visualize data in numerous formats.
- Interactivity: One of the standout features of ECharts is its rich interactivity. It includes built-in support for interactive elements such as tooltips, zooming, panning, and data highlighting. Users can interact with the visualizations to gain deeper insights into the data.
- Performance: ECharts is designed for high performance, capable of handling large datasets efficiently. It leverages Canvas and WebGL for rendering, which are more performant than traditional SVG-based rendering for complex visualizations and large data volumes.
How to get started with Apache ECharts 👀
Install echarts with npm:
npm install echarts
The following code snippet created a simple bar chart in a DOM element with id #chart :
// Import ECharts
import * as echarts from 'echarts';
// Initialize the chart
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option;
// Specify the chart configuration
option = {
title: {
text: 'Simple Bar Chart'
},
tooltip: {},
xAxis: {
data: ['A', 'B', 'C', 'D', 'E', 'F']
},
yAxis: {},
series: [
{
name: 'Value',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// Use the specified chart configuration
option && myChart.setOption(option);
If you find this project very interesting, you can give it a Star ⭐️ on GitHub, they are currently at almost 60k Stars!
5. Nivo: A library for building chart apps in React
Website: https://nivo.rocks
Nivo is a high-level, open-source JavaScript library for creating data visualizations, designed specifically to work with React. It’s built on top of D3, it provides a wide range of chart types and comes with built-in theming, interactivity, and responsive design. Here are some key features and aspects that make Nivo a popular choice for data visualization in React applications:
Key Features of Nivo
- Ease of Use: Nivo is designed to be more user-friendly and easier to use than alternatives like D3.js. It provides a higher level of abstraction, making it easier to create complex charts without deep knowledge of SVG or DOM manipulation.
- React integration: Nivo is built specifically for React, making it an excellent choice for developers working within the React ecosystem. It leverages React's component-based architecture for easy integration and reuse.
- Theming and Responsiveness: Nivo includes built-in support for theming and responsive design, making it easier to create charts that look good on different devices and match the application's design.
How to get Started with Nivo 👀
Getting started with Nivo is easy if you're a React developer. Install the nivo core package as well as the relevant chart-specific library of your choice. In this case, we are implementing a bar chart:
yarn add @nivo/core @nivo/bar
Once completed, import the relevant chart component and use it in your React environment:
import { Bar } from '@nivo/bar';
const MyBarChart = () => {
const salesData = [
{
"category": "Electronics",
"value": 5000
},
{
"category": "Clothing",
"value": 3000
},
{
"category": "Furniture",
"value": 2500
}
];
return (
<Bar
data={salesData}
indexBy="category"
maxValue={6000}
keyBy="id"/>
);
};
export default App;
Nivo is open source and you can star their project on GitHub – they're currently over 12k stars!
6. Plotly: Open-source charting library for different tech stacks
Website: https://plotly.com
Plotly is an open-source data visualization library that supports a wide range of chart types and interactive features. It is available for use in several programming languages, including Python, R, and JavaScript. Plotly.js, the JavaScript version of the library, is built on top of D3 and is widely used for creating interactive web-based visualizations.
Key Features of Plotly
- Support for different programming languages: Plotly supports different languages, unlike many other chart libraries that support one language. It lets you use whatever language you're comfortable with for visualizing data as charts. Here is the full list.
- Complex chart types: Plotly abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB.
- Portable: Plotly charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes. This allows plotly to use the same configuration across all its different language implementations.
- Performance: Plotly mostly uses SVG for its charts but it can also leverage webGL in order to render high-performance visualizations.
How to get started with Plotly 👀
As previously mentioned, Plotly can be used with several programming languages but in this example we’ll focus on Javascript.
First, install the relevant npm package:
npm install plotly.js-dist
Then, in your html create an empty div element to draw the graph in:
<div id="tester" style="width:600px;height:250px;"></div>
Finally, write the following to plot a simple line chart:
const TESTER = document.getElementById('tester');
Plotly.newPlot( TESTER, [{
x: [1, 2, 3, 4, 5],
y: [1, 2, 4, 8, 16] }], {
margin: { t: 0 } }
);
If you find Plotly to be a good tool, you can do well to give it a star and contribute to their project on GitHub.
7. Victory: React components for charting and data visualization
Website: https://commerce.nearform.com/open-source/victory
Victory is an open-source, modular charting library for React and React Native. It provides a simple and elegant API for creating a wide range of data visualizations. Similarly to Nivo, Victory leverages the strengths of React, making it a natural choice for developers who are already familiar with the React ecosystem.
Key Features of Victory JS
- Same API for React and React Native: Victory is built specifically for React and React Native, allowing seamless integration into web and mobile applications.
- Ease-of-use: Victory’s declarative, component-based API makes it simple to start adding visualizations to your React applications, specially when compared to other imperative approaches like D3’s.
- Interactivity: Victory offers out-of-the-box tooltips, support for events and complex animations in order to make visualizations feel more alive.
How to get started with Victory
First, install the npm package:
npm install victory
Then, import the relevant component you would like to use, depending on your needs. For example:
import React from 'react';
import { VictoryBar } from 'victory';
const data = [
{quarter: 1, earnings: 13000},
{quarter: 2, earnings: 16500},
{quarter: 3, earnings: 14250},
{quarter: 4, earnings: 19000}
]
function App() {
return (
<VictoryBar
data={data}
// data accessor for x values
x="quarter"
// data accessor for y values
y="earnings"
/>
}
If you find Victory cool, you can go ahead and give the project a star on GitHub. They are currently at over 10,000 stars
Conclusion
Congratulations on making it this far!
In this article, we’ve covered 7 charting libraries to explore this year. We've gone beyond a simple overview, discovering how each library works, its underlying architecture, and the technologies used to build it. Additionally, we've learned how to get started with incorporating these libraries into your projects.
Before we part ways, consider showing your support by giving us a star on GitHub if you found this article helpful. Thanks for reading, and I look forward to having you on board for the next article! 👋
