Skip to content

Canvas Chart

A custom chart builder using HTML Canvas.

Basics

Screenshot

Selected
A View State Parameter to store the X-axis value at the selected position; e.g time or date
Focus
Linking
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.

Horizontal Bar Chart

To create a Horizontal Bar Chart, create a standard Bar Chart but check the Transpose box.

Screenshot

Note, there is no Zoom support for Horizontal Bar Chart.

Layers

Basics

Add a Line, Bar, Bubble, Box Plot or Candlestick chart from a data source

Screenshot

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.
BackgroundColor
BackgroundOpacity
BorderColor
Border Opacity
BorderWidth
Color, opacity and width for Line, Bar or Bubble charts

(Line charts make no use of BackgroundColor or BackgroundOpacity.)

Change layer order

Use a click-and-drag to rearrange the orders of the layer on the chart. The last layer will be the top layer.

Screenshot

Axes

Screenshot

X-Axis ID
Select from defined Axes.
X-Axis Data
Select from Data source defined in Basics
Y-Axis ID
Select from defined Axes.
Y-Axis Data
Select from Data Source defined in Basics
Radius Data
Radius Scaling
Select from Data Source the variable to define which attribute to use for bubble scaling, then adjust the scaling variable to define bubble size.
Screenshot

Screenshot

Radius

Radius Data and Radius Scaling are used only for Bubble charts.

Set Radius Data to a a positive data-value column; e.g. a custom-radius data column.

Set Radius Scaling to a positive value to prevent hidden bubbles. (Radius values <0 will not display.)

Min
Q1
Median
Q3
Max

Used for Box Plot. Set column variables in order from lowest Min to highest Max

Screenshot

Screenshot

Open
Close
High
Low
Used only by Candlestick charts; select data columns which correspond to each.

Interpolation

Relevant to Line layers only

Screenshot

Interpolation

Select from dropdown

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.
SteppedLine
Switch between Stepped chart types; before and after

Line

Screenshot

Show Line
Check to display / hide line chart
SpanGaps
Where there is missing data, check to connect isolated points
Fade to Transparent
Where a fill color is employed, a transparency gradient will be applied to the layer
Fill

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

Points

Relevant to Line layers only

Screenshot

Hit Radius
Background Color
Border Color
Border Opacity
Border Width
Radius
Background Opacity
Define visual styling of line point; a PivotRadius of zero will hide the point.
Style
Choose between cross, circle, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle, downTriangle.
Hover Background Color
Hover Background Opacity
Hover Border Color
Hover Border Opacity
Hover Border Width
Hover Radius
Define visual style of line point rollover.

Bars

Screenshot

Bar Width Type
Dropdown select between percentage, manual bar thickness
BarPercentage
Category Percentage
Defines width of bars, and intra-bar space when percentage is selected.
Bar Thickness
Max Bar Thickness
Defines width of bar, and maximum width of bars (in pixels) when manual bar thickness is selected.
Hover Background Color
Hover Backgroun Opacity
Hover Border Color
Hover Border Opacity
Hover Border Width
Define visual style of bar rollover

Bubbles

Screenshot

Hover Background Color
Hover Backgroun Opacity
Hover Border Color
Hover Border Opacity
Hover Border Width
Hover Radius
Define visual style of bubble rollover
Icon Override
Screenshot
Define point style from a list of icons
PointStyle
Screenshot
Choose between cross, circle, crossRot, dash, line, rect, rectRounded, rectRot, star, triangle.

Box Plot

Hover Background Color
Hover Backgroun Opacity
Hover Border Color
Hover Border Opacity
Hover Border Width
Define visual style of Box plot rollover
Bar Width Type
Dropdown select between percentage, manual bar thickness
BarPercentage
Category Percentage
Defines width of bars, and intra-bar space when percentage is selected.
Bar Thickness
Max Bar Thickness
Defines width of bar, and maximum width of bars (in pixels) when manual bar thickness is selected.

Violin

Hover Background Color
Hover Backgroun Opacity
Hover Border Color
Hover Border Opacity
Hover Border Width
Define visual style of Violin rollover
Bar Width Type
Dropdown select between percentage, manual bar thickness
BarPercentage
Category Percentage
Defines width of bars, and intra-bar space when percentage is selected.
Bar Thickness
Max Bar Thickness
Defines width of bar, and maximum width of bars (in pixels) when manual bar thickness is selected.

Screenshot

Candlestick

Screenshot
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
Dropdown select between percentage, manual bar thickness
BarPercentage
Category Percentage
Defines width of bars, and intra-bar space when percentage is selected.
Bar Thickness
Max Bar Thickness
Defines width of bar, and maximum width of bars (in pixels) when manual bar thickness is selected.

Regex for Data

Regular Expressions can also be used to define Axes instead of a data source column. For example, the following data source

Screenshot

uses regex for the Y-axis to plot all non-date data

Screenshot

to create this chart:

Screenshot

Highlight rules

Highlight Rules

Line Chart

To display a Highlight Rule for a Canvas Line Chart, adjust the Points Border sliders to make the line points visible. Highlighting does not appear on lines, only points.

Screenshot

Action

Actions

Labels

DataLabels

Data labels can be added to any layers and will place labels next to datapoints/bars as desired. The options for this are as follows.

Enabled
Turns on or off data labels, can be tied to viewstate.
Label Color
Color of Label Text
Label Frequency
Label will be applied to every nth data point where n is the label frequency.
Align & Offset

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
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'. Also note that if align is 'start', the label is moved in the opposite direction. The default value is 4.

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
Label Template

Must return a string, HTML not supported.

Use this template to dictate what fields you would like to show up on your labels, this must return a string and can use any of the existing fields in addition to x and y which return the raw values of x and y respectively. You may use handlebar helpers to format your numbers into neater formats.

Font -> Bold
Makes Label bold
Font -> Size
Adjust font size in px.

X axes

Click Screenshot to add additional X-axis labels

Screenshot

XAxis n

Dropdown menu to select axes type between category, linear, logarithmic and time

Display
Check to display X-axis labels
Stacked

When using a bar chart, bars will be stacked.

Screenshot

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

Gridlines

Screenshot

OffsetGridLines

Check to shift charted category data from centre alignment to left-alignment GridLinesColor GridLinesOpacity

Define visual style of chart gridlines

Title

Screenshot

Display
Check to display X-axis description label
LabelString
Descriptive level for X axis
FontFamily
FontSize
FontStyle
FontColor
Font Opacity
Set font styling parameters for X-axis label

Labels

Screenshot

Configure X-axis tick labels

Display
Check to display X-axis labels
Font Family
Font Size
Font Style
Font Color
Font Opacity
Select font for use in axis labels. Choice of font style between normal, italic, oblique, initial and inherit.
Min Rotation
Max Rotation
Adjust alignment of tick labels
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)
Filter Unique
Removes duplicate labels when present in the data.

Time Formats

Time Formats for when X-Axis set to time

Match the required time format for time-based X-axis data.

Screenshot

Distribution
Break
TriggerBreak
Smart, Linear or Series definition. Smart distribution collapses time to remove null time intervals; e.g. between marked trading hours
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
currently not in use (replaced by aforementioned options)
IsoWeekday
Use ISO weekday format for X-axis time display
Round
Round time to the nearest Force Time Unit scale.

Range

Screenshot

Use data boundaries to define X-axis range

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 Data Range
Use existing data to define Min/Max range. Uncheck to manually set:
Min
Max

Define minimum and maximum values to chart.

Hard range

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

Use Soft Range
Best fit within a suggested Min and Max value; e.g. for dynamic range charts
Suggested Min
Suggested Max
Will best fit chart by Suggested Min/Max values.

Y axes

Add multiple Y-axes by clicking Screenshot

Screenshot

YAxis n

Dropdown menu to select axes type between category, linear, logarithmic and time

Display
Check control to display Y-axis labels
Stacked

Check control to parse bars in a Y-axis stack Screenshot

Stacked Y-axis with Line Fill

Stacking stacks lines in numeric order. Line 1 will be the first (highest) line down to the last and lowest line, closest to origin X-axis. Line fill will change 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

Screenshot

OffsetGridLines
Shift charted category data from center alignment to left-alignment
GridLinesColor
GridLinesOpacity
Visual style of gridlines

Title

Screenshot

Display
Check to display X-axis description label
LabelString
Label description
Font Family
Font Size
Font Style
Font Color
Font Opacity
Select font for use in axis labels. Choice of font style between normal, italic, oblique, initial and inherit.

Labels

Screenshot

Display
Display Y-axis labels
Format
Format of Y axis: General, Number, Smart Number, or Datetime
Decimal Places
Precision of numeric data for Number and Smart Number.
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
Hide Trailing Zeroes
Do not display zeroes at the end of numeric data.
Font Family
Font Size
Font Style
Font Color
Font Opacity
Font qualities; style, size, color and opacity for the axis label
Begin at Zero
Axis data starts at zero.
Reverse

Reverse order of labels from bottom-up to top-down

Screenshot

Prefix
Suffix
Character text added before or after label; e.g. a $ prefix or a % suffix.
Step Size
Sets the grid-line distance between tick labels (numeric)
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)

Range

Screenshot

Use data boundaries to define the X-axis range

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 Data Range
Use existing data to define Min/Max range. Uncheck to manually set:
Min
Max

Define minimum and maximum values to chart.

Hard range

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

Use Soft Range
Best fit within a suggested Min and Max value; e.g. for dynamic range charts
Suggested Min
Suggested Max
Will best-fit chart by Suggested Min/Max values.

Animations

Transition animations when switching data in chart

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 will still function the same. This option should also be checked in charts with large amounts of data, as it will decrease the number of times the chart will have to update while hovering.
Interaction Mode
Hovering Mode gives you the option of changing the way the chart highlights points. By default (x), points with the same x value will also be highlighted. You can change with to (y) where points with the same y value will get highlighted, dataset where the entire dataset will be highlighted, or point where only points you are hovering over will be highlighted.
Enable
Check to enable animations
Easing
Duration
Select type of animation by chart type and length of time for transition. Chart animations cover: linear,
easeInQuad, easeOutQuad, easeInOutQuad,
easeInCubic, easeOutCubic, easeInOutCubic,
easeInQuart, easeOutQuart, easeInOutQuart,
easeInQuint, easeOutQuint, easeInOutQuint,
easeInSine, easeOutSine, easeInOutSine,
easeInExpo, easeOutExpo, easeInOutExpo,
easeInCirc, easeOutCirc, easeInOutCirc,
easeInElastic, easeOutElastic, easeInOutElastic,
easeInBack, easeOutBack, easeInOutBack,
easeInBounce, easeOutBounce, and easeInOutBounce.

Overlay

Defines use of tooltips and their positioning

Screenshot

Show Crosshairs
Show Tooltip
Check to show crosshair and tooltip on chart
Crosshairs Color
Define color for crosshair line
Tooltip Background Opacity
Opacity of Tooltip Background
Tooltip Font Size
Fontsize in px of Tooltip Text
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
Use Custom Tooltip
Custom Tooltip

Examples:

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

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

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

Templates

Zoom & Pan

Screenshot

Scroll Zoom
Drag Zoom
Pan

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.

Zoom and pan

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

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
Fill Opacity
Color and opacity of highlight zoom region
Min Viewstate
Max Viewstate
View State Parameters for range values made on adjustment in the chart
Default Min Viewstate
Default Max Viewstate
Default View State Parameters min and max range for when a chart loads.
Viewstate Update Delay
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
Selection will move to 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

Screenshot

Defines the data legend labels

Display
Toggle to display chart labels
Reverse Order
Reverses order of labels from left-to-right to right-to-left
Position
Define where Legends are set: bottom,top,left or right
Label color
Label Font Size
Define Style of Legend text
Full Width
Check to maximize legend display
Legend Box Width
Legend Box Padding
Set parameters of the area used to display Legends; width controls point size
Use Point Style
Enable use of chart points or use block color
Scrolling Legends

Where chart size is less than required space to display Legends, a scroll bar will appear. If disabled, Legend labels will wrap.

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/s.

File export

selection export
Show Export CSV Button Export display values as CSV file
Show Export Excel Button Export display values as an XLS file
Show Full Export Button Export data set, including display and hidden columns, as zipped Excel file.
Filename

Includes variable as part of file save name

Screenshot

Screenshot

Format, Margins

Style