Ngx-charts: Line overflow over label in Polar chart

[bagbyte]

I'm submitting a ... (check one with "x")

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

In some cases, one line on the Polar chart type is overflowing over the label.

Expected behavior

All the lines should stop right before each label.

Reproduction of the problem

const data = [
              {
                name: 'Sales',
                series: [
                  {name: 'Label A', value: 13020286.77},
                  {name: 'Label B', value: 5849129.05},
                  {name: 'Label C', value: 596483.73},
                  {name: 'Label D', value: 138544.59},
                  {name: 'Label E', value: 452095.72},
                  {name: 'Label F', value: 398695.48},
                ]
              }
            ];

There is an overflow on the Label D

Please tell us about your environment:

• OS: Mac OSX 10.12.5 | Ubuntu 14.10
  

• ngx-charts version: 6.0.1
  

• angular-cli version: 1.2.1
  

• Angular version: 4.2.6
  

• Browser: Chrome 60.0.3112.90
  

• Language: TypeScript 2.4.1 | ES5

[style-x7]

Hi all,

Found the (possible) bug. The equal sign is missing. Under pie-label.component.ts textAnchor(), it should be "return this.midAngle(this.data) <= Math.PI ? 'start' : 'end';"

[CarlosAmaral]

Hey, would love to get this fixed. Thank you!

[jobam]

Any update ?

[jmeijer-jupe]

Will this be fixed any time soon?
Just to give some extra information: It only occurs with 6 labels.

[mayankshrm77]

Hi, Any update? It occurs with 4 labels as well.

[thehunckerma]

This is an ugly fix but it works
You need to disable css encapsulation by adding encapsulation: ViewEncapsulation.None to @Component({...})
and add this to your css

.pie-label {
  transform: translateY(10px);
}

You can basically style the labels however you want