Ability to put label in the middle of the donut about angularjs-nvd3-directives

[matthiaslao]

@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)

[hibrid]

@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");

[arunharshan]

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.

[kikocastro]

+1

[technimadhu]

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.

[geoffreak]

@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.

[sdeoGit]

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!

[Annusree]

In case if there are multiple donut charts in same page?

[hibrid]

@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

[blowsie]

@cmaurer nvd3 lets you do this using title

http://nvd3-community.github.io/nvd3/examples/donutChart.html

[rajeshwarpatlolla]

@hibrid, <br /> is also not working. It showing the <br /> as is in the title. Is there any other way you can suggest?

[rajeshwarpatlolla]

This link helped me to get it in place

[RuchiPrsd]

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.

[dula85]

does anybody succeed with having new line in middle text ?