CODEWITHSUNDEEP
javascriptchartszingchart
JCro
JCro

Reputation: 696

ZingChart pie tooltip not displaying

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! Heres what it looks like 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'
        }]
      };

Upvotes: 3

Views: 399

Answers (1)

nardecky
nardecky

Reputation: 2631

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>

Upvotes: 4

Related Questions