Funnel#adapters#funnel#labels
Normally, Funnel chart calculates and shows percentage of each slice based on its value in comparison to the sum of all values. This demo shows how we can use adapters to calculate percentage based on the first slice value, rather than the sum.
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */ am4core.useTheme(am4themes_animated); var chart = am4core.create("chartdiv", am4charts.SlicedChart);chart.data = [ { name: "Stage #1", value: 600 }, { name: "Stage #2", value: 300 }, { name: "Stage #3", value: 200 }, { name: "Stage #4", value: 180 }, { name: "Stage #5", value: 50 }, { name: "Stage #6", value: 20 }, { name: "Stage #7", value: 10 }]; var series = chart.series.push(new am4charts.FunnelSeries());series.dataFields.value = "value";series.dataFields.category = "name";series.alignLabels = true; series.labels.template.adapter.add("text", slicePercent);series.tooltip.label.adapter.add("text", slicePercent); function slicePercent(text, target) { var max = target.dataItem.values.value.value - target.dataItem.values.value.startChange; var percent = Math.round((target.dataItem.values.value.value / max) * 100); return "{category}: " + percent + "%";}
<div id="chartdiv"></div>
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";} #chartdiv { width: 100%; height: 350px;}
funnel-chart-with-relative-percent-labels
