Skip to main content

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