Search code examples
graphcolorsamcharts

how to change the text s color of values/categories in amcharts4?


I would like to change the color of the categories and the values of the text (see embedded picture), I'm not sure if it has anything to do with my css styling or with the amcharts api. I did manage however to change the label with label.fill = am4core.color("white");

.chartdiv {
  padding: 10px 10px;
  background: #1a2035; 
  font-size: 12px; 
  line-height: 11px;
  width: 610px;
  border-radius: 15px;
  border-style: solid;
  border-color: #1a2035;
  border-width: 1px;
  opacity: 0.75;

}

.chartdiv .ImpactHeader {      
  line-height: 14px;
  text-align: center;
  font-weight: 600;
  margin-bottom: 5px;
}

.chartdiv .ImpactLead {
  font-weight: 500;
}

.chartdiv .ImpactCount {
  text-align: right;
  font-weight: 600;
}

.chartdiv .ImpactEnd {
  font-weight: 500;
}

.chartdiv:empty {
  display: none;
} 

and the code:

    am4core.ready(function() {

    const units = 'km';
    
    // Themes begin
    am4core.useTheme(am4themes_animated);
    
    // Themes end

    // Create chart instance
    chart = am4core.create("chartdiv", am4charts.XYChart);

    // Add data
    chart['data'] = [{"country":"","volume":'','Name':''}];

    // Create axes

    var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = "country"; 
    categoryAxis.renderer.grid.template.location = 10;
    categoryAxis.renderer.minGridDistance = 20;

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    var series = chart.series.push(new am4charts.ColumnSeries());
    series.dataFields.valueY = "volume";
    series.dataFields.categoryX = "country";
    series.dataFields.countryNameX = "c_name";
    series.name = "volume";     
    
    series.columns.template.tooltipText = "{countryNameX}: [bold]{valueY}[/] "+units;
    series.columns.template.fillOpacity = .8;

    //label units on left side
    var label = chart.createChild(am4core.Label);
    label.text = units;
    label.fontSize = 16;
    label.align = "left";
    label.rotation=270;
    label.isMeasured = false;
    label.x = -10;
    label.y = 50;
    label.fill = am4core.color("white");
    
    var columnTemplate = series.columns.template;
    columnTemplate.strokeWidth = 1;
    columnTemplate.strokeOpacity = 1;       
    }); 

enter image description here


Solution

  • You need to set the color directly on the axis objects' label template as documented here:

    categoryAxis.renderer.labels.template.fill = am4core.color("#ffffff");
    valueAxis.renderer.labels.template.fill = am4core.color("#ffffff");