How to avoid text overlapping in odoo 10 nvd3 pie chart

Question

I am using odoo 10. When I go to tree view then charts then click on pie chart icon. Pie Labels are overlapping at some points. I tried to some work around in /web/static/nvd3/nv.d3.js file but it is either giving me errors or n effect. Could anyone help me how to achieve this without text overlapping on piechart?

/* Overlapping pie labels are not good. What this attempts to do is, prevent overlapping. Each label location is hashed, and if a hash collision occurs, we assume an overlap. Adjust the label's y-position to remove the overlap. */ var center = labelsArc[i].centroid(d);

var percent = getSlicePercentage(d);
if (d.value && percent >= labelThreshold) {
    var hashKey = createHashKey(center);
if (labelLocationHash[hashKey]) {
    center[1] -= avgHeight;
}
labelLocationHash[createHashKey(center)] = true;
}


return 'translate(' + center + ').rotateLabels(-45)'
}

Above code giving me all text labels centered in piechart middle/centre overlapped on each other. if I remove .rotateLabels(-45) then labels are outside the pie circle but some text overlapping on each other. Thanks in advance!

score 0 · Answer 1 · answered Jan 05 '19 at 10:22

This worked for me. Do not apply rotateLabels(-45) as I have applied in the question. set ShowLabels=true and labelSunbeamLayout=true as shown below in nv.d3.js file.

//============================================================
// Public Variables with Default Settings
//------------------------------------------------------------

var margin = {top: 0, right: 0, bottom: 0, left: 0}
    , width = 500
    , height = 500
    , getX = function(d) { return d.x }
    , getY = function(d) { return d.y }
    , id = Math.floor(Math.random() * 10000) //Create semi-unique ID in case user doesn't select one
    , container = null
    , color = nv.utils.defaultColor()
    , valueFormat = d3.format(',.2f')
    , showLabels = true
    , labelsOutside = true
    , labelType = "key"
    , labelThreshold = .02 //if slice percentage is under this, don't show label
    , donut = false
    , title = false
    , growOnHover = true
    , titleOffset = 0
    , labelSunbeamLayout = true
    , startAngle = false
    , padAngle = false
    , endAngle = false
    , cornerRadius = 0
    , donutRatio = 0.5
    , arcsRadius = []
    , dispatch = d3.dispatch('chartClick', 'elementClick', 'elementDblClick', 'elementMouseover', 'elementMouseout', 'elementMousemove', 'renderEnd')
    ;

How to avoid text overlapping in odoo 10 nvd3 pie chart

1 Answers1