Mixed-Type Charts

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 Props

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	-

Chart Props

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
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	-
options	JavaScript object to add or override chart configuration settings (see Custom Charts page)	-	object	-

Line `<Line/>`

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

Props

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>

Props

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>

Props

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>

Props

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>

Props

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>

Props

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

Examples​

Mixed-Type Chart​

Chart <Chart>​

Data Props​

Chart Props​

Line <Line/>​

Props​

Area <Area/>​

Props​

Bar <Bar/>​

Props​

Scatter <Scatter/>​

Props​

Bubble <Bubble/>​

Props​

Hist <Hist/>​

Props​

Examples

Mixed-Type Chart

Chart `<Chart>`

Data Props

Chart Props

Line `<Line/>`

Props

Area `<Area/>`

Props

Bar `<Bar/>`

Props

Scatter `<Scatter/>`

Props

Bubble `<Bubble/>`

Props

Hist `<Hist/>`

Props