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. A number in pixels is expected. Otherwise, it will take the full width of the container
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?			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.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.

HistogramAnnotations.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

TimeseriesChart.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)

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?

ChartInteractions

Use the ChartInteractions component for configuring the chart zoom interactions of the chart.

Prop Table did not receive data

ChartInteractions.Zoom

Define the ChartInteractions.Zoom component within the ChartInteractions for enabling the zoom in/out of the chart.

ChartInteractions.ZoomX

Define the ChartInteractions.ZoomX component the ChartInteractions for enabling the zoom in the x axis of the chart.

ChartInteractions.Pan

Define the ChartInteractions.Pan component the ChartInteractions for enabling the pan of the chart.