Skip to main content

Mixed-Type Charts

info

The easiest way to create mixed-type charts is setting up a secondary y-axis in LineChart or a secondary axis in BarChart

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)

composable

<Chart data={fda_recalls}>
<Bar y=voluntary_recalls/>
<Line y=fda_recalls/>
</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:

composable-name-override

<Chart data={fda_recalls}>
<Bar y=voluntary_recalls/>
<Line y=fda_recalls name="FDA Recalls"/>
</Chart>

Chart <Chart>

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

Data Options

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 true
series Column to use as the series (groups) in a multi-series chart - column name -
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 (see available formats) - Excel-style format | built-in format name | custom format name -
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
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

Chart Options

Name Description Required? Options Default
swapXY Swap the x and y axes to create a horizontal chart - true | false false
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
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 -
yScale Whether to scale the y-axis to fit your data. yMin and yMax take precedence over yScale - true | false false
options JavaScript object to add or override chart configuration settings (see Custom Charts page) - object -
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
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

Line <Line/>

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

Options

Name Description Required? Options Default
y Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart - column name | array of column names 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 - column name series supplied to Chart
name Name to show in legend for a single series (to override column name) - string -
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
handleMissing Treatment of missing values in the dataset - gap | connect | zero gap
options JavaScript object to add or override chart configuration settings (see Custom Charts page) - object -

Area <Area/>

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

Options

Name Description Required? Options Default
y Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart - column name | array of column names 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 - column name series supplied to Chart
name Name to show in legend for a single series (instead of showing y column name) - string -
fillColor Color to override default series color. Only accepts a single color. - CSS name | hexademical | RGB | HSL -
fillOpacity % of the full color that should be rendered, with remainder being transparent - number (0 to 1) 0.7
line Show line on top of the area - true | false true
handleMissing Treatment of missing values in the dataset - gap | connect | zero gap (single series) | zero (multi-series)
options JavaScript object to add or override chart configuration settings (see Custom Charts page) - object -

Bar <Bar/>

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

Options

Name Description Required? Options Default
y Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart - column name | array of column names 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 - column name series supplied to Chart
name Name to show in legend for a single series (to override column name) - string -
type Grouping method to use for multi-series charts - stacked | grouped stacked
stackName Name for an individual stack. If separate Bar components are used with different stackNames, the chart will show multiple stacks - string -
fillColor Color to override default series color. Only accepts a single color. - CSS name | hexademical | RGB | HSL -
fillOpacity % of the full color that should be rendered, with remainder being transparent - number (0 to 1) 1
outlineWidth Width of line surrounding each bar - number 0
outlineColor Color to use for outline if outlineWidth > 0 - CSS name | hexademical | RGB | HSL -
options JavaScript object to add or override chart configuration settings (see Custom Charts page) - object -

Scatter <Scatter/>

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

Options

Name Description Required? Options Default
y Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart - column name | array of column names 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 - column name series supplied to Chart
name Name to show in legend for a single series (to override column name) - string -
shape Options for which shape to use for scatter points - circle | emptyCircle | rect | triangle | diamond circle
pointSize Change size of all points on the chart - number 10
opacity % of the full color that should be rendered, with remainder being transparent - number (0 to 1) 0.7
fillColor Color to override default series color. Only accepts a single color. - CSS name | hexademical | RGB | HSL -
outlineWidth Width of line surrounding each shape - number 0
outlineColor Color to use for outline if outlineWidth > 0 - CSS name | hexademical | RGB | HSL -
options JavaScript object to add or override chart configuration settings (see Custom Charts page) - object -

Bubble <Bubble/>

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

Options

Name Description Required? Options Default
y Column(s) to use for the y-axis of the chart. Can be different than the y supplied to Chart - column name | array of column names 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 - column name series supplied to Chart
size Column to use to scale the size of the bubbles Yes column name -
name Name to show in legend for a single series (to override column name) - string -
shape Options for which shape to use for bubble points - circle | emptyCircle | rect | triangle | diamond circle
minSize Minimum bubble size - number 200
maxSize Maximum bubble size - number 400
opacity % of the full color that should be rendered, with remainder being transparent - number (0 to 1) 0.7
fillColor Color to override default series color. Only accepts a single color. - CSS name | hexademical | RGB | HSL -
outlineWidth Width of line surrounding each shape - number 0
outlineColor Color to use for outline if outlineWidth > 0 - CSS name | hexademical | RGB | HSL -
options JavaScript object to add or override chart configuration settings (see Custom Charts page) - object -

Hist <Hist/>

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

Options

Name Description Required? Options Default
x Column which contains the data you want to summarize - column name x supplied to Chart
fillColor Color to override default series color - CSS name | hexademical | RGB | HSL -
fillOpacity % of the full color that should be rendered, with remainder being transparent - number (0 to 1) 1

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>