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 229f148bc32c2eb53d4dacce1bc7f65fd5beb70c..bf49cc6ef94c6cecd7ff2a896c1c9340a5662836 100644 (file)
--- 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 7587abfeeac293c4537b871349742541c5aabd89..3c58ae9d22a8ee3eecc272938e15729a1cc4a05a 100644 (file)
--- 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 0e2e86e7ecf7d2f55f3b49567d6812e97aa00769..1897f88a6b69740eae9953166a3240b1c9382ada 100644 (file)
--- 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