Skip to main content

    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, , <>
    NameTypeDefaultDescription
    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

    NameTypeDefaultDescription
    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

    NameTypeDefaultDescription
    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

    NameTypeDefaultDescription
    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.Threshold​

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

    TimeseriesChartThresholdProps

    Signature:

    export declare type TimeseriesChartThresholdProps = ;

    TimeseriesChart.EmptyState​

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

    EmptyStateProp

    NameTypeDefaultDescription
    children
    .
    		-

    TimeseriesChart.ErrorState​

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

    ErrorStateProps

    NameTypeDefaultDescription
    children
    . | ((errorMessage: ) => .)
    		-

    TimeseriesChart.Annotations​

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

    TimeseriesChartAnnotationsProps

    extends
    NameTypeDefaultDescription
    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
    NameTypeDefaultDescription
    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,
    NameTypeDefaultDescription
    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
    NameTypeDefaultDescription
    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
    NameTypeDefaultDescription
    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
    NameTypeDefaultDescription
    data
    		-

    The series data passed to the bar

    TimeseriesChart.Band​

    TimeseriesChart.Band provides a slot for defining a Band.

    TimeseriesChartBandProps

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

    Still have questions?
    Find answers in the Dynatrace Community