diff --git a/docs/charts/bar.md b/docs/charts/bar.md index 4acccb3f07f..6cfb04b0285 100644 --- a/docs/charts/bar.md +++ b/docs/charts/bar.md @@ -69,7 +69,6 @@ the color of the bars is generally set this way. | Name | Type | [Scriptable](../general/options.md#scriptable-options) | [Indexable](../general/options.md#indexable-options) | Default | ---- | ---- | :----: | :----: | ---- | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` -| [`baseAxis`](#general) | `string` | `'x'` | The base axis for the dataset. Use `'y'` for horizontal bar. | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'` | [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'` | [`borderWidth`](#borderwidth) | number|object | Yes | Yes | `0` @@ -78,6 +77,7 @@ the color of the bars is generally set this way. | [`hoverBackgroundColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined` | [`hoverBorderColor`](#interactions) | [`Color`](../general/colors.md) | - | Yes | `undefined` | [`hoverBorderWidth`](#interactions) | `number` | - | Yes | `1` +| [`indexAxis`](#general) | `string` | `'x'` | The base axis for the dataset. Use `'y'` for horizontal bar. | [`label`](#general) | `string` | - | - | `''` | [`order`](#general) | `number` | - | - | `0` | [`xAxisID`](#general) | `string` | - | - | first x axis @@ -87,8 +87,8 @@ the color of the bars is generally set this way. | Name | Description | ---- | ---- -| `baseAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars. | `clip` | How to clip relative to chartArea. Positive value allows overflow, negative value clips that many pixels inside chartArea. `0` = clip at chartArea. Clipping can also be configured per side: `clip: {left: 5, top: false, right: -2, bottom: 0}` +| `indexAxis` | The base axis of the dataset. `'x'` for vertical bars and `'y'` for horizontal bars. | `label` | The label for the dataset which appears in the legend and tooltips. | `order` | The drawing order of dataset. Also affects order for stacking, tooltip and legend. | `xAxisID` | The ID of the x axis to plot this dataset on. diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md index ce0fac74533..e6064cc390c 100644 --- a/docs/getting-started/v3-migration.md +++ b/docs/getting-started/v3-migration.md @@ -19,7 +19,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released ## Chart types -* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`baseAxis`](../charts/bar.md#general) option +* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`indexAxis`](../charts/bar.md#general) option ### Ticks diff --git a/samples/charts/bar/horizontal.html b/samples/charts/bar/horizontal.html index 59773b959a2..ad435e305a0 100644 --- a/samples/charts/bar/horizontal.html +++ b/samples/charts/bar/horizontal.html @@ -65,11 +65,7 @@ type: 'bar', data: horizontalBarChartData, options: { - bar: { - datasets: { - baseAxis: 'y' - } - }, + indexAxis: 'y', // Elements options apply to all of the options unless overridden in a dataset // In this case, we are setting the border of each horizontal bar to be 2px wide elements: { diff --git a/src/controllers/controller.bar.js b/src/controllers/controller.bar.js index f564c181827..94fc53ca7b8 100644 --- a/src/controllers/controller.bar.js +++ b/src/controllers/controller.bar.js @@ -11,7 +11,6 @@ defaults.set('bar', { }, datasets: { - baseAxis: 'x', categoryPercentage: 0.8, barPercentage: 0.9, animation: { @@ -23,14 +22,14 @@ defaults.set('bar', { }, scales: { - i: { + _index_: { type: 'category', offset: true, gridLines: { offsetGridLines: true } }, - v: { + _value_: { type: 'linear', beginAtZero: true, } diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index bb567060b32..e3dedbe55dc 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -15,10 +15,10 @@ defaults.set('line', { }, scales: { - x: { + _index_: { type: 'category', }, - y: { + _value_: { type: 'linear', }, } diff --git a/src/controllers/controller.polarArea.js b/src/controllers/controller.polarArea.js index e23a05957ba..bdd04066972 100644 --- a/src/controllers/controller.polarArea.js +++ b/src/controllers/controller.polarArea.js @@ -14,7 +14,7 @@ defaults.set('polarArea', { animateScale: true }, datasets: { - baseAxis: 'r' + indexAxis: 'r' }, scales: { r: { diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index a3cf682c47a..3993a1147f0 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -12,7 +12,7 @@ defaults.set('radar', { } }, datasets: { - baseAxis: 'r' + indexAxis: 'r' }, elements: { line: { diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 3bec856a116..2a82216be6c 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -17,28 +17,33 @@ import {version} from '../../package.json'; const valueOrDefault = helpers.valueOrDefault; -function getBaseAxis(type, options) { +function getIndexAxis(type, options) { const typeDefaults = defaults[type] || {}; - const typeDatasetDefaults = typeDefaults.datasets || {}; + const datasetDefaults = typeDefaults.datasets || {}; const typeOptions = options[type] || {}; const datasetOptions = typeOptions.datasets || {}; - return datasetOptions.baseAxis || typeDatasetDefaults.baseAxis || 'x'; + return datasetOptions.indexAxis || options.indexAxis || datasetDefaults.indexAxis || 'x'; } -function getAxisFromDefaultScaleID(id, baseAxis) { - let ret = id; - if (id === 'i') { - ret = baseAxis; - } else if (id === 'v') { - ret = baseAxis === 'x' ? 'y' : 'x'; +function getAxisFromDefaultScaleID(id, indexAxis) { + let axis = id; + if (id === '_index_') { + axis = indexAxis; + } else if (id === '_value_') { + axis = indexAxis === 'x' ? 'y' : 'x'; } - return ret; + return axis; +} + +function getDefaultScaleIDFromAxis(axis, indexAxis) { + return axis === indexAxis ? '_index_' : '_value_'; } function mergeScaleConfig(config, options) { options = options || {}; const chartDefaults = defaults[config.type] || {scales: {}}; const configScales = options.scales || {}; + const chartIndexAxis = getIndexAxis(config.type, options); const firstIDs = {}; const scales = {}; @@ -46,8 +51,9 @@ function mergeScaleConfig(config, options) { Object.keys(configScales).forEach(id => { const scaleConf = configScales[id]; const axis = scaleConf.axis || id[0]; + const defaultId = getDefaultScaleIDFromAxis(axis, chartIndexAxis); firstIDs[axis] = firstIDs[axis] || id; - scales[id] = helpers.mergeIf({axis}, [scaleConf, chartDefaults.scales[axis]]); + scales[id] = helpers.mergeIf({axis}, [scaleConf, chartDefaults.scales[axis], chartDefaults.scales[defaultId]]); }); // Backward compatibility @@ -59,11 +65,11 @@ function mergeScaleConfig(config, options) { // Then merge dataset defaults to scale configs config.data.datasets.forEach(dataset => { const type = dataset.type || config.type; - const baseAxis = dataset.baseAxis || getBaseAxis(type, options); + const indexAxis = dataset.indexAxis || getIndexAxis(type, options); const datasetDefaults = defaults[type] || {}; const defaultScaleOptions = datasetDefaults.scales || {}; Object.keys(defaultScaleOptions).forEach(defaultID => { - const axis = getAxisFromDefaultScaleID(defaultID, baseAxis); + const axis = getAxisFromDefaultScaleID(defaultID, indexAxis); const id = dataset[axis + 'AxisID'] || firstIDs[axis] || axis; scales[id] = scales[id] || {}; helpers.mergeIf(scales[id], [{axis}, configScales[id], defaultScaleOptions[defaultID]]); @@ -515,7 +521,7 @@ export default class Chart { meta = me.getDatasetMeta(i); } meta.type = type; - meta.baseAxis = dataset.baseAxis || getBaseAxis(type, me.options); + meta.indexAxis = dataset.indexAxis || getIndexAxis(type, me.options); meta.order = dataset.order || 0; me._updateMetasetIndex(meta, i); meta.label = '' + dataset.label; diff --git a/src/core/core.datasetController.js b/src/core/core.datasetController.js index b3c3f8d4946..37911d001ce 100644 --- a/src/core/core.datasetController.js +++ b/src/core/core.datasetController.js @@ -264,9 +264,9 @@ export default class DatasetController { const xid = meta.xAxisID = dataset.xAxisID || getFirstScaleId(chart, 'x'); const yid = meta.yAxisID = dataset.yAxisID || getFirstScaleId(chart, 'y'); const rid = meta.rAxisID = dataset.rAxisID || getFirstScaleId(chart, 'r'); - const baseAxis = meta.baseAxis; - const iid = meta.iAxisID = baseAxis === 'x' ? xid : baseAxis === 'r' ? rid : yid; - const vid = meta.vAxisID = baseAxis === 'x' ? yid : baseAxis === 'r' ? rid : xid; + const indexAxis = meta.indexAxis; + const iid = meta.iAxisID = indexAxis === 'x' ? xid : indexAxis === 'r' ? rid : yid; + const vid = meta.vAxisID = indexAxis === 'x' ? yid : indexAxis === 'r' ? rid : xid; meta.xScale = me.getScaleForId(xid); meta.yScale = me.getScaleForId(yid); meta.rScale = me.getScaleForId(rid); diff --git a/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js b/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js index 63ac6f1eb19..0a258ab96ff 100644 --- a/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js +++ b/test/fixtures/controller.bar/floatBar/data-as-objects-horizontal.js @@ -17,11 +17,7 @@ module.exports = { options: { legend: false, title: false, - bar: { - datasets: { - baseAxis: 'y' - } - }, + indexAxis: 'y', scales: { x: {display: false, min: 0}, y: {display: false, stacked: true} diff --git a/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json b/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json index 35c03660bb0..7feceb2c168 100644 --- a/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json +++ b/test/fixtures/controller.bar/floatBar/float-bar-horizontal.json @@ -19,7 +19,7 @@ "legend": false, "bar": { "datasets": { - "baseAxis": "y" + "indexAxis": "y" } }, "scales": { diff --git a/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json b/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json index 4ce8205bb45..deddcd18b53 100644 --- a/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json +++ b/test/fixtures/controller.bar/floatBar/float-bar-stacked-horizontal.json @@ -19,7 +19,7 @@ "legend": false, "bar": { "datasets": { - "baseAxis": "y" + "indexAxis": "y" } }, "scales": { diff --git a/test/fixtures/controller.bar/horizontal-borders.js b/test/fixtures/controller.bar/horizontal-borders.js index 1adde040470..b1e9b0d7a87 100644 --- a/test/fixtures/controller.bar/horizontal-borders.js +++ b/test/fixtures/controller.bar/horizontal-borders.js @@ -20,11 +20,7 @@ module.exports = { options: { legend: false, title: false, - bar: { - datasets: { - baseAxis: 'y' - } - }, + indexAxis: 'y', elements: { rectangle: { backgroundColor: '#AAAAAA80', diff --git a/test/fixtures/core.scale/label-offset-vertical-axes.json b/test/fixtures/core.scale/label-offset-vertical-axes.json index 6606668202c..8f3a8626236 100644 --- a/test/fixtures/core.scale/label-offset-vertical-axes.json +++ b/test/fixtures/core.scale/label-offset-vertical-axes.json @@ -12,7 +12,7 @@ "title": false, "bar": { "datasets": { - "baseAxis": "y" + "indexAxis": "y" } }, "scales": { diff --git a/test/fixtures/core.scale/tick-drawing.json b/test/fixtures/core.scale/tick-drawing.json index 69c05abcbc7..ed90fcf86db 100644 --- a/test/fixtures/core.scale/tick-drawing.json +++ b/test/fixtures/core.scale/tick-drawing.json @@ -10,7 +10,7 @@ "title": false, "bar": { "datasets": { - "baseAxis": "y" + "indexAxis": "y" } }, "scales": { diff --git a/test/fixtures/scale.category/ticks-from-data.js b/test/fixtures/scale.category/ticks-from-data.js index a75869f3fc6..ef63f5a4340 100644 --- a/test/fixtures/scale.category/ticks-from-data.js +++ b/test/fixtures/scale.category/ticks-from-data.js @@ -4,12 +4,12 @@ module.exports = { type: 'bar', data: { datasets: [{ - baseAxis: 'y', data: [10, 5, 0, 25, 78] }], labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5'] }, options: { + indexAxis: 'y', legend: false, title: false, elements: { diff --git a/test/specs/controller.bar.tests.js b/test/specs/controller.bar.tests.js index 5e7547ab569..3f6e3e183ef 100644 --- a/test/specs/controller.bar.tests.js +++ b/test/specs/controller.bar.tests.js @@ -1388,11 +1388,7 @@ describe('Chart.controllers.bar', function() { type: 'bar', data: this.data, options: { - bar: { - datasets: { - baseAxis: 'y' - } - }, + indexAxis: 'y', scales: { y: { min: 'March', @@ -1408,11 +1404,7 @@ describe('Chart.controllers.bar', function() { type: 'bar', data: this.data, options: { - bar: { - datasets: { - baseAxis: 'y' - } - }, + indexAxis: 'y', scales: { x: { stacked: true @@ -1527,7 +1519,7 @@ describe('Chart.controllers.bar', function() { type: 'bar', data: { datasets: [{ - baseAxis: 'y', + indexAxis: 'y', minBarLength: minBarLength, data: [0.05, -0.05, 10, 15, 20, 25, 30, 35] }] diff --git a/test/specs/core.interaction.tests.js b/test/specs/core.interaction.tests.js index 7e75bf2b497..0f3504fb201 100644 --- a/test/specs/core.interaction.tests.js +++ b/test/specs/core.interaction.tests.js @@ -156,11 +156,7 @@ describe('Core.Interaction', function() { type: 'bar', data: data, options: { - bar: { - datasets: { - baseAxis: 'y' - } - } + indexAxis: 'y', } }); @@ -281,11 +277,7 @@ describe('Core.Interaction', function() { type: 'bar', data: data, options: { - bar: { - datasets: { - baseAxis: 'y' - } - } + indexAxis: 'y', } }); diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js index 6b2b2a6f246..db9c7361591 100644 --- a/test/specs/scale.category.tests.js +++ b/test/specs/scale.category.tests.js @@ -469,7 +469,6 @@ describe('Category scale tests', function() { type: 'bar', data: { datasets: [{ - baseAxis: 'y', data: [ {x: 10, y: 0}, {x: 5, y: 1}, @@ -481,6 +480,7 @@ describe('Category scale tests', function() { labels: [0, 1, 2, 3] }, options: { + indexAxis: 'y', scales: { x: { type: 'linear', diff --git a/test/specs/scale.linear.tests.js b/test/specs/scale.linear.tests.js index f47edb93d00..b2ad1ad1b1e 100644 --- a/test/specs/scale.linear.tests.js +++ b/test/specs/scale.linear.tests.js @@ -1006,11 +1006,7 @@ describe('Linear Scale', function() { type: 'bar', data: barData, options: { - bar: { - datasets: { - baseAxis: 'y' - } - }, + indexAxis: 'y', scales: { x: { stacked: true @@ -1036,7 +1032,6 @@ describe('Linear Scale', function() { var barData = { labels: ['S1', 'S2', 'S3'], datasets: [{ - baseAxis: 'y', label: 'dataset 1', backgroundColor: '#382765', data: [2500, 2000, 1500], @@ -1048,6 +1043,7 @@ describe('Linear Scale', function() { type: 'bar', data: barData, options: { + indexAxis: 'y', scales: { x: { min: 20 @@ -1064,7 +1060,6 @@ describe('Linear Scale', function() { var barData = { labels: ['S1', 'S2', 'S3'], datasets: [{ - baseAxis: 'y', label: 'dataset 1', backgroundColor: '#382765', data: [2500, 2000, 1500] @@ -1075,6 +1070,7 @@ describe('Linear Scale', function() { type: 'bar', data: barData, options: { + indexAxis: 'y', scales: { x: { min: 0, @@ -1091,7 +1087,6 @@ describe('Linear Scale', function() { var barData = { labels: ['S1', 'S2', 'S3'], datasets: [{ - baseAxis: 'y', label: 'dataset 1', backgroundColor: '#382765', data: [-2500, -2000, -1500] @@ -1102,6 +1097,7 @@ describe('Linear Scale', function() { type: 'bar', data: barData, options: { + indexAxis: 'y', scales: { x: { min: -3000, @@ -1143,11 +1139,11 @@ describe('Linear Scale', function() { type: 'bar', data: { datasets: [{ - baseAxis: 'y', data: [0.05, -25, 10, 15, 20, 25, 30, 35] }] }, options: { + indexAxis: 'y', scales: { x: { type: 'linear', diff --git a/test/specs/scale.logarithmic.tests.js b/test/specs/scale.logarithmic.tests.js index 9f9fd527c91..d70a37d6c97 100644 --- a/test/specs/scale.logarithmic.tests.js +++ b/test/specs/scale.logarithmic.tests.js @@ -828,14 +828,14 @@ describe('Logarithmic Scale tests', function() { ]; config.forEach(function(setup) { var scaleConfig = {}; - var baseAxis, chartStart, chartEnd; + var indexAxis, chartStart, chartEnd; if (setup.axis === 'x') { - baseAxis = 'y'; + indexAxis = 'y'; chartStart = 'left'; chartEnd = 'right'; } else { - baseAxis = 'x'; + indexAxis = 'x'; chartStart = 'bottom'; chartEnd = 'top'; } @@ -858,7 +858,7 @@ describe('Logarithmic Scale tests', function() { options: { bar: { datasets: { - baseAxis + indexAxis } }, scales: scaleConfig