Home Components Charts Mixed-Type Charts

Mixed-Type Charts

Use mixed-type charts to display multiple series types on the same chart, for example a bar for an amount, and a line for a related percentage.

Mixed-type charts can be confusing, so use them sparingly. To add reference lines, areas or points to a chart instead, see Annotations.

You can combine multiple chart types inside a single <Chart> tag to create mixed-type charts.

Examples

Mixed-Type Chart

This example uses multiple y columns and multiple series types (bar and line)

Mixed-Type Chart

Because x is the first column in the dataset, an explicit x prop is not required.

This structure also gives you control over the individual series on your chart. For example, if you have a single series running through a component, you can override props specifically for that series. Since the FDA acronym was not fully capitalized above, you can rename that specific series inside the <Line> primitive:

Mixed-Type Chart Name Overide

Chart <Chart>

<Chart data={query_name}>
    Insert primitives here
</Chart>

Data

data
Required

Query name, wrapped in curly braces

Options:
query name
x

Column to use for the x-axis of the chart

Options:
column name
y

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

Options:
column name | array of column names
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
series

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

Options:
column name
xFmt

Format to use for x column (see available formats)

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

Format to use for y column (see available formats)

Options:
Excel-style format | built-in format name | custom format name
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
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
Default:
No records

Chart

swapXY

Swap the x and y axes to create a horizontal chart

Options:
Default:
false
title

Chart title. Appears at top left of chart.

Options:
string
subtitle

Chart subtitle. Appears just under title.

Options:
string
legend

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

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object
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)
Default:
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 seriesColors={{"Canada": "red", "US": "blue"}}

Options:
object with series names and assigned colors
Default:
colors applied by order of series in data
renderer
downloadableData
Whether to show the download button to allow users to download the data
Options:
Default:
true
downloadableImage
Whether to show the button to allow users to save the chart as an image
Options:
Default:
true

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

Options:
Default:
canvas

Line <Line/>

<Chart data={query_name}>
    <Line/>
</Chart>

Options

y

Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart

Options:
column name | array of column names
Default:
y supplied to Chart
series

Column to use as the series (groups) in a multi-series chart. Can be different than the series supplied to Chart

Options:
column name
Default:
series supplied to Chart
name

Name to show in legend for a single series (to override column name)

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

Treatment of missing values in the dataset

Options:
Default:
gap
options

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object

Area <Area/>

<Chart data={query_name}>
    <Area/>
</Chart>

Options

y

Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart

Options:
column name | array of column names
Default:
y supplied to Chart
series

Column to use as the series (groups) in a multi-series chart. Can be different than the series supplied to Chart

Options:
column name
Default:
series supplied to Chart
name

Name to show in legend for a single series (to override column name)

Options:
string
fillColor

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

Options:
CSS name | hexademical | RGB | HSL
fillOpacity

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

Options:
number (0 to 1)
Default:
0.7
line

Show line on top of the area

Options:
Default:
true
handleMissing

Treatment of missing values in the dataset

Options:
Default:
gap (single series) | zero (multi-series)
options

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object

Bar <Bar/>

<Chart data={query_name}>
    <Bar/>
</Chart>

Options

y

Column to use for the y-axis of the chart

Options:
column name
name

Name to show in legend for a single series (to override column name)

Options:
string
type

Grouping method to use for multi-series charts

Options:
Default:
stacked
stackName

Name for an individual stack. If separate Bar components are used with different stackNames, the chart will show multiple stacks

Options:
string
fillColor

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

Options:
CSS name | hexademical | RGB | HSL
fillOpacity

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

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

Width of line surrounding each bar

Options:
number
Default:
0
outlineColor

Color to use for outline if outlineWidth > 0

Options:
CSS name | hexademical | RGB | HSL
options

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object

Scatter <Scatter/>

<Chart data={query_name}>
    <Scatter/>
</Chart>

Options

y

Column to use for the y-axis of the chart

Options:
column name
name

Name to show in legend for a single series (to override column name)

Options:
string
shape

Options for which shape to use for scatter points

Options:
Default:
circle
pointSize

Change size of all points on the chart

Options:
number
Default:
10
opacity

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

Options:
number (0 to 1)
Default:
0.7
fillColor

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

Options:
CSS name | hexademical | RGB | HSL
outlineWidth

Width of line surrounding each shape

Options:
number
Default:
0
outlineColor

Color to use for outline if outlineWidth > 0

Options:
CSS name | hexademical | RGB | HSL
options

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object

Bubble <Bubble/>

<Chart data={query_name}>
    <Bubble/>
</Chart>

Options

y

Column to use for the y-axis of the chart

Options:
column name
size

Column to use to scale the size of the bubbles

Options:
column name
name

Name to show in legend for a single series (to override column name)

Options:
string
shape

Options for which shape to use for bubble points

Options:
Default:
circle
minSize

Minimum bubble size

Options:
number
Default:
200
maxSize

Maximum bubble size

Options:
number
Default:
400
opacity

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

Options:
number (0 to 1)
Default:
0.7
fillColor

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

Options:
CSS name | hexademical | RGB | HSL
outlineWidth

Width of line surrounding each shape

Options:
number
Default:
0
outlineColor

Color to use for outline if outlineWidth > 0

Options:
CSS name | hexademical | RGB | HSL
options

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object

Hist <Hist/>

<Chart data={query_name}>
    <Hist/>
</Chart>

Options

x

Column which contains the data you want to summarize

Options:
column name
fillColor

Color to override default series color

Options:
CSS name | hexademical | RGB | HSL
fillOpacity

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

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

JavaScript object to add or override chart configuration settings (see Custom Charts page)

Options:
object

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

Mixed type charts can include annotations using the ReferenceLine and ReferenceArea components. These components are used within a chart component like so:

<Chart data={sales_data} x=date y=sales>
  <Line y=sales/>
  <ReferenceLine data={target_data} y=target label=name/>
  <ReferenceArea xMin='2020-03-14' xMax='2020-05-01'/>
</Chart>
Edit page on GitHub