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 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. index.html Pie charts Pie charts comparison D3 pie chart Chart.js pie chart Echart pie chart <!DOCTYPE html> < = > html lang "en" < > head < = /> meta charset "UTF-8" < > title </ > 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/echarts@5.2.1/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 </ > span </ > header < > section < = > div class "chart-widget" < = > div class "widget-header" < > span </ > span </ > div < = = = > div id "d3-chart" class "chart" style "padding: 90px" </ > div </ > div < = > div class "chart-widget" < = > div class "widget-header" < > span </ > 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 </ > 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 data element = .getElementById( ); width = ; height = ; margin = ; radius = .min(width, height) / - margin svg = d3.select(element)
    .append( )
    .attr( , width)
    .attr( , height)
    .attr( , )
    .append( )
    .attr( , + width / + + height / + ); color = d3.scaleOrdinal()
    .domain(data)
    .range([ , , ]); pie = d3.pie()
    .value( { d[ ].value;
    }) data_ready = pie( .entries(data)) arcGenerator = d3.arc()
    .innerRadius( )
    .outerRadius(radius) svg
    .selectAll( )
    .data(data_ready)
    .enter()
    .append( )
    .attr( , arcGenerator)
    .attr( , { (color(d.data[ ].name))
    })
    .attr( , )
    .style( , )
    .style( , ) svg
    .selectAll( )
    .data(data_ready)
    .enter()
    .append( )
    .text( { d.data[ ].name
    })
    .attr( , { + arcGenerator.centroid(d) + ;
    })
    .style( , )
    .style( , ) import from '../data/data.js' const document 'd3-chart' // setting up dimensions and margins const 400 const 400 const 10 // setting up the radius of the pie var Math 2 const "svg" "width" "height" "style" "margin-top: -32px !important" "g" "transform" "translate(" 2 "," 2 ")" // setting up the color scale const "#6b5b95" "#feb236" "#d64161" // setting up the position of each group on the pie: const ( ) function d return 1 const Object // building arcs const 0 // building the pie chart 'slices' 'path' 'd' 'fill' ( ) function d return 1 "stroke" "black" "stroke-width" "2px" "opacity" 0.7 // adding titles to pie slices 'slices' 'text' ( ) function d return 1 "transform" ( ) function d return "translate(" ")" "text-anchor" "middle" "font-size" 20 Output: Chart.js data ctx = .getElementById( ).getContext( ); values = [];

data.forEach( {
    values.push(item.value);
}) myChart = Chart(ctx, { : , : { : [ , , ], : [{ : values, : [ , , ,
            ], : [ , , ,
            ], : }]
    }, : { : },
}); import from '../data/data.js' const document 'chartjs-chart' '2d' const ( ) function item // building pie chart by just passing configuration object const new type 'pie' data labels 'Value 1' 'Value 2' 'Value 3' datasets data 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 data myChart = echarts.init( .getElementById( ), , { : , : }); option = { : [
        { : , : data, : }
    ]
}; myChart.setOption(option); import from '../data/data.js' var document 'echart-chart' null width 900 height 700 // adding configuration object var series type 'pie' data radius '50%' // building pie chart by using configuration object. 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

Data Visualization for Dummies: 3 Simple Charts with <70 Lines of Code

Debugging Angular Applications: The Tool You Need to Know

Nominated for 2022 - HackerNoon Contributor of the Year - Angular

Nominated for 2022 - HackerNoon Contributor of the Year - Data Visualization

Nominated for 2022 - HackerNoon Contributor of the Year - Frontend

Too Long; Didn't Read

Get Free Unlimited IP Geo Data With IPinfo Lite

Top 3 Free JavaScript Libraries for Data Visualization

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

3 Things You Will Love About Micro Frontends

Build a realtime voting app in less than 10 min

Creating a Chart JS Scatter Diagram Using 2 Datasets

Real-time Chart in JavaScript with ChartJS and Hamoni Sync

10 Resources That’ll Make You Better At Dashboard Creation

3 Things You Will Love About Micro Frontends

Build a realtime voting app in less than 10 min

Creating a Chart JS Scatter Diagram Using 2 Datasets

Real-time Chart in JavaScript with ChartJS and Hamoni Sync

10 Resources That’ll Make You Better At Dashboard Creation

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps