Create Svg Pie Chart With Javascript

In 2023, creating graphs and diagrams using JavaScript is becoming more and more popular. With the help of libraries like D3.js and Raphaël, developers can easily create SVG pie charts without having to write a single line of code. The advantage of using SVG is that it is a vector graphic format which can be scaled without any loss of quality. In this guide, we will learn how to create an SVG pie chart with JavaScript.

Table of Contents

Why Use SVG Pie Charts?

SVG pie charts are becoming increasingly popular due to their scalability, responsiveness, and animation capabilities. SVG graphics, unlike bitmap images, are resolution independent; meaning that they can be scaled up and down without any loss of quality. This makes SVG pie charts the ideal choice for displaying data on the web. Additionally, SVG pie charts can be animated to make the data more dynamic and engaging. Finally, SVG pie charts are responsive and can be embedded into mobile applications and webpages.

How to Create an SVG Pie Chart with JavaScript

There are several libraries available for creating SVG pie charts with JavaScript. In this guide, we will be using the popular D3.js library. D3.js is a powerful and versatile library that can be used to create a wide variety of data visualizations. The first step is to include the D3 library in your webpage. You can either use a CDN or download the library and include it in your project:

1. Include the D3 Library in Your Webpage

Including the D3 library in your webpage is a simple task. If you are using a CDN, you can add the following code to your HTML head section:

If you are downloading the library, you can include it in your HTML head section like this:

2. Create the SVG Element

Next, we need to create an SVG element that will be used to render the pie chart. The SVG element will be created using the D3.select() method. This method takes a CSS selector as an argument and returns an SVG element. We can then use the .append() method to add the SVG element to the DOM:

let svg = d3.select("#chart")
 .append("svg")
 .attr("width", width)
 .attr("height", height);

In the above code, we are creating an SVG element with a width and height of 400. We are also setting the id attribute of the SVG element to “chart”.

3. Create the Pie Chart Data

Next, we need to create the data that will be used to generate the pie chart. The data should be an array of objects with the following properties:

label: The label for the pie chart slice.
value: The value of the pie chart slice.

An example of the data we need to create is shown below:

const data = [
 { label: "A", value: 10 },
 { label: "B", value: 5 },
 { label: "C", value: 7 },
 { label: "D", value: 15 }
 ];

4. Create the Pie Chart

Once we have our data ready, we can use the D3.pie() method to generate the pie chart. This method takes the data array as an argument and returns an array of objects which represent the pie chart slices. We can then use the .arc() method to generate the SVG paths for each of the pie chart slices:

let pie = d3.pie()
 .value(d => d.value)(data);
 
 let arc = d3.arc()
 .innerRadius(0)
 .outerRadius(radius);
 
 let arcs = svg.selectAll("g.arc")
 .data(pie)
 .enter()
 .append("g")
 .attr("class", "arc")
 .attr("transform", `translate(${radius}, ${radius})`);

The above code generates the SVG paths for each of the pie chart slices. Now, we can use the .append() method to add the SVG paths to the SVG element:

arcs.append("path")
 .attr("fill", (d, i) => color(i))
 .attr("d", arc);

5. Add Labels to the Pie Chart

Finally, we can add labels to the pie chart. Labels will make it easier to interpret the pie chart. We can use the .append() method to add the labels to the SVG element:

arcs.append("text")
 .attr("transform", d => `translate(${arc.centroid(d)})`)
 .attr("text-anchor", "middle")
 .text(d => d.data.label);

In the above code, we are using the .centroid() method to get the center of each pie chart slice. We are then using the .text() method to add the labels to the SVG element. And that’s it! We now have a fully-functional SVG pie chart.

Conclusion

In this guide, we learned how to create an SVG pie chart with JavaScript. We used the D3.js library to generate the pie chart, and we used the .arc() and .centroid() methods to generate the SVG paths and labels. With the help of libraries like D3.js, creating data visualizations with JavaScript is becoming easier and easier. We hope this guide has been helpful in getting you started with creating SVG pie charts.