Scatter Plot
<ScatterPlot
data={query_name}
x=column_x
y=column_y
/>
Examples
Scatter Plot
<ScatterPlot
data={census}
y=median_rent_usd
x=income_per_capita_usd
xAxisTitle="Income Per Capita"
yAxisTitle="Median Rent"
/>
Multi-Series Scatter Plot
<ScatterPlot
data={scores_by_region}
x=score_a
y=score_b
series=region
xAxisTitle=true
yAxisTitle=true
/>
Options
Data
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 |
series | Column to use as the series (groups) in a multi-series chart | - | column name | - |
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 |
tooltipTitle | Column to use as the title for each tooltip. Typically, this is a name to identify each point. | - | column name | - |
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 |
Formatting & Styling
Name | Description | Required? | Options | Default |
---|---|---|---|---|
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 | - |
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 | - |
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 colorsseriesColors={{'Canada': 'red', 'US': 'blue'}} | colors applied by order of series in data |
Axes
Name | Description | Required? | Options | Default |
---|---|---|---|---|
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 |
xAxisTitle | Name to show under x-axis. If 'true', formatted column name is used. Only works with swapXY=false | - | true | string | false | true |
yAxisTitle | Name to show beside y-axis. If 'true', formatted column name is used. | - | true | string | false | true |
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 |
xMin | Starting value for the x-axis | - | number | - |
xMax | Maximum value for the x-axis | - | number | - |
yMin | Starting value for the y-axis | - | number | - |
yMax | Maximum value for the y-axis | - | number | - |
Chart
Name | Description | Required? | Options | Default |
---|---|---|---|---|
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 |
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 |
Custom Echarts Options
Name | Description | Required? | Options | Default |
---|---|---|---|---|
echartsOptions | Custom Echarts options to override the default options. See reference page for available options. | - | {{exampleOption:'exampleValue'}} | - |
seriesOptions | Custom Echarts options to override the default options for all series in the chart. This loops through the series to apply the settings rather than having to specify every series manually using echartsOptions See reference page for available options. | - | {{exampleSeriesOption:'exampleValue'}} | - |
printEchartsConfig | Helper prop for custom chart development - inserts a code block with the current echarts config onto the page so you can see the options used and debug your custom options | - | true | false | false |
Interactivity
Name | Description | Required? | Options | Default |
---|---|---|---|---|
connectGroup | Group name to connect this chart to other charts for synchronized tooltip hovering. Charts with the same connectGroup name will become connected | - | string | - |
Annotations
Scatter plots can include annotations using the ReferenceLine
and ReferenceArea
components. These components are used within a chart component like so:
<ScatterPlot data={sales_data} x=date y=sales>
<ReferenceLine data={target_data} y=target label=name/>
<ReferenceArea xMin='2020-03-14' xMax='2020-05-01'/>
</ScatterPlot>