Canvas Chart

This page describes how to set up and configure the Canvas Chart component, a custom chart builder using HTML Canvas.

Set up a Canvas Chart

To set up a Canvas Chart, click-and-drag the component into the workspace and configure the following:

  1. Add a layer, select the chart type from the drop-down.

  2. Assign the data source to use.

  3. Define the X-Axis ID and Y-Axis ID to plot from your data source

  4. Add x axis and y axis labels, and set the Format for each axis.

  5. Uncheck OffsetGridLines to position a line at the zero value of the y-axis.

  6. Use highlight rules to create a color differential in your displayed values; e.g. between positive and negative values.

  7. Map view states to Min and Max Viewstate to track the viewable range of the chart.

Refer to Canvas Chart properties, described in the next section, for details on additional properties.

Canvas Chart properties

The following sections provides details on how to configure the properties of the Canvas Chart component

Basics

Open the Basics properties on the right and configure the properties described in the following table.

Screenshot

Field

Description

Name

A name for the component provided by the user.

Selected

A View State Parameter to store the X-axis value at the selected position; for example time or date

Focus

Refer to Linking for details.

Hover

A View State Parameter which stores the X-axis value contingent on where the hover bar is on the chart; e.g. time or date

Transpose

Check to switch data from Y- to X-axis and X- to Y-axis.

Tip

To create a Horizontal Bar Chart, create a standard Bar Chart and check Transpose. Note that there is no zoom support for Horizontal Bar Charts.

Screenshot

Sort By

Defines the sort order for the x-axis, by either the data source index or the x-axis values

Show Error when no Data

Use this to display an error message when there is no data to be displayed.

  • When checked, an error message is displayed if there is no data.

  • When unchecked, no error message is displayed if there is no data. This is the default.

Add Patterns to Bars

This can be used to improve accessibility and visual distinction by adding patterns to bars.

  • When checked, patters are added to bars so that users do not have to rely solely on color to distinguish between the bars.

  • When unchecked, bars use solid colors.

The following illustrates how adding patterns to bars make it easier for someone with deuteranomaly to distinguish the individual bars in the chart.

ChartGL Load Time

Layers

  1. Select a Layer Type from the drop-down list; Line, Bar, Bubble, Violin, Box Plot, Waterfall or Candlestick chart.

    Screenshot

    2. Configure the properties for the Layer; Basics, Axes, Highlight Rules, Actions, Labels as well as the setting specific to the selected layer type;

    Line

    Bar

    Bubble

    BoxPlot

    Violin

    Waterfall

    Candlestick

  2. Click + LAYER to add another layer.

Basics

Configure the properties, described in the following table.

Screenshot

Field

Description

Data Source

Data sources

Name

Name used as the chart legend label

Enabled

Toggles display of the data layer on the chart. Can be tied to a View State Parameter.

Legend Enabled

Toggles display of data legend.

Background Color

Set the color, opacity and width for Line, Bar or Bubble charts.

 

  • Opacity has a value between 0 (transparent) and 100 (full opacity).

  • Border Width is in pixels.

  • Line charts do not require Background Color or Background Opacity.

Tip

Change layer order

Click-and-drag to rearrange the orders of the layer on the chart. The last layer is the top layer.

Screenshot

Background Opacity

Border Color

Border Opacity

Border Width

Axes

Configure the properties, described in the following table.

Screenshot

Field

Description

X-Axis ID

Select from the defined Axes.

X-Axis Data

Select from the Data source defined in Basics

Y-Axis ID

Select from the defined Axes.

Y-Axis Data

Select from the Data Source defined in Basics

Radius Data

These fields are only used by Bubble Charts.

 

From the Data Source select the variable to define the attribute to use for bubble scaling, then adjust the scaling variable to define bubble size. Values less than zero are not displayed on the chart.

Screenshot

Screenshot

Radius Scaling

Min

These fields are used for Box Plots. Set the column variables in order from lowest Min to highest Max

Screenshot

Screenshot

Q1

Median

Q3

Max

Open

These fields are only used by Candlestick charts. Select the data columns that correspond to each.

Close

High

Low

Interpolation

These fields are only relevant to Line layers. Configure the properties, described in the following table.

Screenshot

Field

Description

Interpolation

Select one of the following from the drop-down.

type

effect

Linear

Screenshot

Cubic

Screenshot

Also requires changes to Line Tension

Monotone

Screenshot

Stepped

Screenshot

Line Tension

Inbuilt algorithm used to smooth curve from discrete data points for Cubic line charts; integer value.

SteppedLine

Switch between Stepped chart types; before and after.

Line

Configure the properties, described in the following table.

Screenshot

Field

Description

SpanGaps

Where there is missing data, check to connect isolated points.

Show Line

Check to display / hide line chart.

Fill

Select a fill option from the drop-down.

Screenshot

fill

description

nofill

No color fill

Layer n

For color fill between charted line and selected layer. Uses BackgroundColor

origin

For color fill between chart line and X-axis

+n

For color fill between current layer and n layers below

Fade to Transparent

Where a fill color is employed, a transparency gradient will be applied to the layer

Dash Width

Use these fields to convert from a solid to a dashed line.

Dash Gap

Points

These fields are only relevant to Line Layers. Configure the properties, described in the following table.

Screenshot

Field

Description

Hit Radius

These fields define the visual styling of line point.

 

A PivotRadius of zero hides the point.

Background Color

Border Color

Border Opacity

Border Width

Radius

Background Opacity

Style

Choose between cross, circle, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle, downTriangle.

Hover Background Color

These fields define visual style of line point rollover.

Hover Background Opacity

Hover Border Color

Hover Border Opacity

Hover Border Width

Hover Radius

Bars

Configure the properties, described in the following table.

Screenshot

Field

Description

BarPercentage

Defines width of bars, and intra-bar space when percentage is selected.

Bar Thickness

Defines width of bars (in pixels) when manual bar thickness is selected.

Bar Width Type

Select either percentageor manual bar thickness.

Category Percentage

Defines width of bars, and intra-bar space when percentage is selected.

Max Bar Thickness

Defines the maximum width of bars (in pixels) when manual bar thickness is selected.

Hover Background Color

These fields define the visual style of bar rollover.

Hover Background Opacity

Hover Border Color

Hover Border Opacity

Hover Border Width

Bubbles

Configure the properties, as described in the following table.

Screenshot

Field

Description

Hover Background Color

These fields define the visual style of bubble rollover.

Hover Background Opacity

Hover Border Color

Hover Border Opacity

Hover Border Width

Hover Radius

Icon Override

Define the point style from a list of icons.

Screenshot

PointStyle

Choose the point style; cross, circle, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle.

Screenshot

Box Plot

Configure the properties, described in the following table.

Field

Description

Hover Background Color

Use these fields to define the visual style of Box plot rollover.

Hover Background Opacity

Hover Border Color

Hover Border Opacity

Hover Border Width

Bar Width Type

Select either percentage or manual bar thickness.

BarPercentage

Defines width of bars, and intra-bar space when percentage is selected.

Category Percentage

Bar Thickness

Defines the width of bar, and the maximum width of bars (in pixels) when manual bar thickness is selected.

Max Bar Thickness

Violin

Configure the properties, described in the following table.

Field

Description

Hover Background Color

These fields define the visual style of Violin rollover.

Hover Background Opacity

Hover Border Color

Hover Border Opacity

Hover Border Width

Bar Width Type

Select either percentage or manual bar thickness.

BarPercentage

These fields define the width of bars, and intra-bar space when percentage is selected.

Category Percentage

Bar Thickness

These fields define the width of bar, and the maximum width of bars (in pixels) when manual bar thickness is selected.

Screenshot

Max Bar Thickness

Candlestick

Configure the properties, described in the following table.

Screenshot

Field

Description

Use OHLC

Sets OHLC bar or candlestick.

Screenshot

Bear Color

Set color for down day candles.

Bull Color

Set color for up day candles.

Neutral Color

Set color for flat days.

Border Color

Set color of candlestick sides.

Screenshot

Bar Width Type

Select one of the options; percentage, manual bar thickness.

BarPercentage

These fields defines the width of bars, and the intra-bar space when percentage is selected.

Category Percentage

Bar Thickness

These fields define the width of bar, and the maximum width of bars (in pixels) when manual bar thickness is selected.

Max Bar Thickness

Waterfall

Configure the properties, described in the following table.

Field

Description

Bar Increase Color

These fields define the visual style of the Waterfall bar increase and decrease colors based on the previous bar value.

Screenshot

Bar Decrease Color

Regex for Data

Regular Expressions can be used to define Axes instead of a data source column. For example, a Y-axis plot to show all column data except the Date column:

Screenshot

Highlight rules

Refer to Highlight Rules for details.

To display a Highlight Rule for a Canvas Line Chart, first set Radius above zero, then adjust Border Width. Highlights will only occur at points.

Screenshot

Action

Refer to Actions for details.

Labels

Data labels can be added to any layers to place labels next to datapoints/bars. The options are described in the following table.

DataLabels

.

Field

Description

Enabled

Turns on or off data labels. This can be tied to viewstate.

Label Color

The color of Label Text.

Label Frequency

Label are applied to every nth data point where n is the label frequency.

Align

The align option defines the position of the label relative to the anchor point position and orientation. Its value can be expressed either by a number representing the clockwise angle (in degree) or by one of the following string presets:

position

description

center

The label is centered on the anchor point (default).

start

The label is positioned before the anchor point, following the same direction. If align is start the label is moved in the opposite direction.

end

The label is positioned after the anchor point, following the same direction.

right

The label is positioned to the right of the anchor point (0°).

bottom

The label is positioned to the bottom of the anchor point (90°).

left

The label is positioned to the left of the anchor point (180°).

top

The label is positioned to the top of the anchor point (270°).

The offset represents the distance (in pixels) to pull the label away from the anchor point. This option is not applicable when align is 'center'.

Anchor

An anchor point is defined by an orientation vector and a position on the data element. The orientation depends on the scale type (vertical, horizontal or radial). The position is calculated based on the anchor option and the orientation vector.

Supported values for anchor:

anchor

description

center

Element center (default)

start

Lowest element boundary

end

Highest element boundary

Offset

The offset represents the distance (in pixels) to pull the label away from the anchor point. This can be specified as a single number, for example 4 or an x,y coordinate for example 4,10).

Label Rotation

This option controls the clockwise rotation angle (in degrees) of the label, the rotation center point being the label center. The default value is 0 (no rotation).

Label Show Overlap

The display option can be used to prevent overlapping labels.

Label Template

Define data to display

Warning

Must return a string, HTML not supported

Select data to display with the Template Editor - Basic or Advanced mode. Existing data and view states can be displayed. Handlebar helpers can be used for formats.

Screenshot

Font -> Bold

Makes Label bold.

Font -> Size

Adjust font size in px.

X axes

Configure properties for hte X Axes. These properties vary depending on the axis type selected.

  1. Configure the XAxes common properties; XAxis n, Gridlines, Title and Labels.

  2. If the x axis type is linear or logarithmicconfigure the Range properties.

  3. If the x axis type is time configure the Time properties.

  4. Click + XAXES to add additional X-axis labels.

Screenshot

XAxis n

Select the axes type from the drop-down list; category, linear, logarithmic and time. The available properties are contingent on the selected axis type.

Field

Description

Display

Check to display X-axis labels.

Stacked

When using a bar chart, bars will be stacked.

Screenshot

Position

Defines the axes position; select between top and bottom of the chart area for X axes.

Center

For linear selection, this centers the axis at a defined value.

Gridlines

Configure the properties, described in the following table.

Screenshot

Field

Description

OffsetGridLines

Check to shift charted category data from center alignment to left-alignment

GridLinesColor

These fields define the visual style of chart gridlines; opacity has a value between 0 (transparent) and 100 (opaque).

GridLinesOpacity

Title

Configure the properties, described in the following table.

Screenshot

Field

Description

Display

Check to display X-axis description label

LabelString

Descriptive level for X axis

FontFamily

These fields set font styling parameters for X-axis label.

 

Opacity has a value between 0 (transparent) and 100 (opaque).

FontSize

FontStyle

FontColor

Font Opacity

Labels

Configure the X-axis tick labels properties, described in the following table.

Screenshot

Field

Description

Display

Check to display X-axis labels

Begin at Zero

X-axis includes zero when enabled. If disabled the chart fits the available data. This is available for non-time axis selections.

Reverse

Reverses the order of chart axis. This is available for linear and logarithmic axis selections.

Offset

For linear and time selection, this adds a buffer to the start and end of chart to display in full, the first and last data point.

Hide Trailing Zeroes

Do not display zeroes at the end of numeric data. Available for linear and logarithmic axis selections.

Format

Format of Y axis: General, Number, Smart Number, or Datetime. Available for non-time axis selections.

Decimal Places

Precision of numeric data for Number and Smart Number. Available for non-time axis selections.

Date/Time Format

Where Datetime is selected, define time format to use: YYYY-MM-DD, YYYY-MMM-DD, YYYY-MMMM-DD, YYYY-MM, YYY-MMM, YYYY-MMMM, MMM-DD, MMM Do, YYY-MM-DD HH:mm:ss, YYYY-MM-DD hh:mm:ss, YYYY-MM-DD kk:mm:ss, hh:mm:ss, kk:mm:ss, hh:mm:ss:SS, mm:ss or mm:ss:SS. Available for non-time axis selections.

Min Rotation

These fields adjust the alignment of tick labels.

Max Rotation

Fixed Axis Width

Defines distance between Canvas Chart component edge and axis. Useful when aligning neighboring charts.

Step Size

Sets the grid-line distance between tick labels (numeric).

Prefix

These set the character text to be added before or after each label. For example, a $ prefix or a % suffix. Available for non-time axis selections.

Suffix

Font Family

Use these fields to set the font for use in axis labels.

 

Choose from; normal, italic, oblique, initial and inherit.

 

Opacity is a value between 0 (transparent) and 100 (opaque).

Font Size

Font Style

Font Color

Font Opacity

Filter Unique

Removes duplicate labels when present in the data for category data.

Time Formats

These properties only apply when X-Axis is set to time. Configure the properties, described in the following table.

Screenshot

Field

Description

Distribution

Choose the distribution type as either; Smart, Linear or Series definition. Smart

 

Distribution collapses time to remove null time intervals, for example between marked trading hours .

Break

TriggerBreak

Force Time Unit

Select from year, quarter, month, week, day, hour, minute, second, millisecond, as defined in the following parameters.

parameter

default

Year

YYYY

Quarter

[Q]Q - YYYY

Month

MMM YYYY

Week

II

Day

MMM D

Hour

hA

Minute

h:mm a

Second

h:mm:ss a

Millisecond

h:mm:ss SSS a

Tooltip Format

This is currently not in use as it has been replaced by aforementioned options.

IsoWeekday

Use ISO weekday format for X-axis time display.

Round

Round time to the nearest Force Time Unit scale.

Show Major units

If true, major ticks are generated. Each major tick represents a new parent time period (based on the child minor ticks). Minor ticks are shown by default.

Range

These properties are only available for linear and logarithmic axis types. Configure the data range properties, described in the following table.

Screenshot

Field

Description

Use Min/Max

Defines axis range by minimum and maximum values in plotted data

Reset on Change

When Min/Max is set as a boolean control and Soft Range is enabled, will re-scale axis when Min/Max is true.

Use Soft Range

Best fit within a suggested Min and Max value; e.g. for dynamic range charts

Use Data Range

Use existing data to define Min/Max range. Uncheck to manually set.

Suggested Min

Best fits chart by Suggested Min/Max values.

Suggested Max

Min

Define minimum and maximum values to chart.

Warning

Hard Range

Charted data outside of the set Min and Max range is not displayed. If all data falls outside the set range, the chart will be blank.

Max

Use Soft Range

Best fit within a suggested Min and Max value; e.g. for dynamic range charts

Y axes

Configure properties for the Y Axes. These properties vary depending on the axis type selected.

  1. Configure the Y Axes common properties; YAxis,Gridlines, Title, and Gridlines.

  2. For y axes linear, logarithmic type specify the Range properties.

  3. Click + YAXES to add additional Y-axis labels.

Add multiple Y-axes by clicking +YAXES.

Screenshot

YAxis n

Select the axes type from the drop-down and choose from; category, linear, logarithmic and time. The properties displayed are contingent on the selected axis type.

Field

Description

Display

Check control to display Y-axis labels

Stacked

Check control to parse bars in a Y-axis stack

Screenshot

Note

Stacked Y-axis with Line Fill

Stacking stacks lines in numeric order. Line 1 is the first (highest) line down to the last and lowest line, closest to origin X-axis. Line fill changes accordingly. For example, a line fill with or without Y-axes stacking enabled:

Screenshot

Position

Position Y-axis label to the left or right of chart area.

Center

Set center value for linear Y-axis.

Gridlines

Configure the properties, described in the following table

Screenshot

Field

Description

OffsetGridLines

Shift charted category data from center alignment to left-alignment.

GridLinesColor

Define the visual style of gridlines.

GridLinesOpacity

Title

Configure the properties, described in the following table.

Screenshot

Field

Description

Display

Check to display X-axis description label.

LabelString

Label description.

Font Family

Select the font for use in axis labels.

 

Choice of font style between normal, italic, oblique, initial and inherit.

 

Opacity has a value between 0 (transparent) and 100 (opaque).

Font Size

Font Style

Font Color

Font Opacity

Labels

Configure the properties, described in the following table.

Screenshot

Field

Description

Display

Display Y-axis labels.

Format

Format of Y axis: General, Number, Smart Number, or Datetime. Available for non-time axis selections.

Decimal Places

Precision of numeric data for Number and Smart Number. Available for non-time axis selections.

Date/Time Format

Where Datetime is selected, define time format to use: YYYY-MM-DD, YYYY-MMM-DD, YYYY-MMMM-DD, YYYY-MM, YYY-MMM, YYYY-MMMM, MMM-DD, MMM Do, YYY-MM-DD HH:mm:ss, YYYY-MM-DD hh:mm:ss, YYYY-MM-DD kk:mm:ss, hh:mm:ss, kk:mm:ss, hh:mm:ss:SS, mm:ss or mm:ss:SS. Available for non-time axis selections.

Hide Trailing Zeroes

Do not display zeroes at the end of numeric data.

Begin at Zero

Axis data starts at zero. Available for non-time axis selections.

Reverse

Reverse order of labels from bottom-up to top-down. Available for linear and logarithmic axis selections.

Screenshot

Offset

For linear and time selection, adds buffer to start and end of chart to display in full, the first and last data point.

Min Rotation

 

Max Rotation

Rotation of y-axis labels.

Fixed Axis Width

Distance between Y axis and the edge of the component (used when making room for Y-axis labels).

Step Size

Sets the grid-line distance between tick labels (numeric).

Prefix

Specify the character text to be added before or after each label. For example; a $ prefix or a % suffix. Available for non-time axis selections.

Suffix

Font Family

Specify the font qualities; style, size, color and opacity for the axis label.

Font Size

Font Style

Font Color

Font Opacity

Range

These properties are only available for linear and logarithmic axis types. Configure the properties, described in the following table.

Screenshot

Use data boundaries to define the X-axis range

Field

Description

Use Min/Max

Defines the axis range by minimum and maximum values in plotted data.

Reset on Change

When Min/Max is set as a boolean control and Soft Range is enabled, the axis re-scales when Min/Max is true.

Use Soft Range

Best fit within a suggested Min and Max value, for example; for dynamic range charts.

Use Data Range

Use existing data to define Min/Max range. Un-check to manually set.

Suggested Min

Best-fits the chart by the Suggested Min/Max values.

Suggested Max

Min

Define the minimum and maximum values to chart.

Warning

Hard Range

Charted data outside of the set Min and Max range is not displayed. If all data falls outside the set range, the chart is blank.

Max

Animations

Configure transition animations to be applied when switching data in the chart. Configure the properties in the following table.

Field

Description

Enable

Check to enable animations.

Hover Events

By default the chart highlights all bubbles, points and bars that lie along the same x-axis. You can toggle this setting to disable highlighting on the chart. Crosshairs and Tooltips still function the same.

 

This option must be checked in charts with large amounts of data, as it decreases the number of times the chart has to update while hovering.

Interaction Mode

Hovering Mode gives you the option of changing the way the chart highlights points. The options are:

x - By default (x), points with the same x value are also highlighted.

y - Points with the same y value get highlighted.

point - Only points you are hovering over are highlighted.

dataset - The entire dataset is highlighted.

Overlay

Configure the Overlay properties, which define the use of tooltips and their positioning.

Screenshot

Field

Description

Show Crosshairs

Check to show crosshair on chart.

Show Tooltip

Check to show tooltip on chart.

Tooltips Intersect

When intersect is selected, only bubbles, points or bars that are hovered over are shown in a potential tooltip. Lines do not count as points and will not trigger a tooltip, therefore line points must have a radius in order to be hoverable.

Note

Due to limitation of the chart engine, highlight always appears based on the x-axis location.

Tooltips Prefer Intersect

When tooltip prefer intersect is selected, the tooltip will try populate itself with things that are being hovered on. If nothing is being hovered on, the tooltip will populate with items in the closest x-value.

Set visual criteria for tooltip; intersect places tooltip at crosshair.

Crosshairs Color

Define the color for crosshair line.

Tooltip Background Opacity

Define the opacity of the Tooltip Background.

Tooltip Font Size

Set the fontsize in px of the Tooltip Text.

Align Tooltip with Edge

Enable to position tooltip along left chart axis.

Use Custom Tooltip

Check to enable use of a custom Tooltip, which is specified in the following field.

Custom Tooltip

Examples:

HTML

Copy 
<table>
  <thead>
    <tr style="padding-right: 10px;">
      <th> {{xLabel}} </th>
      <th/>
    </tr>
  </thead> 
  {{#each points}}
    <tr>
      <td> 
        <svg height="12" width="12">
          <rect height="12" width="12"
            style="fill: {{colors.backgroundColor}}; 
              stroke-width: 3; stroke: {{colors.borderColor}};" />
        </svg> 
        {{layerName}}: 
      </td>
      <td style="padding-right: 10px; text-align: left;">
        {{layerData}}
      </td>
    </tr> 
  {{/each}}
</table>

To group together layers with the same name, modify the template as follows:

HTML

Copy 
<table>
  <thead>
    <tr style="padding-right: 10px;">
      <th>{{ xLabel }}</th>
    </tr>
  </thead> 
  {{#groupByLayer}} 
    {{#each layers }}
      <tr>
        <td> 
          <svg height="12" width="12">
            <rect height="12" width="12" 
              style="fill: {{colors.backgroundColor}}; 
              stroke-width:3; stroke: {{colors.borderColor}};"> />
          </svg> 
          {{ layerName }}: 
        </td> 
        {{#each layerPoints}}
        <td style="text-align: left;"> 
          {{data}} 
        </td> 
        {{/each}} 
    </tr> 
    {{/each}}
  {{/groupByLayer}} 
</table>

To display selected layers, set the names attribute in #filterLayers to a comma-separated list of layers to display; for example, to show Layer 1 and Layer 3 use:

HTML

Copy 
<table>
  <thead>
    <tr style="padding-right: 10px;">
      <th> {{xLabel}} </th>
      <th/>
    </tr>
  </thead> 
  {{#filterLayers names="Layer 1,Layer 3"}}
    {{#each points}}
      <tr>
        <td> 
          <svg height="12" width="12">
            <rect height="12" width="12" 
              style="fill: {{colors.backgroundColor}}; 
                stroke-width: 3; stroke: {{colors.borderColor}};" />
          </svg> 
          {{layerName}}: 
        </td>
        <td style="padding-right: 10px; text-align: left;">
          {{layerData}}
        </td>
      </tr> 
    {{/each}}
  {{/filterLayers}}
</table>

Crosshairs Color

Define hex color code reference for crosshair color.

Refer to Templates for further information on configuring templates.

Zoom & Pan

Configure the properties as defined in the following table.

Screenshot

Field

Description

Scroll Zoom

Check to enable respective behaviors.

 

Pan and Drag Zoom are both triggered by mouse movement, therefore icons in the top right corner of the chart appear allowing you to toggle between the two. Scroll zoom is activates with mouse wheel movement.

Note

A pan is typically done after a zoom when there is data ‘off screen’ to see. To pan, click on the hand icon in the top-right of the chart.

Screenshot

Drag Zoom

Pan

Reset Viewstates Only

Check to reset only Min/Max Viewstates this prevents the values of the viewstates being passed into the chart. This can be used for server side zooming, where additional aggregation occurs on the server to return the correct resolution of data.

Fill color

Set the color and opacity of highlight zoom region.

Fill Opacity

Min Viewstate

Specify View State Parameters for range values made on adjustment in the chart.

Max Viewstate

Default Min Viewstate

 

Set the default View State Parameters min and max range for when a chart loads.

Default Max Viewstate

Viewstate Update Delay

Set the length of time (in seconds) between when an adjustment in chart viewable area is then passed to Min/Max Viewstates. This only occurs for panning and scroll zooming, drag zoom's values are passed to the viewstates instantaneously .

Snap to Data

When set, the selection moves to the nearest valid data point

Rounding for Y-axis

Select none, nice or min/max. Best fits y-axis scale according to data range of zoomed data.

Legend

Configure the properties, to define the data legend labels, as per the following table.

Screenshot

Field

Description

Display

Toggle to display chart labels.

Position

Define where Legends are set: bottom,top,left, right or top-inline.

Icon Width

Set the parameters of the area used to display Legends; width controls point size.

Icon Padding

Label color

Define the style of the Legend text.

Label Font Size

Align

Set the position of Legends, choose between start, center or end.

Legend Display Type

Select between default, scroll, layer group or layer new line; layer groups and lines aggregate legends where wild card is used in the layer.

New Layer Threshold

Define the number of items to display per layer new line of Legend Display Type.

Reverse Order

Reverses order of labels from left-to-right to right-to-left.

Use Point Style

Enable use of chart points or use block color.

Note

Legends toggle display

Users can click on legends to toggle display of the corresponding chart data. Hidden data is marked with strikethrough on its legend.

File export

Refer to Export for details.

 

Style, Format, Margins

Refer to Style for details.

 

Further Reading