{"id":17764,"date":"2019-12-20T13:04:27","date_gmt":"2019-12-20T13:04:27","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=17764"},"modified":"2023-02-05T18:25:30","modified_gmt":"2023-02-05T18:25:30","slug":"jetelements-how-to-create-a-doughnut-chart","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/","title":{"rendered":"How to Create a Doughnut Chart"},"content":{"rendered":"\n<p>A doughnut chart shows the relationship of parts to a whole which makes it easier for visitors to read at a glance. It\u2019s better to display only a few categories at once. One more neat way to showcase statistics data on your website is a doughnut chart.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>1<\/span> Step<\/b> <strong>\u2014 Working with chart data<\/strong><\/p>\n\n\n\n<p>Open Elementor editor. Find the <strong>Pie Chart<\/strong> widget. Drag and drop it to the page. Open the <strong>Chart Data<\/strong> accordion block and create as many sections of your chart as you need by clicking the <strong>Add Item<\/strong> button. Give each item a <strong>Label<\/strong> set the <strong>Value<\/strong> and assign an appropriate <strong>Color<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/chart-data-section-sett.png\" alt=\"Chart Section settings\" class=\"wp-image-20926\"\/><\/div>\n\n\n\n<p>Name the chart in the <strong>Chart Title<\/strong> field and define its position in the <strong>Title Position<\/strong> dropdown.<\/p>\n\n\n\n<p class=\"style-title-numecal\"><b><span>2<\/span> Step<\/b> <strong>\u2014 Adjusting chart settings<\/strong><\/p>\n\n\n\n<p>Open the <strong>Settings<\/strong> accordion block and first of all set the chart height in the respective field. In order to make your chart look like a <strong>Doughnut<\/strong> chart, increase the <strong>Cutout Percentage<\/strong> which will be cut out of the middle of the chart.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/12\/dougnat-chart-settings.png\" alt=\"Doughnut Chart Settings\" class=\"wp-image-21002\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>3<\/span> Step<\/b> <strong>\u2014 Animating the widget<\/strong><\/p>\n\n\n\n<p>Set the animation duration with the help of the corresponding option. Select the animation in the <strong>Easing<\/strong> dropdown list. Toggle the <strong>Animate Scale<\/strong> to <strong>Yes<\/strong> if you want to animate scaling the chart from the center outwards.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/12\/dougnat-chart-settings-2.png\" alt=\"Doughnut Chart Settings\" class=\"wp-image-21003\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>4<\/span> Step<\/b> <strong>\u2014 The legend of the Chart<\/strong><\/p>\n\n\n\n<p>Move on to the <strong>Legend<\/strong> block where you have to decide if you want the legend to be seen. If yes, then switch on the Display option. Define the position of the legend in the Position dropdown list, which can be Top, Bottom, Left, or Right. Toggle the Reverse option to Yes if you want the legend to be showcased in reverse order. Enable the Tooltips option if you want the legend to be shown on hover.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/12\/dougnat-chart-settings-3.png\" alt=\"Doughnut Chart Settings\" class=\"wp-image-21004\"\/><\/div>\n\n\n\n<p class=\"style-title-numecal\"><b><span>4<\/span> Step<\/b> <strong>\u2014 Styling<\/strong><\/p>\n\n\n\n<p>Finally, open the <strong>Style<\/strong> tab and style up the widget.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/12\/elementor-doughnut-chart.png\" alt=\"elementor doughnut chart\" class=\"wp-image-17773\"\/><\/div>\n\n\n\n<p>Congratulations on your first doughnut chart with Crocoblock!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, you will learn how to create a Doughnut chart with the help of the Pie Chart widget from JetElements.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[515],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetElements: Master Doughnut Chart Functionality | Crocoblock<\/title>\n<meta name=\"description\" content=\"All you need to know on how to create a doughnut chart with Crocoblock. Step by step.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetElements: Master Doughnut Chart Functionality | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"All you need to know on how to create a doughnut chart with Crocoblock. Step by step.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-05T18:25:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/chart-data-section-sett.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/\",\"name\":\"JetElements: Master Doughnut Chart Functionality | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-12-20T13:04:27+00:00\",\"dateModified\":\"2023-02-05T18:25:30+00:00\",\"description\":\"All you need to know on how to create a doughnut chart with Crocoblock. Step by step.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Doughnut Chart\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JetElements: Master Doughnut Chart Functionality | Crocoblock","description":"All you need to know on how to create a doughnut chart with Crocoblock. Step by step.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/","og_locale":"en_US","og_type":"article","og_title":"JetElements: Master Doughnut Chart Functionality | Crocoblock","og_description":"All you need to know on how to create a doughnut chart with Crocoblock. Step by step.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/","og_site_name":"Help Center","article_modified_time":"2023-02-05T18:25:30+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/chart-data-section-sett.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/","name":"JetElements: Master Doughnut Chart Functionality | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-12-20T13:04:27+00:00","dateModified":"2023-02-05T18:25:30+00:00","description":"All you need to know on how to create a doughnut chart with Crocoblock. Step by step.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetelements\/jetelements-how-to-create-a-doughnut-chart\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Doughnut Chart"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/17764"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=17764"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=17764"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=17764"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}