Line Chart — Playground
size
legend
valueFormat
tooltip
messages
axes.gridLines
State
<kui-line-chart [series]="series" [categories]="categories" />| Name | Type | Default | Description |
|---|---|---|---|
| series | readonly KuiChartCartesianSeries[] | - | Required. { id?, name, color?, data }, with data aligned index for index with categories. null, NaN and Infinity are gaps. Without a non-gap value the empty composition renders. |
| categories | readonly string[] | [] | Category labels aligned with each series data. The shorter side wins. |
| area | boolean | false | Fills the area under each line. It is not a separate chart type. |
| patterns | boolean | false | With area, fills each area with one of eight hatch patterns (colour independence). |
| axes | KuiChartAxesOptions | {} | { 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' | undefined | undefined | Plot 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. |
| loading | boolean | false | Shows a skeleton placeholder shaped like the chart instead of the chart. |
| legend | boolean | undefined | undefined | Shows the inline legend. Falls back to the chart defaults key, then true when there is more than one series or slice. |
| valueFormat | (value: number) => string | compact notation | Axis 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 | undefined | built-in text | Overrides the default tooltip and point label text. |
| ariaLabel | string | undefined | undefined | Accessible name of the chart as a whole. Falls back to the chart message for this type (Line chart); prefer a content-specific name. |
| messages | Partial<KuiChartMessages> | undefined | undefined | Per-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 / KuiDonutChartOptions | interfaces | - | Shape of defaults.barChart, lineChart, scatterChart and donutChart: size and legend. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.