I'm trying to control tooltip text and node color in a diagram using the tree module in ZingCharts. I want to use a rule to change the node color for a given value and have the tooltip display that value. Is there a token that will work for this? %node-value doesn't work.
window.addEventListener('load', () => {
let chartData = [
{
id: '111',
parent: '',
name: 'John Smith',
value: 'no problems'
},
{
id: '222',
parent: '111',
name: 'Jane Smith',
value: 'missing info'
},
{
id: '333',
parent: '111',
name: 'Jack Smith',
value: 'missing info'
},
];
let chartConfig = {
type: 'tree',
options: {
link: {
aspect: 'arc'
},
maxSize: 10,
minSize: 4,
node: {
type: 'circle',
borderWidth: 0,
rules : [
{
rule: '"%node-value" == "missing info"',
backgroundColor : 'red'
},
],
tooltip : {
fontSize : '20px',
text : '%node-value'
},
size : 10,
hoverState: {
borderAlpha: 1,
borderColor: '#000',
borderWidth: '2px'
},
label: {
width: '100px'
}
},
progression: 0,
textAttr: 'name',
valueAttr: 'value'
},
series: chartData
};
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
output: 'canvas'
});
});
See simplified example here: https://app.zingsoft.com/demos/view/3C044JNF
Since our tree module utilizes specialized module, regular rules will not work when targeting specific nodes. Instead, we recommend styling based upon our cls
, parent
, and data-
properties.
In your specific example, your value
attribute in the chartData
would need a data-
prefix (or camelcase dataValue).
{
id: '111',
parent: '',
name: 'John Smith',
dataValue: 'no problems'
},
...
and your tooltip would correspond to %dataValue
tooltip : {
fontSize : '20px',
text : '%dataValue'
},
Similarly to style nodes, we recommend using the cls
or class attribute to target specific types of nodes.
{
id: '333',
parent: '111',
name: 'Jack Smith',
dataValue: 'missing info',
cls: 'missing'
},
and then you are able to style this 'missing' class as a unique node.
options: {
node: {...},
'node[cls-missing']: {
backgroundColor: 'red'
}
}