<LineChart/>

line

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

Examples#

Line#

line

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

Multi-Series Line#

multi-series-line

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

Multiple y Columns#

multiple-y-line

<LineChart 
    data={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={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, referenced as a subset of Evidence's data object	Yes	data object	-
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	true
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

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