Advanced Component Circular Chart
Intro
Circular charts or progress bars visually represent data, offering a clear and intuitive understanding of proportions or progress. With the outer circumference representing 100%, these graphics provide a dynamic and aesthetically pleasing way to convey information, enhancing comprehension in presentations and reports.
In this video tutorial you will learn how to display data in the form of a circular chart/circular progress bar.
1. Create a Circular Chart
Go to Components and choose Circular Gauge Chart and drag-and-drop it where you prefer. Open its Settings and configure them as per your use case with the collection to fetch data from, series data and label (optional) and Save.
2. Preview the Changes
Reload the Preview page and you will find the data in the circular chart format.
3. Change Chart Attribute
You can change the chart's attribute to round, sqaure and so on as per your need. For this click on the chart Settings and choose from the download of Stroke LineCap and Save.
4. Preview the Changes
Reload the Preview page and you will find the changed attribute (shape) of the chart.
5. Change Chart Height
You can change the chart's attribute to round, sqaure and so on as per your need. For this click on the chart Settings and choose its Height and Save.
6. Preview the Changes
Reload the Preview page and you will find the changed height of the chart.
7. Change Chart Strokes
You can change the chart's attribute to round, sqaure and so on as per your need. For this click on the chart Settings and choose its Stroke Dash Array and Save.
8. Preview the Changes
Reload the Preview page and you will find the chart with strokes.
Conclusion
One benefit of displaying data in the form of a circular chart or progress bar is enhanced visual comprehension, allowing for a quick and intuitive understanding of proportions or progress.