{"id":8071,"date":"2015-11-23T22:49:22","date_gmt":"2015-11-23T22:49:22","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/23\/nvd3-piechart-js-how-to-edit-the-tooltip-open-source-projects-novus-nvd3\/"},"modified":"2022-08-30T15:03:02","modified_gmt":"2022-08-30T15:03:02","slug":"nvd3-piechart-js-how-to-edit-the-tooltip-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/23\/nvd3-piechart-js-how-to-edit-the-tooltip-open-source-projects-novus-nvd3\/","title":{"rendered":"nvd3 piechart.js – How to edit the tooltip?-open source projects novus\/nvd3"},"content":{"rendered":"

I’m using nvd3’s piechart.js component to generate a piechart on my site. The provided .js file includes several var’s, as follows:<\/p>\n

var margin = {top: 30, right: 20, bottom: 20, left: 20}\n    , width = null\n    , height = null\n    , showLegend = true\n    , color = nv.utils.defaultColor()\n    , tooltips = true\n    , tooltip = function(key, y, e, graph) {\n        return '<\/code><\/pre>\n
' + key + '<\/code><\/h3>\n
' +\n               '
' +  y + ''\n      }\n    , noData = \"No Data Available.\"\n    , dispatch = d3.dispatch('tooltipShow', 'tooltipHide')\n;\n<\/pre>\n
In my in-line js, I've been able to override some of those variables, like this (overriding showLegend and margin):<\/code><\/p>\n
var chart = nv.models.pieChart()\n    .x(function(d) { return d.label })\n    .y(function(d) { return d.value })\n    .showLabels(false)\n    .showLegend(false)\n    .margin({top: 10, right: 0, bottom: 0, left: 0})\n    .donut(true);\n<\/code><\/code><\/pre>\n
I’ve tried overwriting the tooltip in the same way:<\/p>\n
.tooltip(function(key, y, e, graph) { return 'Some String' })\n<\/code><\/pre>\n
but when I do that, my piechart does not display at all. Why can’t I overwrite the tooltip here? Is there another way I can do so? I’d really rather not have to edit piechart.js itself at all; I need to keep that file generic for use in multiple widgets.<\/p>\n
And while we’re at it, is there some way I can make the entire tooltip into a clickable link?<\/p>\n","protected":false},"excerpt":{"rendered":"
I’m using nvd3’s piechart.js component to generate a piechart on my site. The provided .js file includes several var’s, as follows: var margin = {top: 30, right: 20, bottom: 20, left: 20} , width = null , height = null , showLegend = true , color = nv.utils.defaultColor() , tooltips = true , tooltip = […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-8071","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8071","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=8071"}],"version-history":[{"count":1,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8071\/revisions"}],"predecessor-version":[{"id":8647,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/8071\/revisions\/8647"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=8071"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=8071"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=8071"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}