Add linting of .mdx files + fix errors (#8496)

diff --git a/docs/docs/axes/cartesian/linear.mdx b/docs/docs/axes/cartesian/linear.mdx
index 5d0af157d52da83007612f0235af89ddfca8f83d..ac1418389a369d8bb14c0330a0a0b43ddb60cd29 100644 (file)
--- a/docs/docs/axes/cartesian/linear.mdx
+++ b/docs/docs/axes/cartesian/linear.mdx
@@ -24,9 +24,9 @@ Namespace: `options.scales[scaleId]`
 
 ## Tick Configuration
 
-### Linear Axis specific options
+### Linear Axis specific tick options
 
-Namespace: `options.scales[scaleId]`
+Namespace: `options.scales[scaleId].ticks`
 
 | Name | Type | Default | Description
 | ---- | ---- | ------- | -----------

diff --git a/docs/docs/axes/radial/linear.mdx b/docs/docs/axes/radial/linear.mdx
index 9456c2dc546ffd9004719110424d2d9f0628945d..47c57291f855ccfa66ba4005ef2dcaacb4114b6e 100644 (file)
--- a/docs/docs/axes/radial/linear.mdx
+++ b/docs/docs/axes/radial/linear.mdx
@@ -26,7 +26,7 @@ Namespace: `options.scales[scaleId]`
 
 ## Tick Configuration
 
-### Linear Radial Axis specific options
+### Linear Radial Axis specific tick options
 
 Namespace: `options.scales[scaleId].ticks`
 

diff --git a/docs/docs/charts/bar.mdx b/docs/docs/charts/bar.mdx
index 1b65ab8fd9975e72ab0a69f6ada176008f010828..820c65670b36b014261efe0a46b879d2d1fea499 100644 (file)
--- a/docs/docs/charts/bar.mdx
+++ b/docs/docs/charts/bar.mdx
@@ -176,7 +176,7 @@ The bar chart accepts the following configuration from the associated dataset op
 | `maxBarThickness` | `number` | | Set this to ensure that bars are not sized thicker than this.
 | `minBarLength` | `number` | | Set this to ensure that bars have a minimum length in pixels.
 
-### Example Usage
+### Example dataset configuration
 
 ```javascript
 data: {
@@ -215,7 +215,7 @@ The bar chart sets unique default values for the following configuration from th
 | `offset` | `boolean` | `true` | If true, extra space is added to both edges and the axis is scaled to fit into the chart area.
 | `gridLines.offsetGridLines` | `boolean` | `true` | If true, the bars for a particular data point fall between the grid lines. The grid line will move to the left by one half of the tick interval. If false, the grid line will go right down the middle of the bars. [more...](#offsetgridlines)
 
-### Example Usage
+### Example scale configuration
 
 ```javascript
 options = {
@@ -305,7 +305,7 @@ export const ExampleChart1 = () => {
       data: {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
         datasets: [{
-                 axis: 'y',
+      axis: 'y',
           label: 'My First Dataset',
           data: [65, 59, 80, 81, 56, 55, 40],
           fill: false,
@@ -331,7 +331,7 @@ export const ExampleChart1 = () => {
         }]
       },
       options: {
-       indexAxis: 'y',
+        indexAxis: 'y',
         scales: {
           x: {
             beginAtZero: true
@@ -354,12 +354,12 @@ var myBarChart = new Chart(ctx, {
     type: 'bar',
     data: data,
     options: {
-       indexAxis: 'y'
+      indexAxis: 'y'
     }
 });
 ```
 
-### Config Options
+### Horizontal Bar Chart config Options
 
 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.
 

diff --git a/docs/docs/charts/doughnut.mdx b/docs/docs/charts/doughnut.mdx
index b2b69e30fd10b2b4b617d4e06787a68b8fbf9751..63abd025f90139516f8028f93fdb4de0fee44e48 100644 (file)
--- a/docs/docs/charts/doughnut.mdx
+++ b/docs/docs/charts/doughnut.mdx
@@ -121,7 +121,6 @@ The doughnut/pie chart allows a number of properties to be specified for each da
 | `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}`
 | `rotation` | Per-dataset override for the starting angle to draw arcs from
 
-
 ### Styling
 
 The style of each arc can be controlled with the following properties:
@@ -139,6 +138,7 @@ All these values, if `undefined`, fallback to the associated [`elements.arc.*`](
 ### Border Alignment
 
 The following values are supported for `borderAlign`.
+
 * `'center'` (default)
 * `'inner'`
 

diff --git a/docs/docs/charts/line.mdx b/docs/docs/charts/line.mdx
index c6856e3cc2df9f239ec0ee7aa9dee31348b505ab..3b0e603ea2f6db3aaa4288db3bd60a9e53567f48 100644 (file)
--- a/docs/docs/charts/line.mdx
+++ b/docs/docs/charts/line.mdx
@@ -224,50 +224,50 @@ To achieve this you will have to set the `indexAxis` property in the options obj
 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>;
+  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/>
@@ -279,7 +279,7 @@ var myLineChart = new Chart(ctx, {
     type: 'line',
     data: data,
     options: {
-       indexAxis: 'y'
+      indexAxis: 'y'
     }
 });
 ```

diff --git a/package.json b/package.json
index fe987b98ef3eee143433119dee48695d567c4a5e..c58235a8268d89b82557f818804ad5f1a903afa7 100644 (file)
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "dev": "karma start --auto-watch --no-single-run --browsers chrome --grep",
     "docs": "cd docs && npm install && npm run build",
     "lint-js": "eslint \"samples/**/*.html\" \"samples/**/*.js\" \"src/**/*.js\" \"test/**/*.js\"",
-    "lint-md": "markdownlint-cli2 \"**/*.md\" \"#**/node_modules\"",
+    "lint-md": "markdownlint-cli2 \"**/*.md\" \"**/*.mdx\" \"#**/node_modules\"",
     "lint-tsc": "tsc",
     "lint-types": "eslint \"types/**/*.d.ts\" && tsc -p types/tests/",
     "lint": "concurrently \"npm:lint-*\"",