Chart Properties
The chart properties define the data, appearance, and user interactions of the chart. The high-level properties are summarized here and described in detail in the linked sections.
Data
| Name |
Description |
Property Type |
| name |
The unique reference name for the dataset. This value is used within the pen properties to define the pen data. |
String |
| dataset |
Contains columns with x and y data values. Must use an Ignition dataset. |
Dataset |
| isSorted |
Specifies if the x values in the dataset are sorted. Setting this value to true when data is sorted improves rendering performance.
Note that pens are not assigned to annotations properly for mountain charts when this is false.
|
Boolean |
Axes
| Name |
Description |
Property Type |
| x |
Array of x-axis properties. |
Axis[] |
| y |
Array of y-axis properties. |
Axis[] |
Axis
| Name |
Description |
Property Type |
| name |
The unique reference name for the axis. This value is used within the pen properties to define a pen axis. |
String |
| visible |
Toggles the visibility of the axis. |
Boolean |
| type |
The axis type. |
AxisType |
| categoryLabelType |
The category label type. Available when the axis type is CategoryAxis. |
CategoryLabelType |
| categoryLabels |
List of category labels used when the categoryLabelType is Text. The index of each item corresponds to the index of the data value. |
String[] |
| title |
Object to configure the axis title. |
AxisTitle |
| ticks |
Object to configure major and minor ticks for the axis. |
AxisTicks |
| gridlines |
Object to configure major and minor gridlines for the axis. |
AxisGridlines |
| units |
The units of measure for the axis. Included in the axis title. |
String |
| border |
Object to configure the axis border color and thickness. This is applied to border between the axis and the area where chart data is drawn. |
AxisBorder |
| range |
Object to configure the range of the axis. |
AxisRange |
| position |
The position of the axis on the chart. Options are Left, Right, Top, and Bottom. |
String |
| label |
Object to configure the axis label. |
AxisLabel |
AxisType
| Name |
Description |
Property Type |
| CategoryAxis |
Axis which renders by index and can be assigned text labels. |
String |
| DateTimeNumericAxis |
Value axis to format date time axis labels. |
String |
| NumericAxis |
Value axis suitable when the axis data is numeric. |
String |
| LogarithmicAxis |
Value axis suitable for numeric data to be presented in logarithmic scale. Supports base 10. |
String |
CategoryLabelType
| Name |
Description |
Property Type |
| Text |
Category labels are rendered as text from the categoryLabels property. |
String |
| Numeric |
Category labels correspond to the index of each value. |
String |
AxisTitle
| Name |
Description |
Property Type |
| text |
The text displayed for the axis title. |
String |
| fontSize |
The font size of the text. |
Float |
| fontFamily |
The font family of the text. |
String |
| color |
The color of the text. |
Color  |
AxisTicks
| Name |
Description |
Property Type |
| major |
Object to configure the major ticks for the axis. |
AxisTick |
| minor |
Object to configure the minor ticks for the axis. |
AxisTick |
AxisTick
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the tick lines. |
Boolean |
| color |
The color of the tick line. |
Color |
| thickness |
The thickness of the tick line. |
Float |
| length |
The length of the tick line. |
Float |
AxisGridlines
| Name |
Description |
Property Type |
| minorsPerMajor |
The number of minor gridlines to draw between each major gridline. |
Integer |
| major |
Object to configure the major gridlines for the axis. |
AxisGridline |
| minor |
Object to configure the minor gridlines for the axis. |
AxisGridline |
AxisGridline
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the gridlines. |
Boolean |
| color |
The color of the gridline. |
Color |
| thickness |
The thickness of the gridline. |
Float |
| dashArray |
Array of float values that specifies the size of dashes and gaps used to draw the gridline. Enter an even number of float values to create a repeating pattern.
|
Float[] |
AxisBorder
| Name |
Description |
Property Type |
| color |
The border color. Overrides the axisBorderColor theme property. |
Color |
| thickness |
The thickness of the border. |
Float |
AxisRange
| Name |
Description |
Property Type |
| flippedCoordinates |
Reverses the direction of the axis when true. This orders values along the axis from high to low instead of low to high. |
Boolean |
| auto |
Specifies if the axis range should be set based on the data range or the min and max properties. |
AxisRangeAuto |
| min |
The minimum value to show for the axis. This overrides the minimum extent of the data when the axis is auto ranging. |
Float |
| max |
The maximum value to show for the axis. This overrides the maximum extent of the data when the axis is auto ranging and the min is not set. It is ignored when auto ranging if the min is set. |
Float |
AxisRangeAuto
| Name |
Description |
Property Type |
| Always |
Update the range of the axis when the data changes unless a zoom interaction has changed the visible range. |
String |
| Never |
Never change the range of the axis except through pan and zoom interactions. |
String |
| Once |
Update the range of the axis to the extents of the data the first time the axis is drawn. |
String |
AxisLabel
| Name |
Description |
Property Type |
| format |
The format to use for the axis labels.
This is not applied when the axis type is DateTimeNumericAxis.
|
AxisLabelFormat |
| fontSize |
The font size of the labels. |
Float |
| fontFamily |
The font family of the labels. |
String |
| color |
The color of the labels. |
Color |
| Name |
Description |
Property Type |
| NoFormat |
Specifies no formatting of the axis labels. Defaults to integer whole values. |
String |
| Decimal |
Formats the axis labels with a single decimal place. |
String |
| SignificantFigures |
Formats the axis labels as a whole number (no decimal places). |
String |
| Date_DDMMYYYY |
Formats the axis labels as DateTime. (eg. 12/31/1969) |
String |
| Date_DDMMYY |
Formats the axis labels as DateTime. (eg. 01/01/70) |
String |
| Date_DDMMHHMM |
Formats the axis labels as DateTime. (eg. 01/01 00:00) |
String |
| Date_DDMM |
Formats the axis labels as DateTime. (eg. 01/01/70) |
String |
| Date_HHMM |
Formats the axis labels as DateTime. (eg. 01/01) |
String |
| Date_HHMMSS |
Formats the axis labels as DateTime. (eg. 00:00) |
String |
| Exponential |
Formats the axis labels as exponential notation. (eg. 2.0e+1) |
String |
| Scientific |
Formats the axis labels as scientific notation. (eg. 3x10³) |
String |
Pen
| Name |
Description |
Property Type |
| name |
The name of the pen to display in the legend on the chart. |
String |
| visible |
Toggles the visibility of the pen on the chart. Also toggles the corresponding checkbox in the legend if it is visible.
This is a two-way property. It is updated when checkboxes in the legend are toggled directly on the chart.
|
Boolean |
| type |
The type of the chart. Options include Line, Scatter, Column, Mountain and Spline. |
PenType |
| isDigitalLine |
Lines are rendered as a step line when set to true. A horizontal line is drawn after each data point and a vertical line joins it to the line that starts at the next value. |
Boolean |
| pointDataLabels |
Object to configure point data labels. They are placed above and to the right of the corresponding data points. |
PointDataLabel |
| interpolationPoints |
The number of interpolated points to add between data points for Spline and MountainSpline pen types. A higher value results in a smoother waveform. |
Integer |
| containsNull |
Specifies if the dataset contains null values. When this value is true, null y values will be rendered according to the drawNullMode property set on each pen. |
Boolean |
| drawNullMode |
Specifies how to render points whose y value is null. This applies to line, spline, mountain and mountain spline pen types. |
DrawNullMode |
| axis |
Object to set the x- and y-axis for the pen. |
PenAxis |
| data |
Object to set which dataset and columns contain the x and y data values for the pen.
|
PenData |
| stroke |
Object to configure the pen line appearance. |
PenStroke |
| fill |
Object to configure the pen area appearance if applicable. Available for Mountain, MountainSpline and Column pen types. |
PenFill |
PenType
| Name |
Description |
Property Type |
| Line |
Renders a line connecting data points. Uses linear interpolation unless isDigitalLine is true. |
String |
|
Scatter
|
Renders a dot for each data point. |
String |
| Column |
Renders a vertical bar or column for each data point. |
String |
| Mountain |
A line chart with a color or gradient applied to the area under the line. |
String |
| MountainSpline |
A spline chart with a color or gradient applied to the area under the line. |
String |
| Spline |
Renders a line connecting data points using spline interpolation. |
String |
PointDataLabel
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the data labels. |
Boolean |
| precision |
The number of decimal places to render on the data labels. |
Integer |
| skipNumber |
The number of data point labels to skip between ones that are rendered. Set to 0 to render a label for each data point. |
Integer |
| padding |
Object to configure the padding between each label and its corresponding data point. |
Padding |
| color |
The color of the label. |
String |
| fontSize |
The font size of the label. |
String |
Padding
| Name |
Description |
Property Type |
|
bottom
|
Number of pixels between the point and the bottom of the label. |
Float |
|
left
|
Number of pixels between the point and the left of the label. |
Float |
DrawNullMode
| Name |
Description |
Property Type |
| Continuous |
Renders a line in place of null values by interpolating between non-null values when the data containsNull property is true. |
String |
|
Discontinuous
|
Does not render a line in place of null values. This is the default. |
String |
PenAxis
| Name |
Description |
Property Type |
| x |
The name of the x-axis to plot the pen on. |
String |
|
y
|
The name of the y-axis to plot the pen on. |
String |
When configuring pens, it is important to ensure that the pen axes correspond to x- and y-axes that are configured in the axes.x and axes.y props sections, respectively.
PenData
| Name |
Description |
Property Type |
| name |
The unique reference name for the dataset in the data array that contains data values for the pen. |
String |
| xColumnName |
The name of the column in the dataset that contains the x values for the pen. |
String |
| yColumnName |
The name of the column in the dataset that contains the y values for the pen. |
String |
PenStroke
| Name |
Description |
Property Type |
| color |
The color of the pen line. Overrides penLineStroke, penMountainStroke, penColumnStroke theme properties according to the pen type. |
Color |
| dashArray |
An array of float values that specifies the size of dashes and gaps used to draw the pen. Enter an even number of float values to create a repeating pattern. |
Float[] |
| opacity |
The opacity to apply to the pen line.
0 = Transparent, 1 = Opaque.
|
Float |
| thickness |
The thickness of the line.
|
Integer |
PenFill
Fill properties will not appear in the Ignition Designer for line and spline type pens.
| Name |
Description |
Property Type |
| color |
The color of the pen area for Column, Mountain, MountainSpline, and Scatter type pens. Overrides penMountainFill, penColumnFill theme properties according to the pen type. |
Color |
| gradient |
Object to configure a linear gradient for the pen area of Column, Mountain, and MountainSpline type pens.
|
PenFillGradient |
PenFillGradient
| Name |
Description |
Property Type |
| startPoint |
The start point of the gradient axis. This value is relative to the chart area with (0,0) being the top left of the area and (1,1) at the bottom right. |
PenGradientPoint |
| endPoint |
The end point of the gradient axis. This value is relative to the chart area with (0,0) being the top left of the area and (1,1) at the bottom right. |
PenGradientPoint |
| gradientStops |
Array of objects that define the gradient colors and their relative offset along the gradient axis. Gradient stops must be listed in order of increasing offset. |
PenGradientStop[] |
PenGradientPoint
| Name |
Description |
Property Type |
| x |
The x coordinate of the point. |
Float |
| y |
The y coordinate of the point. |
Float |
PenGradientStop
| Name |
Description |
Property Type |
| color |
The color of the gradient stop. |
Color |
| offset |
The location along the gradient axis of the gradient stop. Valid values range from 0 through 1. |
Float |
Chart
| Name |
Description |
Property Type |
| height |
The height of the chart. Default is 100% and will fill the space allocated in the Perspective view. Update this if the overview interaction is visible to better control the size of each. |
String |
| title |
Object to configure the chart title. |
ChartTitle |
| legend |
Props for the chart legend that contains a list of pens for the chart. This can be hidden in favor of a custom legend using the visible property. |
ChartLegend |
ChartTitle
| Name |
Description |
Property Type |
| text |
The text displayed for the chart title. Multiple lines can be added using an array of strings. |
String or String[] |
| color |
The color of the chart title. |
Color |
| fontSize |
The font size of the chart title. |
Float |
| fontFamily |
The font family of the chart title. |
String |
|
|
Places the chart title inside the chart area if true or above it if false. |
Boolean |
ChartLegend
| Name |
Description |
Property Type |
| visible |
Toggles the visibility of the legend on the chart. |
Boolean |
| showCheckBoxes |
Toggles the visibility of checkboxes next to each pen in the legend. The checkboxes toggle the visibility of the corresponding pens on the chart. |
Boolean |
| orientation |
The orientation of pens in the legend. |
LegendOrientation |
| coordinates |
The coordinates for the legend. Relative to the top left of the component div.
This is a two-way property. The value is changed when the legend is moved.
|
LegendCoordinates |
LegendOrientation
| Name |
Description |
Property Type |
|
Horizontal
|
Lists pens horizontally in the legend. |
Float |
|
Vertical
|
Lists pens vertically in the legend. |
Float |
LegendCoordinates
| Name |
Description |
Property Type |
|
x
|
The x coordinate of the chart legend. |
Float |
| y |
The y coordinate of the chart legend. |
Float |
