Comments (14)
@cmaurer I don't know if it's a good idea, but here is what I have done.
After rendering the svg, I inserted the label inside the svg using d3.
I located where I needed to put my text to fit in the donut.
$scope.callbackFunction = function () {
return function(graph) {
var svg = d3.select("svg");
var donut = svg.selectAll("g.nv-pie").filter(
function (d, i) {
return i == 1;
});
// Inserting text
donut.insert("text", "g")
.text("Your label")
.attr("class", "css-label-class")
.attr("text-anchor", "middle");
}
};
Then you can add CSS to style your label.
For the vertical align, you might need to add an offset
.attr("dy", 10)
from angularjs-nvd3-directives.
@matthiaslao That actually works well. I ran into a problem with updating the text and in that case, I modified your solution to do this where needed (so not necessarily inside of the callback):
var svg = d3.select("svg");
var donut = svg.selectAll("g.nv-pie").filter(
function (d, i) {
return i == 1;
});
// Inserting text
donut.select("text").text("new text");
from angularjs-nvd3-directives.
I am also running into the same issue, where i have to put the title inside the donut chart. I tried the above code in my html page. but i am unable to see the title
<script>
var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
function ExampleCtrl($scope){
$scope.exampleData = [
{
key: "One",
y: 5
},
{
key: "Two",
y: 2
},
{
key: "Three",
y: 9
},
{
key: "Four",
y: 7
},
{
key: "Five",
y: 4
},
{
key: "Six",
y: 3
},
{
key: "Seven",
y: 9
}
];
$scope.xFunction = function(){
return function(d) {
return d.key;
};
}
$scope.yFunction = function(){
return function(d) {
return d.y;
};
}
$scope.callbackFunction = function () {
return function(graph) {
var svg = d3.select("svg");
var donut = svg.selectAll("g.nv-pie").filter(
function (d, i) {
return i == 1;
});
// Inserting text
donut.insert("text", "g")
.text("Your label")
.attr("class", "css-label-class")
.attr("text-anchor", "middle");
}
}
}
</script>
much appreciate if you can share the working code.
Thank you.
from angularjs-nvd3-directives.
+1
from angularjs-nvd3-directives.
Does anyone have a plunker example to do this? (add label in the middle space of donut)
I tried the suggestion by both @matthiaslao and @hibrid and I dont see any errors in my console, but no label.
from angularjs-nvd3-directives.
@technimadhu I added a $timeout
to the callback before running the code listed above to get text to show up. I was running into the same issue.
from angularjs-nvd3-directives.
I am using title option to set the inner middle text of donut chart like below
this.chartConfig.chart.title = this.totalCount + "\n" + " Notifications"
I am able to get the required text but neither break tag is working nor \n. How can I achieve the string in next line ? Snapshot below
Any help would be appreciated , Thanks!
from angularjs-nvd3-directives.
In case if there are multiple donut charts in same page?
from angularjs-nvd3-directives.
@sdeoGit You're going to have to not insert it as text and rather insert it as HTML with a <br />
in it instead \n
from angularjs-nvd3-directives.
@cmaurer nvd3 lets you do this using title
http://nvd3-community.github.io/nvd3/examples/donutChart.html
from angularjs-nvd3-directives.
@hibrid, <br />
is also not working. It showing the <br />
as is in the title. Is there any other way you can suggest?
from angularjs-nvd3-directives.
This link helped me to get it in place
from angularjs-nvd3-directives.
Hi, I similar want the text with the next line inside the donut chart which would be dynamically coming from REST API. If I use title:'24 LARGE', the text is showing as string there. But I need to fetch the title from REST API. Can you please help me on this.
from angularjs-nvd3-directives.
does anybody succeed with having new line in middle text ?
from angularjs-nvd3-directives.
Related Issues (20)
- how to i18n
- Custom data field names for sunburst..?
- How to achieve horizontal interactive guide line in nvd3 charts
- Need a vertical scroll in multiBarHorizontalChart if no. of bars increases
- How to i get data when iam click on pie chart HOT 2
- Discretebar Chart HOT 1
- Is there a way to save the graph and/or all its data to an xml or xmls ?
- TypeError: nv.dispatch.render_start is not a function HOT 2
- Pie Chart Label Lines with angular-nvd3
- Cannot read property 'disabled' of undefined
- Wrap long axis labels
- TypeError: nv.dispatch.render_start is not a function HOT 1
- Tooltip Not Hide while clicking outside of chart element in IPAD Devices
- Gradient color
- Format of focus chart x axis in "lineWithFocusChart" HOT 2
- Interactive Guideline Not showing on all the data points
- Fixed Labels on xAxis
- When selecting/deselecting legends with multi lines on line chart the lines start showing incorrect colors
- Cannot output data to another component using angular 2 custom event @Output()
- Discrete Bar chart tooltip customize
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angularjs-nvd3-directives.