A funnel where every slice is dark at the edges and light in the middle, so it looks round, like a stack of tubes. The shading is made from each slice’s own color, so it follows any theme.
A gradient adds depth without adding colors: each slice gets a highlight and two darker edges, all made from its own color. It helps a funnel stand out on a landing page or a slide. The numbers read the same as in a flat funnel, so choose it for the look.
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: false, // labels sit on the slices, not in a column beside the funnel
orientation: "vertical", // the funnel runs from top to bottom
valueField: "value",
categoryField: "category"
})
);
// make fills gradients
series.slices.template.setAll({
strokeOpacity: 0, // no outline
fillGradient: am5.LinearGradient.new(root, {
// left to right: darker at the edges, lighter in the middle, so each slice looks rounded
rotation: 0,
stops: [{ brighten: -0.15 }, { brighten: 0.2 }, { brighten: -0.15 }]
})
});
// 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" },
{ value: 4, category: "Five" },
{ value: 3, category: "Six" },
{ value: 1, category: "Seven" }
]);
// 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"
},
{
"value": 4,
"category": "Five"
},
{
"value": 3,
"category": "Six"
},
{
"value": 1,
"category": "Seven"
}
]
},
{
"series-0": {
"type": "FunnelSeries",
"settings": {
"alignLabels": false,
"orientation": "vertical",
"valueField": "value",
"categoryField": "category"
},
"properties": {
"data": "#data-0",
"slices": {
"properties": {
"template": {
"settings": {
"strokeOpacity": 0,
"fillGradient": {
"type": "LinearGradient",
"settings": {
"rotation": 0,
"stops": [
{
"brighten": -0.15,
"color": {
"type": "Color",
"value": "#e3764f"
},
"colorInherited": true,
"opacityInherited": true
},
{
"brighten": 0.2,
"color": {
"type": "Color",
"value": "#e3764f"
},
"colorInherited": true,
"opacityInherited": true
},
{
"brighten": -0.15,
"color": {
"type": "Color",
"value": "#e3764f"
},
"colorInherited": true,
"opacityInherited": true
}
]
}
}
}
}
}
}
}
}
}
]
}
