Column labels as categories

This tutorial will explain how individual column labels (bullets) can be used as Category axis labels.

The task

During the course of this tutorial, we are going to give a fairly basic clustered column chart a makeup.

• 
• 

Let’s do this step by step.

Moving categories up

First task is to move those year categories up top.

To do so, we need to first put category labels inside the plot area as well as align them to top. While we’re at it, let’s also make them larger.

TypeScript

categoryAxis.renderer.inside = true;categoryAxis.renderer.labels.template.valign = "top";categoryAxis.renderer.labels.template.fontSize = 20;

JavaScript

categoryAxis.renderer.inside = true;categoryAxis.renderer.labels.template.valign = "top";categoryAxis.renderer.labels.template.fontSize = 20;

JSON

{  // …  "xAxes": [{    // …    "renderer": {      "inside": true,      "labels": {        "valign" : "top",        "fontSize": 20      }    }  }]}

Notice how putting labels inside plot area frees up the space they previously occupied.

Label bullets

Adding

To add labels to columns we use bullets, namely LabelBullet.

We’re going to add those to our Column series, have them rotated and displaying series name.

TypeScript

let bullet = series.bullets.push(new am4charts.LabelBullet);bullet.label.text = "{name}";bullet.label.rotation = 90;bullet.label.truncate = false;bullet.label.hideOversized = false;

JavaScript

var bullet = series.bullets.push(new am4charts.LabelBullet);bullet.label.text = "{name}";bullet.label.rotation = 90;bullet.label.truncate = false;bullet.label.hideOversized = false;

JSON

{  // …  "series": [{    // …    "bullets": [{      "type": "LabelBullet",      "label": {        "text": "{name}",        "rotation": 90,        "truncate": false,        "hideOversized": false      }    }]  }, {    // …  }, {    // …  }]}

Putting outside

We have our labels. Let’s just place them where we need them to be: starting at the bottom of each column.

For that we’ll need to set their location to bottom, as well as left-align them so they are not centered on the column base, but rather start there downwards.

TypeScript

bullet.label.horizontalCenter = "left";bullet.locationY = 1;bullet.dy = 10;

JavaScript

bullet.label.horizontalCenter = "left";bullet.locationY = 1;bullet.dy = 10;

JSON

{  // …  "series": [{    // …    "bullets": [{      "type": "LabelBullet",      "label": {        // ...        "horizontalCenter": "left"      },      "locationY": 1,      "dy": 10    }]  }, {    // …  }, {    // …  }]}

OK, now were did the labels go?

There are two things: now that they are outside and there is no space at the bottom of the chart, they do not fit.

Another thing is that whole plot area is masked, so any bullet “protruding” from it is effectively immediately.

We’ll need to fix that by adding some manual padding at the bottom of the chart as well as unmasking bullets.

TypeScript

chart.paddingBottom = 150;chart.maskBullets = false;

JavaScript

chart.paddingBottom = 150;chart.maskBullets = false;

JSON

{  // ...  "paddingBottom": 150,  "maskBullets": false}

Phew, there they are.

Spacing out categories

The columns from different categories look too bunched up. Let’s give them some breathing space by reducing width of the axis cell.

TypeScript

categoryAxis.renderer.cellStartLocation = 0.1;categoryAxis.renderer.cellEndLocation = 0.9;

JavaScript

categoryAxis.renderer.cellStartLocation = 0.1;categoryAxis.renderer.cellEndLocation = 0.9;

JSON

{  // …  "xAxes": [{    // …    "renderer": {      // ...      "cellStartLocation": 0.1,      "cellEndLocation": 0.9    }  }]}

Final touch

Now, let’s make our columns a bit fatter, ant we can call it a day:

TypeScript

series.columns.template.width = am4core.percent(95);

JavaScript

series.columns.template.width = am4core.percent(95);

JSON

{  // …  "series": [{    // …    "columns": {      "width": "95%"    }  }, {    // …  }, {    // …  }]}

All done.

Working example

Open in CodePen