Skip to content
dbx tools

Interface: ChartBaseProps

Common visual and behavior props for all charts

Extended by

Section titled “Extended by”

Properties

Section titled “Properties”

ariaLabel?

Section titled “ariaLabel?”

optional ariaLabel?: string

Accessibility label for screen readers

className?

Section titled “className?”

optional className?: string

Additional CSS classes

colorPalette?

Section titled “colorPalette?”

optional colorPalette?: ChartColorPalette

Color palette to use. Auto-selected based on chart type if not specified.

  • “categorical”: Distinct colors for different categories (bar, pie, line)
  • “sequential”: Gradient for magnitude/intensity (heatmap)
  • “diverging”: Two-tone for positive/negative values

colors?

Section titled “colors?”

optional colors?: string[]

Custom colors for series (overrides colorPalette)

height?

Section titled “height?”

optional height?: number

Chart height in pixels

Default

Section titled “Default”
300

onDataClick?

Section titled “onDataClick?”

optional onDataClick?: (datum) => void

Pointer-only: charts render to , so this does not fire for keyboard users. Provide a keyboard-accessible equivalent (e.g. a table row action) for the same action.

Parameters

Section titled “Parameters”
datum
Section titled “datum”

ChartClickDatum

Returns

Section titled “Returns”

void

options?

Section titled “options?”

optional options?: Record<string, unknown>

Additional ECharts options to merge

selected?

Section titled “selected?”

optional selected?: string | string[]

Controlled selection by category name. Matching data element(s) render at full prominence while the rest are dimmed. Drive it from your own state to reflect a cross-filter or selection. Categorical charts (bar, pie/donut) show emphasis; other chart types ignore it.

showLegend?

Section titled “showLegend?”

optional showLegend?: boolean

Show legend

testId?

Section titled “testId?”

optional testId?: string

Test ID for automated testing

title?

Section titled “title?”

optional title?: string

Chart title

valueFormatter?

Section titled “valueFormatter?”

optional valueFormatter?: ChartValueFormatter

Formats measure values in the chart’s built-in value axes, tooltips, and value labels. field is the corresponding yKey, so one formatter can select a different format for each series.

For charts with multiple series on one value axis, axis ticks use the first yKey; each tooltip uses its own series field.

xKey?

Section titled “xKey?”

optional xKey?: string

X-axis field key. Auto-detected from schema if not provided.

yKey?

Section titled “yKey?”

optional yKey?: string | string[]

Y-axis field key(s). Auto-detected from schema if not provided.