Amcharts5 XY-Charts show values over columns and xlabel under the columns
I have this XY chart:
I want to show the values over the columns, and the xlabel under the column:
This is my code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Graph</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
<!-- Amcharts -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- //Amcharts -->
<!-- Chart code :: graph_assets_per_month -->
<script>
am5.ready(function() {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var rootA = am5.Root.new("chartdiv_assets_per_month");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
rootA.setThemes([
am5themes_Animated.new(rootA)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
panX: false,
panY: false,
layout: rootA.verticalLayout
}));
// Set data
var data = [{
xlabelXYChart: "Mar",
value1: 5850
},{
xlabelXYChart: "Apr",
value1: 5650
},{
xlabelXYChart: "May",
value1: 5950
},{
xlabelXYChart: "Jun",
value1: 5800
},{
xlabelXYChart: "Jul",
value1: 5917
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, {
categoryField: "xlabelXYChart",
renderer: am5xy.AxisRendererX.new(rootA, {
cellStartLocation: 0.1,
cellEndLocation: 0.9
}),
tooltip: am5.Tooltip.new(rootA, {}),
stroke: am5.color(0xFFFFFF),
visible: false
}));
xAxis.data.setAll(data);
var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
renderer: am5xy.AxisRendererY.new(rootA, {}),
stroke: am5.color(0xFFFFFF),
visible: false
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName) {
var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "xlabelXYChart"
}));
series.columns.template.setAll({
tooltipText: "{categoryX} {name}: {valueY}",
width: am5.percent(90),
tooltipY: 0,
fill: "#2b4356",
stroke: "#67b7dc"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(rootA, {
locationY: 0,
sprite: am5.Label.new(rootA, {
text: "{valueY}",
fill: rootA.interfaceColors.get("alternativeText"),
centerY: 0,
centerX: am5.p50,
populateText: true
})
});
});
legendA.data.push(series);
}
makeSeries("Assets", "value1");
}); // end am5.ready()
</script>
<div id="chartdiv_assets_per_month" style="width: 100%;min-height: 150px;"></div>
<!-- //Chart code :: assets_per_month -->
</body>
</html>
How can I get values to be printed over the columns and xlabel under the columns using AmCharts 5? The documentation https://www.amcharts.com/docs/v5/charts/xy-chart/series/column-series/ does not contain an example that fits my need.
Solution
Here is the modified code
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Graph</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
</head>
<body>
<!-- Amcharts -->
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<!-- //Amcharts -->
<!-- Chart code :: graph_assets_per_month -->
<script>
am5.ready(function () {
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var rootA = am5.Root.new("chartdiv_assets_per_month");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
rootA.setThemes([
am5themes_Animated.new(rootA)
]);
// Create chart
// https://www.amcharts.com/docs/v5/charts/xy-chart/
var chartA = rootA.container.children.push(am5xy.XYChart.new(rootA, {
panX: false,
panY: false,
layout: rootA.verticalLayout
}));
// Set data
var data = [{
xlabelXYChart: "Mar",
value1: 5850
}, {
xlabelXYChart: "Apr",
value1: 5650
}, {
xlabelXYChart: "May",
value1: 5950
}, {
xlabelXYChart: "Jun",
value1: 5800
}, {
xlabelXYChart: "Jul",
value1: 5917
}];
// Create axes
// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
var xAxis = chartA.xAxes.push(am5xy.CategoryAxis.new(rootA, {
categoryField: "xlabelXYChart",
renderer: am5xy.AxisRendererX.new(rootA, {
minGridDistance: 70,
minorGridEnabled: true
}),
tooltip: am5.Tooltip.new(rootA, {}),
stroke: am5.color(0xFFFFFF),
visible: true
}));
xAxis.data.setAll(data);
var yAxis = chartA.yAxes.push(am5xy.ValueAxis.new(rootA, {
renderer: am5xy.AxisRendererY.new(rootA, {}),
stroke: am5.color(0xFFFFFF),
visible: false
}));
// Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
function makeSeries(name, fieldName) {
var series = chartA.series.push(am5xy.ColumnSeries.new(rootA, {
name: name,
xAxis: xAxis,
yAxis: yAxis,
valueYField: fieldName,
categoryXField: "xlabelXYChart"
}));
series.columns.template.setAll({
tooltipText: "{categoryX} {name}: {valueY}",
width: am5.percent(90),
tooltipY: 0,
fill: "#2b4356",
stroke: "#67b7dc"
});
series.data.setAll(data);
// Make stuff animate on load
// https://www.amcharts.com/docs/v5/concepts/animations/
series.appear();
series.bullets.push(function () {
return am5.Bullet.new(rootA, {
locationX: 0.5,
locationY: 1.2,
sprite: am5.Label.new(rootA, {
centerX: am5.p50,
centerY: am5.p50,
text: "{value1}",
fill: am5.color(0x000),
populateText: true
})
});
});
//legendA.data.push(series);
}
makeSeries("Assets", "value1");
}); // end am5.ready()
</script>
<div id="chartdiv_assets_per_month" style="width: 100%;min-height: 150px;"></div>
<!-- //Chart code :: assets_per_month -->
</body>
</html>If you want to adjust the column label height you can do that by changing locationX: 0.5, locationY: 1.2, need more help feel free to ask
- How to set a background dynamically based on dataItem?
- How to get coordinates of a point when hovering over a chart in AmCharts 5?
- how to hide value axes label am5charts?
- How to delete an amCharts Chart
- amcharts adding legend with the dynamic text
- Amcharts v3 multiple inline JSON data for one chart
- How to load libraries before am4core is called in amCharts?
- Serial Chart in amCharts showing different behaviour
- How to change the colour of the outer circle element of a bullet in the force-directed network diagram
- How to scrape Amcharts interactive data using R
- amcharts Overlay legend on a chart
- Change Cursoroverstyle for Bullets in Amcharts5 after clicking on button
- Amcharts5 grouping strategy
- Amcharts5 - Error You cannot have multiple Roots on the same DOM node - React 17
- How to know which category is clicked on a stacked bar chart in amcharts?
- AmCharts DateAxis not using specified intervals
- Amcharts5 XY-Charts Change color of xlabel under columns
- How to position AmCharts 5 X-Axis label to the right?
- Amcharts5 XY-Charts show values over columns and xlabel under the columns
- AMcharts 5 Add Data to Tooltip
- IcCube Reporting V8 - possible to use Gantt chart?
- How can I trigger a mouse click and drag event in amCharts v5?
- Amcharts 5 Chart Doesn't Work in MUI Dialog: Could not find HTML element with id
- Honeycomb tile map in R
- Amcharts sankey diagram: how to see ALL 'following' path on hovering a link
- AmCharts: Clustered bar chart with sub-categories
- Adding currency prefix to AmCharts
- How to change the tool tip and label color on amcharts 4 legend custom description
- How do I make two series have different colors in amCharts
- Clickable columns to redirect to another page amcharts stacked bar chart