Pie and Donut Charts
index.html
script.js
Pie and donut charts are essential for visualizing proportions and comparing parts of a whole. With ECharts, you can create both types of charts using the pie series, but their appearance and configuration options allow for clear distinction and customization.
To create a pie chart, set the type to "pie" within the series array. The data property should include an array of objects, each with a value and a name to represent each category. The radius property controls the size of the pie. For a standard pie chart, use a single percentage value such as "70%" for the radius. The label property allows you to format the text shown on each slice. For example, using the formatter '{b}: {d}%' displays the category name and its percentage. You can further enhance the chart by customizing colors with the color array and adding a legend for clarity.
To create a donut chart, you still use the pie series type, but set the radius property as an array with two values, such as ['50%', '75%']. This creates a hole in the center, giving the chart its characteristic donut appearance. The inner and outer percentages control the thickness of the donut. Label formatting works the same way, and you can use the legend and color options to match your dashboard's style.
Customizing colors helps distinguish categories and improves readability. The color array lets you assign a specific palette to match your branding or to highlight certain data. Adjusting label formatting with placeholders like {b} for the name and {d} for the percentage lets you control how much detail is shown on each slice.
Pie and donut charts are ideal when you want to emphasize proportions, such as sales distribution or device usage. By fine-tuning the configuration, label formatting, and colors, you can create visually appealing charts that communicate data clearly on your dashboard.
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me an example ECharts configuration for a pie chart?
How do I customize the labels on a donut chart?
What are some best practices for choosing colors in pie and donut charts?
Awesome!
Completion rate improved to 8.33
Pie and Donut Charts
Swipe to show menu
index.html
script.js
Pie and donut charts are essential for visualizing proportions and comparing parts of a whole. With ECharts, you can create both types of charts using the pie series, but their appearance and configuration options allow for clear distinction and customization.
To create a pie chart, set the type to "pie" within the series array. The data property should include an array of objects, each with a value and a name to represent each category. The radius property controls the size of the pie. For a standard pie chart, use a single percentage value such as "70%" for the radius. The label property allows you to format the text shown on each slice. For example, using the formatter '{b}: {d}%' displays the category name and its percentage. You can further enhance the chart by customizing colors with the color array and adding a legend for clarity.
To create a donut chart, you still use the pie series type, but set the radius property as an array with two values, such as ['50%', '75%']. This creates a hole in the center, giving the chart its characteristic donut appearance. The inner and outer percentages control the thickness of the donut. Label formatting works the same way, and you can use the legend and color options to match your dashboard's style.
Customizing colors helps distinguish categories and improves readability. The color array lets you assign a specific palette to match your branding or to highlight certain data. Adjusting label formatting with placeholders like {b} for the name and {d} for the percentage lets you control how much detail is shown on each slice.
Pie and donut charts are ideal when you want to emphasize proportions, such as sales distribution or device usage. By fine-tuning the configuration, label formatting, and colors, you can create visually appealing charts that communicate data clearly on your dashboard.
Thanks for your feedback!