Custom tooltip in zing charts tree diagram to visualize values rather than %node-value,

Question

Is there any way to implement a custom tooltip to visualize my values attached to the particular node? For example {id:"1",name:"Socialmedia",gbw:123,mbw:365,parent:"0",value:150} These are values attached to a particular node in my tree. when on hover I need to display the "gbw" value as a tooltip.

tooltip: {
              text : "Guranteed Bandwidth: %node-gbw <br>Maximum Bandwidth:" 
}

I tried this code and %data-gbw as well in the tool-tip. But it is showing nothing when on hover. Do zing charts support this type of visualization?

score 0 · Answer 1 · answered Sep 10 '21 at 18:16

Using data- tokens in the series data you should be able to accomplish this. For example

series: [{
      values : [counts[0]],
      "data-msg" : "Fast enough",
      text: "< 400 ms",
      backgroundColor: '#92BCEA',
      detached: true
    },

and then your tooltip object would use the value

  tooltip : {
      fontSize : '18',
      fontFamily : "Open Sans",
      padding: "5 10",
      text: "%plot-text is %data-msg"
    },

// CHART CONFIG
// -----------------------------
let counts = [0.62, 0.15, 0.15, 0.06];

let chartConfig = {
    type : 'pie',
     title: {
       text: 'Time to Load',
       align: "center",
       offsetX: 10,
       fontSize: 25
    },
    valueBox: {
      placement: 'out',
      text: '%t\n%npv%',
      fontFamily: "Open Sans"
    },
    legend: {
      backgroundColor: "#eee",
      fontSize: '1.5em',
      width: '150em'
    },
    tooltip : {
      fontSize : '18',
      fontFamily : "Open Sans",
      padding: "5 10",
      text: "%plot-text is %data-msg"
    },
    series: [{
      values : [counts[0]],
      "data-msg" : "Fast enough",
      text: "< 400 ms",
      backgroundColor: '#92BCEA',
      detached: true
    },
    {
      values: [counts[1]],
      "data-msg" : "So so",
      text: "400-599 ms",
      backgroundColor: '#5E7A97'
    },
    {
      "values": [counts[2]],
      "data-msg" : "Slow!", 
      "text": '600-799 ms',
      "backgroundColor": '#617073',
    },
    {
      "text": '800+ms',
      "values": [counts[3]],
      "backgroundColor": '#171A21',
      "data-msg" : "Really slow!"
    }]
  };

// RENDER CHARTS
// -----------------------------
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

.zc-body { background-color: #2B313B; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>
    
  </body>
</html>

Note I work for ZingSoft, but you are welcome to go thru support or use our studio to make a demo if you want support from us more predictably. I put a full working demo there for you - https://app.zingsoft.com/demos/create/8OYIRFIC

I need to implement the custom tooltip in tree diagrams. As you mentioned these are working fine. when I tried to approach this with tree diagrams it is not working as expected. I need a solution for the tree diagrams. — Sindujan Nirmalan, Sep 10 '21 at 18:37

Custom tooltip in zing charts tree diagram to visualize values rather than %node-value,

1 Answers1