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-index
%i
Displays the scale-x or scale-y index. Only works on objects directly associated to a scale.
%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.
%scale-key-text
%kt
Displays the parsed x-axis scale value. If no values, the token defaults to display parsed label data.
%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.