Left-aligning vertical axis labels
Normally, the labels of the vertical left-side axis are right aligned. This demo will show how we can easily make them left-aligned instead.
To make labels left-aligned, it’s enough to just override their horizontal center to their left:
yAxis.get("renderer").labels.template.setAll({ centerX: am5.p0});yAxis.get("renderer").labels.template.setAll({ centerX: am5.p0});/** * --------------------------------------- * 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 }));
var colors = chart.get("colors");
// Datavar data = [ { name: "Alexanderina", time: 8 }, { name: "Joe", time: 10 }, { name: "Bartholomew", time: 11 }, { name: "Eaton", time: 15 }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var yAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "name", renderer: am5xy.AxisRendererY.new(root, {}), tooltip: am5.Tooltip.new(root, {}) }));
yAxis.get("renderer").grid.template.setAll({ location: 1});
yAxis.get("renderer").labels.template.setAll({ centerX: am5.p0});
yAxis.data.setAll(data);
var xAxis = chart.xAxes.push( am5xy.ValueAxis.new(root, { renderer: am5xy.AxisRendererX.new(root, { strokeOpacity: 0.1 }) }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/var series = chart.series.push( am5xy.ColumnSeries.new(root, { name: "Income", xAxis: xAxis, yAxis: yAxis, valueXField: "time", categoryYField: "name" }));
series.columns.template.setAll({ tooltipText: "[bold]{name}[/]\n{categoryY}: {valueX}"});
series.data.setAll(data);
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/series.appear();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" } }, "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": [ { "name": "Alexanderina", "time": 8 }, { "name": "Joe", "time": 10 }, { "name": "Bartholomew", "time": 11 }, { "name": "Eaton", "time": 15 } ] }, { "axis-0": { "type": "ValueAxis", "settings": { "renderer": { "type": "AxisRendererX", "settings": { "strokeOpacity": 0.1 } } } } }, { "axis-1": { "type": "CategoryAxis", "settings": { "categoryField": "name", "renderer": { "type": "AxisRendererY", "properties": { "labels": { "properties": { "template": { "settings": { "centerX": { "type": "Percent", "value": 0 } } } } }, "grid": { "properties": { "template": { "settings": { "location": 1 } } } } } }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "series-0": { "type": "ColumnSeries", "settings": { "name": "Income", "xAxis": "#axis-0", "yAxis": "#axis-1", "valueXField": "time", "categoryYField": "name" }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "tooltipText": "[bold]{name}[/]\n{categoryY}: {valueX}" } } } } } } } ]}left-aligned-labels-on-a-vertical-axis