Auto-wrapping legend labels
This demo shows how we can use auto-wrapping on legend labels.
/** * --------------------------------------- * 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 = [ { country: "France is a long name", sales: 100000 }, { country: "Spain is a long name", sales: 160000 }, { country: "United Kingdom is a long name", sales: 80000 }, { country: "Netherlands is a long long long long name", sales: 90000 }, { country: "Portugal is a long name", sales: 25000 }, { country: "Germany is a long name", sales: 70000 }];
// Create seriesvar series = chart.series.push( am5percent.PieSeries.new(root, { name: "Series", valueField: "sales", categoryField: "country" }));
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 }));
// If we want markers to be top-alignedlegend.markers.template.setAll({ //centerY: 0});
// Set max width and wrappinglegend.labels.template.setAll({ maxWidth: 150, //centerY: 0, // if we want labels to be top-aligned oversizedBehavior: "wrap"});
// Makes labels to be right-alignedlegend.valueLabels.template.setAll({ width: 70, textAlign: "right"});
legend.markerRectangles.template.setAll({ cornerRadiusTL: 10, cornerRadiusTR: 10, cornerRadiusBL: 10, cornerRadiusBR: 10});
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": { "maxWidth": 150, "oversizedBehavior": "wrap" } } } }, "valueLabels": { "properties": { "template": { "settings": { "width": 70, "textAlign": "right" } } } }, "markerRectangles": { "properties": { "template": { "settings": { "cornerRadiusTL": 10, "cornerRadiusTR": 10, "cornerRadiusBL": 10, "cornerRadiusBR": 10 } } } } } } ], "refs": [ { "data-0": [ { "country": "France is a long name", "sales": 100000 }, { "country": "Spain is a long name", "sales": 160000 }, { "country": "United Kingdom is a long name", "sales": 80000 }, { "country": "Netherlands is a long long long long name", "sales": 90000 }, { "country": "Portugal is a long name", "sales": 25000 }, { "country": "Germany is a long name", "sales": 70000 } ] }, { "series-0": { "type": "PieSeries", "settings": { "name": "Series", "valueField": "sales", "categoryField": "country" }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "ticks": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}auto-wrapping-legend-labels