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)
<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:
<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 | - |
| xFmt | Format to use for x column (see available formats) | - | Excel-style format | buil-in format name | custom format name | - |
| yFmt | Format to use for y column (see available formats) | - | Excel-style format | buil-in format name | custom format 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 |
| 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 | - |
| 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 |
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>