CODEWITHSUNDEEP
angularamchartsamcharts4
Przemysław Świat
Przemysław Świat

Reputation: 76

Adjust max width of slices in amcharts SlicedChart with FunnelSeries

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): enter image description here

But I want the slices to be shorter so they correspond to the actual values (in my case these are percentages):

enter image description here

Upvotes: 0

Views: 40

Answers (0)

Related Questions