Line Chart

line

<LineChart 
    data={query_name}  
    x=column_x 
    y=column_y
/>

Examples

Line

line

<LineChart 
    data={daily_complaints} 
    x=date 
    y=number_of_complaints 
    yAxisTitle="calls to Austin 311 per day"
/>

Multi-Series Line

multi-series-line

<LineChart 
    data={daily_volume_yoy} 
    x=day_of_year 
    y=cum_vol 
    series=year 
    yAxisTitle="cumulative calls" 
    xAxisTitle="day of year"
/>

Multi-Series Line with Steps

<LineChart
    data={simpler_bar}
    x=year
    y=value
    series=country
    step=true
/>

Multiple y Columns

multiple-y-line

<LineChart
data={fda_recalls}  
 x=year
y={["voluntary_recalls", "fda_recalls"]}
/>

Because x is the first column in the dataset and we want to plot all the remaining numerical columns in the table, we can simplify our code down to:

<LineChart data={fda_recalls}/>

Evidence will automatically pick the first column as x and use all other numerical columns for y.

Props

Data

Name	Description	Required?	Options	Default
data	Query name, wrapped in curly braces	Yes	query name	-
x	Column to use for the x-axis of the chart	Yes	column name	First column
y	Column(s) to use for the y-axis of the chart	Yes	column name \| array of column names	Any non-assigned numeric columns
sort	Whether to apply default sort to your data. Default is x ascending for number and date x-axes, and y descending for category x-axes	-	true \| false	false
series	Column to use as the series (groups) in a multi-series chart	-	column name	-
handleMissing	Treatment of missing values in the dataset	-	gap \| connect \| zero	gap
xFmt	Format to use for x column (see available formats)	-	Excel-style format \| buil-in format name \| custom format name	-
yFmt	Format to use for y column (see available formats)	-	Excel-style format \| buil-in format name \| custom format name	-

Series

Name	Description	Required?	Options	Default
lineColor	Color to override default series color. Only accepts a single color.	-	CSS name \| hexademical \| RGB \| HSL	-
lineOpacity	% of the full color that should be rendered, with remainder being transparent	-	number (0 to 1)	1
lineType	Options to show breaks in a line (dashed or dotted)	-	solid \| dashed \| dotted	solid
lineWidth	Thickness of line (in pixels)	-	number	2
markers	Turn on/off markers (shapes rendered onto the points of a line)	-	true \| false	false
markerShape	Shape to use if markers=true	-	circle \| emptyCircle \| rect \| triangle \| diamond	circle
markerSize	Size of each shape (in pixels)	-	number	8

Chart

Name	Description	Required?	Options	Default
title	Chart title. Appears at top left of chart.	-	string	-
subtitle	Chart subtitle. Appears just under title.	-	string	-
legend	Turns legend on or off. Legend appears at top center of chart.	-	true \| false	true for multiple series
chartAreaHeight	Minimum height of the chart area (excl. header and footer) in pixels. Adjusting the height affects all viewport sizes and may impact the mobile UX.	-	number	180
xAxisTitle	Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false	-	true \| string \| false	false
yAxisTitle	Name to show beside y-axis. If 'true', formatted column name is used.	-	true \| string \| false	false
xGridlines	Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false)	-	true \| false	false
yGridlines	Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false)	-	true \| false	true
xAxisLabels	Turns on/off value labels on the x-axis	-	true \| false	true
yAxisLabels	Turns on/off value labels on the y-axis	-	true \| false	true
xBaseline	Turns on/off thick axis line (line appears at y=0)	-	true \| false	true
yBaseline	Turns on/off thick axis line (line appears directly alongside the y-axis labels)	-	true \| false	false
xTickMarks	Turns on/off tick marks for each of the x-axis labels	-	true \| false	false
yTickMarks	Turns on/off tick marks for each of the y-axis labels	-	true \| false	false
yMin	Starting value for the y-axis	-	number	-
yMax	Maximum value for the y-axis	-	number	-
step	Specifies whether the chart is displayed as a step line.	-	true \| false	false
stepPosition	Configures the position of turn points for a step line chart.	-	'start' \| 'middle' \| 'end'	'end'

Annotations

Line charts can include annotations using the ReferenceLine and ReferenceArea components. These components are used within a chart component like so:

<LineChart data="{sales_data}" x="date" y="sales">
    <ReferenceLine data="{target_data}" y="target" label="name" />
    <ReferenceArea xMin="2020-03-14" xMax="2020-05-01" />
</LineChart>

Examples​

Line​

Multi-Series Line​

Multi-Series Line with Steps​

Multiple y Columns​

Props​

Data​

Series​

Chart​

Annotations​