Amcharts5 XY-Charts Change color of xlabel under columns
I have this XYChart that I have created with Amcharts5:
I want to change the colors of the xlabels, like this:
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 ::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_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: "Aug",
value1: 52
},{
xlabelXYChart: "Sep",
value1: 53
},{
xlabelXYChart: "Oct",
value1: 54
},{
xlabelXYChart: "Nov",
value1: 56
},{
xlabelXYChart: "Dec",
value1: 56
},{
xlabelXYChart: "Jan",
value1: 56
}];
// 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", // fill colors of bars
stroke: "#67b7dc" // stroke around bars
});
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.25,
sprite: am5.Label.new(rootA, {
centerX: am5.p50,
centerY: am5.p50,
text: "{value1}",
fill: am5.color(0xbbd6e3), // Values over graph bars
populateText: true
})
});
});
//legendA.data.push(series);
}
makeSeries("Assets", "value1");
}); // end am5.ready()
</script>
<div id="chartdiv_per_month" style="width: 100%;height: 160px;"></div>
<!-- //Chart code :: per_month -->
</body>
</html>
What parameter can help me change the color of the xlabel? I have tried looking at the manual for color, however it is not clear to me what parameter to change. I have also looked at AxisLabel and it says that "fill" is Text color. If this is correct, then where should I put fill in my code?
Solution
According to provided code, to implement required functionality of changing amcharts x-axis label color, the following code can be used:
xAxis.get("renderer").labels.template.setAll({
fill: '#ff0000'
});
The following code is updated 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 ::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_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: "Aug",
value1: 52
},{
xlabelXYChart: "Sep",
value1: 53
},{
xlabelXYChart: "Oct",
value1: 54
},{
xlabelXYChart: "Nov",
value1: 56
},{
xlabelXYChart: "Dec",
value1: 56
},{
xlabelXYChart: "Jan",
value1: 56
}];
// 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);
xAxis.get("renderer").labels.template.setAll({
fill: '#ff0000'
});
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", // fill colors of bars
stroke: "#67b7dc" // stroke around bars
});
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.25,
sprite: am5.Label.new(rootA, {
centerX: am5.p50,
centerY: am5.p50,
text: "{value1}",
fill: am5.color(0xbbd6e3), // Values over graph bars
populateText: true
})
});
});
//legendA.data.push(series);
}
makeSeries("Assets", "value1");
}); // end am5.ready()
</script>
<div id="chartdiv_per_month" style="width: 100%;height: 160px;"></div>
<!-- //Chart code :: per_month -->
</body>
</html>
- 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
- am5charts Cannot find HTMLElement with id 'x' React iframe chrome extension
- amCharts5 - Cannot read properties of undefined (reading 'root')
- amchart accessing values inside a structured data object, part 2
- How to change primaryButton color in amcharts5?