​
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
    }}
/>
Mixed Types ChartFunnel Chart