Automatically adjust width of a PieChart legend
This demo shows how we can watch for chart size change to automatically adjust legend width so it takes up all the empty space.
/** * --------------------------------------- * 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/percent-charts/pie-chart/var chart = root.container.children.push( am5percent.PieChart.new(root, { endAngle: 270, layout: root.horizontalLayout }));
// Create series// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Seriesvar series = chart.series.push( am5percent.PieSeries.new(root, { valueField: "value", categoryField: "category", endAngle: 270 }));
series.labels.template.set("forceHidden", true);series.ticks.template.set("forceHidden", true);
// Set data// https://www.amcharts.com/docs/v5/charts/percent-charts/pie-chart/#Setting_dataseries.data.setAll([ { 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 }, { category: "Another 1", value: 5 }, { category: "Another 2", value: 5 }, { category: "Another 3", value: 5 }, { category: "Another 4", value: 5 }, { category: "Another 5", value: 5 }, { category: "Another 6", value: 5 }, { category: "Another 7", value: 5 }, { category: "Another 8", value: 5 }, { category: "Another 9", value: 5 }, { category: "Another 10", value: 5 }, { category: "Another 11", value: 5 }, { category: "Another 12", value: 5 }, { category: "Another 13", value: 5 }, { category: "Another 14", value: 5 }, { category: "Another 15", value: 5 }]);
series.appear(1000, 500);
// Add legendvar legend = chart.children.push( am5.Legend.new(root, { centerX: am5.p100, x: am5.p100, layout: root.gridLayout }));
chart.onPrivate("width", function (height) { legend.set("width", chart.width() - chart.height());});legend.valueLabels.template.set("forceHidden", true);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": { "endAngle": 270, "layout": { "type": "HorizontalLayout" } }, "properties": { "series": [ "#series-0" ] }, "children": [ { "type": "Legend", "settings": { "centerX": { "type": "Percent", "value": 100 }, "x": { "type": "Percent", "value": 100 }, "layout": { "type": "GridLayout" }, "width": 400 }, "properties": { "data": "#series-0.dataItems", "valueLabels": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } ], "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 }, { "category": "Another 1", "value": 5 }, { "category": "Another 2", "value": 5 }, { "category": "Another 3", "value": 5 }, { "category": "Another 4", "value": 5 }, { "category": "Another 5", "value": 5 }, { "category": "Another 6", "value": 5 }, { "category": "Another 7", "value": 5 }, { "category": "Another 8", "value": 5 }, { "category": "Another 9", "value": 5 }, { "category": "Another 10", "value": 5 }, { "category": "Another 11", "value": 5 }, { "category": "Another 12", "value": 5 }, { "category": "Another 13", "value": 5 }, { "category": "Another 14", "value": 5 }, { "category": "Another 15", "value": 5 } ] }, { "series-0": { "type": "PieSeries", "settings": { "valueField": "value", "categoryField": "category", "endAngle": 270 }, "properties": { "data": "#data-0", "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "ticks": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } ]}automatically-adjusting-piechart-legend-width