Tokens in Tooltips, Value-Boxes and more

by ZingChart Team

Get your tokens here! You probably already have seen our %v, %k and %t tokens for calling values, keys and series text into tooltips. Well, we've added LOTS more tokens/variables that you can use in tooltips, valueboxes, query strings, rules, and more.

All the tokens

Here's a laundry list of tokens for you to try out in your own posts:

Token Type Long-Format Description
%c Scale %scale-position Scale item position
%d Node %plot-description Plot description
%data-variable Node Custom data
%g Node %node-goal-value Node goal Value
%i Scale %scale-index Node Index
%k Scale %scale-key-value Scale-key value
%k0 Node Scale-key Part Value
%kl Scale %scale-key-label Scale-key label
%kt Sacle %scale-key-text Scale-key text
%kt0 Node Scale-key part of text
%kv Node %scale-key-value Scale-key value
%kv0 Node Scale-key part of value
%l Scale %scale-label Scale-key label
%N Node %node-count Nº of nodes
%nmv Node %node-min-value Node minimum value
%npv Node %node-percent-value Node percent value
%nxv Node %node-max-value Node maximum value
%p Node %plot-index Plot index
%P Node %plot-count Nº of plots
%pavg Node %plot-average Plot average value
%pmi Node %plot-min-index Plot minimum value
%pmv Node %plot-min-value Plot or node min value
%pper Node %plot-percent Plot percent
%psum Node %plot-sum Sum of all values of the plot
%pv Node %plot-value All values of your plot
%pxi Node %plot-max-index Plot maximum index
%pxv Node %plot-max-value Plot maximum value
%sum Node The total of the stack of that node
%t Node %plot-text Text of that plot
%t0 Node Part of the plot text
%total Node The total of the stack
%v Scale %scale-value Value
%linecolor Node Line-color of the plot
%backgroundcolor Node Background color of the plot.
 

These tokens can be placed in "text" attributes throughout various objects like series, value-box, crosshair-x value-label, and more. Here's an example of the JSON from the above pie chart example, where we decided to call the series text, value, and node percent value for each slice:

{  
    "text":"%t: $%v (%npv%)",  
    "background-color":"#fff",  
    "border-color":"#333",  
    "border-width":"1px",  
    "border-radius":"8px",  
    "font-color":"#333"  
 },

Give these a try and email us with any questions support@zingchart.com for chart help, sales@zingchart.com for licensing inquiries!