Allow category labels definition at scale level (#4506)

diff --git a/docs/axes/cartesian/category.md b/docs/axes/cartesian/category.md
index 41bfd74d7ed3ae91b0d4236b8f113c2267be3ea1..38c306712bb685aecd6860ef7e7e7a9a58eddcea 100644 (file)
--- a/docs/axes/cartesian/category.md
+++ b/docs/axes/cartesian/category.md
@@ -1,6 +1,38 @@
 # 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
 
@@ -8,6 +40,7 @@ The category scale provides the following options for configuring tick marks. Th
 
 | 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)
 

diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js
index 6b1532c1714fb74d136c94f7d888c53676d5b035..d5c21e788e452734f7adfc1a0aa4d5bd50e82c14 100644 (file)
--- a/src/scales/scale.category.js
+++ b/src/scales/scale.category.js
@@ -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() {

diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js
index d63fc59bf0e12b15b6d288a939e8c28fbae49a44..31c0a4e6fee9ea027a270279c384b2e2992086e2 100644 (file)
--- a/test/specs/scale.category.tests.js
+++ b/test/specs/scale.category.tests.js
@@ -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 = {
@@ -136,6 +136,28 @@ describe('Category scale tests', function() {
                expect(scale.ticks).toEqual(mockData.yLabels);
        });
 
+       it('Should generate ticks from the axis labels', function() {
+               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';