Reputation: 741
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;
});
Upvotes: 0
Views: 729