Back to contents

JetElements: How to create a Doughnut chart

In this tutorial, you will learn how to create a Doughnut chart with the help of the Pie Chart widget from JetElements.

A doughnut chart shows the relationship of parts to a whole which makes it easier for visitors to read at a glance. It’s better to display only a few categories at once. One more neat way to showcase statistics data on your website is a doughnut chart.

Creating a doughnut chart

1 Step — Working with chart data

Open Elementor editor. Find the Pie Chart widget. Drag and drop it to the page. Open the Chart Data accordion block and create as many sections of your chart as you need by clicking the Add Item button. Give each item a Label, set the Value and assign an appropriate Color.

text meta field for the video format

Name the chart in the Chart Title field and define its position in the Title Position dropdown.

text meta field for the video format

2 Step — Adjusting chart settings

Open the Settings accordion block and first of all set the chart height in the respective field. In order to make your chart look like a Doughnut chart, increase the Cutout Percentage which will be cut out of the middle of the chart.

text meta field for the video format

3 Step — Animating the widget

Set the animation duration with the help of the corresponding option. Select the animation in the Easing dropdown list. Toggle the Animate Scale to Yes if you want to animate scaling the chart from the center outwards.

text meta field for the video format

4 Step — The legend of the Chart

Move on to the Legend 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 to the legend to be shown on hover.

text meta field for the video format

4 Step — Styling

Finally, open the Style tab and style up the widget.

text meta field for the video format

Congratulations on your first doughnut chart with Crocoblock!