Skip to main content

<LineChart/>

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

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

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 -