{"id":23070,"date":"2023-02-02T13:00:54","date_gmt":"2023-02-02T13:00:54","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=23070"},"modified":"2026-01-13T11:26:17","modified_gmt":"2026-01-13T11:26:17","slug":"donut-chart-race","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/donut-chart-race\/","title":{"rendered":"Donut chart race"},"content":{"rendered":"<p>A donut chart race, or a pie chart race,  is another great chart to illustrate continuous or categorical data proportion over time. Using Javascript and Highcharts library, it is super easy to create an interactive donut chart race.<\/p>\n<p>In this article, I will show you how to create an interactive donut race chart (see demo below):<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%; height: 750px; border: none;\" title=\"The donut race chart above visualizes the nuclear energy production from 1965 to 2021 in the US, UK, France, and Japan.\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/demo\/donut-race\"><\/iframe><\/p>\n<p>The donut race chart above visualizes the nuclear energy production from 1965 to 2021 in the US, UK, France, and Japan.<\/p>\n<p>A donut race chart offers the following advantages: easy understanding, effectively showing proportion, comparisons between categories, visual interest, and dynamic presentation. <\/p>\n<p>Let\u2019s dive into the code to see how you can create such a powerful chart.<\/p>\n<p>The code behind this demo is quite similar to the previous article, bar chart race. I highly recommend reading the bar chart race since it describes the code in very thorough detail, which I will not cover all the details in this article. If you have already read it, well, enjoy the following paragraphs.<\/p>\n<p>Let\u2019s start \ud83d\ude42<br \/>\nI am collecting the JSON dataset using the fetch API that comes with the native JavaScript <code>dataset = await fetch(..<\/code>.<br \/>\nThe dataset is a mixture of the nuclear energy produced and years of production:<\/p>\n<pre>\"1965\": \"20.0231569\",\r\n\"1966\": \"28.2714305\",\r\n\"1967\": \"35.26512\",\r\n\"1968\": \"45.27281\",\r\n...<\/pre>\n<p>I extract the year part with the function <code>getSubtitle()<\/code> to display it in the donut&#8217;s center:<\/p>\n<pre>function getSubtitle() {\r\n  const totalNumber = getData(input.value)[0][1].toFixed(2);\r\n  return `&lt;span style=\"font-size: 80px\"&gt;${input.value}&lt;\/span&gt;\r\n        &lt;br&gt;\r\n        &lt;span style=\"font-size: 22px\"&gt;\r\n            Total: &lt;b&gt; ${totalNumber}&lt;\/b&gt; TWh\r\n        &lt;\/span&gt;`;\r\n}<\/pre>\n<p>The rest of the dataset (nuclear energy produced) is extracted by this function <code>getData()<\/code>:<\/p>\n<pre>function getData(year) {\r\n  const output = Object.entries(dataset).map(country => {\r\n    const [countryName, countryData] = country;\r\n    return [countryName, Number(countryData[year])];\r\n  });\r\n  return [output[0], output.slice(1, nbr)];\r\n}<\/pre>\n<p>The rest of the functions I just borrowed from the bar race chart with no modifications, such as:<\/p>\n<pre>function pause(button)\r\nfunction update(increment)\r\nfunction play(button)\r\nbtn.addEventListener()\r\ninput.addEventListener()<\/pre>\n<p>I faced some challenges using the labels since the library reserves space for the data labels, but when the data labels move around, this ends up in the shaky chart where the donut keeps resizing. To overcome this challenge, I had to make some modifications in the option section, by setting the <code>connectorWidth<\/code> option to zero and bringing the label to the donut area. The plotOptions looks like:<\/p>\n<pre>plotOptions: {\r\n  series: {\r\n    borderWidth: 0,\r\n    colorByPoint: true,\r\n    type: 'pie',\r\n    size: '100%',\r\n    innerSize: '80%',\r\n    dataLabels: {\r\n      enabled: true,\r\n      distance: -20,\r\n      style: {\r\n        fontWeight: 'bold',\r\n        fontSize: '16px'\r\n      },\r\n      connectorWidth: 0\r\n    }\r\n  }\r\n},<\/pre>\n<p>With these modifications, this design is stable since the donut size is the same at all times.<\/p>\n<p>Now, you know how to create a pie race chart, a handy chart to show trends, changes, and comparisons, with all the benefits of an animated chart.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A step by step tutorial to create a donut chart race with Highcharts.<\/p>\n","protected":false},"author":32,"featured_media":23085,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,1031],"coauthors":[699],"class_list":["post-23070","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-javascript"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=23070"}],"version-history":[{"count":2,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23070\/revisions"}],"predecessor-version":[{"id":24076,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/23070\/revisions\/24076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/23085"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=23070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=23070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=23070"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=23070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}