Home components line chart

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

data
Required

Query name, wrapped in curly braces

Options:
query name
x
Required

Column to use for the x-axis of the chart

Options:
column name
y
Required

Column(s) to use for the y-axis of the chart

Options:
column name | array of column names
y2

Column(s) to include on a secondary y-axis

Options:
column name | array of column names
y2SeriesType

Chart type to apply to the series on the y2 axis

Options:
Default:
line
series

Column to use as the series (groups) in a multi-series chart

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

Options:
Default:
true
handleMissing

Treatment of missing values in the dataset

Options:
Default:
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.

Options:
Default:
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.).

Options:
string

Formatting & Styling

xFmt

Format to use for x column

Options:
Excel-style format | built-in format name | custom format name
yFmt

Format to use for y column(s)

Options:
Excel-style format | built-in format name | custom format name
y2Fmt

Format to use for y2 column(s)

Options:
Excel-style format | built-in format name | custom format name
step

Specifies whether the chart is displayed as a step line

Options:
Default:
false
stepPosition

Configures the position of turn points for a step line chart

Options:
Default:
end
lineColor

Color to override default series color. Only accepts a single color

Options:
CSS name | hexademical | RGB | HSL
lineOpacity

% of the full color that should be rendered, with remainder being transparent

Options:
number (0 to 1)
Default:
1
lineType

Options to show breaks in a line (dashed or dotted)

Options:
Default:
solid
lineWidth

Thickness of line (in pixels)

Options:
number
Default:
2
markers

Turn on/off markers (shapes rendered onto the points of a line)

Options:
Default:
false
markerShape

Shape to use if markers=true

Options:
Default:
circle
markerSize

Size of each shape (in pixels)

Options:
number
Default:
8
colorPalette

Array of custom colours to use for the chart. E.g., {['#cf0d06','#eb5752','#e88a87']}

Options:
array of color strings (CSS name | hexademical | RGB | HSL)
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 seriesColors={{"Canada": "red", "US": "blue"}}

Options:
object with series names and assigned colors
labels

Show value labels

Options:
Default:
false
labelSize

Font size of value labels

Options:
number
Default:
11
labelPosition

Where label will appear on your series

Options:
Default:
above
labelColor

Font color of value labels

Options:
CSS name | hexademical | RGB | HSL
labelFmt

Format to use for value labels

Options:
Excel-style format | built-in format name | custom format name
yLabelFmt

Format to use for value labels for series on the y axis. Overrides any other formats

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

Options:
Excel-style format | built-in format name | custom format name
showAllLabels

Allow all labels to appear on chart, including overlapping labels

Options:
Default:
false

Axes

yLog

Whether to use a log scale for the y-axis

Options:
Default:
false
yLogBase

Base to use when log scale is enabled

Options:
number
Default:
10
xAxisTitle

Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false

Options:
Default:
false
yAxisTitle

Name to show beside y-axis. If 'true', formatted column name is used.

Options:
Default:
false
y2AxisTitle

Name to show beside y2 axis. If 'true', formatted column name is used.

Options:
Default:
false
xGridlines

Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false)

Options:
Default:
false
yGridlines

Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false)

Options:
Default:
true
y2Gridlines

Turns on/off gridlines extending from y2-axis tick marks (horizontal lines when swapXY=false)

Options:
Default:
true
xAxisLabels

Turns on/off value labels on the x-axis

Options:
Default:
true
yAxisLabels

Turns on/off value labels on the y-axis

Options:
Default:
true
y2AxisLabels

Turns on/off value labels on the y2-axis

Options:
Default:
true
xBaseline

Turns on/off thick axis line (line appears at y=0)

Options:
Default:
true
yBaseline

Turns on/off thick axis line (line appears directly alongside the y-axis labels)

Options:
Default:
false
y2Baseline

Turns on/off thick axis line (line appears directly alongside the y2-axis labels)

Options:
Default:
false
xTickMarks

Turns on/off tick marks for each of the x-axis labels

Options:
Default:
false
yTickMarks

Turns on/off tick marks for each of the y-axis labels

Options:
Default:
false
y2TickMarks

Turns on/off tick marks for each of the y2-axis labels

Options:
Default:
false
yMin

Starting value for the y-axis

Options:
number
yMax

Maximum value for the y-axis

Options:
number
yScale

Whether to scale the y-axis to fit your data. yMin and yMax take precedence over yScale

Options:
Default:
false
y2Min

Starting value for the y2-axis

Options:
number
y2Max

Maximum value for the y2-axis

Options:
number
y2Scale

Whether to scale the y-axis to fit your data. y2Min and y2Max take precedence over y2Scale

Options:
Default:
false

Chart

title

Chart title. Appears at top left of chart.

Options:
string
subtitle

Chart subtitle. Appears just under title.

Options:
string
legend

Turn legend on or off. Legend appears at top center of chart.

Options:
Default:
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.

Options:
number
Default:
180
renderer

Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers.

Options:
Default:
canvas

Custom Echarts Options

echartsOptions

Custom Echarts options to override the default options. See reference page for available options.

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.

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

Options:
Default:
false

Interactivity

connectGroup

Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same connectGroup name will become connected

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>