The Line Chart widget is available as a standard widget in the platform and as a web component that can be imported from an SDK. |
X Axis | Y Axis Value | Y Axis Value N | |||
---|---|---|---|---|---|
Field Definition | x:{name:'x',baseType:'STRING'} | value1:{name:'value1',baseType:'NUMBER'} | value2:{name:'value2',baseType:'NUMBER'} | ||
Use | Defines the X-axis values for the chart bar or column. The data must have a STRING base type. Each row is displayed as a category on the X-axis. The defined name for this column is the option that you should select for the XAxisField widget property. | Defines the Y-axis value and the legend label for the category.
| Defines the Y-axis value and the legend label for each additional data series. | ||
Base Type | STRING, NUMBER, or DATETIME | STRING, NUMBER, or DATETIME
| STRING, NUMBER, or DATETIME | ||
Row Example | x:'Apple'—where Apple is the category name to show on the X-axis | value1:10—The Y-axis value for the category | value2:30—The Y-axis value for the second data series |
The characters are case sensitive. For example, “M” represents month and “m” represents minute. |
The Streamgraph chart supports numeric values only. When you select an infotable with non-numeric values, the chart type is reset to a Line Chart, and the YAxisType property changes automatically to String or Date/Time. |
To update the chart data automatically at run time, create an Auto Refresh function and bind it to the data service that contains the chart data. For more information, see Auto Refresh. |
The secondary Y-axis properties are only available in ThingWorx 9.1 and later. |
Property | Description | Base Type | Default Value | Bindable? (Y/N) | Localization Support | ||
---|---|---|---|---|---|---|---|
SecondYAxisLabel | Specifies the text label for the secondary Y-axis. | STRING | False | Y | Y | ||
SecondYAxisLabelAlignment | Aligns the label for the secondary Y-axis to the Top, Middle, or Bottom. By default, the label is aligned at the middle of the widget. | STRING | Middle | Y | N | ||
SecondYAxisType | Sets the format of the secondary Y-axis values. You can set it to String, Numeric, or Date/Time. | STRING | String | Y | N | ||
SecondYAxisFormat | Sets the format for the secondary Y-axis values. This property is available only when you set the SecondYAxisType property to a numeric format. | STRING | 0000.0 | Y | N | ||
SecondYAxisMaxValue | Sets the maximum range for the secondary Y-axis values. By default, the range is automatically calculated based on the widget data. When you set the axis format to Date/Time, this input box changes to a date picker.
| NUMBER or DATETIME | N/A | Y | N | ||
SecondYAxisMinValue | Sets the maximum range for the secondary Y-axis values. By default, the range is automatically calculated based on the widget data.
| NUMBER or DATETIME | N/A | Y | N/A | ||
SecondYAxisDateFormatToken | Sets the format for time and date when the X-axis is set to a Data/Time format. By default, the date format is set using the operating system locale of the user. | STRING | N/A | N | Yes | ||
UseSecondYAxis1..n | Displays the values for data series N on the secondary Y-axis. These properties are available only when you set NumberOfSeries to a fixed number. | BOOLEAN | False | N | N/A |
Property Name | Description | Base Type | Default Value | Bindable | Localizable | ||
---|---|---|---|---|---|---|---|
SampleSize | Species the number of data points to display on the chart. | NUMBER | n/a | N | N | ||
ShowZoomButtons | Shows zoom in and out buttons on the chart toolbar when horizontal or vertical zoom is enabled. | BOOLEAN | False | N | N | ||
EmptyChartIcon | Specifies the icon to display when the chart is empty. | Media Entity | not visible | N | N | ||
EmptyChartLabel | Specifies the text to display when the chart is empty. | STRING | [[ChartStateLabelEmpty]] | N | Y | ||
ErrorStateIcon | Specifies the icon to display when the chart is empty. | Media Entity | error | N | N | ||
ErrorStateLabel | Specifies the text to display when the chart is empty. | STRING | N | Y | |||
HorizontalRangeZoomDateFormat | Sets the date format within the date selection box when using a range selection zoom.
| STRING | n/a | N | N | ||
HorizontalRangeZoomDateWidth | Sets the width of the date selection box on the horizontal axis when zooming is enabled.
| NUMBER | 332px | N | N | ||
LoadingIcon | Specifies the icon to display when the chart data is loading. | Media Entity | chart loading icon | N | N | ||
NoDataSourceIcon | Specifies the icon to display when the chart is not bound to a data source. | Media Entity | bind | N | N | ||
NoDataSourceLabel | Specifies the text to display when the chart is not bound to a data source. | STRING | [[ChartStateLabelNoData]] | N | Y |
Property Name | Description | Base Type | Default Value | Bindable | Localizable |
---|---|---|---|---|---|
ShowZoomButtons | Shows zoom in and out buttons on the chart toolbar when horizontal or vertical zoom is enabled. | BOOLEAN | False | N | N |
Property Name | Description | Base Type | Bindable | Localizable |
---|---|---|---|---|
Series1..nMarkerType | Sets the marker type to display for series N in the chart legend. Options: Default, None, Circle, Square, Diamond | STRING | N | N |
Property Name | Description | Base Type | Bindable | Localizable | ||
---|---|---|---|---|---|---|
NumberOfXLabels | Sets the number of labels to display on the X axis. | NUMBER | N | N | ||
NumberOfYLabels | Sets the number of labels to display on the Y axis.
| NUMBER | N | Y |
Property Name | Description | Base Type | Bindable | Localizable |
---|---|---|---|---|
NumberOfReferenceLines | Specifies the number of reference lines to display on the chart. You can add up to 24 reference lines. Additional properties are added for each reference line. | NUMBER | Y | N |
ReferecneLineNLabel | Sets the text label of the reference line N. | STRING | Y | Y |
ReferecneLineNValue | Sets the value of reference line N. You can specify a numeric or a date value based on the axis type. | NUMBER or DATETIME | Y | N |
ReferenceLineNAxis | Specifies the axis to use for reference line N. This property is available only when a chart contains two axes with continuous data, such as numbers or dates. | STRING | N | N |
Property Name | Description | Base Type | Default Value | Bindable? (Y/N) | Localizable? (Y/N) | ||
---|---|---|---|---|---|---|---|
ChartType | Sets the type of the chart as Line Chart, Run Chart, Step Chart, Area Chart, Scatter Plot Chart, or Streamgraph Chart. | STRING | Line Chart | N | N | ||
CurveFitting | Sets the line curve as Linear, Basis, Bundle, Cardinal, Catmull-Rom, Monotone-X, Monotone-Y, Natural, or Step. This property is not available for Step Chart, Area Chart, and Scatter Plot Chart. This property is not available when you select the HideLines property. | STRING | Linear | Y | N | ||
CustomClass | The user defined CSS class to apply to the top div of the widget. Multiple classes can be entered, separated by space. | STRING | n/a | Y | N | ||
Data | The infotable data source for the chart. | INFOTABLE | n/a | Y | N | ||
DataField1 — DataField24 | These properties are listed when you set NumberOfSereis to a fixed number. You can use these properties to select the infotable column to use for each data series. | Infotable Column | n/a | N | N | ||
DataLabel1 — DataLabel24 | These properties are listed when you set NumberOfSereis to a specific number, based on the number of series on the chart. You can use the properties to specify a custom label for each data series in the legend. For more information, see Customizing the Chart Legend | STRING | n/a | N | Y | ||
DataSeriesStyle | Opens the state formatting configuration dialog box. You can apply a state definition to all series on the chart. | State Definition | n/a | N | N | ||
DataSeriesStyle1 — DataSereisStyle24 | These properties are listed when you set NumberOfSereis to a fixed number. You can use these properties to apply separate state formatting to each data series on the chart. | State Definition | n/a | N | N | ||
Disabled | Disables the widget in the mashup. The widget is displayed in the mashup, but you cannot click or select it. | BOOLEAN | False | Y | N | ||
DataPointSelection | Specifies the data point to be selected relative to the pointer position. You can set the property to select the nearest data point on the vertical axis, horizontal axis, or both the axes. The available options arePointer Position, Nearest Horizontal, Nearest Vertical, or Both Axes | STRING | Pointer Position | Y | N | ||
DirectSelectionZoom | Allows you to zoom in by selecting items on the chart. The available options for this property are Horizontal Axis, Vertical Axis, Both, and None. This property appears on the properties list when you select HorizontalZoom. | STRING | None | Y | N | ||
DragSelectionZoom | Allows you to zoom in on a specific part of the chart by drawing a selection box around the data range that you want to view. The available options for this property are Horizontal Axis, Vertical Axis, Both, and None. This property appears on the properties list when you select HorizontalZoom. | STRING | None | Y | N | ||
HideLegend | Hides the legend area. When you select this property, the LegendAlignment, LegendFilter, LegendMarkerShapes, LegendMaxWidth, and LegendPosition properties do not appear in the property list. | BOOLEAN | False | Y | N | ||
HideLines | Hides the connecting lines between the data points. | BOOLEAN | False | N | N | ||
HideMarkers | Hides the data point markers. When you select this property, the MarkerShapeand MarkerSize properties do not appear in the property list. | BOOLEAN | False | N | N | ||
HideNotes | Hides the notes area. When you select this property, the Notes, NotesAlignment, and NotesPosition properties do not appear on the properties list. | BOOLEAN | False | Y | N | ||
HideValues | Hides all the value labels on the chart. | BOOLEAN | False | Y | N | ||
HideXAxis | Hides the X-Axis. | BOOLEAN | False | Y | N | ||
HideYAxis | Hides the Y-Axis. | BOOLEAN | False | Y | N | ||
HorizontalAxisMaxHeight | Sets a maximum height for the horizontal axis. | NUMBER | 85 | Y | N | ||
HorizontalAxisLabelsRotation | Sets the rotation angle of labels on the horizontal axis. You can enter a value from — 180 to 180. | NUMBER | Autosize | N | N | ||
HorizontalZoom | Allows you to zoom in on the horizontal axis. When you select this property, the HorizontalIntervalControl, HorizontalRangeZoom, and HorizontalSliderZoom, DirectSelectionZoom, and DragSelectionZoomproperties appear on the properties list. | BOOLEAN | False | Y | N | ||
HorizontalIntervalControl | Adds controls that allow you to zoom in on the horizontal axis according to specific intervals. The available options are None, which is the default selection, and Dropdown list. When you select Dropdown list, the HorizontalIntervalControlLabel and HorizontalIntervalData properties appear on the properties list. | STRING | None | N | N | ||
HorizontalIntervalControlLabel | Specifies the text label for the interval zoom controls for the horizontal axis. | STRING | n/a | Y | Y | ||
HorizontalIntervalData | The data source for the interval zoom control options. When you select an entry from the horizontal interval dropdown list, the chart is zoomed in according to the selected duration value and the start/end anchor point. | INFOTABLE | n/a | Y | N | ||
HorizontalIntervalAnchorPoint | Allows you to select the anchor position of the interval range within the data set. Select Start to place the interval at the start of the data set, or End to place the interval at the end. For example, if you specify a 3 — month interval in a 12 — month data set, you can select Start to show the first 3 months or End to show the last 3 months of the data set. This property appears when you select the ShowHorizontalAnchorPointControl property. | STRING | Start | Y | N | ||
HorizontalIntervalAnchorPointLabel | Specifies the text label for the interval anchor point for the horizontal axis. This property appears when you select the ShowHorizontalAnchorPointControl property. | STRING | n/a | Y | Y | ||
HorizontalRangeZoom | Adds controls that allow you to specify a value range to zoom in on the horizontal axis. When you select this property, the HorizontalStartZoomLabel and HorizontalEndZoomLabel properties appear on the properties list. | BOOLEAN | False | Y | N | ||
HorizontalStartZoomLabel | Specifies the text label for the start of the range selection. | STRING | n/a | Y | Y | ||
HorizontalEndZoomLabel | Specifies the text label for the end of the range selection. | STRING | n/a | Y | Y | ||
HorizontalSliderZoom | Adds a slider control that allows you to display data between a minimum and a maximum value on the horizontal axis. When you select this property, the HorizontalSliderZoomMaxLabel and HorizontalSliderZoomMinLabel properties appear on the properties list. | BOOLEAN | False | Y | N | ||
HorizontalSliderZoomMaxLabel | Specifies the text label for the maximum value of the slider zoom control. | STRING | n/a | Y | Y | ||
HorizontalSliderZoomMinLabel | Specifies the text label for the minimum value of the slider zoom control. | STRING | n/a | Y | Y | ||
Label | Displays the text label for the line chart. | STRING | Line Chart | Y | Y | ||
LabelType | Selects the label type for the bar chart as Header, Sub-Header, Label, or Body. | STRING | Sub-Header | Y | N | ||
LabelAlignment | Aligns the label of the line chart widget to the Left, Center, or Right. | STRING | Left | N | N | ||
LabelPosition | Sets the position of the label at the Top or Bottom in the widget. | STRING | Top | N | N | ||
LabelReset | Sets the label that is displayed in the reset button for the zooming control. | STRING | Reset | Y | Y | ||
LegendAlignment | Aligns the legend text to the Top, Middle, or Bottom. The available options for this property depend on the setting of the LegendPosition property. | STRING | Top | N | N | ||
LegendFilter | Adds a legend filter that allows the user to filter the chart at runtime. | BOOLEAN | False | N | N | ||
LegendMarkerShapes | Sets the marker shape of the data series legend as Square or Circle. | STRING | Square | N | N | ||
LegendMaxWidth | Sets a maximum width for the legend area. | NUMBER | 736 | Y | N | ||
LegendPosition | Sets the position of the chart legend at the Top, Bottom, Left, or Right. | STRING | Right | N | N | ||
MarkerShape | Sets the marker shape of the data points on the chart as Circle, Square or Diamond. | STRING | Circle | Y | N | ||
MarkerSize | Sets the marker size of the series. | NUMBER | 8 | Y | N | ||
MultipleDataSources | Uses multiple data sources for the chart series. This allows you to visualize data from multiple sources on the chart. | BOOLEAN | False | N | N | ||
Notes | Specifies the text to display within the notes area on the chart. You can enter a string or select a localization token. | STRING | n/a | Y | Y | ||
NotesAlignment | Aligns the note text to the Left, Right, or Center. | STRING | Left | N | N | ||
NotesPosition | Sets the position of the notes area at the Top or Bottom. | STRING | Bottom | N | N | ||
NumberOfSeries | Sets the number of data series to display on the chart. Additional DataField..Nproperties are added when you specify how many series to display on the chart. By default, automatic setting displays all data series in the infotable data. | NUMBER | Auto | N | N | ||
PointerType | Specifies the appearance of the pointer when hovering on the chart. You can use guidelines to track a data value relative to an axis. The available options are Standard, Horizontal Line, Vertical Line, or Crosshair. | STRING | Standard | Y | N | ||
ResetToDefaultValue | Resets the input for this widget to the default values. | n/a | n/a | Y | N | ||
RulersInFront | Shows the rulers in front of the data values. By default, rulers are displayed behind the data. | BOOLEAN | False | Y | N | ||
ReverseXAxis | Displays the X-Axis values in the reverse order. | BOOLEAN | False | N | N | ||
ReverseYAxis | Displays the Y-Axis values in the reverse order. | BOOLEAN | False | N | N | ||
SeriesClicked | Triggers an event when you click on a data point. | n/a | n/a | Y | N | ||
SeriesStacking | Controls how data series are stacked on the chart. The options are: • None—Disables stacking. • Auto—Stacks data relative to a baseline, based on the input order. • Expand —Stack series relative to a baseline and normalize the values. The sum of all values is 1. Use this option to highlights the relative size of the values. • Diverging—Stack positive values above zero, negative values below zero, and zero values at zero. • Silhouette —Shift the baseline down where that the center of the streamgraph is always at zero. • Wiggle—Shift the baseline to minimize the weighted wiggle of layers. | STRING | None | Y | N | ||
ShowArea | Shows the data within the chart as areas. | BOOLEAN | False | Y | N | ||
ShowHorizontalAnchorPointControl | Adds controls for adjusting the anchor value for the horizontal axis. When you select this property, the following HorizontalIntervalAnchorPoint and HorizontalIntervalAnchorPointLabel properties appear on the properties list. | BOOLEAN | False | Y | N | ||
ShowHideLegend | Adds a show/hide button that enables you to show or hide the chart legend at run time.
| BOOLEAN | False | N | N | ||
ShowXAxisRuler | Shows the X-Axis ruler. | BOOLEAN | False | Y | N | ||
ShowYAxisRuler | Shows the Y-Axis ruler. | BOOLEAN | False | Y | N | ||
ShowZeroValueRuler | Shows the zero value ruler. | BOOLEAN | False | Y | N | ||
SparkView | Shows a simplified view of the chart visualization. Enable this property to hide labels, legends, and rulers. | BOOLEAN | False | Y | N | ||
TabSequence | The sequence number of the bar chart widget when you press the TAB. | NUMBER | n/a | N | N | ||
VerticalAxisMaxWidth | Sets the maximum width for the vertical axis. | NUMBER | 85 | Y | N | ||
ValuesPosition | Sets the position of the data value labels relative to the data points as Above,Overlap, or Below. | STRING | Above | N | N | ||
VerticalZoom | Allows you to zoom in on the vertical axis. When you select this property, the VerticalSliderZoom property appears on the properties list. | BOOLEAN | False | Y | N | ||
VerticalSliderZoom | Adds a slider control that allows you to display data between a minimum and maximum values on the vertical axis. When you select this property, the VerticalZoomMaxLabel and VerticalZoomMinLabel properties appear on the properties list. | BOOLEAN | False | Y | N | ||
VerticalsliderZoomMaxLabel | Specifies the text label for the maximum value of the slider zoom control. | STRING | n/a | Y | Y | ||
VerticalSliderZoomMinLabel | Specifies the text label for the minimum value of the slider zoom control. | STRING | n/a | Y | Y | ||
XAxisField | Infotable field that represents the bar content on the X-Axis. Multiple XAxisField infotable sources appear on the properties list when you select MultipleDataSourcesproperty. | INFOTABLE | n/a | N | N | ||
XAxisLabel | Displays the label text for the X-Axis. | STRING | X-axis | Y | Y | ||
XAxisLabelAlignment | Aligns the X-Axis label to the Left, Right, or Center. | STRING | Left | N | N | ||
XAxisType | Sets the format type of the X-Axis values as String, Numeric or Date/Time. The default type is String. When you select the XAxisType as Numeric or Date/Time, the XAxisMaximumValues and XAxisMinimumValues properties appear on the properties list. These properties accept numeric values for Numeric selection and date values for Date/Time selection. | STRING | String | N | N | ||
XAxisMaximumValues | Sets the maximum range for the X-Axis values. By default, the range is automatically calculated based on the widget data. The value for this property is ignored if the chart data contains a larger value. The value type of this property depends on your selection of the XAxisType property. | STRING | n/a | Y | N | ||
XAxisMinimumValues | Sets the minimum range for the X-Axis values. By default, the range is automatically calculated based on the widget data. The value for this property is ignored if the chart data contains a smaller value. The value type of this property depends on your selection of the XAxisType property. | STRING | n/a | Y | N | ||
XAxisDateFormatToken | Localizes the date format using DD-MM-YY pattern for the X-Axis. This property is available when you select the XAxisType as Date/Time. | STRING | n/a | Y | Y | ||
XAxisFormat | Sets the format of the X-Axis values. This property is available when you select the XAxisType as Numeric. | STRING | 0000.0 | Y | N | ||
YAxisLabel | Displays the label text for the Y-Axis. | STRING | Y-axis | Y | Y | ||
YAxisLabelAlignment | Aligns the Y-Axis label to the Top, Middle, or Bottom. | STRING | Middle | N | N | ||
YAxisType | Sets the format type of the Y-Axis values as String, Numeric or Date/Time. The default type is String. When you select the YAxisType as Numeric or Date/Time, the YAxisMaximumValues and YAxisMinimumValues properties appear on the properties list. These properties accept numeric values for Numeric selection and date values for Date/Time selection. | STRING | String | N | N | ||
YAxisMaximumValues | Sets the maximum range for the Y-Axis values. By default, the range is automatically calculated based on the widget data. The value for this property is ignored if the chart data contains a larger value. The value type of this property depends on your selection of the YAxisType property. | STRING | n/a | Y | N | ||
YAxisMinimumValues | Sets the minimum range for the Y-Axis values. By default, the range is automatically calculated based on the widget data. The value for this property is ignored if the chart data contains a smaller value. The value type of this property depends on your selection of the YAxisType property. | STRING | n/a | Y | N | ||
YAxisDateFormatToken | Localizes the date format using DD-MM-YY pattern for the Y-Axis. This property is available when you select the YAxisType as Date/Time. | STRING | n/a | Y | Y | ||
YAxisFormat | Sets the format of the Y-Axis values. This property is available when you select the YAxisType as Numeric. | STRING | 0000.0 | Y | N |