Chart Properties
Add explanation?
Chart properties are broken into the following categories:
- data
- axes
- pens
- chart
- interaction - Interactions are controlled by a complex set of properties and as such they have been separated into their own page.
- theme - Theme contains properties which are quite verbose and as such they have also been separated into their own page.
Data
An array of objects for trend data. This enables the inclusion of data from multiple sources.
Each instance of the data object is composed of the following properties:
| 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. |
Dataset |
| containsNaN |
Specifies if the dataset contains null values. When this value is true, null values will be rendered according to the drawNanMode property set on each pen. |
Boolean |
| isSorted |
Specifies if the x values in the dataset are sorted. Set this value to true if your data is sorted to improve rendering performance. |
Boolean |
Axes
An object containing both x and y axis properties. Multiple x and y axes may be defined.
| Name |
Description |
Property Type |
| x |
An array of x axis properties. |
Axis[] |
| y |
An 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 |
Specifies 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 |
Specifies 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. |
Double |
| 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. |
Double |
| tickSize |
The length of the tick line. |
Double |
AxisGridlines
| Name |
Description |
Property Type |
| minorsPerMajor |
Specifies 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 tick lines. |
Boolean |
| color |
The color of the tick line. |
Color |
| thickness |
The thickness of the tick line. |
Double |
| dashArray |
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 axisBorder theme property. |
Color |
| thickness |
The thickness of the border. |
Double |
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. |
Double |
| 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. |
Double |
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 |
Specify 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. |
Double |
| 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 |
Pens
The pens property contains an array of objects which represent each pen to be rendered on the charting surface.chart.
| Name |
Description |
Property Type |
| name |
The name of the pen to be displayeddisplay in the legend on the chartchart. |
String |
| visible |
Determines if the pen is visible on the chart or not. |
Boolean |
| type |
TheSpecifies chartthe type desired.of the chart. Options areinclude Line, Scatter, Column, Mountain and SplineSpline. |
StringPenType |
| 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 which starts at the next value. |
Boolean |
| pointDataLabels |
Object to configure point data labels. |
PointDataLabel |
| interpolationPoints |
Used withSets the number of interpolated points to add between data points for Spline and MountainSpline typepen curvestypes. to set the interpolation filter - aA higher value results in a smoother waveform - only visible when MountainSpline or Spline curves are selectedwaveform. |
Integer |
| drawNaNMode |
Specifies how to render points whose value is null. |
DrawNaNMode |
| axis |
DefinesObject to set the axes (x and y)y axis for the selected penpen. |
AxisPenAxis |
| data |
Defines
whereObject to set which dataset and columns contain the x and y data for the penpen.
is coming from |
DataPenData |
| stroke |
ConfigurationObject ofto configure the linepen onstroke the chart corresponding to a specific penappearance. |
Stroke |
| fill |
Object to configure the pen fill appearance if applicable. Available for Mountain and Column pen types. |
Fill |
TypePenType
| Name |
Description |
Property Type |
| Line |
A series of data points connected by line segments |
String |
|
Scatter
|
Shows large quantities of data along a horizontal and vertical axis and presents a correlation between two variables |
String |
| Column |
A type of graph that uses vertical bars or columns to represent the values of the data |
String |
| Mountain |
Essentially the same as a line chart with the area filled in under the curve |
String |
| MountainSpline |
A spline chart with the area under the curve filled in |
String |
| Spline |
A line chart where the data points are connected using spline interpolation |
String |
AxisPointDataLabel
| Name |
Description |
Property Type |
| visible |
|
Boolean |
| precision |
|
Integer |
| skipNumber |
Sets 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 |
| color |
The color of the label. |
String |
| fontSize |
The font size of the label. |
String |
| fontFamily |
The font family of the label. |
String |
| padding |
|
Padding |
Padding
| Name |
Description |
Property Type |
| top |
|
String |
|
right
|
|
String |
|
bottom
|
|
String |
|
left
|
|
String |
DrawNaNMode
| Name |
Description |
Property Type |
| PolyLine |
|
String |
|
DiscontinuousLine
|
|
String |
PenAxis
| Name |
Description |
Property Type |
| x |
Sets the pen x axis to the named x axis in the axes array object |
String |
|
y
|
Sets the pen y axis to the named y axis in the axes array object |
String |
DataPenData
| Name |
Description |
Property Type |
| name |
The name for where the data for the pen is coming from - corresponds to the name member of the Data array object |
String |
| xColumnName |
The column from the dataset in the Data array that is to be used for the X axis |
String |
| yColumnName |
The column from the dataset in the Data array that is to be used for the Y axis |
String |
Stroke
| Name |
Description |
Property Type |
| color |
The color applied to the line stroke |
Color |
| dashArray |
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 line stroke. 0 = Transparent, 1 = Opaque. |
Float |
| width |
The width to apply to the line stroke
|
Integer |
Fill
Fill and gradient properties will not appear in the Ignition Designer for line and spline type pens.
Although the fill -> gradient propproperty is visible, the gradient property has no effect on Scatter type pens.
| Name |
Description |
Property Type |
| color |
The color of the fill of mountain, column, and scatter type pens. |
Color |
| gradient |
Object containing properties for the appearance of the fill of mountain, column, and scatter type pens, allowing for highly configurable color gradients. |
FillGradient |
FillGradient
| Name |
Description |
Property Type |
| startPoint.x/y |
The starting point of the gradient. This value is relative to the screen rather than the chart - (0,0) is the top left of the screen, and (1,1) is the bottom right. |
Float |
| endPoint.x/y |
The end point of the gradient. This value is relative to the screen rather than the chart - (0,0) is the top left of the screen, and (1,1) is the bottom right. |
Float |
| gradientStops.i.offset |
The location, relative to the screen, of this gradient stop's color. Any number of gradient stops and their corresponding offsets and colors can be added to make the gradient more complex. Gradient stops must be added in the correct order, so that each offset is greater than the one after it. Must be a number between 0 and 1 inclusive. |
Float |
When configuring pens, it is important to ensure that the pen axes correspond to the specific x and y axes that are configured in the props section.
Chart
| Name |
Description |
Property Type |
| height |
The size of the chart on the y axis. Can be in %, px, rem, em, etc... |
String |
| title |
Props for the chart title, centered at the top of the chart. |
ChartTitle |
| legend |
Props for the chart's draggable legend. This can be hidden in favor of a custom legend using the visible prop.property. |
ChartLegend |
ChartLegend
| Name |
Description |
Property Type |
| visible |
Determines whether the legend is displayed on the chart. |
Boolean |
| showCheckBoxes |
Determines whether the legend checkboxes are displayed. |
Boolean |
