Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow category label definition at axis level #4506

Merged
merged 5 commits into from Jul 19, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
35 changes: 34 additions & 1 deletion docs/axes/cartesian/category.md
@@ -1,13 +1,46 @@
# Category Cartesian Axis

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.
If global configuration is used, 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 defines the x axis as `type: category` if not defined otherwise. For more fine-grained control of category labels it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.

## Category Axis Definition

Globally:

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

```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).

| Name | Type | Default | Description
| -----| ---- | --------| -----------
| labels | Array[String] | - | An array of labels to display.
| `min` | `String` | | The minimum item to display. [more...](#min-max-configuration)
| `max` | `String` | | The maximum item to display. [more...](#min-max-configuration)

Expand Down
2 changes: 1 addition & 1 deletion src/scales/scale.category.js
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
24 changes: 23 additions & 1 deletion test/specs/scale.category.tests.js
Expand Up @@ -108,7 +108,7 @@ describe('Category scale tests', function() {
expect(scale.ticks).toEqual(mockData.xLabels);
});

it('Should generate ticks from the data xLabels', function() {
it('Should generate ticks from the data yLabels', function() {
var scaleID = 'myScale';

var mockData = {
Expand Down Expand Up @@ -136,6 +136,28 @@ describe('Category scale tests', function() {
expect(scale.ticks).toEqual(mockData.yLabels);
});

it('Should generate ticks from the axis labels', function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Mock data and manual construction of the scale are not the most trustful way to setup unit tests. I think we should instantiate a real chart if that's possible (which should be almost always the case).

var chart = window.acquireChart({
    type: 'line',
    data: {
        data: [10, 5, 0, 25, 78]
    },
    options: {
        scales: {
            xAxes: [{
                id: 'x',
                type: 'category',
                labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5']
            }]
        }
    }
});

expect(chart.scales.x.ticks).toEqual(['tick1', 'tick2', 'tick3', 'tick4', 'tick5']);

It's even less code and more robust since you don't manually manipulate the scale to obtain the values to check.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed

var labels = ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'];
var chart = window.acquireChart({
type: 'line',
data: {
data: [10, 5, 0, 25, 78]
},
options: {
scales: {
xAxes: [{
id: 'x',
type: 'category',
labels: labels
}]
}
}
});

var scale = chart.scales.x;
expect(scale.ticks).toEqual(labels);
});

it ('should get the correct label for the index', function() {
var scaleID = 'myScale';

Expand Down