Menu
I have a pie ZingChart I'm using to show simple data. It happens to be using angular and updates the series object as the user drills down.
Everything is working fine except...the tooltip does not display? It doesn't display at any point, regardless of interaction or series assignment. The standard mouseover highlights work, and clicking nodes is fine, but no tooltip. Any ideas? Can't work out what I'm missing!
My chart config is:
{
type: "pie",
id: 'chart-1',
title: {
textAlign: 'center',
text: "Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot": {
"animation":{
"on-legend-toggle": true,
"effect": 5,
"method": 1,
"sequence": 1,
"speed": 0.7
},
"value-box": {
"text": "$%v",
"negation": "currency",
"thousands-separator": ",",
"font-color": "black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"decimals": "0",
"detach": false
},
series: [],
shapes: [{
type: 'triangle',
backgroundColor: '#66ccff',
size: 10,
angle: -90,
x: 20,
y: 20,
cursor: 'hand',
id: 'backwards'
}]
};
932
asked Aug 03 '26 20:08
The - in chart-1 is causing an issue with our parse/selector process. If you change the id to chart_1 everything will work fine.
var myConfig = {
"graphset":[
{
"type":"pie",
"id":"chart_1",
"title":{
"textAlign":"center",
"text":"Loading..."
},
"legend":{
"border-width":1,
"border-color":"gray",
"border-radius":"5px",
"marker":{
"type":"circle"
},
"toggle-action":"remove",
"icon":{
"line-color":"#9999ff"
}
},
"plot":{
"animation":{
"on-legend-toggle":true,
"effect":5,
"method":1,
"sequence":1,
"speed":0.7
},
"value-box":{
"text":"$%v",
"negation":"currency",
"thousands-separator":",",
"font-color":"black",
"placement":"in",
"offset-r":"50%",
"font-size":"12"
},
"decimals":"0",
"detach":false
},
"tooltip":{
"text":"%t: %v (%npv%)"
},
"series":[
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
},
{
"values":[118],
"text":"0-30"
}
],
"shapes":[
{
"type":"triangle",
"backgroundColor":"#66ccff",
"size":10,
"angle":-90,
"x":20,
"y":20,
"cursor":"hand",
"id":"backwards"
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"></div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
