Adaptive label placement based on available space
This demo uses both CSS media queries as well as Responsive theme to automatically resize the chart and reposition the labels, for small screens.
/** * --------------------------------------- * 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/
const responsive = am5themes_Responsive.new(root);
responsive.addRule({ name: "AxisRendererY", relevant: function (width, height) { return width < 600; }, settings: { cellStartLocation: 0, cellEndLocation: 0.2 }});
responsive.addRule({ name: "Label", tags: ["bullet"], relevant: function (width, height) { return width >= 600; }, settings: { fill: am5.color(0xffffff), centerY: am5.p50, oversizedBehavior: "truncate" }});
responsive.addRule({ name: "Label", tags: ["bullet"], relevant: function (width, height) { return width < 600; }, settings: { fill: am5.color(0x000000), centerY: am5.p100, oversizedBehavior: "wrap", dy: -10 }});
root.setThemes([am5themes_Animated.new(root), responsive]);
// 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 }));
var data = [ { category: "Cat 1", used: 25, total: 100, usedLabel: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", totalLabel: "25 GB used" }, { category: "Cat 2", used: 50, total: 100, usedLabel: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", totalLabel: "50 GB used" }];
// Create axes// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/var yRenderer = am5xy.AxisRendererY.new(root, {});yRenderer.grid.template.set("forceHidden", true);yRenderer.labels.template.set("forceHidden", true);var yAxis = chart.yAxes.push( am5xy.CategoryAxis.new(root, { categoryField: "category", renderer: yRenderer, tooltip: am5.Tooltip.new(root, {}) }));
yAxis.data.setAll(data);
var xRenderer = am5xy.AxisRendererX.new(root, {});xRenderer.grid.template.set("forceHidden", true);xRenderer.labels.template.set("forceHidden", true);var xAxis = chart.xAxes.push( am5xy.ValueAxis.new(root, { min: 0, max: 100, maxPrecision: 0, renderer: xRenderer }));
// Add series// https://www.amcharts.com/docs/v5/charts/xy-chart/series/function makeSeries(name, fieldName, color) { var series = chart.series.push( am5xy.ColumnSeries.new(root, { name: name, clustered: false, xAxis: xAxis, yAxis: yAxis, baseAxis: yAxis, valueXField: fieldName, categoryYField: "category", stroke: color, fill: color }) );
series.columns.template.setAll({ height: am5.percent(80), cornerRadiusTL: 4, cornerRadiusTR: 4, cornerRadiusBR: 4, cornerRadiusBL: 4 });
series.data.setAll(data);
// Make stuff animate on load // https://www.amcharts.com/docs/v5/concepts/animations/ series.appear();
if (fieldName == "used") { series.bullets.push(function () { var label = am5.Label.new(root, { themeTags: ["bullet"], text: "{usedLabel}", centerX: am5.p0, populateText: true });
label.adapters.add("maxWidth", function (maxWidth) { return chart.plotContainer.width() - 100; }); return am5.Bullet.new(root, { locationX: 0, sprite: label }); }); } else if (fieldName == "total") { series.bullets.push(function () { return am5.Bullet.new(root, { locationX: 1, sprite: am5.Label.new(root, { themeTags: ["bullet"], text: "{totalLabel}", fill: am5.color(0x000000), centerX: am5.p100, populateText: true, maxWidth: 100, oversizedBehavior: "truncate" }) }); }); }}
makeSeries("Total", "total", am5.color(0xe1e1e1));makeSeries("Used", "used", am5.color(0x002a58));
// Make stuff animate on load// https://www.amcharts.com/docs/v5/concepts/animations/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: 100px;}
@media screen and (max-width: 600px) { #chartdiv { height: 200px; }}
@media screen and (max-width: 400px) { #chartdiv { height: 400px; }}{ "type": "XYChart", "settings": { "panX": false, "panY": false }, "properties": { "series": [ "#series-0", "#series-1" ], "xAxes": [ "#axis-0" ], "yAxes": [ "#axis-1" ] }, "refs": [ { "data-0": [ { "category": "Cat 1", "used": 25, "total": 100, "usedLabel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", "totalLabel": "25 GB used" }, { "category": "Cat 2", "used": 50, "total": 100, "usedLabel": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor", "totalLabel": "50 GB used" } ] }, { "axis-0": { "type": "ValueAxis", "settings": { "min": 0, "max": 100, "maxPrecision": 0, "renderer": { "type": "AxisRendererX", "properties": { "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "grid": { "properties": { "template": { "settings": { "forceHidden": true } } } } } } } } }, { "axis-1": { "type": "CategoryAxis", "settings": { "categoryField": "category", "renderer": { "type": "AxisRendererY", "properties": { "labels": { "properties": { "template": { "settings": { "forceHidden": true } } } }, "grid": { "properties": { "template": { "settings": { "forceHidden": true } } } } } }, "tooltip": { "type": "Tooltip" } }, "properties": { "data": "#data-0" } } }, { "series-0": { "type": "ColumnSeries", "settings": { "name": "Total", "clustered": false, "xAxis": "#axis-0", "yAxis": "#axis-1", "baseAxis": "#axis-1", "valueXField": "total", "categoryYField": "category", "stroke": { "type": "Color", "value": "#e1e1e1" }, "fill": { "type": "Color", "value": "#e1e1e1" } }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 80 }, "cornerRadiusTL": 4, "cornerRadiusTR": 4, "cornerRadiusBR": 4, "cornerRadiusBL": 4 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 1, "sprite": { "type": "Label", "settings": { "themeTags": [ "bullet" ], "text": "{totalLabel}", "fill": { "type": "Color", "value": "#000000" }, "centerX": { "type": "Percent", "value": 100 }, "populateText": true, "maxWidth": 100, "oversizedBehavior": "truncate" } } } } ] } } }, { "series-1": { "type": "ColumnSeries", "settings": { "name": "Used", "clustered": false, "xAxis": "#axis-0", "yAxis": "#axis-1", "baseAxis": "#axis-1", "valueXField": "used", "categoryYField": "category", "stroke": { "type": "Color", "value": "#002a58" }, "fill": { "type": "Color", "value": "#002a58" } }, "properties": { "data": "#data-0", "columns": { "properties": { "template": { "settings": { "height": { "type": "Percent", "value": 80 }, "cornerRadiusTL": 4, "cornerRadiusTR": 4, "cornerRadiusBR": 4, "cornerRadiusBL": 4 } } } }, "bullets": [ { "type": "Bullet", "settings": { "locationX": 0, "sprite": { "type": "Label", "settings": { "themeTags": [ "bullet" ], "text": "{usedLabel}", "centerX": { "type": "Percent", "value": 0 }, "populateText": true } } } } ] } } } ]}adaptive-label-placement-based-on-available-space