pie chart readability

1 files changed, 6 insertions, 3 deletions

diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index 8f7fadfa5..5b6bdc4cf 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -267,15 +267,18 @@ export class PieChart extends React.Component<PieChartProps> {
         arcs.append("path")
             .attr("fill", (data, i)=>{
                 let value=data.data;
-                return d3.schemeSet3[i];
+                return d3.schemeSet3[i]? d3.schemeSet3[i]: d3.schemeSet3[i%12];
             })
             .attr("d", arc);
         arcs.append("text")
-            .attr("transform",function(d){ return "translate("+ (arc.centroid(d as unknown as d3.DefaultArcObject))  + ")"; })
+            .attr("transform",function(d){ 
+                var centroid = arc.centroid(d as unknown as d3.DefaultArcObject)
+                var heightOffset = (centroid[1]/radius) * Math.abs(centroid[1])
+                return "translate("+ (centroid[0]+centroid[0]/(radius*.02)) + "," + (centroid[1]+heightOffset)  + ")"; })
             .attr("text-anchor", "middle")
             .text(function(d){ 
                 return dataSet[data.indexOf(d.value)][percentField] 
-                + (!descriptionField? '' : (' ' + dataSet[data.indexOf(d.value)][descriptionField]))})
+                + (!descriptionField? '' : (' - ' + dataSet[data.indexOf(d.value)][descriptionField]))})
 
     };