Skip to content

Commit

Permalink
Allow category label definition at axis level
Browse files Browse the repository at this point in the history
  • Loading branch information
andig committed Jul 15, 2017
1 parent b03ab1c commit 785c016
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 1 deletion.
32 changes: 32 additions & 0 deletions docs/axes/cartesian/category.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,38 @@

The category scale will be familiar to those who have used v1.0. Labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.

Specifying any of the settings above implicitly defines the x axis as `type: category`if not defined otherwise. For more fine-grained control of category labels, it is (as of 2.7) also possible to add `labels` as part of the explicit category axis definition.

## Category Axis Definition

Implicit:

```javascript
let chart = new Chart(ctx, {
type: ...
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: ...
},
});
```
Explicit:

```javascript
let chart = new Chart(ctx, {
type: ...
data: ...
options: {
scales: {
xAxes: [{
type: 'category',
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
}]
}
}
});
```

## Tick Configuration Options

The category scale provides the following options for configuring tick marks. They are nested in the `ticks` sub object. These options extend the [common tick configuration](README.md#tick-configuration).
Expand Down
2 changes: 1 addition & 1 deletion src/scales/scale.category.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ module.exports = function(Chart) {
*/
getLabels: function() {
var data = this.chart.data;
return (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels;
return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels;
},

determineDataLimits: function() {
Expand Down

0 comments on commit 785c016

Please sign in to comment.