amCharts 5: how to hide the last ValueAxis label to avoid truncating it?
amCharts 4 offers the ability to hide the last label of an axis using axis.renderer.maxLabelPosition = 0.95;.
How to achieve the same result in amCharts 5?
The amCharts 5 demo at https://www.amcharts.com/demos/sorted-bar-chart/ illustrates the problem. The last digits of the last label on the x axis are hidden which is misleading.
amCharts 5 uses minPosition and maxPosition to achieve the same results as v4's minLabelPosition and maxLabelPosition You'll need to set it on the label template as documented here:
let xRenderer = xAxis.get("renderer");
xRenderer.labels.template.setAll({
minPosition: 0.1,
maxPosition: 0.9
});
Demo:
var root = am5.Root.new("chartdiv");
var chart = root.container.children.push(am5xy.XYChart.new(root, {
panX: false,
panY: false,
wheelX: "none",
wheelY: "none"
}));
var yRenderer = am5xy.AxisRendererY.new(root, {
minGridDistance: 30
});
var yAxis = chart.yAxes.push(am5xy.CategoryAxis.new(root, {
maxDeviation: 0,
categoryField: "network",
renderer: yRenderer,
tooltip: am5.Tooltip.new(root, { themeTags: ["axis"] })
}));
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: 0,
extraMax:0.1,
renderer: am5xy.AxisRendererX.new(root, {})
}));
let xRenderer = xAxis.get("renderer");
xRenderer.labels.template.setAll({
minPosition: 0.1,
maxPosition: 0.9
});
var series = chart.series.push(am5xy.ColumnSeries.new(root, {
name: "Series 1",
xAxis: xAxis,
yAxis: yAxis,
valueXField: "value",
categoryYField: "network",
tooltip: am5.Tooltip.new(root, {
pointerOrientation: "left",
labelText: "{valueX}"
})
}));
// Set data
var data = [
{
"network": "Facebook",
"value": 2255250000
},
{
"network": "Google+",
"value": 430000000
},
{
"network": "Instagram",
"value": 1000000000
},
{
"network": "Pinterest",
"value": 246500000
},
{
"network": "Reddit",
"value": 355000000
},
{
"network": "TikTok",
"value": 500000000
},
{
"network": "Tumblr",
"value": 624000000
},
{
"network": "Twitter",
"value": 329500000
},
{
"network": "WeChat",
"value": 1000000000
},
{
"network": "Weibo",
"value": 431000000
},
{
"network": "Whatsapp",
"value": 1433333333
},
{
"network": "YouTube",
"value": 1900000000
}
];
yAxis.data.setAll(data);
series.data.setAll(data);
chart.set("cursor", am5xy.XYCursor.new(root, {
behavior: "none",
xAxis: xAxis,
yAxis: yAxis
}));#chartdiv {
width: 100%;
height: 500px;
}<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>