From: LeeLenaleee <39033624+LeeLenaleee@users.noreply.github.com>
Date: Mon, 18 Jan 2021 14:15:30 +0000 (+0100)
Subject: Add documentation for vertical line charts (#8327)
X-Git-Tag: v3.0.0-beta.10~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=4f74a92b80a6f4c83f45668ad4fbdc921eb0ada9;p=thirdparty%2FChart.js.git

Add documentation for vertical line charts (#8327)

* add documentation for vertical line charts

* remove the indexAxis prop from dataset since it doesnt belong there, fix horizontal bars example and make vertical line example

* 2 bars to line rename

* fix v3-migration guide

* revert deletion of prop from table in bar, added in line. Removed anchor point in link from v3 docs

* put right text in general of line
---

diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index 229f148bc..bf49cc6ef 100644
--- a/docs/docs/charts/bar.mdx
+++ b/docs/docs/charts/bar.mdx
@@ -294,6 +294,8 @@ The following dataset properties are specific to stacked bar charts.
 ## Horizontal Bar Chart
 
 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.
+To achieve this you will have to set the `indexAxis` property in the options object to `'y'`.
+The default for this property is `'x'` and thus will show vertical bars.
 
 export const ExampleChart1 = () => {
   useEffect(() => {
@@ -328,6 +330,7 @@ export const ExampleChart1 = () => {
         }]
       },
       options: {
+      	indexAxis: 'y',
         scales: {
           x: {
             beginAtZero: true
@@ -349,7 +352,9 @@ export const ExampleChart1 = () => {
 var myBarChart = new Chart(ctx, {
     type: 'bar',
     data: data,
-    options: options
+    options: {
+    	indexAxis: 'y'
+    }
 });
 ```
 
diff --git a/docs/docs/charts/line.mdx b/docs/docs/charts/line.mdx
index 7587abfee..3c58ae9d2 100644
--- a/docs/docs/charts/line.mdx
+++ b/docs/docs/charts/line.mdx
@@ -72,6 +72,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | [`hoverBorderDashOffset`](#line-styling) | `number` | Yes | - | `undefined`
 | [`hoverBorderJoinStyle`](#line-styling) | `string` | Yes | - | `undefined`
 | [`hoverBorderWidth`](#line-styling) | `number` | Yes | - | `undefined`
+| [`indexAxis`](#general) | `string` | - | - | `'x'`
 | [`label`](#general) | `string` | - | - | `''`
 | [`tension`](#line-styling) | `number` | - | - | `0`
 | [`order`](#general) | `number` | - | - | `0`
@@ -97,6 +98,7 @@ The line chart allows a number of properties to be specified for each dataset. T
 | 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 horizontal lines and `'y'` for vertical lines.
 | `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.
@@ -215,6 +217,77 @@ var stackedLine = new Chart(ctx, {
 });
 ```
 
+## Vertical Line Chart
+
+A vertical line chart is a variation on the horizontal line chart.
+To achieve this you will have to set the `indexAxis` property in the options object to `'y'`.
+The default for this property is `'x'` and thus will show horizontal lines.
+
+export const ExampleChart1 = () => {
+	useEffect(() => {
+		const cfg = {
+			type: 'line',
+			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,
+					backgroundColor: [
+						'rgba(255, 99, 132, 0.2)',
+						'rgba(255, 159, 64, 0.2)',
+						'rgba(255, 205, 86, 0.2)',
+						'rgba(75, 192, 192, 0.2)',
+						'rgba(54, 162, 235, 0.2)',
+						'rgba(153, 102, 255, 0.2)',
+						'rgba(201, 203, 207, 0.2)'
+					],
+					borderColor: [
+						'rgb(255, 99, 132)',
+						'rgb(255, 159, 64)',
+						'rgb(255, 205, 86)',
+						'rgb(75, 192, 192)',
+						'rgb(54, 162, 235)',
+						'rgb(153, 102, 255)',
+						'rgb(201, 203, 207)'
+					],
+					borderWidth: 1
+				}]
+			},
+			options: {
+				indexAxis: 'y',
+				scales: {
+					x: {
+						beginAtZero: true
+					}
+				}
+			}
+		};
+		const chart = new Chart(document.getElementById('chartjs-1').getContext('2d'), cfg);
+		return () => chart.destroy();
+	});
+	return <div className="chartjs-wrapper"><canvas id="chartjs-1" className="chartjs"></canvas></div>;
+}
+
+<ExampleChart1/>
+
+## Example
+
+```javascript
+var myLineChart = new Chart(ctx, {
+    type: 'line',
+    data: data,
+    options: {
+    	indexAxis: 'y'
+    }
+});
+```
+
+### Config Options
+
+The configuration options for the vertical line chart are the same as for the [line chart](#configuration-options). However, any options specified on the x-axis in a line chart, are applied to the y-axis in a vertical line chart.
+
 ## Internal data format
 
 `{x, y}`
diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md
index 0e2e86e7e..1897f88a6 100644
--- a/docs/docs/getting-started/v3-migration.md
+++ b/docs/docs/getting-started/v3-migration.md
@@ -53,7 +53,7 @@ const chart = new Chart(ctx, {
 
 ### Chart types
 
-* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`indexAxis`](./charts/bar.mdx#general) option
+* `horizontalBar` chart type was removed. Horizontal bar charts can be configured using the new [`indexAxis`](./charts/bar.mdx#horizontal-bar-chart) option
 
 ### Options