why is arc labels blurred in my d3js pie chart?

user_11957755 0
Viewed 99

I am having a piechart drawn using d3js. to the arc labels i am applying the following style.

.pieChartOuterLabel {
  font-size: 1em;
  fill: black;
  font-weight: bold;
  font-family: 'Times New Roman, Times, serif';
}

this is how my pie chart looks like. you can see the the percentage text labels are blurred ( it seems the other css styles applied to the parent elements are setting opacity to .5 to these labels).

enter image description here

i have tried this but it didnt work well.

.pieChartOuterLabel {
  font-size: 1em;
  fill: black;
  font-weight: bold;
  font-family: 'Times New Roman, Times, serif';
  opacity: 1 !important;
}

the project is available at here . what i expect the arc labels should be displayed in the same style that those in the center text of the doughnut chart.

https://stackblitz.com/edit/angular-6ufows

really appreciate if you can help thank you

d3.js angularjs typescript javascript
1 Answers

I fixed it by removing the opacity:0.5 that you have on all your <g> elements, and applying the opacity on the arcs paths using mouse events, also I moved the tooltip a bit higher since it makes it hard to hover the arcs, here is a working stackblitz

user_8963580
Related