Line Chart

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
/>

Examples

Line

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
    title="Monthly Sales"
    subtitle="Includes all categories"
/>

Multi-Series Line

Loading...
<LineChart 
    data={orders_by_category}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
    series=category
/>

Multi-Series Line with Steps

Loading...
<LineChart 
    data={orders_by_category}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
    series=category
    step=true
/>

Multiple y Columns

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y={['sales_usd0k','orders']} 
    yAxisTitle="Sales per Month"
/>

Secondary y Axis

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k
    y2=orders
    yAxisTitle="Sales per Month"
/>

Secondary Axis with Bar

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k
    y2=orders
    y2SeriesType=bar
    yAxisTitle="Sales per Month"
/>

Value Labels

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
    labels=true
/>

Custom Color Palette

Loading...
<LineChart 
    data={orders_by_category}
    x=month
    y=sales_usd0k 
    yAxisTitle="Sales per Month"
    series=category
    colorPalette={
        [
        '#cf0d06',
        '#eb5752',
        '#e88a87',
        '#fcdad9',
        ]
    }
/>

Markers

Default

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k
    markers=true 
/>

markerShape=emptyCircle

Loading...
<LineChart 
    data={orders_by_month}
    x=month
    y=sales_usd0k 
    markers=true
    markerShape=emptyCircle
/>

Options

Data

Required
Query name, wrapped in curly braces
Options:
query name
Required
Column to use for the x-axis of the chart
Options:
column name
Required
Column(s) to use for the y-axis of the chart
Options:
column name | array of column names
Column(s) to include on a secondary y-axis
Options:
column name | array of column names
Chart type to apply to the series on the y2 axis
Default:
line
Column to use as the series (groups) in a multi-series chart
Options:
column name
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
Treatment of missing values in the dataset
Default:
gap
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.
Default:
error
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

Format to use for x column
Options:
Excel-style format | built-in format name | custom format name
Format to use for y column(s)
Options:
Excel-style format | built-in format name | custom format name
Format to use for y2 column(s)
Options:
Excel-style format | built-in format name | custom format name
Specifies whether the chart is displayed as a step line
Options:
Default:
false
Configures the position of turn points for a step line chart
Default:
end
Color to override default series color. Only accepts a single color
Options:
CSS name | hexademical | RGB | HSL
% of the full color that should be rendered, with remainder being transparent
Options:
number (0 to 1)
Default:
1
Options to show breaks in a line (dashed or dotted)
Default:
solid
Thickness of line (in pixels)
Options:
number
Default:
2
Turn on/off markers (shapes rendered onto the points of a line)
Options:
Default:
false
Shape to use if markers=true
Default:
circle
Size of each shape (in pixels)
Options:
number
Default:
8
Array of custom colours to use for the chart. E.g., {['#cf0d06','#eb5752','#e88a87']}
Options:
array of color strings (CSS name | hexademical | RGB | HSL)
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=[object Object]`
Options:
object with series names and assigned colors
Apply a specific order to the series in a multi-series chart.
Options:
Array of series names in the order they should be used in the chart seriesOrder={['series one', 'series two']}
Default:
default order implied by the data
Show value labels
Options:
Default:
false
Font size of value labels
Options:
number
Default:
11
Where label will appear on your series
Default:
above
Font color of value labels
Options:
CSS name | hexademical | RGB | HSL
Format to use for value labels
Options:
Excel-style format | built-in format name | custom format name
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
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
Allow all labels to appear on chart, including overlapping labels
Options:
Default:
false

Axes

Whether to use a log scale for the y-axis
Options:
Default:
false
Base to use when log scale is enabled
Options:
number
Default:
10
Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false
Default:
false
Name to show beside y-axis. If 'true', formatted column name is used.
Default:
false
Name to show beside y2 axis. If 'true', formatted column name is used.
Default:
false
Turns on/off gridlines extending from x-axis tick marks (vertical lines when swapXY=false)
Options:
Default:
false
Turns on/off gridlines extending from y-axis tick marks (horizontal lines when swapXY=false)
Options:
Default:
true
Turns on/off gridlines extending from y2-axis tick marks (horizontal lines when swapXY=false)
Options:
Default:
true
Turns on/off value labels on the x-axis
Options:
Default:
true
Turns on/off value labels on the y-axis
Options:
Default:
true
Turns on/off value labels on the y2-axis
Options:
Default:
true
Turns on/off thick axis line (line appears at y=0)
Options:
Default:
true
Turns on/off thick axis line (line appears directly alongside the y-axis labels)
Options:
Default:
false
Turns on/off thick axis line (line appears directly alongside the y2-axis labels)
Options:
Default:
false
Turns on/off tick marks for each of the x-axis labels
Options:
Default:
false
Turns on/off tick marks for each of the y-axis labels
Options:
Default:
false
Turns on/off tick marks for each of the y2-axis labels
Options:
Default:
false
Starting value for the y-axis
Options:
number
Maximum value for the y-axis
Options:
number
Whether to scale the y-axis to fit your data. `yMin` and `yMax` take precedence over `yScale`
Options:
Default:
false
Starting value for the y2-axis
Options:
number
Maximum value for the y2-axis
Options:
number
Whether to scale the y-axis to fit your data. `y2Min` and `y2Max` take precedence over `y2Scale`
Options:
Default:
false

Chart

Chart title. Appears at top left of chart.
Options:
string
Chart subtitle. Appears just under title.
Options:
string
Turn legend on or off. Legend appears at top center of chart.
Options:
Default:
true for multiple series
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
Which chart renderer type (canvas or SVG) to use. See ECharts' documentation on renderers.
Options:
Default:
canvas
Whether to show the download button to allow users to download the data
Options:
Default:
true
Whether to show the button to allow users to save the chart as an image
Options:
Default:
true

Custom Echarts Options

Custom Echarts options to override the default options. See reference page for available options.
Options:
{{exampleOption:'exampleValue'}}
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'}}
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

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>