swimlane / ngx-charts

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

Advanced Pie Chart arcWidth #1406

Open JandreLab opened 4 years ago

JandreLab commented 4 years ago

Is your feature request related to a problem? Please describe. I have this issue where I want the Advanced Pie Chart to be a doughnut that is a bit thicker.

Describe the solution you'd like Is there any possibility to add an option that we can set the arcWidth of the doughnut, like in the normal pie chart

Describe alternatives you've considered When looking at the structure of the Advanced Pie Chart I see there is an option for an innerRadius, but setting this value does not change the inner Radius of the pie. If this feature can be used that could work as well.

Thank you

lozah commented 4 years ago

+1. I don't understand why the advanced pie chart doesn't have the same propertie inputs than the normal pie chart for customizing the chart

keharvey383 commented 3 years ago

Just in case anyone else comes across this. I was able to get this to work by using ViewChild to get the advanced pie cart component and then set the inner and outer radius on the component after content is checked.

@ViewChild(AdvancedPieChartComponent) pieChart: AdvancedPieChartComponent;

and

ngAfterContentChecked() { this.pieChart.innerRadius = 45; this.pieChart.outerRadius = 70; }

EvansMatthew97 commented 1 year ago

The approach suggested by @keharvey383 unfortunately doesn't work for me, and would likely result in some performance issues.

A better approach is to override the component's functionality using a directive:

import { Directive, Host, Input, Optional, Self } from '@angular/core';
import { AdvancedPieChartComponent } from '@swimlane/ngx-charts';

@Directive({
  selector: '[appAdvancedPieChartArcWidth]',
})
export class AdvancedPieChartArcWidthDirective {
  @Input() appAdvancedPieChartArcWidth: number = 0.4;

  constructor(
    @Host() @Self() @Optional() public hostChart: AdvancedPieChartComponent
  ) {
    const updateMethod = hostChart.update;
    hostChart.update = () => {
      updateMethod.apply(hostChart);
      hostChart.innerRadius =
        hostChart.outerRadius * (1 - this.appAdvancedPieChartArcWidth);
    };
  }
}

The innerRadius is calculated the same way as the arcWidth on the normal pie chart component.