A funnel of four rounded, evenly spaced slices, with the labels lined up at the side. Each slice slopes to the width of the next, so the outline stays smooth.
Rounded corners and gaps turn a funnel into separate, friendly blocks. They suit a short process with a few clear steps, on a dashboard or a slide. With many steps, the gaps take room the slices need.
Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.
npm install @amcharts/amcharts5. See Getting started.
The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code."type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/
var chart = root.container.children.push(am5percent.SlicedChart.new(root, {
layout: root.verticalLayout // the legend goes below the funnel
}));
// Create series
// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Series
var series = chart.series.push(am5percent.FunnelSeries.new(root, {
alignLabels: true, // the labels line up in a column beside the funnel
orientation: "vertical", // the funnel runs from top to bottom
valueField: "value",
categoryField: "category",
// each slice narrows to the width of the next one, giving the funnel its shape
bottomRatio: 1
}));
series.slices.template.setAll({
cornerRadiusBL: 5, // 5px rounded corners on every slice
cornerRadiusBR: 5,
cornerRadiusTL: 5,
cornerRadiusTR: 5
})
// the links between the slices are hidden but keep their 5px height, a gap between slices
series.links.template.setAll({
forceHidden: true,
height: 5
})
// Set data
// https://www.amcharts.com/docs/v5/charts/percent-charts/sliced-chart/#Setting_data
series.data.setAll([
{ value: 10, category: "One" },
{ value: 9, category: "Two" },
{ value: 6, category: "Three" },
{ value: 5, category: "Four" }
]);
// Play initial series animation
// https://www.amcharts.com/docs/v5/concepts/animations/#Animation_of_series
series.appear();
// Create legend
// https://www.amcharts.com/docs/v5/charts/percent-charts/legend-percent-series/
var legend = chart.children.push(am5.Legend.new(root, {
centerX: am5.p50, // the legend's middle...
x: am5.p50, // ...at the middle of the chart
marginTop: 15, // 15px of space above...
marginBottom: 15 // ...and below the legend
}));
legend.data.setAll(series.dataItems);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
chart.appear(1000, 100);{
"type": "SlicedChart",
"settings": {
"layout": {
"type": "VerticalLayout"
}
},
"properties": {
"series": [
"#series-0"
]
},
"children": [
{
"type": "Legend",
"settings": {
"centerX": {
"type": "Percent",
"value": 50
},
"x": {
"type": "Percent",
"value": 50
},
"marginTop": 15,
"marginBottom": 15
},
"properties": {
"data": "#series-0.dataItems"
}
}
],
"refs": [
{
"data-0": [
{
"value": 10,
"category": "One"
},
{
"value": 9,
"category": "Two"
},
{
"value": 6,
"category": "Three"
},
{
"value": 5,
"category": "Four"
}
]
},
{
"series-0": {
"type": "FunnelSeries",
"settings": {
"alignLabels": true,
"orientation": "vertical",
"valueField": "value",
"categoryField": "category",
"bottomRatio": 1
},
"properties": {
"data": "#data-0",
"slices": {
"properties": {
"template": {
"settings": {
"cornerRadiusBL": 5,
"cornerRadiusBR": 5,
"cornerRadiusTL": 5,
"cornerRadiusTR": 5
}
}
}
},
"links": {
"properties": {
"template": {
"settings": {
"forceHidden": true,
"height": 5
}
}
}
}
}
}
}
]
}
