​
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.
typecount
MOVIE3309
SHOW1967

​
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. 
import { QueryPieChart } from '@latitude-data/react';

function MyComponent() {
  return (
    <QueryPieChart
      queryPath='titles'
      params={{
        start_year: 2010,
        end_year: 2014
      }}
      x='type'
      y='count'
      config={{
        showHole: true
      }}
    />
  );
}

​
Properties

Depending on the component you choose, you can pass the following properties:

​
Query configuration

​
queryPath
string
required
The path to the query file that will provide the data displayed in the table.
​
params
object
An object with custom parameters to be used in the query.
​
download
boolean
A flag to enable the download of the table data as a CSV file.
​
config
object
Contains some additional options to customize your chart.See the Config section to learn more about the options.

​
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.