​
Introduction

An Area Chart visualizes quantitative data over time through filled areas below the line, highlighting volume and trends. It’s useful for comparing multiple data sets and understanding the relative significance of each.

​
Syntax

You can use <AreaChart ... /> to add it in your view. Within the tag you must add the properties to configure the chart.

<AreaChart
	query='sales_evolution'
    title="Total Sales Evolution"
    description="Total sales evolution over time for retail and online sales."
    x='created_at'
    y={[
		{name: 'sales_retail'},
		{name: 'sales_online'}
    ]}
    sort={{ column: 'sales_retail', order: 'asc' }}
    xTitle='Month'
    yTitle='Sales'
    config={{
        ...
    }}
/>

​
Properties

To configure and customize the chart, you can add properties, some of which are required and some of which are optional.

​
Query configuration

query
string
required

The path to the query file that will provide the data displayed in the visualization.

inlineParams
object

An object with custom parameters to be used in the query, in addition to the global parameters of the view.

opts
object

Includes options to control the behavior of the chart. For example, react to changes in the parameters to update the data immediately.

Refer to the Running queries section for more information about query configuration.

​
Data properties

x
string | array
required

Specify a column name to return from your query. This will be the data in the horizontal (x) axis.

See the section Axis X and Y to learn more about the options.

y
string | array
required

Specify the array of series you want to visualize. Each serie has the column name that your query and other properties.

See the section Axis X and Y to learn more about the options.

sort
string | object

Specify the order of the data returned by your query. It can be a string with the column name or an object with the column name and the order.

See the sort section to learn more about the sort options

sizeColumn
string

(Only for Scatter chart) The column to use for the size of the dots.

​
Style

title
string

The title of your chart.

description
string

You can add a brief description of your chart

bordered
boolean

If you want to wrap the chart in a bordered and rounded box set bordered to true in the chart properties.

xAxisFormat
object

It allows you to customize how the information is displayed in the given axis. It contains several options.

See the section xAxisFormat to learn more about the options.

yFormat
object

It allows you to customize how the information is displayed in the given axis. It contains several options.

See the section yFormat to learn more about the options.

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.

animation
boolean

Specifies whether or not to show an animation when the page loads.

xTitle
string

A custom name to display as the title of your (x) axis.

yTitle
string

A custom name to display as the title of your (y) axis.

swapAxis
boolean

Swap the axis orientation. Visually swap the (x) axis with the (y) axis.

config
object

Contains some options to customize your chart.

See the Config section to learn more about the options.

​
Advanced

​
Axis X and Y options

Both x and y can contain multiple data series, so instead of specifying just a column name, you need to create a list of series using the following properties:

name
string

Specify a column name returned by your query.

chartType
string

This prop tells the chart how to display the data. The options are:

  • line
  • bar
  • area

* If you are using <BarChart />, <LineChart />, <AreaChart /> this is not necessary. But if you’re using <MixedChart /> you can specify chartType in each series to display the data in different ways. And if you’re using <ScatterChart /> you don’t need to specify chartType because it’s the only option available.

axisIndex
string

Specifies the group within an axis. Imagine 3 series that belong to the left side of the Y-axis, 2 of them need one specific format but the rest need another. axisIndex helps to define different formats for series on the same side of the axis.

The options for this property are numbers: 0, 1, 2…

How this link to axisFormat is by the order of the object in the arra of axisFormat. 1 will be the second object in the list, 0 is the first object in the list…

Example of syntax for multiple series:

y={[
  { name: 'column_a' },
  { name: 'column_b', axisIndex: 0 },
  { name: 'column_c', axisIndex: 1 }
]}

​
Pivoted table

If you have a pivoted table where you have multiple columns with names like sum_users, sum_amount, sum_orders, (…) and you need to add all the columns without typing all the names you can use:

  • prefix_ + *
  • * + suffix

Example to add all columns starting wiht sum_:

y={[
  {name: 'sum_*'},
]}

​
Sort options

The order property can be a string with the column name or an object with the column name and the order.

column
string

The column name to order the data.

order
string

The column name to order the data. Options are: asc and desc

incomparable
string

When “numeric” is compared with “non-numeric-string”, or either of them is compared with other types of value, they are not comparable. So we call the latter one as “incomparable” and treat it as “min value” or “max value” according to the prop incomparable: ‘min’ | ‘max’. This feature usually helps to decide whether to put the empty values (like null, undefined, NaN, '', '-') or other illegal values to the head or tail.

parser
string

If intending to sort time values (JS Date instance or time string like 2012-03-12 11:13:54), parser: time should be specified. If intending to sort values with unit suffix (like '33%', '16px'), need to use parser: number.

Example of syntax for multiple column order:

order={[
  {name: 'column_a', order: 'asc'},
  {name: 'column_b', order: 'desc', incomparable: 'min', parser: 'time' },
]}

​
Axis Format

The xAxisFormat and yAxisFormat properties allow you to customize how the information is displayed in the given axis.

type
string

The format of the data displayed in the axis. The options are:

  • category
  • value
  • time
  • log
stack
boolean

Display the data series of the given axis on top of each other, visualizing cumulative totals or comparisons over time.

showAxis
boolean

Display the axis info (labels, numbers…) in the chart or not.

rotate
number

Allow to display the axis values with a tilt to avoid overlapping between them.

displayName
string | null

The axis title to display.

showAxisTitle
boolean

Whether or not to show the title of the axis.

showSplitLine
boolean

Specifies whether or not to show the value indicator with a split line.

axisAlign
boolean

Specifies the side of the axis

  • start: in axis (x) means left and for (y) axis means top.
  • end: in axis (x) means right and for (y) axis means bottom.

Example of syntax for multiple series:

yAxisFormat={[
  {type: 'value', stack: 'true'},
  {type: 'category', stack: 'false'},
  {type: 'value', stack: 'false'}
]}

​
Additional style configuration

Allows you to add more configuration and customize your chart.

All of these properties must be set inside the config property.

showDots
boolean

Show a dot or not at the intersection of the values.

showZoom
boolean

Display a zoom control for the displayed data.

showValues
boolean

Display the values directly on the chart.

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.

Bar ChartScatter Chart