\n
But I want the slices to be shorter so they correspond to the actual values (in my case these are percentages):
\n\n","author":{"@type":"Person","name":"Przemysław Świat"},"upvoteCount":0,"answerCount":0,"acceptedAnswer":null}}Reputation: 76
I am using Angular with amcharts 4. I have an amcharts SlicedChart with FunnelSeries. The problem is that the top slice is always the same max width, while I want it to always be some percent of the max width. Next slices should scale down treating the top one's width as a new max width.
I tried to set width and maxWidth properties of series and slices but these seem to have no effect:
series.width = am4core.percent(maxScore);
series.slices.template.width = am4core.percent(maxScore);
series.slices.template.slice.width = am4core.percent(maxScore);
Adjusting the width of the whole chart kinda works but it scales down the entire chart, and I want only the slices to be scaled - labels etc. should be unchanged. I also tried using adapters but to no effect.
EDIT:
Code to reproduce in TypeScript:
const chart = am4core.create("test", am4charts.SlicedChart);
chart.data = [
{ name: "A1", value: 40},
{ name: "A2", value: 30},
{ name: "A3", value: 20}
]
let series = chart.series.push(new am4charts.FunnelSeries());
series.dataFields.value = "value";
series.dataFields.category = "name";
series.slices.template.tooltipText = '{category}: {value}%';
series.labels.template.text = '{category}: {value}%';
And HTML:
<div [id]="'test'" style="width: 100%; height: 100%"></div>
It now looks like this (I added a red background to better visualize the problem):
But I want the slices to be shorter so they correspond to the actual values (in my case these are percentages):
Upvotes: 0
Views: 40