javascriptangularjsnvd3.jsangularjs-nvd3-directives

Angular nvd3 donut chart - how to add a static or dynamic title? -


I am using angular nvd3-pie-chart. Any idea or suggestion how to add a static or dynamic title at the center of the donut chart?

Here is the code block.

 <nvd3-pie-chart 
    data="exampleData" id="exampleId" showLabels="true" x="xFunction()" y="yFunction()" donut="true" donutRatio=".5" donutLabelsOutside="true">

</nvd3-pie-chart>

function ExampleCtrl($scope){
            $scope.exampleData = [
                {
                    key: "One",
                    y: 5
                },
                {
                    key: "Two",
                    y: 2
                }
            ];

            $scope.xFunction = function(){
                return function(d) {
                    return d.key;
                };
            }
            $scope.yFunction = function(){
                return function(d) {
                    return d.y;
                };
            }

        }

Solution

  • You can simply use below:

    title: {
    enable: true,
    text: 'Chart Title'
    }
    

    Refer to below link: NVD3 Docs