Tokens

Overview

ZingChart tokens act as variables for different value types. Known as string interpolation or variable substitution, the token will return the applicable value when it is called. This tutorial organizes the tokens according to whether they're tied to the:

The majority of the tokens are tied to the nodes (or data points), and can be used with tooltips, value boxes, crosshair plot labels, and rules. There are also tokens tied to the scales, which can be used with the x- and y-axis scales, crosshair scale labels, and scale tooltips. With time-series data, tokens are used to specify how the Unix timestamps are formatted. There are also a limited number of tokens that can be used with legends and standalone labels.

Math Operations

ZingChart supports basic math operations with evaluated tokens. Just place your math expression containing token(s) within two curly brackets. Any constructs between the brackets will be evaluated after all tokens have been parsed.

valueBox: {
  text: 'Double the value: {{ %v * 2 }}'
}
https://app.zingsoft.com/demos/embed/LUUDBDC4
https://app.zingsoft.com/demos/embed/LUUDBDC4

Tokens List

Here is a full list of currently available tokens, provided in alphabetical order.

Note: Time-series tokens have their own list in the Time-Series section below.

TokenDescription
'%chart-height'The chart's height.
Demo
'%chart-width'The chart's width.
Demo
'%data-'Format for custom tokens. The custom token is defined in the plot or series object as an attribute or array using the "data" prefix, e.g., data-fullname or data-extracredit. It is then recalled in the tooltips, value boxes, or crosshair plot labels, e.g., %data-fullname or %data-extracredit
Introduced in: v1.1.0
Demo
'%graphid'The id# string of the chart in a graphset.
Demo
'%hits'The number of times that the word occurs in the cloud.
Chart types: Wordcloud
Demo
'%id'The dom ID of the chart.
Demo
'%joined-value'The joined value between two sets.
Chart types: Venn-diagram
Demo
'%node-count'
'%N'
The total number of nodes (or data points) in the plot.
Demo
'%node-error-minus'Error Bars only: the value of the negative error. Refer to the Error Bars Tutorial for more information.
Demo
'%node-error-plus'Error Bars only: the value of the positive error. Refer to the Error Bars Tutorial for more information.
Demo
'%node-goal-value'
'%g'
The goal node value
Chart types: Bullet
Demo
'%node-index'
'%i'
'%n'
The index number of the current node.
Demo
'%node-percent-value'
'%npv'
Funnel and Pie Charts only: the percentage of the current node value relative to the sum of all nodes.
Introduced in: v2.3.3
Demo
'%node-value'
'%v'
Node value.
Demo
'%node-value-stock-close'
'%close'
'%v3'
The closing (OHLC) node value.
Introduced in: v2.3.0
Chart types: Stock
Demo
'%node-value-stock-high'
'%high'
'%v1'
The highest (OHLC) node value.
Introduced in: v2.3.0
Chart types: Stock
Demo
'%node-value-stock-low'
'%low'
'%v2'
The lowest (OHLC) node value.
Introduced in: v2.3.0
Chart types: Stock
Demo
'%node-value-stock-open'
'%open'
'%v0'
The opening (OHLC) node value.
Introduced in: v2.3.0
Chart types: Stock
Demo
'%node-x'The x-coordinate pixel position, relative to the top-left corner of the chart.
Introduced in: v2.6.0
Demo
'%node-y'The y-coordinate pixel position, relative to the top-left corner of the chart.
Introduced in: v2.6.0
Demo
'%offset-values'The offset value at a specific node.
Introduced in: v2.5.1
Demo
'%output-percent-value'The percentage of the current node value relative to the previous node value.
Chart types: Funnel
Demo
'%paired-node-value'The value of the next set. With Set 1, its pair is 2; with Set 2, its pair is 3; and with Set 3, its pair is 1. Refer to the Venn Diagram Tutorial for more information.
Chart types: Venn-diagram
Demo
'%paired-plot-text'The text of the next set. With Set 1, its pair is 2; with Set 2, its pair is 3; and with Set 3, its pair is 1. Refer to the Venn Diagram Tutorial for more information.
Chart types: Venn-diagram
Demo
'%pie-total-value'The sum of all the pie slice values.
Introduced in: v2.5.0
Chart types: Pie
Demo
'%plot-#-value'Standalone Labels only: the node value of a specified plot, provided in the following format: %plot-plot number-value, e.g., %plot-0-value. Note that plot numbering begins at zero.
Introduced in: v2.9.1
Demo
'%plot-average'
'%pavg'
The average value of the nodes in the current plot.
Demo
'%plot-count'
'%P'
The total number of plots (or datasets).
Demo
'%plot-description'The description of the current plot, pulled from the description attribute in the plot/series object.
Introduced in: v1.1.0
Demo
'%plot-index'
'%p'
The index number of the current plot.
Demo
'%plot-max-index'
'%pxi'
The highest node index number in the current plot.
Demo
'%plot-max-value'
'%pxv'
The highest node value in the current plot.
Demo
'%plot-min-index'
'%pmi'
The lowest node index number in the current plot.
Demo
'%plot-min-value'
'%pmv'
The lowest node value in the current plot.
Demo
'%plot-percent'
'%pper'
The percentage value of the node, relative to the sum of all nodes in that plot. Remember to use the decimals attribute to specify the number of decimal places displayed.
Demo
'%plot-sum'
'%psum'
The sum of the node values in the current plot.
Demo
'%plot-text'
'%t'
The text of the current plot, pulled from the text attribute in the plot/series object.
Demo
'%plot-text-#'
'%t#'
The text of a specified plot, pulled from the text attribute in the plot/series object.
Demo
'%plot-values'
'%pv'
A list of all the node values in the current plot.
Demo
'%scale-index'
'%scale-position'
'%i'
'%c'
Displays the scale-x or scale-y index. Only works on objects directly associated to a scale.
Demo
'%scale-key-label'
'%kl'
Displays the x-axis scale label, pulled from the labels array in the scale-x object. If no labels, the token defaults to display the unparsed value.
Demo
'%scale-key-label-#'
'%kl#'
Displays the x-axis scale label for a specific node, pulled from the labels array in the scale-x object. If no labels, the token defaults to display the unparsed value.
Demo
'%scale-key-text'
'%kt'
Displays the parsed x-axis scale value. If no values, the token defaults to display parsed label data.
Introduced in: v2.7.1
Demo
'%scale-key-text-#'
'%kt#'
Displays the parsed x-axis scale value for a specific node. If no values, the token defaults to display parsed label data.
Introduced in: v2.7.1
Demo
'%scale-key-value'
'%kv'
'%k'
Displays the parsed (formatted, transformed) x-axis scale value. Ignores labels.
Introduced in: v2.7.1
Demo
'%scale-key-value-#'
'%kv#'
'%k#'
Displays the parsed (formatted, transformed) x-axis scale value for a specific node. Ignores labels.
Introduced in: v2.7.1
Demo
'%scale-label'
'%l'
'%t'
Displays the scale-x or scale-y text label. This can be different than the scale values, especially for scale-x.
'%scale-value-label'
'%vl'
Displays the y-axis scale label, pulled from the labels array in the scale-y object.
Introduced in: v2.3.0
Demo
'%scale-value-text'
'%vt'
Displays the unparsed y-axis scale value.
Introduced in: v2.3.0
Demo
'%scale-value-value'
'%vv'
Displays the parsed (i.e., formatted, transformed) y-axis scale value. Ignores labels.
Introduced in: v2.3.0
Demo
'%shared-value'The shared value between three sets. Refer to the Venn Diagram Tutorial for more information.
Chart types: Venn-diagram
Demo
'%stack-average'The average value of stacked bars.
Introduced in: v2.6.0
Chart types: Bar
Demo
'%stack-length'The number of stacked bars.
Introduced in: v2.6.0
Chart types: Bar
Demo
'%stack-total'The total value of stacked bars.
Introduced in: v2.5.2
Chart types: Bar
Demo
'%text'Displays the `text` value of the selected node.
Chart types: Treemap,Wordcloud
Demo
'%total'Stacked Charts only: the total value of the current stack.
Demo
'%v0'The x value of the bubble.
Chart types: Bubble
Demo
'%v1'The y value of the bubble.
Chart types: Bubble
Demo
'%v2'
'%node-size-value'
The size of the bubble.
Chart types: Bubble
Demo
'%value-aspect'Displays the value used to adjust the aspect of the box (alpha, red/green/blue intensity).
Chart types: Treemap
Demo
'%value-size'
'%value'
Displays the value of the box.
Chart types: Treemap
Demo

Nodes

Most of our tokens are tied to the node value, or the data points that make up your chart. Node tokens can be used with tooltips, value boxes, crosshair plot labels, and rules, as the following chart examples using the %v token (representing the node value) demonstrate.

Note: Because time-series tokens overlap with nodes and scales, they are discussed in their own Time-Series section below.

Tooltips

Tooltips are the labels that appear when you hover over the node values, and they appear by default across our charting library.

https://app.zingsoft.com/demos/embed/Z8RUT75N
https://app.zingsoft.com/demos/embed/Z8RUT75N
{
  type: "area",
  title: {
    text: "Tooltips"
  },
  plot: {
    tooltip: {
      text: "Node Value: %v"
    }
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Value Boxes

Value boxes are fixed labels that appear on or around the node values. They can be used to emphasize or draw attention to specific data points.

https://app.zingsoft.com/demos/embed/1YEJESUD
https://app.zingsoft.com/demos/embed/1YEJESUD
{
  type: "area",
  title: {
    text: "Value Boxes"
  },
  plot: {
    'value-box': {
      text: "Node Value: %v"
    },
    tooltip: {
      visible: false
    }
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Crosshair Plot Labels

Crosshairs are another type of hover label with two parts: the plot label (upper label) and the scale label (lower label). The plot label portion (shown in the below example) is tied to the nodes. The scale label portion (see the Crosshair Scale Labels section further below) is tied to the scales.

Note: To emphasize the plot labels, the visibility of the scale labels was turned off in the below example.

https://app.zingsoft.com/demos/embed/7A8YMEW8
https://app.zingsoft.com/demos/embed/7A8YMEW8
{
  type: "area",
  title: {
    text: "Crosshair Plot Labels"
  },
  'crosshair-x': {
    'plot-label': {
      text: "Node Value: %v"
    },
    'scale-label': {
      visible: false
    }
  },
  plot: {
    tooltip: {
      visible: false
    }
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Rules

Rules allow you to customize the appearance of your chart based on specified conditions. In the following chart, rules were used to define the line, background, and marker colors based on the node value. See the Logic Rules Tutorial for more information.

https://app.zingsoft.com/demos/embed/E8XGK3I0
https://app.zingsoft.com/demos/embed/E8XGK3I0
{
  type: "area",
  title: {
    text: "Rules"
  },
  plot: {
    rules: [{
      rule: "%v <=35 && %v > 34",
      'line-color': "purple",
      'background-color': "purple"
    }, {
      rule: "%v <=34 && %v > 31",
      'line-color': "blue",
      'background-color': "blue"
    }, {
      rule: "%v <= 31 && %v > 30",
      'line-color': "green",
      'background-color': "green"
    }, {
      rule: "%v <= 30 && %v > 25",
      'line-color': "yellow",
      'background-color': "yellow"
    }, {
      rule: "%v <= 25 && %v > 14.5",
      'line-color': "orange",
      'background-color': "orange"
    }, {
      rule: "%v <= 14.5",
      'line-color': "red",
      'background-color': "red"
    }],
    marker: {
      rules: [{
        rule: "%v <=35 && %v > 34",
        'background-color': "purple"
      }, {
        rule: "%v <=34 && %v > 31",
        'background-color': "blue"
      }, {
        rule: "%v <= 31 && %v > 30",
        'background-color': "green"
      }, {
        rule: "%v <= 30 && %v > 25",
        'background-color': "yellow"
      }, {
        rule: "%v <= 25 && %v > 14.5",
        'background-color': "orange"
      }, {
        rule: "%v <= 14.5",
        'background-color': "red"
      }]
    }
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Scales

Scales are distinct from nodes, and they use their own %v token (corresponding to the scale value). The scale value token (%v) is distinct from the node value token (%v), despite sharing the same name. The scale value token is used specifically for scale-related items, and can be used with the x-axis scale, y-axis scale, crosshair scale labels, and scale tooltips, as the following chart examples demonstrate. Refer to the Configuring the X/Y-Axis Scales Tutorial for more information on the different scale types (linear, logarithmic, category, time-series).

Note: Because time-series tokens overlap with scales and nodes, they are discussed in a separate Time-Series section below.

X-Axis Scale

You can format the appearance of the scale values by using the format attribute and %v scale value token in the scale-x object. Refer to the Scales Tutorial for more information and examples as how you format the scale labels will often depend on the type of scale used (linear, time-series, category).

https://app.zingsoft.com/demos/embed/WHQ10QW5
https://app.zingsoft.com/demos/embed/WHQ10QW5
{
  type: "area",
  title: {
    text: "X-Axis Scale"
  },
  'scale-x': {
    format: "Scale Value: %v"
  },
  plotarea: {
    'margin-bottom': "dynamic"
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Y-Axis Scale

Use the format attribute and %v scale value token in the scale-y object to format the appearance of the scale values. See the Scales Tutorial for more information and examples as how you format the scale labels will often depend on the type of scale used (linear, logarithmic, category).

https://app.zingsoft.com/demos/embed/PUD46T75
https://app.zingsoft.com/demos/embed/PUD46T75
{
  type: "area",
  title: {
    text: "Y-Axis Scale"
  },
  'scale-y': {
    format: "Scale Value: %v"
  },
  plotarea: {
    'margin-left': "dynamic"
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Crosshair Scale Labels

Crosshairs are another type of hover label with two parts: the plot label (upper label) and the scale label (lower label). The scale label portion (shown in the below example) is tied to the scale. The plot label portion (see the Crosshair Plot Labels section further above) is tied to the node.

Note: To emphasize the scale labels, the visibility of the plot labels was turned off in the below example.

https://app.zingsoft.com/demos/embed/KF44M8JV
https://app.zingsoft.com/demos/embed/KF44M8JV
{
  type: "area",
  title: {
    text: "Crosshair Scale Labels"
  },
  'crosshair-x': {
    'plot-label': {
      visible: false
    },
    'scale-label': {
      text: "Scale Value: %v"
    }
  },
  plot: {
    tooltip: {
      visible: false
    }
  },
  series: [{
    values: [30, 34, 14, 15, 31, 35]
  }]
}

Scale Tooltips

Scale tooltips appear when you hover over the labels on the x- and/or y-axis. Note that the tooltip object with text attribute must be added to each scale object you want the tooltips to appear for.

https://app.zingsoft.com/demos/embed/A7KKWRH8
https://app.zingsoft.com/demos/embed/A7KKWRH8
{
  type: "area",
  title: {
    text: "Scale Tooltips"
  },
  subtitle: {
    text: "Hover over the scale labels"
  },
  'scale-x': {
    tooltip: {
      text: "Scale Value: %v"
    }
  },
  'scale-y': {
    tooltip: {
      text: "Scale Value: %v"
    }
  },
  series: [
    {
      values: [30,34,14,15,31,35]
    }
  ]
}

Time-Series

ZingChart accepts Unix time values in milliseconds, which are then converted into a readable format on your chart. Our time-series tokens were created for the specific purpose of formatting that time-series data. That formatting is done inside a transformobject. In the object, you must add a type attribute with the value set to date. You must also add an all attribute. The value will be the time-series tokens and/or alphanumeric characters you want displayed. Time-series tokens can be used with the x-axis scale, y-axis scale, tooltips, value boxes, and crosshairs (both plot and scale labels).

Tokens List

Here is a full list of currently available time-series tokens, provided in alphabetical order.

Token Description
%A Displays the ante or post meridiem time in upper case letters: AM or PM.
%a Displays the ante or post meridiem time in lower case letters: am or pm.
%D Displays the day of the week in abbreviated form: Sun, Mon, Tue, Wed, Thu, Fri and Sat.
%d Displays the day's date without a leading 0 if the date is single digit.
%dd Displays the day's date with a leading 0 if the date is single digit.
%G Displays the hour in 24-hour format without a leading 0.
%g Displays the hour in 12-hour format without a leading 0.
%H Displays the hour in 24-hour format with a leading 0 if the hour is single digit.
%h Displays the hour in 12-hour format with a leading 0 if the hour is single digit.
%i Displays the minutes.
%M Displays the month in abbreviated form: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov and Dec.
%m Displays the month numerically without a leading 0 if the date is single digit.
%mm Display the month numerically with a leading 0 if the month is single digit.
%q Displays the milliseconds.
%s Displays the seconds.
%Y Displays the year in 4-digit format.
%y Displays the year in 2-digit format.

X-Axis Scale

Time-series formatting starts with the x-axis scale. In the scale-x object, specify your minimum (min-value) and step (step) scale values. In the transform object, add a type and all attribute. Refer to the Configuring the X/Y-Axis Scales Tutorial for more information.

https://app.zingsoft.com/demos/embed/2YMKLO7T
https://app.zingsoft.com/demos/embed/2YMKLO7T
{
  type: "line",
  title: {
    text: "X-Axis Scale"
  },
  'scale-x': {
    'min-value': "1457101800000",
    'max-value': "1457125200000",
    step: "30minute",
    transform: {
      type: "date",
      all: "%g:%i"
    },
    label: {
      text: "Trading Day"
    },
    item: {
      'font-size': 10
    },
    'max-items': 14
  },
  utc: true,
  timezone: -5, //EST time
  'scale-y': {
    values: "30:34:1",
    format: "$%v",
    label: {
      text: "Price"
    },
    item: {
      'font-size': 10
    },
    guide: {
      'line-style': "solid"
    }
  },
  series: [{
    values: [
      [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
      [1457103600000, 31.30], //10:00 a.m.
      [1457105400000, 30.95], //10:30 a.m.
      [1457107200000, 30.99], //11:00 a.m.
      [1457109000000, 32.33], //11:30 a.m.
      [1457110800000, 33.34], //12:00 p.m.
      [1457112600000, 33.01], //12:30 p.m.
      [1457114400000, 34], //1:00 p.m.
      [1457116200000, 33.64], //1:30 p.m.
      [1457118000000, 32.59], //2:00 p.m.
      [1457119800000, 32.60], //2:30 p.m.
      [1457121600000, 31.99], //3:00 p.m.
      [1457123400000, 31.14], //3:30 p.m.
      [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    ]
  }]
}

Y-Axis Scale

While less commonly used, you can also create a time-series scale on the y-axis. In the scale-y object, specify your minimum (min-value) and step (step) scale values. In the transform object, add a type and all attribute. Refer to the Configuring the X/Y-Axis Scales Tutorial for more information.

https://app.zingsoft.com/demos/embed/Q44WDRZY
https://app.zingsoft.com/demos/embed/Q44WDRZY
{
  type: 'bar',
  title: {
    text: "Y-Axis Scale"
  },
  plot: {
    'bar-width': "50%",
    stacked: true,
    tooltip: {
      text: "Raise %plot-text by %scale-value-value",
      transform: {
        type: "date",
        all: "%g:%i %A"
      }
    },
  },
  'scale-x': {
    labels: [ "A's Goal", "B's Goal", "C's Goal" ],
    label: {
      text: "12-Hour Fundraiser"
    },
    item: {
      'font-size':10
    },
  },
  'scale-y': {
    'min-value': "1457091000000", //6 AM
    'max-value': "1457132400000", //Midnight
    step: "3600000", //1 hour
    transform: {
      type: "date",
      all: "%g:%i %a"
    },
    label: {
      text: "Time"
    },
    item: {
      'font-size':10
    },
  },
  utc: true,
  timezone:-5, //EST time
  plotarea: {
    'margin-left': "15%"
  },
  series: [
    {
      values: [1457110800000, 1457107200000, 1457103600000],
      text: "300K"
    },
    {
      values: [7200000, 7200000, 12600000],
      text: "350K"
    },
    {
      values: [7200000, 7200000, 5400000],
      text: "400K"
    },
    {
      values: [3600000, 5400000, 3600000],
      text: "450K"
    },
    {
      values: [3600000, 5400000, 7200000],
      text: "500K"
    }
  ]
}

Tooltips

Use the %kv token to display time-series values in the tooltips. You can also change the formatting of that time-series data (e.g., to show the full date or a shortened version of it) by adding a transform object to the tooltip object. Add a type attribute (with value set to date) and all attribute (with desired formatting contained in quotes).

https://app.zingsoft.com/demos/embed/GKSMAOR7
https://app.zingsoft.com/demos/embed/GKSMAOR7
{
  type: "line",
  title: {
    text: "Tooltips"
  },
  plot: {
    tooltip: {
      text: "%kv",
      transform: {
        type: "date",
        all: "%g:%i %a<br>on<br>%M %d, %Y"
      }
    }
  },
  'scale-x': {
    'min-value': "1457101800000",
    'max-value': "1457125200000",
    step: "30minute",
    transform: {
      type: "date",
      all: "%g:%i"
    },
    label: {
      text: "Trading Day"
    },
    item: {
      'font-size': 10
    },
    'max-items': 14
  },
  utc: true,
  timezone: -5, //EST time
  'scale-y': {
    values: "30:34:1",
    format: "$%v",
    label: {
      text: "Price"
    },
    item: {
      'font-size': 10
    },
    guide: {
      'line-style': "solid"
    }
  },
  series: [{
    values: [
      [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
      [1457103600000, 31.30], //10:00 a.m.
      [1457105400000, 30.95], //10:30 a.m.
      [1457107200000, 30.99], //11:00 a.m.
      [1457109000000, 32.33], //11:30 a.m.
      [1457110800000, 33.34], //12:00 p.m.
      [1457112600000, 33.01], //12:30 p.m.
      [1457114400000, 34], //1:00 p.m.
      [1457116200000, 33.64], //1:30 p.m.
      [1457118000000, 32.59], //2:00 p.m.
      [1457119800000, 32.60], //2:30 p.m.
      [1457121600000, 31.99], //3:00 p.m.
      [1457123400000, 31.14], //3:30 p.m.
      [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    ]
  }]
}

Value Boxes

To display time-series values in the value boxes, use the %kv token. To change the time-series formatting, add a transform object to the value-box object. Make sure to add a type attribute (with value set to date) and all attribute (with desired formatting contained in quotes).

https://app.zingsoft.com/demos/embed/CX9V70GX
https://app.zingsoft.com/demos/embed/CX9V70GX
{
  type: "line",
  title: {
    text: "Value Boxes"
  },
  plot: {
    'value-box': {
      text: "%kv",
      transform: {
        type: "date",
        all: "%G:%i:%s"
      }
    }
  },
  'scale-x': {
    'min-value': "1457101800000",
    'max-value': "1457125200000",
    step: "30minute",
    transform: {
      type: "date",
      all: "%g:%i"
    },
    label: {
      text: "Trading Day"
    },
    item: {
      'font-size': 10
    },
    'max-items': 14
  },
  utc: true,
  timezone: -5, //EST time
  'scale-y': {
    values: "30:34:1",
    format: "$%v",
    label: {
      text: "Price"
    },
    item: {
      'font-size': 10
    },
    guide: {
      'line-style': "solid"
    }
  },
  series: [{
    values: [
      [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
      [1457103600000, 31.30], //10:00 a.m.
      [1457105400000, 30.95], //10:30 a.m.
      [1457107200000, 30.99], //11:00 a.m.
      [1457109000000, 32.33], //11:30 a.m.
      [1457110800000, 33.34], //12:00 p.m.
      [1457112600000, 33.01], //12:30 p.m.
      [1457114400000, 34], //1:00 p.m.
      [1457116200000, 33.64], //1:30 p.m.
      [1457118000000, 32.59], //2:00 p.m.
      [1457119800000, 32.60], //2:30 p.m.
      [1457121600000, 31.99], //3:00 p.m.
      [1457123400000, 31.14], //3:30 p.m.
      [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    ]
  }]
}

Crosshairs

The transform object can be used in both the plot and scale label portions of the crosshairs. However, remember that the plot-label object is tied to the nodes and the scale-label object is tied to the scales. This means that in the former, it is the %kvtoken (representing the parsed scale value) that corresponds to the time-series data. (In this portion, the %v token corresponds to the node value.) In the latter, it is the %v token (which, in this portion, is the scale value) that corresponds to the time-series data.

https://app.zingsoft.com/demos/embed/BVGZSQL8
https://app.zingsoft.com/demos/embed/BVGZSQL8
{
  type: "line",
  title: {
    text: "Crosshairs"
  },
  'crosshair-x': {
    'plot-label': { //tied to nodes.
      text: "$%v at %kv", //%kv is the parsed scale value
      transform: {
        type: "date",
        all: "%g:%i %A"
      }
    },
    'scale-label': { //tied to scales.
      text: "on %v", //%v is the scale value
      transform: {
        type: "date",
        all: "%D, %m/%d/%y"
      }
    }
  },
  plot: {
    tooltip: {
      visible: false
    }
  },
  'scale-x': {
    'min-value': "1457101800000",
    'max-value': "1457125200000",
    step: "30minute",
    transform: {
      type: "date",
      all: "%g:%i"
    },
    label: {
      text: "Trading Day"
    },
    item: {
      'font-size': 10
    },
    'max-items': 14
  },
  utc: true,
  timezone: -5, //EST time
  'scale-y': {
    values: "30:34:1",
    format: "$%v",
    label: {
      text: "Price"
    },
    item: {
      'font-size': 10
    },
    guide: {
      'line-style': "solid"
    }
  },
  series: [{
    values: [
      [1457101800000, 30.34], //03/04/2016 at 9:30 a.m. EST (which is 14:30 in GMT)
      [1457103600000, 31.30], //10:00 a.m.
      [1457105400000, 30.95], //10:30 a.m.
      [1457107200000, 30.99], //11:00 a.m.
      [1457109000000, 32.33], //11:30 a.m.
      [1457110800000, 33.34], //12:00 p.m.
      [1457112600000, 33.01], //12:30 p.m.
      [1457114400000, 34], //1:00 p.m.
      [1457116200000, 33.64], //1:30 p.m.
      [1457118000000, 32.59], //2:00 p.m.
      [1457119800000, 32.60], //2:30 p.m.
      [1457121600000, 31.99], //3:00 p.m.
      [1457123400000, 31.14], //3:30 p.m.
      [1457125200000, 32.34], //at 4:00 p.m. EST (which is 21:00 GMT)
    ]
  }]
}

Other

There are a limited number of tokens that can be used with legend tooltips and standalone labels.

Legend Tooltips

Legend tooltips appear when users hover over the items in the legend. They support a limited number of tokens:

Token Description
%plot-description The description of the current plot, pulled from the description attribute in the plot/series object.
%plot-text %t The text of the current plot, pulled from the text attribute in the plot/series object.

To create legend tooltips, add a tooltip object to the legend object. Include the tokens in the tooltip's text attribute.

https://app.zingsoft.com/demos/embed/W8A60PVS
https://app.zingsoft.com/demos/embed/W8A60PVS
{
  type: 'bar',
  title: {
    text: "Legend Tooltips"
  },
  legend: {
    x: "25%",
    y: "12%",
    layout: "horizontal",
    tooltip: { //Legend Tooltips
      text: "The %plot-text population is %plot-description",
      width: "20%",
      height: "20%",
      'wrap-text': true,
      padding: "5%",
      'background-color': "white",
      'font-color': "black",
      'font-family': "Georgia",
      'border-width': 1,
      'border-color': "gray",
      'border-radius': "5px",
      sticky: true,
      timeout: 10000
    }
  },
  plotarea: {
    'margin-top': "25%"
  },
  plot: {
    stacked: true,
    'bar-width': "30%"
  },
  'scale-x': {
    labels: [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M" ]
  },
  'scale-y': {
    values: "0:200:50"
  },
  series: [{
    values: [64, 59, 55, 49, 39, 35, 31, 20, 16, 15, 9, 5, 4],
    text: "0-18 years",
    description: "depicted in blue."
  }, {
    values: [99, 90, 87, 70, 59, 51, 45, 39, 34, 25, 21, 9, 5],
    text: "18-64 years",
    description: "depicted in red."
  }, {
    values: [34, 30, 16, 15, 14, 12, 10, 9, 8, 7, 5, 4, 3],
    text: "65 and over",
    description: "depicted in green."
  }]
}

Standalone Labels

Standalone labels differ from other label types (tooltips, value boxes, crosshairs) because they are not tied in any way to the nodes. They support a limited number of tokens:

Token Description
(%node-value)(#)(#) Node value of a specified plot and node index, provided in the following format: (%node-value)(plot number)(node index number), e.g., (%node-value)(0)(0)). Note: Plot and node index numbering begins at zero.
%node-percent-value %npv Percentage value of the hovered over node relative to the sum of all nodes. Demo
%plot-#-value Node value of a specified plot, provided in the following format: %plot-plot number-value, e.g., %plot-0-value. This token is best used with crosshairs. Note: Plot numbering begins at zero. Demo
%plot-value Node value of the hovered over value. This token is best used with tooltips. Demo

Because standalone labels are not tied to the nodes, the relationship to a series or node must be called out specifically. To add standalone labels, create a labels array. Inside the array, create an object for each label. Refer to the Labels Tutorial for more information. In the following chart, three labels were created.

https://app.zingsoft.com/demos/embed/WQCEB933
https://app.zingsoft.com/demos/embed/WQCEB933
{
  type: 'bar',
  title: {
    text: "Standalone Labels"
  },
  labels: [{ //Label One
    text: "0-18 years: %plot-0-value",
    'default-value': "___", //optional placeholder for token text
    height: "7%",
    width: "23%",
    x: "15%",
    y: "12%",
    'text-align': "left", //to keep text stationary
    'font-color': "black",
    'font-family': "Georgia",
    'border-width': 2,
    'border-color': "#29A2CC",
    'border-radius': "5px",
    'padding-left': "30%"
  }, { //Label Two
    text: "18-64 years: %plot-1-value",
    'default-value': "___",
    height: "7%",
    width: "23%",
    x: "40%",
    y: "12%",
    'text-align': "left",
    'font-color': "black",
    'font-family': "Georgia",
    'border-width': 2,
    'border-color': "#D31E1E",
    'border-radius': "5px",
    'padding-left': "30%"
  }, { //Label Three
    text: "65 and over: %plot-2-value",
    'default-value': "___",
    height: "7%",
    width: "23%",
    x: "65%",
    y: "12%",
    'text-align': "left",
    'font-color': "black",
    'font-family': "Georgia",
    'border-width': 2,
    'border-color': "#7CA82B",
    'border-radius': "5px",
    padding: "30%"
  }],
  plotarea: {
    'margin-top': "25%"
  },
  plot: {
    stacked: true,
    'bar-width': "30%",
    tooltip: {
      visible: false
    }
  },
  'crosshair-x': {
    'plot-label': {
      visible: false
    }
  },
  'scale-x': {
    labels: [ "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M" ]
  },
  'scale-y': {
    values: "0:200:50"
  },
  series: [{
    values: [64, 59, 55, 49, 39, 35, 31, 20, 16, 15, 9, 5, 4],
    text: "0-18 years"
  }, {
    values: [99, 90, 87, 70, 59, 51, 45, 39, 34, 25, 21, 9, 5],
    text: "18-64 years"
  }, {
    values: [34, 30, 16, 15, 14, 12, 10, 9, 8, 7, 5, 4, 3],
    text: "65 and over"
  }]
}

Summary

Tokens allow dynamically generated text based on some chart value. This allows dynamic labels, styling of tooltips and crosshairs, and rule configuration.