diff --git a/docs/02-Scales.md b/docs/02-Scales.md index ae7758326f1..f95fe3a16fd 100644 --- a/docs/02-Scales.md +++ b/docs/02-Scales.md @@ -118,7 +118,7 @@ var chartInstance = new Chart(ctx, { ### Category Scale -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. +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, or set in the scale options. If `options.labels` is defined, this will take priority and be used. Otherwise, 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. #### Configuration Options @@ -126,6 +126,7 @@ The category scale has the following additional options that can be set. Name | Type | Default | Description --- | --- | --- | --- +labels | Array[String] | - | An array of labels to display. ticks.min | String | - | The minimum item to display. Must be a value in the `labels` array ticks.max | String | - | The maximum item to display. Must be a value in the `labels` array diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 3cee4ebf71f..4b6fae4c6ed 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -16,7 +16,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; }, // Implement this so that determineDataLimits: function() { @@ -54,9 +54,10 @@ module.exports = function(Chart) { var data = me.chart.data; var isHorizontal = me.isHorizontal(); - if (data.yLabels && !isHorizontal) { + if ((me.options.labels || data.yLabels) && !isHorizontal) { return me.getRightValue(data.datasets[datasetIndex].data[index]); } + return me.ticks[index - me.minIndex]; }, diff --git a/test/scale.category.tests.js b/test/scale.category.tests.js index c474dd9c7fd..d9fa3833708 100644 --- a/test/scale.category.tests.js +++ b/test/scale.category.tests.js @@ -132,6 +132,35 @@ describe('Category scale tests', function() { expect(scale.ticks).toEqual(mockData.yLabels); }); + it('Should generate ticks from the scale labels', function() { + var scaleID = 'myScale'; + + var mockData = { + datasets: [{ + yAxisID: scaleID, + data: [10, 5, 0, 25, 78] + }] + }; + + var config = Chart.helpers.clone(Chart.scaleService.getScaleDefaults('category')); + config.position = 'left'; // y axis + config.labels = ['tock1', 'tock2', 'tock3', 'tock4', 'tock5']; + + var Constructor = Chart.scaleService.getScaleConstructor('category'); + var scale = new Constructor({ + ctx: {}, + options: config, + chart: { + data: mockData + }, + id: scaleID + }); + + scale.determineDataLimits(); + scale.buildTicks(); + expect(scale.ticks).toEqual(config.labels); + }); + it ('should get the correct label for the index', function() { var scaleID = 'myScale';