Bar chart with icons on columns and axis
This demo shows how we can add icons at the end of bars using series bullets, as well as next to category labels using axis bullets.
/** * --------------------------------------- * This demo was created using amCharts 5. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v5/ * --------------------------------------- */
// Create root element// https://www.amcharts.com/docs/v5/getting-started/#Root_elementvar root = am5.Root.new("chartdiv");
// Set themes// https://www.amcharts.com/docs/v5/concepts/themes/root.setThemes([am5themes_Animated.new(root)]);
// Create chart// https://www.amcharts.com/docs/v5/charts/xy-chart/var chart = root.container.children.push( am5xy.XYChart.new(root, { panX: false, panY: false, wheelX: "panX", wheelY: "zoomX", layout: root.verticalLayout }));
// Add legend// https://www.amcharts.com/docs/v5/charts/xy-chart/legend-xy-series/var legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p50, x: am5.p50 }));
// Datavar data = [ { year: "2017", income: 23.5, path1: "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", path2: "M 15 6 L 15 22 M 21 12 L 15 6 L 9 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { year: "2018", income: 26.2, path1: "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", path2: "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { year: "2019", income: 30.1, path1: "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", path2: "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { year: "2020", income: 29.5, path1: "M 18 6 L 18 24 M 23 11 L 18 6 L 13 11", path2: "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { year: "2021", income: 24.6, path1: "M 18 6 L 18 24 M 23 11 L 18 6 L 13 11", path2: "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }];
var yRenderer = am5xy.AxisRendererY.new(root, { inversed: true, cellStartLocation: 0.1, cellEndLocation: 0.9});
// Adds space for the bulletyRenderer.labels.template.set("paddingLeft", 30);
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var yAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "year", renderer: yRenderer, bullet: function (root, axis, dataItem) { var sprite = am5.Graphics.new(root, { centerY: am5.p50, centerX: 0, stroke: am5.color(0x000000), strokeWidth: 1, strokeOpacity: 1, svgPath: dataItem.dataContext.path2 });
var label = dataItem.get("label");
// Moves icon to the left of the label label.events.on("boundschanged", function () { sprite.set("centerX", label.width()); });
return am5xy.AxisBullet.new(root, { location: 0.5, sprite: sprite }); } }));
yAxis.data.setAll(data);
var xAxis = chart.xAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { strokeOpacity: 0.1 }),
min: 0 }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function createSeries(field, name) { var series = chart.series.push( am5xy.ColumnSeries.new(root, { name: name, xAxis: xAxis, yAxis: yAxis, valueXField: field, categoryYField: "year", sequencedInterpolation: true, tooltip: am5.Tooltip.new(root, { pointerOrientation: "horizontal", labelText: "[bold]{name}[/]\n{categoryY}: {valueX}" }) }) );
series.columns.template.setAll({ height: am5.p100, strokeOpacity: 0, cornerRadiusTR: 50, cornerRadiusBR: 50, height: am5.percent(50) });
series.bullets.push(function (root, series, dataItem) { const container = am5.Container.new(root, { layout: root.horizontalLayout });
container.children.push( am5.Label.new(root, { centerY: am5.p50, text: "{valueX}", populateText: true }) );
var icon = container.children.push( am5.Graphics.new(root, { centerX: am5.p100, centerY: am5.p50, svgPath: dataItem.dataContext.path1, stroke: am5.color(0x000000), strokeWidth: 1, strokeOpacity: 1 }) );
return am5.Bullet.new(root, { locationX: 1, locationY: 0.5, sprite: container }); });
series.data.setAll(data); series.appear();
return series;}
createSeries("income", "Income");
// Add cursor// https://www.amcharts.com/docs/v5/charts/xy-chart/cursor/var cursor = chart.set( "cursor", am5xy.XYCursor.new(root, { behavior: "zoomY" }));
cursor.lineY.set("forceHidden", true);cursor.lineX.set("forceHidden", true);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/chart.appear(1000, 100);<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: 95vh;}{ "type": "XYChart", "settings": { "panX": false, "panY": false, "wheelX": "panX", "wheelY": "zoomX", "layout": { "type": "VerticalLayout" }, "cursor": { "type": "XYCursor", "settings": { "behavior": "zoomY" }, "properties": { "lineX": { "settings": { "forceHidden": true } }, "lineY": { "settings": { "forceHidden": true } } } } }, "properties": { "series": [ "#series-0" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [] } } ], "refs": [ { "data-0": [ { "year": "2017", "income": 23.5, "path1": "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", "path2": "M 15 6 L 15 22 M 21 12 L 15 6 L 9 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { "year": "2018", "income": 26.2, "path1": "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", "path2": "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { "year": "2019", "income": 30.1, "path1": "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", "path2": "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { "year": "2020", "income": 29.5, "path1": "M 18 6 L 18 24 M 23 11 L 18 6 L 13 11", "path2": "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" }, { "year": "2021", "income": 24.6, "path1": "M 18 6 L 18 24 M 23 11 L 18 6 L 13 11", "path2": "M 7 15 L 23 15 M 20 12 L 23 15 L 20 18 M 10 18 L 7 15 L 10 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" } ] }, { "axis-0": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererX", "settings": { "strokeOpacity": 0.1 } }, "min": 0 } } }, { "axis-1": { "type": "CategoryAxis", "settings": { "categoryField": "year", "renderer": { "type": "AxisRendererY", "settings": { "inversed": true, "cellStartLocation": 0.1, "cellEndLocation": 0.9 }, "properties": { "labels": { "properties": { "template": { "settings": { "paddingLeft": 30 } } } } } } }, "properties": { "data": "#data-0", "bullet": { "type": "AxisBullet", "settings": { "location": 0.5, "sprite": { "type": "Graphics", "settings": { "centerY": { "type": "Percent", "value": 50 }, "centerX": 0, "stroke": { "type": "Color", "value": "#000000" }, "strokeWidth": 1, "strokeOpacity": 1, "svgPath": "M 15 6 L 15 22 M 21 12 L 15 6 L 9 12 M 3 2 L 27 2 L 27 27 L 3 27 L 3 2" } } } } } } }, { "series-0": { "type": "ColumnSeries", "settings": { "name": "Income", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueXField": "income", "categoryYField": "year", "sequencedInterpolation": true, "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "horizontal", "labelText": "[bold]{name}[/]\n{categoryY}: {valueX}" } } }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 50 }, "strokeOpacity": 0, "cornerRadiusTR": 50, "cornerRadiusBR": 50 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 1, "locationY": 0.5, "sprite": { "type": "Container", "settings": { "layout": { "type": "HorizontalLayout" } }, "children": [ { "type": "Label", "settings": { "centerY": { "type": "Percent", "value": 50 }, "text": "{valueX}", "populateText": true } }, { "type": "Graphics", "settings": { "centerX": { "type": "Percent", "value": 100 }, "centerY": { "type": "Percent", "value": 50 }, "svgPath": "M 18 6 L 18 24 L 13 19 M 18 24 L 23 19", "stroke": { "type": "Color", "value": "#000000" }, "strokeWidth": 1, "strokeOpacity": 1 } } ] } } } ] } } } ]}bar-chart-with-icons-next-to-labels