score:3
Accepted answer
use tooltip contentgenerator config
tooltip: {
contentgenerator: function(record) {
return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span> ' + record.data.label + ' ' + record.data.data + '</p>';
}
},
var app = angular.module('plunker', ['nvd3']);
app.controller('mainctrl', function($scope) {
$scope.options = {
chart: {
type: 'discretebarchart',
height: 450,
margin: {
top: 20,
right: 20,
bottom: 50,
left: 55
},
x: function(d) {
return d.label;
},
y: function(d) {
return d.value + (1e-10);
},
showvalues: true,
valueformat: function(d) {
return d3.format(',.4f')(d);
},
tooltip: {
contentgenerator: function(record) {
return '<p><span style="background-color:'+record.color+';display: inline-block; height:12px; width:12px;vertical-align: middle;"></span> ' + record.data.label + ' ' + record.data.data + '</p>';
}
},
duration: 500,
xaxis: {
axislabel: 'x axis'
},
yaxis: {
axislabel: 'y axis',
axislabeldistance: -10
}
}
};
$scope.data = [{
key: "cumulative return",
values: [{
"label": "a",
"value": 15,
"data": 486
},
{
"label": "b",
"value": 11,
"data": 403
},
{
"label": "c",
"value": 10,
"data": 374
},
{
"label": "d",
"value": 9,
"data": 362
},
{
"label": "e",
"value": 8,
"data": 321
},
{
"label": "f",
"value": 6,
"data": 246
},
{
"label": "g",
"value": 4,
"data": 187
},
{
"label": "h",
"value": 1,
"data": 42
}
]
}]
});
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>angular-nvd3 discrete bar chart</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="mainctrl">
<nvd3 options="options" data="data"></nvd3>
<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">see more</a>
</body>
</html>
Source: stackoverflow.com
Related Query
- Use Different Value on Mouseover in angular nvd3
- How to get maximum value from an array of objects to use in d3.scale.linear().domain()
- How to use 'this' in Angular with D3?
- D3 force directed graph, different shape according to data and value given?
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- Use D3.min to find lowest value that is not 0
- D3: Get nearest value from ordinal axis on mouseover
- Angular svg or canvas to use colour gradients
- NVD3 Angular Directive callback firing too soon
- How to set a nvd3 axis to use strings instead of numerical values ?
- Nvd3 chart different time zone
- how to use different step attribute in one range input in html, javascript
- How to use D3.format for dynamic values having different numbers?
- How to use a value in d3 data key function?
- How to Use D3 charts with angular 2 or 4
- D3.js - How to use different styles for tick labels in one plot?
- How to make Nvd3 use log scale on y-axis
- Replace NVD3 chart with different chart type
- How do you prevent the interference of MULTIPLE SVG elements (text labels) on mouseover of a different SVG element?
- How to have an entity trigger a different entities mouseover event (D3)
- Add mean value and n-number to nvd3 boxplot
- How to use series.stack = false in dimple.js to suppress aggregation; different symbols for each series
- Direct access of attribute shows different value than object console output
- Saving value from HTML form to use in d3
- dc charts look different when building Angular App in production mode
- In Angular app, how do I import d3 and use d3.js scripts?
- How can I use D3.js "onClick" event with an nvd3 bar when zoomed in on chart data?
- How to Use D3 to Angular Project from Bower Install D3
- angular nvd3 duration not affect pie chart
- Partition layout with different value functions
More Query from same tag
- Why doesn't my d3.js line chart work?
- D3 V4 Multi series line chart: Adding data points to lines with same color as lines
- d3 exit selection comes up empty even with unique id value
- When binding data in D3, what does the index represent?
- c3.js - hide tooltip for specific data sets
- simulating clicking of nodes on d3.html from dropdown/select
- Adding tool tip to collapse graph
- D3.JS add zoom and listitems to rect
- Looping through extra data in D3 Directional Force Layout
- How to access stored data from d3 async calls in document.ready function to pass it to a function
- d3 ignore SVG on selectAll
- nvd3 chart showing grayscale
- Projecting topoJSON using D3 shows tiny
- X Axis text labels are not rotating in d3
- Recreate Cluster Force Layout using d3 v4.0
- D3.js bar chart - axis and labels not working / transitioning
- Drawing a line using d3 is not visible when all data items are the same
- Starting linear scale from 1 instead of 0 (D3.js)
- Sorting Through Multidimensional Dataset Bar Graph
- Get width of element
- How to add an if condition in my d3js example
- mouseover only on path in d3
- Histogram With Percent Split For Each Bar?
- d3.v4: How to use linkRadial instead of linkVertical/Horizontal
- D3 Tree Layout: I want to use jQuery to toggle all children
- Linking dygraphs.js to d3 charts
- How to add url/link on d3 objects in Cal-heatmap
- Is d3.text faster than d3.json?
- D3 Force directed layout + All nodes to original positions
- JS Download Image With Text added