TimeseriesChart

The TimeseriesChart visually represents data in sequential order of time. It's used to observe trends, patterns, and fluctuations in the data over a specific time period.

OverviewProperties

TimeseriesChartProps

extends, , , <>

Name	Type	Default	Description
data?	[]		The series data passed to the chart
height?	|	300px	The height of the chart. If a number is passed, it will be treated as px.
width?	|	100%	Chart width. When a number is specified, it's treated as pixels, otherwise a valid width string is expected.
variant?		'line'	Variant to configure the type of chart
seriesActions?	(timeseries: , datapoint?: | ) =>		Exposed callback to display series actions for a series
onMessage?	(messages: []) =>		Messages emitted by the chart
gapPolicy?			The gap policy to be applied to all series of the chart
pointsDisplay?		'auto	Show the datapoints always, never or based on a threshold amount.
valueRepresentation?			The value representation to be used, either absolute or relative
loading?		false	Show the loading indicator when truly.
colorPalette?	|	'categorical'	Color palette that will be applied to the chart.
truncationMode?		'middle'	Truncation mode to use (start, middle, end) Applied to all the parts that truncate text.
curve?		'linear'	Defines the curve shape of the series
infiniteZoom?		'false'	Enables infinite zooming
children?

TimeseriesChart.Legend

To configure the legend, add TimeseriesChart.Legend to the time series chart.

TimeseriesChartLegendProps

Signature:

export declare type TimeseriesChart = ;

TimeseriesChart.Tooltip

To configure the tooltip, add TimeseriesChart.Tooltip to the time series chart.

TimeseriesChartTooltipProps

Name	Type	Default	Description
variant?		'single'	Whether the tooltip should contain datapoints from all series for the selected timestamp, or just the closest one.
seriesDisplayMode?			The tooltip items display mode. When it's undefined and variant is 'shared', then set to 'single-line', if variant is 'single', then set to 'multi-line'.

TimeseriesChart.XAxis

To configure the x-axis, add TimeseriesChart.XAxis to the time series chart.

TimeseriesChartXAxisProps

Name	Type	Default	Description
max?	| |		The maximum point in time for the X axis. It can either be: a number representing a timestamp, an ISO8601-compliant string, or a Date object
min?	| |		The minimum point in time for the X axis. It can either be: a number representing a timestamp, an ISO8601-compliant string, or a Date object
label?			The label to display alongside the axis.

TimeseriesChart.YAxis

To configure the y-axis, add TimeseriesChart.YAxis to the time series chart.

TimeseriesChartYAxisProps

Name	Type	Default	Description
max?		'auto'	Maximal value on the y-axis.
min?		'auto'	Minimal value on the y-axis.
position?			The position of the Y-axis relative to the chart area.
label?			The label to display alongside the axis.
scale?			The scale of the Y axis values.
formatter?	| <, >		Timeseries tick formatter

TimeseriesChart.ThresholdIndicator

TimeseriesChart.ThresholdIndicator provides a slot for defining annotations in the chart.

TimeseriesChartThresholdIndicatorProps

Signature:

export declare type TimeseriesChartThresholdIndicatorProps = ;

TimeseriesChart.EmptyState

TimeseriesChart.EmptyState provides a slot where the Empty state wrapper can be set.

EmptyStateProp

Name	Type	Default	Description
children

TimeseriesChart.ErrorState

TimeseriesChart.ErrorState provides a slot where the Error state wrapper can be set.

ErrorStateProps

Name	Type	Default	Description
children	| ((errorMessage: ) => .)

TimeseriesChart.Select

TimeseriesChart.Select provides a slot that enables functionality for selecting a specific area in the chart.

SelectProps

Name	Type	Default	Description
actions?	(selectedSeries: [], selectionDomain: [, ]) => | <>		Custom actions handler

TimeseriesChart.Intent

TimeseriesChart.Intent provides a slot to set intents that will appear in the toolbar.

IntentProps

Signature:

export declare type IntentProps = | ;

TimeseriesChart.ColorRule

TimeseriesChart.ColorRule provides a slot to apply conditional coloring to your chart series based on their values or names.

ColorRuleProps

Signature:

export declare type ColorRuleProps = { valueAccessor?: ; comparator: ; matchValue: ; } & ;

TimeseriesChart.Annotations

TimeseriesChart.Annotations provides a slot for defining annotations in the chart.

TimeseriesChartAnnotationsProps

extends

Name	Type	Default	Description
visibleTracksLimit?		3	How many tracks to show by default, if there are more tracks than the specified here a scrollbar will be added.
textOverflow?		'truncate'	Controls whether annotation text may expand beyond its track boundary or is truncated.

TimeseriesAnnotations.Track

TimeseriesAnnotations.Track provides a slot for defining a track in the TimeseriesChart.Annotations.

TimeseriesAnnotationsTrackProps

extends

Name	Type	Default	Description
indicatorsDisplay?		'auto'	Defines how to show the annotations indicators: always, never, or on hover (auto) at Track level

TimeseriesAnnotations.Marker

TimeseriesAnnotations.Marker provides a slot for defining a marker in the TimeseriesChart.Annotations.

TimeseriesAnnotationsMarkerProps

extends,

Name	Type	Default	Description
indicatorsDisplay?		'auto'	Defines how to show the marker indicator on top of the chart: always, never, or on hover (auto)

TimeseriesAnnotations.Tooltip

TimeseriesAnnotations.Tooltip provides a slot for defining a custom tooltip for the annotations.

AnnotationsTooltipProps

Name	Type	Default	Description
hidden?		false	Defines whether tooltip show be hidden or not
children?			The ChoroplethLayer tooltip handler template

TimeseriesChart.Toolbar

TimeseriesChart.Toolbar provides a slot to customize the toolbar of the chart.

TimeseriesChartToolbarSlotProps

Signature:

export declare type TimeseriesChartToolbarSlotProps = ;

TimeseriesChart.DownloadCSV

TimeseriesChart.DownloadCSV provides a slot to toggle the download CSV of the chart.

Prop Table did not receive data

TimeseriesChart.Zoom

TimeseriesChart.Zoom provides a slot to toggle the zoom of the chart.

TimeseriesZoomSlotProps

Name	Type	Default	Description
disabled?			Whether the zoom is disabled.

TimeseriesChart.Pan

TimeseriesChart.Pan provides a slot to toggle the pan of the chart.

TimeseriesPanSlotProps

Name	Type	Default	Description
disabled?			Whether the pan is disabled.

TimeseriesChart.Line

TimeseriesChart.Line provides a slot for defining a Line.

TimeseriesChartLineProps

extends

Name	Type	Default	Description
data			The series data passed to the line
gapPolicy?			Defines how gaps are handled (connect vs. gap)
pointsDisplay?			Whether to show data points always, never, or depending on a width-based threshold amount

TimeseriesChart.Area

TimeseriesChart.Area provides a slot for defining a Area.

TimeseriesChartAreaProps

extends

Name	Type	Default	Description
data			The series data passed to the area
gapPolicy?			Defines how gaps are handled (connect vs. gap)
pointsDisplay?			Whether to show data points always, never, or depending on a width-based threshold amount

TimeseriesChart.Bar

TimeseriesChart.Bar provides a slot for defining a Bar.

TimeseriesChartBarProps

extends

Name	Type	Default	Description
data			The series data passed to the bar

TimeseriesChart.Band

TimeseriesChart.Band provides a slot for defining a Band.

TimeseriesChartBandProps

Name	Type	Default	Description
data			The series data passed to the band
strokeOnly?			Whether only the band chart edges strokes are visible. Default value: false
color?			The unique color picked for this time series representation in HEX, RGB, Color Token or HSL.
seriesAction?	(series: ) =>		Exposed callback to display series action for a series
gapPolicy?