Scatter Chart — Playground

px
size
legend
valueFormat
tooltip
messages
axes.gridLines
State
html.html
<kui-scatter-chart [series]="series" />
NameTypeDefaultDescription
seriesreadonly KuiChartScatterSeries[]-Required. { id?, name, color?, points: { x, y, r? }[] }. A point with a non-finite x, y or r is dropped. Without a point the empty composition renders.
bubblebooleanfalseReads r from each point as the radius in CSS pixels. It is not clamped; the consumer owns a radius that fits the plot.
axesKuiChartAxesOptions{}{ x?, y?, gridLines?, xTitle?, yTitle? }: show or hide an axis, choose the grid lines and set the axis titles drawn in the SVG.
size'sm' | 'md' | 'lg' | undefinedundefinedPlot height of 200, 280 or 360px (a square of up to that size for the donut). Falls back to the chart defaults key, then md.
loadingbooleanfalseShows a skeleton placeholder shaped like the chart instead of the chart.
legendboolean | undefinedundefinedShows the inline legend. Falls back to the chart defaults key, then true when there is more than one series or slice.
valueFormat(value: number) => stringcompact notationAxis tick, default tooltip and legend number formatting. The default is the compact notation of the locale; the alt-table always shows exact values.
tooltip(point: KuiChartPoint) => string | undefinedbuilt-in textOverrides the default tooltip and point label text.
ariaLabelstring | undefinedundefinedAccessible name of the chart as a whole. Falls back to the chart message for this type (Scatter chart); prefer a content-specific name.
messagesPartial<KuiChartMessages> | undefinedundefinedPer-instance text overrides: names, role descriptions, loading and empty text, table headers and point text. They win over scoped and root messages.
legendItems() / hoveredLegendId()KuiChartLegendSource-Public read surface of the chart legend, used by kui-chart-legend.
toggleLegendItem(id) / setHoveredLegendId(id)KuiChartLegendSource-Hide or show a series or slice, and set the cross-highlighted legend item.
kui-chart-legend [chart]KuiChartLegendSource-Renders the legend of any chart through a template reference variable. Project a kuiChartLegendItem template (KuiChartLegendItemContext) to replace the buttons.
KuiBarChartOptions / KuiLineChartOptions / KuiScatterChartOptions / KuiDonutChartOptionsinterfaces-Shape of defaults.barChart, lineChart, scatterChart and donutChart: size and legend.

Inputs verified against @kikita-labs/ui v2.0.0 public typings.