Pie chart with a legend with dynamically-sized labels
This demo shows how we can use events to dynamically set width for the Pie chart’s legend labels, so that the legend takes up all available space, left from the pie itself, as well as truncates the labels if there’s no space available.
/** * --------------------------------------- * 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/ * --------------------------------------- */
/** * Chart */
// 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 = [ { country: "France", sales: 100000 }, { country: "Spain", sales: 160000 }, { country: "United Kingdom", sales: 80000 }, { country: "Netherlands", sales: 90000 }, { country: "Portugal", sales: 25000 }, { country: "Germany", sales: 70000 }, { country: "Austria", sales: 75000 }, { country: "Belgium", sales: 40000 }, { country: "Poland", sales: 60000 }];
// Create seriesvar series = chart.series.push( am5percent.PieSeries.new(root, { name: "Series", valueField: "sales", categoryField: "country", legendLabelText: "[{fill}]{category}[/]", legendValueText: "[bold {fill}]{value}[/]" }));
series.data.setAll(data);series.labels.template.set("forceHidden", true);series.ticks.template.set("forceHidden", true);
// Add legendvar legend = chart.children.push( am5.Legend.new(root, { centerY: am5.percent(50), y: am5.percent(50), layout: root.verticalLayout }));
chart.onPrivate("width", function (width) { var availableSpace = Math.max(width - chart.height() - 100, 100); legend.labels.template.setAll({ width: availableSpace, maxWidth: availableSpace });});
legend.labels.template.setAll({ oversizedBehavior: "truncate"});
legend.valueLabels.template.setAll({ width: 50, 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: 300px;}{ "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": { "oversizedBehavior": "truncate", "width": 300, "maxWidth": 300 } } } }, "valueLabels": { "properties": { "template": { "settings": { "width": 50, "textAlign": "right" } } } } } } ], "refs": [ { "data-0": [ { "country": "France", "sales": 100000 }, { "country": "Spain", "sales": 160000 }, { "country": "United Kingdom", "sales": 80000 }, { "country": "Netherlands", "sales": 90000 }, { "country": "Portugal", "sales": 25000 }, { "country": "Germany", "sales": 70000 }, { "country": "Austria", "sales": 75000 }, { "country": "Belgium", "sales": 40000 }, { "country": "Poland", "sales": 60000 } ] }, { "series-0": { "type": "PieSeries", "settings": { "name": "Series", "valueField": "sales", "categoryField": "country", "legendLabelText": "[{fill}]{category}[/]", "legendValueText": "[bold {fill}]{value}[/]" }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "ticks": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}pie-chart-with-a-legend-with-dynamically-sized-labels