search

swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.28k stars 1.15k forks source link

When pie chart is a doughnut, gradient can't be seen #1317

Open AaronLavers opened 4 years ago

AaronLavers commented 4 years ago

Describe the bug When using the ngx-charts-pie-chart feature with an arc-width set (i.e. doughnut chart), the gradient effect is not easily visible.

To Reproduce Steps to reproduce the behavior:

  1. Go to the demo page https://swimlane.github.io/ngx-charts/#/ngx-charts/pie-chart
  2. Set the gradient to true, and the arc width to 0.25
  3. Notice the chart is darker (the gradient is there), yet the radius of the gradient is too small to see the colour transition.

Expected behavior The radius - or gradient cs/cy position - should adjust with respect to the arc-width so that the gradient is still visible - having inputs to set this would help. Alternatively a setting to choose between radialGradient and linearGradient would be helpful, as a linearGradient would fill the arc radius for a nice effect.

Screenshots

  1. Charts with doughnut setting and gradient true.. gradient cant be easily seen Annotation 2019-12-04 113529a

  2. Adjusting gradient to actually see the effect Annotation 2019-12-04 113529b

ngx-charts version 12.0.1

AaronLavers commented 4 years ago

Also, while this is an issue, there's a bug noted in https://github.com/swimlane/ngx-charts/issues/672 which is persisting with the latest version - All charts using gradients render as just black in iOS/Safari, and would require a fix to make the gradients usable in a production environment

chiangs commented 4 years ago

I would really love this address as well.

@AaronLavers do you have a plunkr or repo where I can see the chart you posted with the total in the middle?