In this tutorial, we will be visualizing data about the global market share of the top online music streaming platforms. It is a good example of information that can be nicely represented in a donut chart.
To make sure we are on the same page, let’s first see what a donut chart is and then get down to charting straight away!
Basically, donut charts (or doughnut charts) are pie charts with a cut-out area of the center which can be filled with additional information. They are frequently used as a way to visualize the proportions of categorical data.
In a donut chart, the size of each slice (or piece) depicts how much of the total each category represents. Consequently, this type of data visualization can help you quickly understand the proportional composition of a variable.
As a rule of thumb, the number of categories visualized in a donut chart graphic should be limited to a few to keep the representation uncluttered and avoid legibility issues.
Take a look at how the JS donut chart will turn out at the end of this tutorial. And it will be interactive!
A beautiful JS donut chart can be built in just four easy steps. Isn’t that music to our ears?
- Create an HTML page.
- Add the data.
- Write some JS charting code.
The first thing we do is create a basic HTML page with a block element designed to hold the donut chart.
To identify this
<div> later in the code, we give it an id attribute. Let it be just “container” this time.
We also specify the
height parameters inside the
<style> block as “100%” so the donut chart fills the whole page.
In this tutorial, we are using the AnyChart JS library. It is a lightweight, strong, and flexible solution for interactive data visualization. AnyChart is also great for beginners because of extensive and detailed documentation and a whole lot of chart examples with the source code that can be played with on the dedicated playground.
<head> section of the HTML page.
A donut chart is a simple chart type that requires a straightforward and limited dataset. So, although AnyChart supports multiple ways to load data, we will just pass the data directly in a hassle-free manner.
For this tutorial, I decided to take data on the market share of the leading music streaming apps, which I collected from the Business of Apps website. So, I am just adding it as shown below:
var data = anychart.data.set([ ['Spotify', 34], ['Apple Music', 21], ['Amazon Music', 15], ['Tencent apps', 11], ['YouTube Music', 6], ['Others', 13] ]);
The first thing we do is add a function enclosing all the code, which makes sure that the code inside it will only execute once the page is ready.
Donut charts are very straightforward to create with an appropriate JS library and in this case, it will actually be just a couple of lines of code!
As we have learned just above, a donut chart is fundamentally a pie chart with a hole, like a ring all in all. So, we simply create a pie chart instance and give it an inner radius value to make it a donut chart.
// create a pie chart with the data var chart = anychart.pie(data) // set the chart radius making a donut chart chart.innerRadius('55%');
Then we give our donut chart a title and set the container id before finally drawing the resulting visualization.
chart.title('Music Streaming Apps Global Market Share') chart.container('container'); chart.draw();
Notice that the legend was created automatically. Also, go ahead and click on its items or any piece to see the cool interactive donut slicing behavior.
This donut chart distinctly shows that Spotify is the global leader and that Spotify and Apple Music together hold more than half of the market of music streaming apps.
Now, let’s customize our donut chart to make it look even cooler and communicate the insights in a clearer manner (like shown in the preview at the beginning of the article):
- Change the color palette.
- Add labels.
- Improve the tooltip.
- Add details to the center of the donut.
CONTINUE READING HERE FOR A WALKTHROUGH OF THESE JS DONUT CHART CUSTOMIZATIONS