Pie chart with right-aligned labels
This demo shows how we can right-align Legend’s labels and value labels.
legend.labels.template.setAll({ width: 100, textAlign: "right"});
legend.valueLabels.template.setAll({ width: 70, textAlign: "right"});legend.labels.template.setAll({ width: 100, textAlign: "right"});
legend.valueLabels.template.setAll({ width: 70, textAlign: "right"});/** * --------------------------------------- * 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 and chartvar root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);
var chart = root.container.children.push( am5percent.PieChart.new(root, { layout: root.horizontalLayout }));
// Define datavar data = [ { category: "Lithuania", value: 501.9 }, { category: "Czechia", value: 301.9 }, { category: "Ireland", value: 201.1 }, { category: "Germany", value: 165.8 }, { category: "Australia", value: 139.9 }, { category: "Austria", value: 128.3 }, { category: "UK", value: 99 }];
// Create seriesvar series = chart.series.push( am5percent.PieSeries.new(root, { name: "Series", valueField: "value", categoryField: "category" }));
series.labels.template.set("forceHidden", true);series.ticks.template.set("forceHidden", true);
series.data.setAll(data);
// Add legendvar legend = chart.children.push( am5.Legend.new(root, { centerY: am5.percent(50), y: am5.percent(50), //width: 250, //y: am5.p0, layout: root.verticalLayout }));
legend.labels.template.setAll({ width: 100, textAlign: "right"});
legend.valueLabels.template.setAll({ width: 70, textAlign: "right"});
legend.data.setAll(series.dataItems);<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": "PieChart", "settings": { "layout": { "type": "HorizontalLayout" } }, "properties": { "series": [ "#series-0" ] }, "children": [ { "type": "Legend", "settings": { "centerY": { "type": "Percent", "value": 50 }, "y": { "type": "Percent", "value": 50 }, "layout": { "type": "VerticalLayout" } }, "properties": { "data": "#series-0.dataItems", "labels": { "properties": { "template": { "settings": { "width": 100, "textAlign": "right" } } } }, "valueLabels": { "properties": { "template": { "settings": { "width": 70, "textAlign": "right" } } } } } } ], "refs": [ { "data-0": [ { "category": "Lithuania", "value": 501.9 }, { "category": "Czechia", "value": 301.9 }, { "category": "Ireland", "value": 201.1 }, { "category": "Germany", "value": 165.8 }, { "category": "Australia", "value": 139.9 }, { "category": "Austria", "value": 128.3 }, { "category": "UK", "value": 99 } ] }, { "series-0": { "type": "PieSeries", "settings": { "name": "Series", "valueField": "value", "categoryField": "category" }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "ticks": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}pie-chart-with-right-aligned-labels