​
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.
labelsvalues
Drinks145
Snacks539
Fruits987

​
Syntax

You can use <PieChart ... /> to add it to your view. Within the tag you must add the properties to configure the chart. 
<PieChart
    query='titles-type'
    x='type'
    y='count'
    title='Titles by type'
    config={{
        showHole: true
    }}
/>

​
Properties

To configure and customize the chart, you can add properties, some of which are required and some of which are optional.
​
query
string
required
The name of your .sql file from which your chart will get the data. It’s not necessary to specify the full path, just the name, because we will search all folders until we find it
​
height
number
Specifies the height of the chart in px. You must enclose the number in brackets like height={720}. The default value is 400px.
​
width
number
Specifies the width of the chart in px. You must enclose the number in brackets like width={480}. By default it takes the 100% or the available width.
​
config
object
Contains some options to customize your chart.See the Config section to learn more about the options.
​
opts
object
Includes options to control the behavior of the chart. For example, react to changes in the parameters to update the data immediately.See the Reactive To Params section to learn more about it.

​
Config

​
showLabels
boolean
Display the category name directly on the chart.
​
showHole
boolean
Display a circular space withing the pie allowing to show the total sum of the values.
​
showTotalValue
boolean
When the showHole property is true allow to show the total sum of the values.
​
showLegend
boolean
Display the color legend for each series displayed.
​
showDecal
boolean
Add a visual pattern to each series to help colorblind people distinguish them.

​
Reactive To Params

Within the opts property we can include some options to modify the behavior of the chart. At the moment only the reactToParams option is available.
​
reactToParams
boolean
If true, the chart will react to any change in the params to update the data displayed without the need to run the view manually.
<PieChart
    query='titles-type'
    x='type'
    y='count'
    title='Titles by type'
    opts={{
        reactToParams: true
    }}
/>