Category Axis

Category axis is the simplest of the axes. It does not do any calculations, or scales. All it does is list text-based items, or as charting community calls them - categories.

A category can be anything - a name, a year, a person. The Category axis allot equal space for each category and will display data items that go into that category.

For line series, each data item will be laid over each other. For multiple column series, each column will be arranged into clusters.

The examples in this article so far had a Category axis, with proverbial company department names as categories: Research & Development; Marketing; Distribution.

Binding categories to data

This brings us to important setting, which is needed and used by only Category axis.

A Category axis needs to know which particular field in data holds category names.

Just to remind, here's how our sample data looks like:

[{
  "category": "Research & Development",
  "value": 3.5
}, {
  "category": "Marketing",
  "value": 6
}, {
  "category": "Distribution",
  "value": 6.5
}]

While it may be obvious to us, that field "category" holds the category, it's not for the chart.

In most places in amCharts 4, where object needs to bind its properties to actual data, we use dataFields. It's an object which holds key / value pair, with key being some object's internal property, and value being the name of the field in data, to get data from.

Category axis has a data field, predictably called "category", so we can use it to bind Category axis to data:

let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "category";
{
  // ...
  "xAxes": [{
    "type": "CategoryAxis",
    "dataFields": {
      "category": "category"
    }
  }]
}

Now, our Category axis will know, that for each object in data, it needs to look for "category" property to get it's list of categories from.

Related content