​
Introduction

The Line chart plots data points connected by straight lines to visualize trends over time or categories. It’s helpful for showing changes and patterns, making it ideal for comparing different data sets and forecasting future values.

​
Syntax

You can use either LineChart or QueryLineChart to visualize query results in a chart. Use QueryLineChart when you want the component to automatically handle the query fetching. Use LineChart when you already fetched the data using useQuery. 
import { QueryLineChart } from '@latitude-data/react';

function MyComponent() {
  return (
    <QueryLineChart
      queryPath='titles'
      params={{
        start_year: 2012,
        end_year: 2014
      }}
      x='release_year'
      y={[
        { name: 'count_shows' },
        { name: 'count_movies' }
      ]}
      xTitle='Year'
      yTitle='Titles'
    />
  );
}

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

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