Skip to main content

Chart Properties

AddThe explanation?

chart

Chartproperties define the data, appearance, and user interactions of the chart. The high-level properties are brokensummarized intohere and described in detail in the followinglinked categories:sections.

  • 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

    NameDescriptionProperty Type
    data
    		 An array of objects forthat define and contain the trend data.  This enables the inclusion of data from multiple sources.Data[]
    axesAn object containing properties to configure the x and y axes for the chart.Axes
    pensAn array of objects that configure each pen for the chart.Pen[]
    chartAn object to configure general aspects of the chart including an optional title and legend.Chart
    interactionObject to configure the many interactions available on the chart. These include a menu, zooming, and ways to select parts of the chart to get details on the chart values. hey are described in detail on their own page.Interaction open_in_new.png
    themeMany theme properties are available, and they are described in detail on their own page.Theme open_in_new.png

     

    Data

    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
    containsNull Specifies if the dataset contains null values. When this value is is true,  null y values will be rendered according to the the drawNullMode 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 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. 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
    length The length of the tick line. Double

    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 tick lines. Boolean
    color The color of the tick line. Color
    thickness The thickness of the tick line. Double
    dashArray

    An 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 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

    The format to use for the axis labels.

      

    This is not applied when the axis 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
    AxisLabelFormat
    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 chart.

    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. 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 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
    drawNullMode Specifies how to render points whose y value is 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. Stroke
    fill Object to configure the pen area appearance if applicable. Available for for Mountain, MountainSpline and Column pen types. Fill

    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
    fontFamily

    The font family of the label.  

      

    Known issue: this does not work.

    		 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 of null values by interpolating between non-null values values when the data containsNull property is is true. String

    Discontinuous

    		 Does not render a line in place of of null values. This is the default. String

    PenAxis

    Name Description Property Type
    x Specifies the name of the x axis to plot the pen on. String

    y

    		 Specifies 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 Specifies the unique reference name for the dataset in the data array that contains data values for the pen. String
    xColumnName Specifies the name of the column in the dataset that contains the x values for the pen. String
    yColumnName Specifies the name of the column in the dataset that contains the y values for the pen. String

    Stroke

    Name Description Property Type
    color The color of the pen line. 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 or width of the line.

    		 Integer

    Fill

    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 for Column,  Mountain, MountainSpline, and Scatter type pens. Color
    gradient

    Object to configure a linear gradient for the pen area of of Column, Mountain, and MountainSpline type pens.

      

    Although visible, the gradient property has no effect on Scatter type pens.

    		 FillGradient
    FillGradient
    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. Point
    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. Point
    gradientStops An 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. GradientStop[]
    Point
    Name Description Property Type
    x The x coordinate of the point. Float
    y The y coordinate of the point. Float
    GradientStop
    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. 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. Double
    fontFamily The font family of the chart title. String
    placeWithinChart
    		 Places the chart title inside the chart area if if true or above it if 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
    LegendOrientation
    Name Description Property Type

    Horizontal

    		 Lists pens horizontally in the legend. Float

    Vertical

    		 Lists pens vertically in the legend. Float
Back to top