Blog Help & Support Contact About Login

 Show Nav

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.

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.

Token Description
%chart-height The chart's height.
%chart-width The chart's width.
%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.
%data-bubble Bubble Pie Charts only: to display the bubble pie text. Refer to the Bubble Pie Chart Tutorial for more information.
%data-day Calendar Charts only: the calendar date, provided in the following format: "YYYY-MM-DD". Refer to the Calendar Chart Tutorial for more information.
%data-info# Calendar Charts only: to display (optional) additional calendar values. Refer to the Calendar Chart Tutorial for more information.
%data-pie Bubble Pie Charts only: to display the pie slice text. Refer to the Bubble Pie Chart Tutorial for more information.
%data-pv Bubble Pie Charts only: to display the pie slice percentage value. Refer to the Bubble Pie Chart Tutorial for more information.
%data-v Bubble Pie Charts only: to display the pie slice value. Refer to the Bubble Pie Chart Tutorial for more information.
%graphid The id# string of the chart in a graphset.
%hits Word Clouds only: the number of times that the word occurs in the cloud. Refer to the Word Cloud Tutorial for more information.
%id The dom ID of the chart.
%joined-value Venn Diagrams only: the joined value between two sets. Refer to the Venn Diagram Tutorial for more information.
%long-text
%text
Maps only: the full name of the map item. Refer to the Maps Tutorial for more information.
%node-count
%N
The total number of nodes (or data points) in the plot.
%node-error-minus Error Bars only: the value of the negative error. Refer to the Error Bars Tutorial for more information.
%node-error-plus Error Bars only: the value of the positive error. Refer to the Error Bars Tutorial for more information.
%node-goal-value
%g
Bullet Charts only: the goal node value.
%node-index
%n
The index number of the current node.
%node-max-value Range Charts only: the upper node value.
%node-min-value Range Charts only: the lower node value.
%node-percent-value
%npv
Funnel and Pie Charts only: the percentage of the current node value relative to the sum of all nodes.   
%node-size-value Bubble and Bubble Pie Charts only: to display the bubble or bubble pie size value.   
%node-value
%v1
Node value. Refer to the Nodes section below.
(%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 that plot and node index numbering begins at zero."
%node-value-stock-close
%close
Stock Charts only: the closing (OHLC) node value.
%node-value-stock-high
%high
Stock Charts only: the highest (OHLC) node value.
%node-value-stock-low
%low
Stock Charts only: the lowest (OHLC) node value.
%node-value-stock-open
%open
Stock Charts only: The opening (OHLC) node value.
%node-x The x-coordinate pixel position, relative to the top-left corner of the chart.
%node-y The y-coordinate pixel position, relative to the top-left corner of the chart.
%offset-values The offset value at that specific node
%output-percent-value Funnel Charts only: the percentage of the current node value relative to the previous node value.
%paired-node-value Venn Diagrams only: to show, when hovering over a particular set, 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.
%paired-plot-text Venn Diagrams only: to show, when hovering over a particular set, 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.
%pie-total-value Pie Charts only: the sum of all the pie slice values.
%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.
%plot-average
%pavg
The average value of the nodes in the current plot.
%plot-count
%P
The total number of plots (or data sets).
%plot-description The description of the current plot, pulled from the "description" attribute in the plot/series object.
%plot-index
%p
The index number of the current plot.
%plot-min-index
%pmi
The lowest node index number in the current plot.
%plot-min-value
%pmv
The lowest node value in the current plot.
%plot-max-index
%pxi
The highest node index number in the current plot.
%plot-max-value
%pxv
The highest node value in the current plot.
%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.
%plot-sum
%psum
The sum of the node values in the current plot.
%plot-text
%t
The text of the current plot, pulled from the "text" attribute in the plot/series object.
%plot-value Standalone Labels only: the node value of the hovered over value.
%plot-values
%pv
A list of all the node values in the current plot.
%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 parsed value.
%scale-key-text
%kt
Displays the unparsed x-axis scale value.
%scale-key-value
%kv
Displays the parsed (formatted, transformed) x-axis scale value. Ignores labels.
%scale-value
%v2
Scale value. Refer to the Scales section below.
%scale-value-label
%y
Heat Maps only: displays the y-axis scale label, pulled from the "labels" array in the scale-y object.
%scale-value-text
%vt
Displays the unparsed y-axis scale value.
%scale-value-text(#)
%vt(#)
Displays the unparsed y-axis scale value of a specified plot, provided in the following format: %scale-value-text(_plot number_), e.g., %scale-value-text(0). Note that plot numbering begins at zero.
%scale-value-value
%vv
Displays the parsed (i.e., formatted, transformed) y-axis scale value. Ignores labels.
%shared-value Venn Diagrams with 3 sets only: the shared value between three sets. Refer to the Venn Diagram Tutorial for more information.
%short-text Maps only: the abbreviated name of the map item. Refer to the Maps Tutorial for more information.
%text Word Clouds only: the selected word in the cloud. Refer to the Word Cloud Tutorial for more information.
%total Stacked Charts only: the total value of the current stack.

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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 below 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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, since how you format the scale labels will often depend on the type of scale used (linear, time-series, category).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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, since how you format the scale labels will often depend on the type of scale used (linear, logarithmic, category).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 "transform" object. 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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).

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 %kv token (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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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 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.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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.
%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.
%plot-value Node value of the hovered over value. This token is best used with tooltips.

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 below chart, three labels were created.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "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

Got a question about how tokens work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.