From 014952b33e2aff01e5ed547ff55dea717b6d78a0 Mon Sep 17 00:00:00 2001 From: Sean Date: Wed, 21 Dec 2016 12:23:39 -0800 Subject: [PATCH 1/5] Allow scale labels to override category labels, if set Fixes #3275 --- src/scales/scale.category.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 3cee4ebf71f..06899d738f4 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -16,7 +16,8 @@ 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() { From 0b41887d3b4da8eee1ddf8464a43b4ab5892de69 Mon Sep 17 00:00:00 2001 From: Sean Date: Wed, 21 Dec 2016 12:33:32 -0800 Subject: [PATCH 2/5] Update docs to reflect new Categories config option Not sure how to make it more clear... --- docs/02-Scales.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 From 93ef6cf64101609f8df6074649d3c36f852a5c47 Mon Sep 17 00:00:00 2001 From: Sean Date: Wed, 21 Dec 2016 12:35:40 -0800 Subject: [PATCH 3/5] Remove excess line break --- src/scales/scale.category.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 06899d738f4..66c894d6719 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -16,7 +16,6 @@ module.exports = function(Chart) { */ getLabels: function() { var data = this.chart.data; - return this.options.labels || (this.isHorizontal() ? data.xLabels : data.yLabels) || data.labels; }, // Implement this so that From 91b3c6a7d8f24cfb4f6825b5d36945d780f66faf Mon Sep 17 00:00:00 2001 From: Sean Date: Wed, 21 Dec 2016 14:30:36 -0800 Subject: [PATCH 4/5] Add a test to ensure labels used by the category scale are coming from the correct place --- test/scale.category.tests.js | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) 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'; From 4f74c8c50da066f601593bce1047cd804e2622d8 Mon Sep 17 00:00:00 2001 From: Sean Date: Thu, 22 Dec 2016 09:20:43 -0800 Subject: [PATCH 5/5] If the category axis is vertical, show the value instead of the category label. Keeps data.yLabels check in case of previous edgecases --- src/scales/scale.category.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/scales/scale.category.js b/src/scales/scale.category.js index 66c894d6719..4b6fae4c6ed 100644 --- a/src/scales/scale.category.js +++ b/src/scales/scale.category.js @@ -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]; },