<LineChart/>

<LineChart

data={query_name}

x=column_x

y=column_y

/>

Examples

Line

<LineChart

data={daily_complaints}

x=date

y=number_of_complaints

yAxisTitle="calls to Austin 311 per day"

/>

Multi-Series Line

<LineChart

data={daily_volume_yoy}

x=day_of_year

y=cum_vol

series=year

yAxisTitle="cumulative calls"

xAxisTitle="day of year"

/>

Multiple y Columns

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