Open JandreLab opened 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
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; }
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.
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