Horizontal dual bar chart with categories in the middle
This demo shows how we can use bullets and horizontally-stacked axes to create a symmetrical bar chart with categories in the middle.
/** * --------------------------------------- * 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, arrangeTooltips: false }));
// 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 = [ { category: "Less than $15,000", east: 150, west: 163 }, { category: "$15,000 - $24,999", east: 15, west: 163 }, { category: "$25,000 - $34,999", east: 70, west: 125 }, { category: "$35,000 - $49,999", east: 75, west: 125 }, { category: "$50,000 - $74,999", east: 35, west: 122 }, { category: "$75,000 and above", east: 96, west: 90 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var yAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", isMeasured: false, renderer: am5xy.AxisRendererY.new(root, { inversed: true, cellStartLocation: 0.3, cellEndLocation: 0.7 }) }));
yAxis.get("renderer").labels.template.set("forceHidden", true);yAxis.get("renderer").grid.template.set("forceHidden", true);
yAxis.data.setAll(data);
var xAxis1 = chart.xAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { strokeOpacity: 0, inversed: true, minGridDistance: 40 }),
min: 0, max: 200, marginRight: 80 }));
xAxis1.get("renderer").grid.template.setAll({ strokeDasharray: [4, 2]});
xAxis1.axisHeader.set("forceHidden", true);
var xAxis2 = chart.xAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { strokeOpacity: 0, minGridDistance: 40 }),
min: 0, max: 200, marginLeft: 80 }));
xAxis2.get("renderer").grid.template.setAll({ strokeDasharray: [4, 2]});
xAxis2.axisHeader.set("forceHidden", true);
// Make horizontal axes stackchart.bottomAxesContainer.set("layout", root.horizontalLayout);
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
var series = chart.series.push( am5xy.ColumnSeries.new(root, { name: "East Region", xAxis: xAxis1, yAxis: yAxis, valueXField: "east", categoryYField: "category", clustered: false, sequencedInterpolation: true, fill: am5.color(0x6699d1), tooltip: am5.Tooltip.new(root, { pointerOrientation: "right", labelText: "[bold]{name}[/]\n{categoryY}: {valueX}" }) }));
series.columns.template.setAll({ height: am5.p100, strokeOpacity: 0});
series.bullets.push(function () { return am5.Bullet.new(root, { locationX: 0, locationY: 0.5, sprite: am5.Label.new(root, { centerY: am5.p50, text: "{categoryY}", populateText: true }) });});
series.data.setAll(data);series.appear();
var series2 = chart.series.push( am5xy.ColumnSeries.new(root, { name: "West Region", xAxis: xAxis2, yAxis: yAxis, valueXField: "west", categoryYField: "category", clustered: false, sequencedInterpolation: true, fill: am5.color(0xff7a80), tooltip: am5.Tooltip.new(root, { pointerOrientation: "left", labelText: "[bold]{name}[/]\n{categoryY}: {valueX}" }) }));
series2.columns.template.setAll({ height: am5.p100, strokeOpacity: 0});
series2.data.setAll(data);series2.appear();
// 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 }));
legend.valueLabels.template.set("forceHidden", true);
legend.data.setAll(chart.series.values);
// 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" }, "arrangeTooltips": false, "cursor": { "type": "XYCursor", "settings": { "behavior": "zoomY" }, "properties": { "lineX": { "settings": { "forceHidden": true } }, "lineY": { "settings": { "forceHidden": true } } } } }, "properties": { "series": [ "#series-0", "#series-1" ], "xAxes": [ "#axis-0", "#axis-1" ], "yAxes": [ "#axis-2" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [] }, "index": 1 }, { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 50 }, "x": { "type": "Percent", "value": 50 } }, "properties": { "data": [ "#series-0", "#series-1" ], "valueLabels": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } ], "refs": [ { "data-0": [ { "category": "Less than $15,000", "east": 150, "west": 163 }, { "category": "$15,000 - $24,999", "east": 15, "west": 163 }, { "category": "$25,000 - $34,999", "east": 70, "west": 125 }, { "category": "$35,000 - $49,999", "east": 75, "west": 125 }, { "category": "$50,000 - $74,999", "east": 35, "west": 122 }, { "category": "$75,000 and above", "east": 96, "west": 90 } ] }, { "axis-0": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererX", "settings": { "strokeOpacity": 0, "inversed": true, "minGridDistance": 40 }, "properties": { "grid": { "properties": { "template": { "settings": { "strokeDasharray": [ 4, 2 ] } } } } } }, "min": 0, "max": 200, "marginRight": 80 } } }, { "axis-1": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererX", "settings": { "strokeOpacity": 0, "minGridDistance": 40 }, "properties": { "grid": { "properties": { "template": { "settings": { "strokeDasharray": [ 4, 2 ] } } } } } }, "min": 0, "max": 200, "marginLeft": 80 } } }, { "axis-2": { "type": "CategoryAxis", "settings": { "categoryField": "category", "isMeasured": false, "renderer": { "type": "AxisRendererY", "settings": { "inversed": true, "cellStartLocation": 0.3, "cellEndLocation": 0.7 }, "properties": { "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "grid": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } }, "properties": { "data": "#data-0" } } }, { "series-0": { "type": "ColumnSeries", "settings": { "name": "East Region", "xAxis": "#axis-0", "yAxis": "#axis-2", "valueXField": "east", "categoryYField": "category", "clustered": false, "sequencedInterpolation": true, "fill": { "type": "Color", "value": "#6699d1" }, "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "right", "labelText": "[bold]{name}[/]\n{categoryY}: {valueX}" } } }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 100 }, "strokeOpacity": 0 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 0, "locationY": 0.5, "sprite": { "type": "Label", "settings": { "centerY": { "type": "Percent", "value": 50 }, "text": "{categoryY}", "populateText": true } } } } ] } } }, { "series-1": { "type": "ColumnSeries", "settings": { "name": "West Region", "xAxis": "#axis-1", "yAxis": "#axis-2", "valueXField": "west", "categoryYField": "category", "clustered": false, "sequencedInterpolation": true, "fill": { "type": "Color", "value": "#ff7a80" }, "tooltip": { "type": "Tooltip", "settings": { "pointerOrientation": "left", "labelText": "[bold]{name}[/]\n{categoryY}: {valueX}" } } }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 100 }, "strokeOpacity": 0 } } } } } } } ]}horizontal-dual-bar-chart-with-categories-in-the-middle