ScatterPlot

The ScatterPlot component visualizes individual data points on a two-dimensional chart, making it ideal for showing correlations, distributions, and relationships between two variables.

Props

Data Props

data

Query | array

required

Query result or array of objects containing the data to visualize

string

required

Column name for the x-axis values

string

required

Column name for the y-axis values

series

string

Column name to group data into multiple series

Point Style Props

shape

string

pointSize

number

Size of the points in pixels

fillColor

string

Fill color for points (hex, rgb, or theme color name)

opacity

number

Opacity of points (0-1). Note: affects both fill and outline due to ECharts limitation

outlineColor

string

Color for point outlines

outlineWidth

number

Width of point outlines in pixels

Formatting Props

xFmt

string

Format string for x-axis values

yFmt

string

Format string for y-axis values

Chart Layout Props

title

string

Chart title displayed at the top

subtitle

string

Chart subtitle displayed below the title

legend

boolean

Whether to show the legend

chartAreaHeight

number

Height of the chart area in pixels

Axis Props

xAxisTitle

string | boolean

default:"true"

Title for x-axis. Use true to use column name

yAxisTitle

string | boolean

default:"true"

Title for y-axis. Use true to use column name

xGridlines

boolean

Show vertical gridlines

yGridlines

boolean

Show horizontal gridlines

xAxisLabels

boolean

Show labels on x-axis

yAxisLabels

boolean

Show labels on y-axis

xBaseline

boolean

Show x-axis baseline

yBaseline

boolean

Show y-axis baseline

xTickMarks

boolean

Show tick marks on x-axis

yTickMarks

boolean

Show tick marks on y-axis

Axis Scale Props

xType

string

Type of x-axis: ‘category’ | ‘time’ | ‘value’

yLog

boolean

Use logarithmic scale for y-axis

yLogBase

number

Base for logarithmic y-axis

xMin

number

Minimum value for x-axis

xMax

number

Maximum value for x-axis

yMin

number

Minimum value for y-axis

yMax

number

Maximum value for y-axis

Custom title for tooltip

Series Props

colorPalette

string | array

default:"default"

Color palette name or array of colors

seriesColors

object

Object mapping series names to colors

seriesOrder

array

Array specifying the order of series

seriesLabelFmt

string

Format string for series labels

Behavior Props

sort

boolean

Sort data before rendering

connectGroup

string

Connect charts for synchronized interactions

Advanced Props

echartsOptions

object

Custom ECharts configuration object

seriesOptions

object

Custom series configuration

printEchartsConfig

boolean

default:false

Print ECharts config to console

renderer

string

Renderer type: ‘canvas’ | ‘svg’

downloadableData

boolean

Enable data download

downloadableImage

boolean

Enable image download

emptySet

string

Empty data behavior: ‘pass’ | ‘warn’ | ‘error’

emptyMessage

string

Custom empty data message

leftPadding

number

Left padding for chart area

rightPadding

number

Right padding for chart area

Examples

Basic Scatter Plot

```sql customer_metrics
select 
  customer_id,
  total_orders,
  lifetime_value
from customers

### Scatter Plot with Series

```markdown
```sql product_performance
select 
  product_name,
  price,
  units_sold,
  category
from products

### Customized Point Styling

```markdown
<ScatterPlot 
  data={customer_metrics} 
  x="total_orders" 
  y="lifetime_value"
  shape="diamond"
  pointSize=12
  fillColor="primary"
  opacity=0.7
  xFmt="#,##0"
  yFmt="usd"
/>

Multiple Series with Custom Colors

<ScatterPlot 
  data={product_performance} 
  x="price" 
  y="units_sold" 
  series="category"
  seriesColors={{
    'Electronics': '#4F46E5',
    'Clothing': '#7C3AED',
    'Food': '#DB2777'
  }}
  pointSize=10
  xGridlines="true"
  yGridlines="true"
/>

Logarithmic Scale

<ScatterPlot 
  data={website_traffic} 
  x="pageviews" 
  y="conversion_rate"
  yLog="true"
  title="Traffic vs Conversion (Log Scale)"
  xFmt="#,##0"
  yFmt="pct2"
/>

Chart Components

Data Display

Input Components

Layout Components

ScatterPlot

ScatterPlot

Props

Data Props

Point Style Props

Formatting Props

Chart Layout Props

Axis Props

Axis Scale Props

Tooltip Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Scatter Plot

Multiple Series with Custom Colors

Logarithmic Scale

Build docs developers (and LLMs) love

Chart Components

Data Display

Input Components

Layout Components

​ScatterPlot

​Props

​Data Props

​Point Style Props

​Formatting Props

​Chart Layout Props

​Axis Props

​Axis Scale Props

​Tooltip Props

​Series Props

​Behavior Props

​Advanced Props

​Examples

​Basic Scatter Plot

​Multiple Series with Custom Colors

​Logarithmic Scale

Build docs developers (and LLMs) love

ScatterPlot

Props

Data Props

Point Style Props

Formatting Props

Chart Layout Props

Axis Props

Axis Scale Props

Tooltip Props

Series Props

Behavior Props

Advanced Props

Examples

Basic Scatter Plot

Multiple Series with Custom Colors

Logarithmic Scale