Search code examples
d3.jsnvd3.jsangular-nvd3

How can I replicate this nvd3 chart title styling/positioning behaviour?

I am taking over a site which uses Angular-nvD3 to draw a pie chart and when I build the site locally the title isn't displaying correctly.

Here's the chart on the current working site... enter image description here

and here's what it looks like when I build the site locally... enter image description here

The code feeds in an array of strings into the 'title' attribute on chart object's 'options' object. The working site created separate lines for each string in this array, but the local site just joins the strings into one line.

I have ensured that all dependencies are on the same versions. I have gone through all documentation for nvd3 and angular-nvd3 but can't find any reference to titles as arrays.

So the question is whether it is possible to set the title to automatically wrap onto multiple lines in the way that it does on the existing website?

Code...

var app = angular.module('d3app', ['nvd3']);

app.controller('MainCtrl', function($scope) {
$scope.options = {
    chart: {
        type: 'pieChart',
        height: 500,
        x: function(d){return d.key;},
        y: function(d){return d.y;},
        showLabels: true,
        donutRatio: .55,
        showLegend: false,
        duration: 500,
        donut: true,
        labelsOutside: true,
        labelThreshold: 0.01,
        labelSunbeamLayout: true,
        title:['KOSTNADSSPLITT','(OPPVASKPROSESSEN)'],
        legend: {
            margin: {
                top: 5,
                right: 35,
                bottom: 5,
                left: 0
            }
        }
    }
};

$scope.data = [
    {
        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: .5
    }
];
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.css" rel="stylesheet"/>
<div ng-app="d3app">
  <div ng-controller="MainCtrl">
    <nvd3 options="options" data="data"></nvd3> 
  </div>
</div>

Solution

  • As pointed out by jeznag the Code for one of this site's Bower dependencies (Angular Material Design) has been manually altered. So this is not a bug or a general problem.