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?
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