Skip to content

Documentation / @ripl/charts / TrendChartOptions

Interface: TrendChartOptions<TData> ​

Defined in: charts/src/charts/trend.ts:157

Options for configuring a TrendChart.

Extends ​

Type Parameters ​

Type ParameterDefault type
TDataunknown

Properties ​

PropertyTypeDescriptionInherited fromDefined in
animation?boolean | Partial<ChartAnimationOptions>Animation configuration, or a boolean toggling all transitions. See ChartAnimationOptions.CartesianChartOptions.animationcharts/src/core/chart.ts:128
annotations?ChartAnnotation[]Reference lines, shaded bands, and point markers drawn over the plot. See ChartAnnotation.CartesianChartOptions.annotationscharts/src/core/cartesian.ts:231
autoRender?booleanWhether the chart renders automatically on construction and after every Chart.update. Defaults to true.CartesianChartOptions.autoRendercharts/src/core/chart.ts:122
axis?ChartAxisInput<TData>X/y axis configuration, or a boolean toggling both axes. See ChartAxisInput.CartesianChartOptions.axischarts/src/core/cartesian.ts:221
borderRadius?numberCorner radius in pixels applied to each bar. Defaults to 2.-charts/src/charts/trend.ts:173
crosshair?ChartCrosshairInputCrosshair configuration, or a boolean toggle. See ChartCrosshairInput.CartesianChartOptions.crosshaircharts/src/core/cartesian.ts:229
dataTData[]The dataset plotted across all series.-charts/src/charts/trend.ts:159
description?stringAccessible description announced by screen readers (sets the rendering element's ARIA label). Defaults to the title text.CartesianChartOptions.descriptioncharts/src/core/chart.ts:132
format?ValueFormatInputFormat applied to values shown as text (tooltips and labels).-charts/src/charts/trend.ts:177
grid?ChartGridInputBackground grid configuration, or a boolean toggle. See ChartGridInput.CartesianChartOptions.gridcharts/src/core/cartesian.ts:223
keykeyof TData | ((item) => string)Accessor for each item's category key (the value plotted along the x axis).-charts/src/charts/trend.ts:163
labels?ChartDataLabelsInputShow value labels next to each mark. true uses the default anchor; a string sets the anchor side.-charts/src/charts/trend.ts:175
legend?ChartLegendInputLegend configuration, a position string, or a boolean toggle. See ChartLegendInput.CartesianChartOptions.legendcharts/src/core/cartesian.ts:227
navigator?boolean | NavigatorInteractionsEnables pan/zoom (and optionally brush) navigation on the plot. true turns on wheel-zoom and click-drag pan; an object configures each interaction individually. The chart auto-creates a DOMNavigator on its context and rescales the axis domains as the view changes, with no data rebuild. Access the underlying controller via chart.navigator for imperative framing (centerOn/fitBounds) or brush-and-link.CartesianChartOptions.navigatorcharts/src/core/cartesian.ts:239
overview?boolean | ChartOverviewOptionsEnables an overview "scrub bar" strip beside the plot with a draggable window that selects the visible range of the category axis (a bottom bar for category-on-x charts, a side bar for a horizontal bar chart). true uses the default size; an object sets it. Enabling the strip also turns on in-plot wheel/drag pan-zoom (category-axis only) unless navigator is explicitly false. Only category-axis charts (line, area, bar, trend) render the strip.CartesianChartOptions.overviewcharts/src/core/cartesian.ts:247
padding?PaddingInputSpace reserved around the chart, in pixels. A single number applies to all four edges; a [top, right, bottom, left] tuple or a partial { top, right, bottom, left } object sets individual edges, leaving unspecified edges at the default. Defaults to 16.CartesianChartOptions.paddingcharts/src/core/chart.ts:124
seriesTrendChartSeriesOptions<TData>[]The series to render, mixing line, bar, and area types on shared axes.-charts/src/charts/trend.ts:161
stacked?booleanStack same-type series cumulatively (bars among bars, areas among areas). Defaults to false. Unlike BarChartOptions.stacked and AreaChartOptions.stacked this does not accept 'percent': normalizing to a share of a category total is only meaningful when every series shares one mark type, and a trend chart mixes lines, bars and areas on one value axis.-charts/src/charts/trend.ts:171
theme?string | ThemeTheme for this chart: a registered name ('light'/'dark'/'auto'), or a Theme. Falls back to the module default (see setDefaultTheme).CartesianChartOptions.themecharts/src/core/chart.ts:130
title?string | Partial<ChartTitleOptions>Chart title as plain text, or a ChartTitleOptions object for full control.CartesianChartOptions.titlecharts/src/core/chart.ts:126
tooltip?ChartTooltipInputHover-tooltip configuration, or a boolean toggle. See ChartTooltipInput.CartesianChartOptions.tooltipcharts/src/core/cartesian.ts:225