Replace horizontalBar with indexAxis: 'y'

docs/charts/bar.md

@@ -70,13 +70,14 @@ the color of the bars is generally set this way.
 | ---- | ---- | :----: | :----: | ----
 | [`backgroundColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
 | [`borderColor`](#styling) | [`Color`](../general/colors.md) | Yes | Yes | `'rgba(0, 0, 0, 0.1)'`
-| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'bottom'`
+| [`borderSkipped`](#borderskipped) | `string` | Yes | Yes | `'start'`
 | [`borderWidth`](#borderwidth) | <code>number&#124;object</code> | Yes | Yes | `0`
 | [`clip`](#general) | <code>number&#124;object</code> | - | - | `undefined`
 | [`data`](#data-structure) | `object[]` | - | - | **required**
 | [`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,6 +88,7 @@ the color of the bars is generally set this way.
 | Name | Description
 | ---- | ----
 | `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.
@@ -116,6 +118,8 @@ that derive from a bar chart.
 
 Options are:
 
+* `'start'`
+* `'end'`
 * `'bottom'`
 * `'left'`
 * `'top'`
@@ -263,10 +267,11 @@ The following dataset properties are specific to stacked bar charts.
 A horizontal bar chart is a variation on a vertical bar chart. It is sometimes used to show trend data, and the comparison of multiple data sets side by side.
 {% chartjs %}
 {
-    "type": "horizontalBar",
+    "type": "bar",
     "data": {
         "labels": ["January", "February", "March", "April", "May", "June", "July"],
         "datasets": [{
+            "axis: "y",
             "label": "My First Dataset",
             "data": [65, 59, 80, 81, 56, 55, 40],
             "fill": false,
@@ -305,7 +310,7 @@ A horizontal bar chart is a variation on a vertical bar chart. It is sometimes u
 
 ```javascript
 var myBarChart = new Chart(ctx, {
-    type: 'horizontalBar',
+    type: 'bar',
     data: data,
     options: options
 });
@@ -315,8 +320,6 @@ var myBarChart = new Chart(ctx, {
 
 The configuration options for the horizontal bar chart are the same as for the [bar chart](#scale-configuration). However, any options specified on the x axis in a bar chart, are applied to the y axis in a horizontal bar chart.
 
-The default horizontal bar configuration is specified in `Chart.defaults.horizontalBar`.
-
 ## Internal data format
 
 `{x, y, _custom}` where `_custom` is optional object defining stacked bar properties: `{start, end, barStart, barEnd, min, max}`. `start` and `end` are the input values. Those two are repeated in `barStart` (closer to origin), `barEnd` (further from origin), `min` and `max`.

docs/configuration/elements.md

@@ -77,7 +77,7 @@ Global rectangle options: `Chart.defaults.elements.rectangle`.
 | `backgroundColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar fill color.
 | `borderWidth` | `number` | `0` | Bar stroke width.
 | `borderColor` | `Color` | `'rgba(0, 0, 0, 0.1)'` | Bar stroke color.
-| `borderSkipped` | `string` | `'bottom'` | Skipped (excluded) border: `'bottom'`, `'left'`, `'top'` or `'right'`.
+| `borderSkipped` | `string` | `'start'` | Skipped (excluded) border: `'start'`, `'end'`, `'bottom'`, `'left'`, `'top'` or `'right'`.
 
 ## Arc Configuration
 

docs/developers/charts.md

@@ -67,7 +67,6 @@ Extending or replacing an existing controller type is easy. Simply replace the c
 The built in controller types are:
 * `Chart.controllers.line`
 * `Chart.controllers.bar`
-* `Chart.controllers.horizontalBar`
 * `Chart.controllers.radar`
 * `Chart.controllers.doughnut`
 * `Chart.controllers.polarArea`

docs/general/interactions/modes.md

@@ -5,6 +5,7 @@ When configuring interaction with the graph via hover or tooltips, a number of d
 The modes are detailed below and how they behave in conjunction with the `intersect` setting.
 
 ## point
+
 Finds all of the items that intersect the point.
 
 ```javascript
@@ -20,6 +21,7 @@ var chart = new Chart(ctx, {
 ```
 
 ## nearest
+
 Gets the items that are at the nearest distance to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). You can use the `axis` setting to define which directions are used in distance calculation. If `intersect` is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
 
 ```javascript
@@ -35,6 +37,7 @@ var chart = new Chart(ctx, {
 ```
 
 ## index
+
 Finds item at the same index. If the `intersect` setting is true, the first intersecting item is used to determine the index in the data. If `intersect` false the nearest item, in the x direction, is used to determine the index.
 
 ```javascript
@@ -53,7 +56,7 @@ To use index mode in a chart like the horizontal bar chart, where we search alon
 
 ```javascript
 var chart = new Chart(ctx, {
-    type: 'horizontalBar',
+    type: 'bar',
     data: data,
     options: {
         tooltips: {

docs/getting-started/v3-migration.md

@@ -17,6 +17,10 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released
 * Chart.js is no longer providing the `Chart.bundle.js` and `Chart.bundle.min.js`. Please see the [installation](installation.md) and [integration](integration.md) docs for details on the recommended way to setup Chart.js if you were using these builds.
 * `moment` is no longer specified as an npm dependency. If you are using the time scale, you must include one of [the available adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library. If you are using a date library other than moment, you no longer need to exclude moment from your build.
 
+## Chart types
+
+* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`indexAxis`](../charts/bar.md#general) option
+
 ### Ticks
 
 * `options.ticks.userCallback` was renamed to `options.ticks.callback`
@@ -147,6 +151,10 @@ Animation system was completely rewritten in Chart.js v3. Each property can now
 #### Removal of private APIs
 
 * `Chart.data.datasets[datasetIndex]._meta`
+* `DatasetController._getIndexScaleId`
+* `DatasetController._getIndexScale`
+* `DatasetController._getValueScaleId`
+* `DatasetController._getValueScale`
 * `Element._ctx`
 * `Element._model`
 * `Element._view`

samples/charts/bar/horizontal.html

@@ -62,9 +62,10 @@
 		window.onload = function() {
 			var ctx = document.getElementById('canvas').getContext('2d');
 			window.myHorizontalBar = new Chart(ctx, {
-				type: 'horizontalBar',
+				type: 'bar',
 				data: horizontalBarChartData,
 				options: {
+					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: {

src/controllers/controller.bar.js

@@ -22,14 +22,14 @@ defaults.set('bar', {
 	},
 
 	scales: {
-		x: {
+		_index_: {
 			type: 'category',
 			offset: true,
 			gridLines: {
 				offsetGridLines: true
 			}
 		},
-		y: {
+		_value_: {
 			type: 'linear',
 			beginAtZero: true,
 		}

src/controllers/controller.line.js

@@ -15,10 +15,10 @@ defaults.set('line', {
 	},
 
 	scales: {
-		x: {
+		_index_: {
 			type: 'category',
 		},
-		y: {
+		_value_: {
 			type: 'linear',
 		},
 	}

src/controllers/controller.polarArea.js

@@ -13,6 +13,9 @@ defaults.set('polarArea', {
 		animateRotate: true,
 		animateScale: true
 	},
+	datasets: {
+		indexAxis: 'r'
+	},
 	scales: {
 		r: {
 			type: 'radialLinear',
@@ -97,20 +100,6 @@ export default class PolarAreaController extends DatasetController {
 		this.outerRadius = undefined;
 	}
 
-	/**
-	 * @protected
-	 */
-	getIndexScaleId() {
-		return this._cachedMeta.rAxisID;
-	}
-
-	/**
-	 * @protected
-	 */
-	getValueScaleId() {
-		return this._cachedMeta.rAxisID;
-	}
-
 	update(mode) {
 		const arcs = this._cachedMeta.data;
 
@@ -143,7 +132,7 @@ export default class PolarAreaController extends DatasetController {
 		const dataset = me.getDataset();
 		const opts = chart.options;
 		const animationOpts = opts.animation;
-		const scale = chart.scales.r;
+		const scale = me._cachedMeta.rScale;
 		const centerX = scale.xCenter;
 		const centerY = scale.yCenter;
 		const datasetStartAngle = getStartAngleRadians(opts.startAngle);

src/controllers/controller.radar.js

@@ -11,6 +11,9 @@ defaults.set('radar', {
 			type: 'radialLinear',
 		}
 	},
+	datasets: {
+		indexAxis: 'r'
+	},
 	elements: {
 		line: {
 			tension: 0 // no bezier in radar
@@ -20,20 +23,6 @@ defaults.set('radar', {
 
 export default class RadarController extends DatasetController {
 
-	/**
-	 * @protected
-	 */
-	getIndexScaleId() {
-		return this._cachedMeta.rAxisID;
-	}
-
-	/**
-	 * @protected
-	 */
-	getValueScaleId() {
-		return this._cachedMeta.rAxisID;
-	}
-
 	/**
 	 * @protected
 	 */
@@ -72,7 +61,7 @@ export default class RadarController extends DatasetController {
 	updateElements(points, start, mode) {
 		const me = this;
 		const dataset = me.getDataset();
-		const scale = me.chart.scales.r;
+		const scale = me._cachedMeta.rScale;
 		const reset = mode === 'reset';
 		let i;
 

src/controllers/index.js

@@ -1,7 +1,6 @@
 import bar from './controller.bar';
 import bubble from './controller.bubble';
 import doughnut from './controller.doughnut';
-import horizontalBar from './controller.horizontalBar';
 import line from './controller.line';
 import polarArea from './controller.polarArea';
 import pie from './controller.pie';
@@ -16,7 +15,6 @@ export default {
 	bar,
 	bubble,
 	doughnut,
-	horizontalBar,
 	line,
 	polarArea,
 	pie,