780 reads

Top 3 Free JavaScript Libraries for Data Visualization

by Maksym Mostovyi October 10th, 2021

Too Long; Didn't Read

To summarise, if you need something quick and easy ECharts and Chartjs will work well. In case you need totally customized chart, D3 is the best pick.

Company Mentioned

featured image - Top 3 Free JavaScript Libraries for Data Visualization

Once it comes to data visualization in application development, the choice of the library becomes a tough decision. There are plenty of them, and here I will talk about the most popular ones which are free to use. Furthermore, I will compare them in practice by creating a simple pie chart using these libraries. So it is going to be easy to compare them and their capabilities. Let's start.

My top picks here:

D3.js
Chart.js
ECharts

Setting up the environment

I created a small app that contains an

index.html

file with links to all needed libraries and a folder with charts split into different js files. Also, I added a separate file that contains dummy data for pie charts representation. Let's take a look at the HTML file first.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Pie charts</title>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
    <script type="module" src="charts/d3-chart.js" defer></script>
    <script type="module" src="charts/chartjs-chart.js" defer></script>
    <script type="module" src="charts/echart-chart.js" defer></script>
</head>
<body>
<header>
    <span>Pie charts comparison</span>
</header>
<section>
    <div class="chart-widget">
        <div class="widget-header">
            <span>D3 pie chart</span>
        </div>
        <div id="d3-chart" class="chart" style="padding: 90px"></div>
    </div>
    <div class="chart-widget">
        <div class="widget-header">
            <span>Chart.js pie chart</span>
        </div>
        <div class="chart" style="padding: 90px">
            <canvas id="chartjs-chart" width="450" height="450"></canvas>
        </div>
    </div>
    <div class="chart-widget">
        <div class="widget-header">
            <span>Echart pie chart</span>
        </div>
        <div class="chart">
            <div id="echart-chart"></div>
        </div>
    </div>
</section>
</body>
</html>

Everything is ready, time to start drawing the pie chart. After that, I will overview libraries based on the following examples.

D3.js

import data from '../data/data.js'

const element = document.getElementById('d3-chart');

// setting up dimensions and margins
const width = 400;
const height = 400;
const margin = 10;

// setting up the radius of the pie
var radius = Math.min(width, height) / 2 - margin

const svg = d3.select(element)
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("style", "margin-top: -32px !important")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// setting up the color scale
const color = d3.scaleOrdinal()
    .domain(data)
    .range(["#6b5b95", "#feb236", "#d64161"]);

// setting up the position of each group on the pie:

const pie = d3.pie()
    .value(function (d) {
        return d[1].value;
    })
const data_ready = pie(Object.entries(data))

// building arcs
const arcGenerator = d3.arc()
    .innerRadius(0)
    .outerRadius(radius)

// building the pie chart
svg
    .selectAll('slices')
    .data(data_ready)
    .enter()
    .append('path')
    .attr('d', arcGenerator)
    .attr('fill', function (d) {
        return (color(d.data[1].name))
    })
    .attr("stroke", "black")
    .style("stroke-width", "2px")
    .style("opacity", 0.7)

// adding titles to pie slices
svg
    .selectAll('slices')
    .data(data_ready)
    .enter()
    .append('text')
    .text(function (d) {
        return d.data[1].name
    })
    .attr("transform", function (d) {
        return "translate(" + arcGenerator.centroid(d) + ")";
    })
    .style("text-anchor", "middle")
    .style("font-size", 20)

Output:

Chart.js

import data from '../data/data.js'

const ctx = document.getElementById('chartjs-chart').getContext('2d');

const values = [];

data.forEach(function (item) {
    values.push(item.value);
})

// building pie chart by just passing configuration object

const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Value 1', 'Value 2', 'Value 3'],
        datasets: [{
            data: values,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: false
    },
});

Output:

ECharts

import data from '../data/data.js'

var myChart = echarts.init(document.getElementById('echart-chart'), null, {
    width: 900,
    height: 700
});

// adding configuration object
var option = {
    series: [
        {
            type: 'pie',
            data: data,
            radius: '50%'
        }
    ]
};

// building pie chart by using configuration object.
myChart.setOption(option);

Output:

Here is how the implementation looks with these libraries. Comparing them together, you can see that D3 is more complex in terms of the implementation of the simple pie chart. At the same time, with the other two libraries, it takes only several lines of code.

Conclusion

As you see in the examples above, Chartjs and ECharts are much easier to use and need only some lines of code to create a chart. It requires only the configurational object, and the chart is done. In D3, we need to write logic and describe each element of a chart. Wich takes more time, but on the other hand, I believe it gives us more flexibility in configuring the chart the way we want.

To summarise, if you need something quick and easy ECharts and Chartjs will work well. In case you need totally customized chart, D3 is the best pick.

Try it yourself! More examples of the charts can be found inside of documentation of mentioned libraries. Check it out. Also, the source code of the charts I've made you can find in my GitHub.