Pie Chart
How to create and configure the Pie chart
Introduction
A pie chart visualizes data as proportional segments of a circle. It makes easier to see relative sizes of categories at a glance, ideal for highlighting distribution and composition.
Preparation
The query .sql file that the Pie Chart accepts must contain only 2 columns, one for the labels and another one for the values.
| type | count |
|---|---|
| MOVIE | 3309 |
| SHOW | 1967 |
Syntax
You can use either PieChart or QueryPieChart to visualize query results in a chart.
Use QueryPieChart when you want the component to automatically handle the query fetching.
Use PieChart when you already fetched the data using useQuery.
Properties
Depending on the component you choose, you can pass the following properties:
Query configuration
The path to the query file that will provide the data displayed in the table.
An object with custom parameters to be used in the query.
A flag to enable the download of the table data as a CSV file.
Contains some additional options to customize your chart.
See the Config section to learn more about the options.
Config
Display the category name directly on the chart.
Display a circular space withing the pie allowing to show the total sum of the values.
When the showHole property is true allow to show the total sum of the values.
Display the color legend for each series displayed.
Add a visual pattern to each series to help colorblind people distinguish them.