I have drawn a 3D stacked bar chart as follows.
$scope.DrawFunction = function()
{
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart3D);
// Add data
chart.data = [{
"country": "USA",
"year2017": 3.5,
"year2018": 4.2
}, {
"country": "UK",
"year2017": 1.7,
"year2018": 3.1
}];
// Create axes
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.title.text = "GDP growth rate";
valueAxis.renderer.labels.template.adapter.add("text", function(text) {
return text + "%";
});
// Create series
var series = chart.series.push(new am4charts.ColumnSeries3D());
series.dataFields.valueY = "year2017";
series.dataFields.categoryX = "country";
series.name = "Year 2017";
series.clustered = false;
series.columns.template.tooltipText = "[white]GDP grow in {category} (2017): [bold]{valueY}[/]";
series.columns.template.fillOpacity = 0.9;
var series2 = chart.series.push(new am4charts.ColumnSeries3D());
series2.dataFields.valueY = "year2018";
series2.dataFields.categoryX = "country";
series2.name = "Year 2018";
series2.clustered = false;
series2.columns.template.tooltipText = "GDP grow in {category} (2017): [bold]{valueY}[/]";
}
graph is generated correctly. I want to change the font color of all labels and the title into another color. I managed to change the font color of tootltip letters but couldn't find a way to change the font color of others.How can I do that ?
As I understand we can't change the font color of all the letters shown through out the graph unless we change the theme we have selected. So in my scenario since my background color is dark I wanted to change all the fonts within the graph to white. For that we need to import another theme rather than trying to change the font-color. you can download the dark theme from the following link
https://www.amcharts.com/lib/4/themes/dark.js
And import the library in your script as follows
<script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
Next along with animated.js theme call the dark theme as follows
am4core.useTheme(am4themes_dark);
am4core.useTheme(am4themes_animated);
Then all the fonts will become white in color and also the grid lines