Skip to main content

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.

Secondary y Axis

<LineChart 
data={orders_by_month}
x=month
y=sales_usd0k
y2=num_orders_num0
/>

Secondary Axis with Bar

<LineChart 
data={orders_by_month}
x=month
y=sales_usd0k
y2=num_orders_num0
y2SeriesType=bar
/>

Value Labels

<LineChart 
data={orders_by_month}
x=month
y=sales
yAxisTitle="Sales per Month"
yFmt=eur0k
labels=true
/>

Custom Color Palette

<LineChart 
data={simpler_bar}
x=year
y=value
series=country
colorPalette={
[
'#cf0d06',
'#eb5752',
'#e88a87',
'#fcdad9',
]
}
/>

Options

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
y2 Column(s) to include on a secondary y-axis - column name | array of column names -
y2SeriesType Chart type to apply to the series on the y2 axis - line | bar | scatter line
series Column to use as the series (groups) in a multi-series chart - column name -
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
handleMissing Treatment of missing values in the dataset - gap | connect | zero gap
emptySet Sets behaviour for empty datasets. Can throw an error, a warning, or allow empty. When set to 'error', empty datasets will block builds in build:strict. Note this only applies to initial page load - empty datasets caused by input component changes (dropdowns, etc.) are allowed. - error | warn | pass error
emptyMessage Text to display when an empty dataset is received - only applies when emptySet is 'warn' or 'pass', or when the empty dataset is a result of an input component change (dropdowns, etc.). - string No records

Formatting & Styling

Name Description Required? Options Default
xFmt Format to use for x column (see available formats) - Excel-style format | built-in format name | custom format name -
yFmt Format to use for y column(s) (see available formats) - Excel-style format | built-in format name | custom format name -
y2Fmt Format to use for y2 column(s) (see available formats) - Excel-style format | built-in format name | custom format name -
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'
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
colorPalette Array of custom colours to use for the chart
E.g., ['#cf0d06','#eb5752','#e88a87']
Note that the array must be surrounded by curly braces.
- array of color strings (CSS name | hexademical | RGB | HSL) built-in color palette
seriesColors Apply a specific color to each series in your chart. Unspecified series will receive colors from the built-in palette as normal.
Note the double curly braces required in the syntax
- object with series names and assigned colors
seriesColors={{'Canada': 'red', 'US': 'blue'}}
colors applied by order of series in data

Value Labels

Name Description Required? Options Default
labels Show value labels - true | false false
labelSize Font size of value labels - number 11
labelPosition Where label will appear on your series - above | middle | below above
labelColor Font color of value labels - CSS name | hexademical | RGB | HSL Automatic based on color contrast of background
labelFmt Format to use for value labels (see available formats) - Excel-style format | built-in format name | custom format name same as y column
yLabelFmt Format to use for value labels for series on the y axis. Overrides any other formats (see available formats) - Excel-style format | built-in format name | custom format name -
y2LabelFmt Format to use for value labels for series on the y2 axis. Overrides any other formats (see available formats) - Excel-style format | built-in format name | custom format name -
showAllLabels Allow all labels to appear on chart, including overlapping labels - true | false false

Axes

Name Description Required? Options Default
yLog Whether to use a log scale for the y-axis - true | false false
yLogBase Base to use when log scale is enabled - number 10
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
y2AxisTitle Name to show beside y2 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
y2Gridlines Turns on/off gridlines extending from y2-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
y2AxisLabels Turns on/off value labels on the y2-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
y2Baseline Turns on/off thick axis line (line appears directly alongside the y2-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
y2TickMarks Turns on/off tick marks for each of the y2-axis labels - true | false false
yMin Starting value for the y-axis - number -
yMax Maximum value for the y-axis - number -
yScale Whether to scale the y-axis to fit your data. yMin and yMax take precedence over yScale - true | false false
y2Min Starting value for the y2-axis - number -
y2Max Maximum value for the y2-axis - number -
y2Scale Whether to scale the y-axis to fit your data. y2Min and y2Max take precedence over y2Scale - true | false false
yAxisColor Turns on/off color on the y-axis (turned on by default when secondary y-axis is used). Can also be used to set a specific color - true | false
color string (CSS name | hexademical | RGB | HSL)
true when y2 used; false otherwise
y2AxisColor Turns on/off color on the y2-axis (turned on by default when secondary y-axis is used). Can also be used to set a specific color - true | false
color string (CSS name | hexademical | RGB | HSL)
true when y2 used; false otherwise

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
renderer Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers: https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg/ - canvas | svg canvas

Custom Echarts Options

Name Description Required? Options Default
echartsOptions Custom Echarts options to override the default options. See reference page for available options. - {{exampleOption:'exampleValue'}} -
seriesOptions Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using echartsOptions See reference page for available options. - {{exampleSeriesOption:'exampleValue'}} -
printEchartsConfig Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options - true | false false

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>