Control tooltips and node color in ZingChart tree module

Question

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

Answer 1

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'
  }

}