---
title: "Perspective - Time Series Chart"
description: "The Time Series component provides an efficient way to visualize data from a variety of different data sources as chart data."
---

# Perspective - Time Series Chart

> The Time Series component provides an efficient way to visualize data from a variety of different data sources as chart data.

![" "](time-series-chart.png)

**Component Palette**

![" "](time-series-chart-icon.png)

The Time Series component provides an efficient way to visualize data from a variety of different data sources as chart data. Time series chart requires that the X axis of the chart represents time and the Y axis represents values. The Time Series Chart includes the following features:

- Zoom or pan in and out via mouse wheel interaction.
- X-Trace display showing data at the hovered time position.
- Multiple chart display types (Area, Bar, Line, and Scatter).
- Multiple Y axes with the ability to align to the left or right side of the chart.
- Multiple plots as well as multiple trends per plot.
- Baselines and markers.
- Custom axes.
- Time range showing the overall range of the data being displayed in the chart
- Simple display customization for the axes, different trend display types, baselines, and markers.
- Label and Title properties have their own dedicate styling properties, such as color and size.

By default, the charts contain example data, but typically a [tag history binding](ignition-modules\perspective\working-with-perspective-components\bindings-in-perspective\tag-bindings-in-perspective\tag-bindings-in-perspective.md) or [named query binding](ignition-modules\vision\binding-types-in-vision\named-query-bindings\named-query-bindings.md) will be used to feed data to the charts.

The [Chart Range Selector](appendix\components\perspective-components\perspective-chart-palette\perspective-chart-range-selector\perspective-chart-range-selector.md) provides a complement to this chart. The Time Series Chart and Chart Range Selector components are most powerful when paired together.

 The Time Series Chart component has four pre-configured [variants](ignition-modules\perspective\working-with-perspective-components\working-with-perspective-components.md):

- Line chart - Default layout with appearance of a line chart. 
- Area chart - Layout set up as an area chart.
- Bar chart - Layout set up as a bar chart.
- Scatter chart - Layout set up as a scatter chart.

## User Interaction

|Interaction|Description|
|---|---|
|Zoom|The user can zoom in and out on the Time Series chart. When zoomed to any level past its base time range, the Time Series chart will display a **zoom reset** ![" "](reset-icon.png) icon in the upper right corner. Click on the icon to return the chart to its base range. Note that the range will not refresh while zoomed in.  When pen data sources change, the zoom level will be reset to its base time range.|
|Pan|The user can pan across the Time Series chart. When panned past its base time range, the Time Series chart will display a **pan reset** ![" "](reset-icon.png) icon in the upper right corner. Click on the icon to return the chart to its base range. Note that the range will not refresh while panning.|
|Pinch Zoom| On a mobile device, the user can pinch-zoom the Time Series chart. Zooms must originate from within the boundaries of the displaying chart data.|
|Tracker Position| On a mobile device, t he user can move the tracker position on the Time Series chart via touch.|

## Properties

Most Properties have binding options. For more information on Bindings, see [Types of Bindings in Perspective](ignition-modules\perspective\working-with-perspective-components\bindings-in-perspective\bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules\perspective\working-with-perspective-components\perspective-component-properties.md) page.

|Name|Description|Property Type|
|---|---|---|
|enablePanZoom| Allows the chart to be panned and zoomed. The chart cannot be zoomed out past its base range.|value: boolean|
|autoGenerateSeriesNames| If true, auto generates series names if no name is provided. This helps prevent the series name from resetting to the default value when the series name is provided by a binding.| value: boolean|
|series|A list of series entries used as the base data source for the chart display. Each series will be a new line drawn on the chart. At a minimum, the Time Series component requires at least one complete series entry to display data. With no other configuration provided, an initial display will be created from the series data (required).**name**: The name of the series. A name must be provided or one will be added. This will also be used as the label of the auto-generated Y axis in the chart (required). Value is string.**data**: Data can be an object containing a time entry and value entries (all must be numbers) (required).Each value entry must be labeled with the column name to which it corresponds. Data can also be an array containing value entries (all must be numbers). Each value entry consists of a timestamp (which must be the first value) and one or more values that were captured at that time. Finally, data can also be in the form of a DataSet, for example, the data property can be bound to a Tag History binding to display either realtime data, or historical data (via start and end dates).  **Note**: When using a dataset, the Time column should be the first column. Value can be object or array|array|
|plots|A list of plots (subplots) for the chart. At least one entry is required. Plot entries contain properties that allow much finer control over the way that the series data can be displayed. Each plot will be represented by its own row in the component (plots always stretch to fill the width of the chart).**relativeWeight**:  Relative weight sets the amount of height space plots take up in a Time Series Chart when multiple plots are included. By default, plots are drawn using equal height with a value of 1. Customizing the value adjusts the plot height to the corresponding ratio of available space in the chart. Value is numeric.**trends**: If specified, a trend will become the display mechanism for the plot in which it resides. It describes the way that the data should look, and provides different display types as opposed to the  line  display type that is provided when building from series data. Multiple trends will be built on top of each other in the same  plot. An axis will be generated for each  trend , unless they share a common axis (either custom created, or generated from  series data). **Note**: When making changes to a setting under trends, an axis must also be defined under plots.axes**visible**: If specified, this is the visible state of the trend. If not visible, the trend data will be hidden, but the time range of the trend will still be represented in the overall time range of the plot. Value is boolean.**type**: The type of chart to create (required). Options are area, bar, line, and scatter. Value is string.**series**: The series used to feed data to this trend (required). Value is string.**interpolation**: The type of curve that should be used to draw the line portion of the chart. Options are: curveBasis, curveBasisOpen, curveCardinal, curveCardinalOpen, curveCatmullRom, curveCatmullRomOpen, curveLinear, curveMonotoneX, curve MonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore. More information on the interpolation methods above can be found in D3's documentation. Value is string**breakLine**: This property will be available when a trend of type **line** is being used. If true, the line will be broken on either side of missing data values. If false, missing data values are removed and the adjoining points are connected. Value is boolean.**stack**: This property will be available when a trend of type **area** or bar is being used. If true, the multiple columns of the chart will stack on top of each other. Value is boolean.**axis**: If specified, the name of an axis that is described in the axesproperty of the plot to which this trend belongs. This axis will be used as the Y axis for the trend. Value is string.**radius**: This property will be available when a trend of type **scatter** is being used. A number specifying the radius (in pixels) of the displaying points. Value is numeric.**columns**: If provided, only the columns in this list will be shown. Any style properties provided here will also override any existing style currently in place. Click to see [columns](#plotstrendscolumns-properties) properties.**baselines**: If specified, a line will be drawn on the trend based upon a given type of functionality. Click to see [baselines](#plotstrendsbaselines-properties) properties.**axes**: A list of axis entries for that can be used for the plot. These can be used to override the Y Axis that is generated based on data in the series to which each trend is bound. **Note**: When making changes to a setting under axes, a trend must also be defined under plots.trends. Click to see [axes](#plotsaxes-properties) properties.**markers**: Settings for the markers, a list of visual indicators that can be added to the plot (optional). These are meant to draw emphasis to the data. In this first release, the line marker will be the only available option. Click to see [markers](#plotsmarkers-properties) properties.|array|
|title|Settings for the title of the chart.**visible**: Indicates whether or not the title is visible. Default is false. Value is boolean.**text**: Text for the title of the chart. Value is string.**height**: The vertical space taken up by the title. Value is numeric.**font**: Title font configuration.**color**: Color of the title text. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). Value is string.**size**: The font size, in pixels, of the title text. Value is numeric.**style**: Sets a style for the title. Full menu of [style options](appendix\reference-pages\style-reference.md)  is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules\perspective\styles\style-classes\style-classes.md).|object|
|timeAxis|This property provides settings for the X Axis. Note that multiple plots share the same axis. (required)**visible**: The visible state of the the axis. Value is boolean**tickCount**: The number of ticks on the axis (as a multiple of 2, 5, or 10).   Setting the tickCount to 0 will automatically scale the chart's X Axis based on the zoom level, panning, and scrolling. Value is numeric**height**: The height of the axis. Value is numeric**color**: The color of the axis. Can be chosen from color wheel, chosen from color palette, or entered as  RGB  or  HSL  value. See  [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). Value is string**tick**: The configuration of the ticks on the axis. Click to see [tick](#timeaxistick-properties) properties.**grid**:  Configuration for gridlines to display on this axis.**visible**: Visible state of the gridlines. Gridlines are shown only for axes that connect directly to the chart. Any satellite axes will display their tick configurations instead of gridlines. Value is boolean.**color**: Color of the gridlines.**opacity**: Opacity of the gridlines. Value is numeric.**dashArray**: Dashed appearance of the gridlines. Value is numeric.**style**: Style for the gridlines. Full menu of [style options](appendix\reference-pages\style-reference.md) is available. You can also specify a [style class](ignition-modules\perspective\styles\style-classes\style-classes.md).**style**: A style object containing properties which are applied to the horizontal line of the axis. Any property that would apply to an SVG line element can be used here. See also [style options](appendix\reference-pages\style-reference.md).|object|
|timeRange|An object describing the presentation of the time range display below the chart.**visible**:	The visible state of the time range display as a whole. Value is boolean.**dateFormat**: The date format of the range using a [MomentJS](https://momentjs.com/) date string. Value is string.**timeFormat**: The time format of the range using a [MomentJS](https://momentjs.com/) date string. Value is string.|object| 
|xTrace|Configuration to build the x-trace display when hovering over the chart.   The X Trace display now supports numeric locale formatting. Numeric values are automatically formatted based on the session locale and the dataFormat, dateFormat, and timeFormat properties.**value**: A read only timestamp representing the current x-trace position. If there is no active x-trace position, this value will be an empty string. Value is string.**visible**: The visible state of the x-trace display. Value is boolean.**infoBox**: Configuration to build the box portion of the x-trace display.**visible**: The visible state of the box. Value is boolean.**showTime**: Whether to display the timestamp of the current X Trace value above the info box. Value is boolean.**width**: Width of the info box, in pixels. Value is numeric.**dateFormat**: The date format of the xtrace date/time display using a Momentjs date string ( https://momentjscom/). Options are: [7-18-2019], [2019-7-18], [07-18-2019],  [2019-07-18], [Jul 18th 19], [Jul 18th 2019], or none. Value is string. **timeFormat**: The time format of the xtrace date/time display using a MomentJS time string (https://momentjs.com/). Options are: 12 hour [8:41:06], 12 hour w/ period [8:41:06 AM], 24 hour [08:41:06], 24 hour w/milliseconds [08:41:06:269], Unix Millisecond Timestamp [1563464737269], Unix Timestamp [1563464737], or none. Value is string.**dataFormat**: A NumeralJS value used to format the data found at the current timestamp of the X Trace display. See [numeral.js](http://numeraljs.com/) for a list of available data formats. Options are: number [1,000.12], integer [1,200], four decimal precision [1.1200], percent [10.12%], scientific [1.01E+03], accounting [$(1,000.12)], financial [(1,000.12)], currency [$1,000.12], currency (rounded) [$1,012], duration [24:01:00], abbreviation [1.2k], or ordinal [100th]. Value is string.**stroke**: A configuration object describing the properties that will be applied to the stroke of the box display. Click to see [stroke](#xtraceinfoboxstroke-properties) properties.**fill**: A configuration object describing the properties that will be applied to the fill of the box display. Click to see [fill](#xtraceinfoboxfill-properties) properties.**font**:  A configuration object describing the properties that will be applied to the font of text in the infoBox. Click to see [font](#xtraceinfoboxfont-properties) properties.**style**: Custom CSS styles to apply to the info box. Any style that applies to an SVG line element can be used. See also [style options](appendix\reference-pages\style-reference.md).**line**: Configuration to build the vertical line portion of the x-trace display. Value is string.**visible**: The visible state of the line. Value is boolean.**color**: The color of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). Value is string.**width**: The width of the line, in pixels. Value is numeric.**opacity**: The opacity of the line, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.**dashArray**: The dashed appearance (SVG dashed array) of the line. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2". Value is numeric.**style**: Custom CSS styles to apply to the line. Any style that applies to an SVG line element can be used. See also [style options](appendix\reference-pages\style-reference.md)|object|
|legend|Configuration for the display and position of the legend for the Time Series Chart.**visible**: The visible state of the legend. Default is false. Value is boolean.**position**: The position of the legend. Options are top, right, bottom, or left. Value is a dropdown string.**style**: A style object containing properties which are applied to the legend. See also [style options](appendix\reference-pages\style-reference.md). You can also specify a [style class](ignition-modules\perspective\styles\style-classes\style-classes.md)|object|
|defaultStyles|An object providing style settings to the chart trends as a whole.**colorScheme**: Specifies a Color Brewer color scheme to use on the series. See  [ColorBrewer2.org](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3) for available color schemes. Value is string.**colors**: A list of colors to apply to the columns (in order) for each trend. If these values are provided, they will override the value provided for the colorScheme. Value is string.**normal**: An object providing style configuration for the “normal” state (no user interaction) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties.**highlighted**: An object providing style configuration for the “highlighted” state (mouse hover) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. The highlighted property uses the same configuration properties as the 'normal' property above.**selected**: An object providing style configuration for the “selected” state (mouse click) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties.**muted**: An object providing style configuration for the “muted” state (non selected) of a column, or data entry, in a trend. Any color values specified here will override values set in the colorScheme or colors properties. Click to see the related [stroke and fill](#defaultstyles-stroke-and-fill-properties) properties.|object|
|style|Sets a style for this chart. Full menu of [style options](appendix\reference-pages\style-reference.md)  is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules\perspective\styles\style-classes\style-classes.md) .|object|

### plots.trends.columns Properties

A column contains the following properties:

|Name|Description|Property Type|
|---|---|---|
|key|This needs to match a column name from the series to which this trend is bound (required). Once in place, this will allow the style configuration provided here to override the styles provided in the defaultStyles property.|value: string|
|color|If provided, this value will override any previous color values for the column (both stroke and fill). Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|value: string|
|styles|If provided, the styles for the state values listed here will override any previous state values.**normal**: Takes the same configuration options as the same named state value under the defaultStyles property.**highlighted**: Takes the same configuration options as the same named state value under the defaultStyles property.**selected**: Takes the same configuration options as the same named state value under the defaultStyles property.**muted**: Takes the same configuration options as the same named state value under the defaultStyles property.|object|

### plots.trends.baselines Properties

|Name|Description|Property Type|
|---|---|---|
|visible|Whether the baseline is visible or not.|value: boolean|
|function|The type of baseline that will be drawn (required). Options are min, max, avg, ucl (upper control limit), and lcl (lower control limit).|value: string|
|column|The column against which the baseline should be calculated. If not specified, the first column in the series to which the trend is bound will be used.|value: string|
|axis|The axis against which the baseline should be calculated. The trend must be bound to an axis for this to work correctly.|value: string|
|color|The color of the line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|value: string|
|width|The width of the line, in pixels.|value: numeric|
|opacity|The opacity of the line, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.|value: numeric|
|dashArray|The dashed appearance (SVG dashed array) of the line. The pattern of dashes and gaps used to paint the stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".|value: numeric|
|label|The configuration used for the label drawn on the baseline.**text**: The label text. Value is string.**position**: The position of the label relative to the baseline. Value is string.**font**: The font style for the label.**color**: The color of the label text. Value is string.**size**: The font size, in pixels, of the label text. Value is numeric.**style**: Custom CSS styles to apply to the baseline label. Any style that applies to an SVG text element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|

### plots.axes Properties

An axis entry has the following properties:

|Name|Description|Property Type|
|---|---|---|
|name|The name of the axis (required). Also used as the display label of the axis.|value: string|
|min|The minimum value of the axis (required). If no value is specified, auto range will be used. A minimum value will be calculated from the data bound to this axis.|value: numeric|
|max|The maximum value of the axis (required).  The maximum range value of the axis. If no value is specified, auto range will be used. A maximum value will be calculated from the data bound to this axis|value: numeric|
|alignment|The side of the trend upon which the axis should be presented (required).|value: string|
|width|The width of the axis, in pixels (required).|value: numeric|
|label|The configuration of the Y axis label.visible: Whether or not the label is visible. Value is boolean.**text**: The text for the label. Value is string.**offset**: Offset the Y axis label from its default position. This allows you to fine tune the label location, which may be necessary depending on the scale and how much room the tick labels take up. This may be positive or negative. Value is numeric.**font**: The settings for the label's font.**color**: The color of the label text. Value is string.**size**: The font size, in pixels, of the label text. Value is numeric.**style**: Custom CSS styles to apply to the Y axis label. Any style that applies to an SVG text element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|
|tick|The configuration for the ticks drawn on the axis.**color**: The color of the ticks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). Value is string.**count**:  Number of ticks to display on the Y axis. Default value is Auto. When the tick count is Auto, Y axis ticks will be added/removed based on the height of the chart, and the tick spacing is adjusted around whole numbers. Value is numeric or string.**label**: The settings for the label on the tick.**format**:  Sets the numeric format for the tick label. The value must be a valid [D3 Format](https://github.com/d3/d3-format) value. Default value is Auto. When the tick label format is Auto, the D3 format ~f is used. This creates a fixed point that will trim any insignificant trailing zeroes.   The Y axis now supports numeric locale formatting. Numeric values are automatically formatted based on the session locale and the tick.label.format property. Value is string.**font**: The font style for the label. Click to see [font](#plotstrendsaxesticklabelfont-properties) properties.**style**: Custom CSS styles to apply to the baseline label. Any style that applies to an SVG text element can be used. See also [style options](appendix\reference-pages\style-reference.md).**style**: Custom CSS styles to apply to the ticks. Any style that applies to an SVG text element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|
|grid| Configuration for gridlines to display on this axis.**visible**: Visible state of the gridlines. Gridlines are shown only for axes that connect directly to the chart. Any satellite axes will display their tick configurations instead of gridlines. Value is boolean.**color**: Color of the gridlines.**opacity**: Opacity of the gridlines. Value is numeric.**dashArray**: Dashed appearance of the gridlines. Value is numeric.**style**: Style for the gridlines. Full menu of [style options](appendix\reference-pages\style-reference.md) is available. You can also specify a [style class](ignition-modules\perspective\styles\style-classes\style-classes.md).|object|

#### plots.trends.axes.tick.label.font Properties

|Name|Description|Property Type|
|---|---|---|
|color|The color of the label text.|value: string|
|size|The font size, in pixels, of the label text.|value: numeric|

### plots.markers Properties

|Name|Description|Property Type|
|---|---|---|
|visible|Indicates whether or not the marker is visible. |Value is boolean|
|value|The numeric value represented by the marker. |Value is numeric|
|type|The type of marker. Currently the only option is line. |Value is string|
|axis|The axis against which the marker should be drawn (required). |Value is string|
|line|The configuration for the line portion of the marker.**width**: The width of the marker line, in pixels. Value is numeric.**color**: The color of the marker line. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). Value is string.**opacity**: The opacity of the marker line, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.**dashArray**: The pattern of dashes and gaps (SVG dashed array) used to paint the marker line. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5 3 2" is equivalent to "5 3 2 5 3 2". Value is numeric.**label**: The configuration for marker's label.**text**: The marker label text. Value is string.**position**: The position of the label relative to the line. Value is string.**font**: The font settings for the label. Click to see [font](#plotsmarkerslinelabelfont-properties) properties.**style**: Custom CSS styles to apply to the marker line. Any style that applies to an SVG  line  element can be used. See also [style options](appendix\reference-pages\style-reference.md).**style**: Custom CSS styles to apply to the marker line. Any style that applies to an SVG line element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|

#### plots.markers.line.label.font Properties

|Name|Description|Property Type|
|---|---|---|
|color|The color of the label text. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|value: string|
|size|The font size, in pixels, of the label text.|value: numeric|
|style|Custom CSS styles to apply to the marker label. Any style that applies to an SVG  text  element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|

### timeAxis.tick Properties

|Name|Description|Property Type|
|---|---|---|
|color|The color of the ticks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx). Value is string|
|label|The configuration of the label drawn on the tick.**angled**: If set to true, the tick labels will be angled rather than horizontal. Value is boolean**format**: The date/time format displayed by each tick using a MomentjS date string ( https://momentjs.com/). Default is “Auto”, where the property attempts to figure out the best format.  For a listing of suggested formats, refer to https://momentjs.com/docs/#/parsing/string-format/. Value is string.**font**: The settings for the label's font.**color**: Color of the label text. Value is string.**size**: The font size, in pixels, of the label text. Value is numeric.**style**: Custom CSS styles to apply to the tick labels. Any style that applies to an SVG text element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|

### xTrace.infoBox.stroke Properties

|Name|Description|Property Type|
|---|---|---|
|color|The color of the box stroke. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|value: string|
|width|The width of the box stroke, in pixels.|value: numeric|
|opacity|The opacity of the box stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.|value: numeric|
|dashArray|The dashed appearance (SVG dashed array) of the box stroke. It's a list of space separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".|value: numeric|

### xTrace.infoBox.fill Properties

|Name|Description|Property Type|
|---|---|---|
|color|The color of the box fill. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See [Color Selector](appendix\reference-pages\color-selector-reference\color-selector-reference.mdx).|value: string|
|opacity|The opacity of the box fill, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque.|value: numeric|

### xTrace.infoBox.font Properties

|Name|Description|Property Type|
|---|---|---|
|color|The text color of the info box label and datetime text.|color|
|size|The font size of the info box label and datetime text.|value: numeric|
|style|Custom CSS styles to apply to the info box text. Any style that applies to an SVG line element can be used. See also [style options](appendix\reference-pages\style-reference.md).|object|

### defaultStyles stroke and fill Properties

The defaultStyles normal, highlighted, selected, and muted properties all include the following stroke and fill properties.

|Name|Description|Property Type|
|---|---|---|
|stroke	|A configuration object describing the properties that will be applied to the stroke for the “selected” state (mouse hover) of a column, or data entry, in a trend. The line and area trend types will have these styles applied to them.**opacity**: The opacity of the trend stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.|object|
|fill|A configuration object describing the properties that will be applied to the stroke for the “selected” state (mouse hover) of a column, or data entry, in a trend. The area, and box, and scatter trend types will have these styles applied to them.**opacity**: The opacity of the trend stroke, ranging from 0 to 1. 0 is fully transparent, 1 is fully opaque. Value is numeric.|object|

## Component Events

The [Perspective Event Types Reference](appendix\reference-pages\perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules\perspective\working-with-perspective-components\component-events-and-actions.md) page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

## Examples
This example shows a Time Series Chart displaying Temperature and Pressure values for Tank 100.

1. Create a new view, and drag an **Time Series Chart** component on to your view.

    ![" "](time-series-chart-example.png)

2. With the Time Series Chart selected, click on the chain link **Binding icon** under the **series > 0 > data**  property.

    ![" "](time-series-chart-data.png)

3. This will open the Edit Binding window. Select the **Tag History** binding type.

4. From the **Select Tags** section, click on the Tag Browse icon on the far right. Browse to select your Tag path. We selected **Realistic1** and **Realistic2** from the Generic > Realistic folder.

    ![" "](time-series-chart-tag-history-binding.png)

5. Now let's configure the following Tag History binding settings:
    1. Double click in the Alias column for each Tag to add an Alias
        1. Add the **Alias** for **Realistic1** as **temp**.
        2. Add the **Alias** for **Realistic2** as **pressure**.  
    2. Set the **Point** count to **100**.
    3. Under **Most Recent**, select **MIN** from the dropdown.
    4. Set **Polling** to **2**.
    5. The Tag History binding returns a **Dataset**. Y ou will see the format type in the Binding Preview in the lower left.
6. Click **OK**.

    ![" "](time-series-chart-tag-history-binding-preview.png)

7. Now you have Tag History data in your Time Series Chart. 

8. To add a title, scroll to the **Title** object in the PROPS section and set the following values:
    1. **title.visible** - Set to **true**.
    2. **title.text** - Enter a title: **Tank 100 Pressure and Temp Tracking**.
    3. **legend.visible** - Set to true. 

    ![" "](time-series-chart-props.png)

9. Save your project. 
10. In **Preview Mode**, when you hover over the chart you will see a timestamp and Temp and Pressure values representing the current x-trace position.

    ![" "](time-series-chart-result.png)