Replace html extension with md extension for docs (#11439)

* Replace html extension with md extension for docs

* Revert some links

* Commit saved files

Author: LeeLenaleee

docs/axes/labelling.md

@@ -31,7 +31,7 @@ The call to the method is scoped to the scale. `this` inside the method is the s
 If the callback returns `null` or `undefined` the associated grid line will be hidden.
 
 :::tip
-The [category axis](../axes/cartesian/category), which is the default x-axis for line and bar charts, uses the `index` as internal data format. For accessing the label, use `this.getLabelForValue(value)`. [API: getLabelForValue](../api/classes/Scale.html#getlabelforvalue)
+The [category axis](../axes/cartesian/category), which is the default x-axis for line and bar charts, uses the `index` as internal data format. For accessing the label, use `this.getLabelForValue(value)`. [API: getLabelForValue](../api/classes/Scale.md#getlabelforvalue)
 :::
 
 In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.

docs/developers/index.md

@@ -18,7 +18,7 @@ Latest builds are available for testing at:
 
 :::warning Warning
 
-Development builds **must not** be used for production purposes or as replacement for a CDN. See [available CDNs](../getting-started/installation.html#cdn).
+Development builds **must not** be used for production purposes or as replacement for a CDN. See [available CDNs](../getting-started/installation.md#cdn).
 
 :::
 

docs/general/colors.md

@@ -4,7 +4,7 @@ Charts support three color options:
 * for geometric elements, you can change *background* and *border* colors;
 * for textual elements, you can change the *font* color.
 
-Also, you can change the whole [canvas background](../configuration/canvas-background.html).
+Also, you can change the whole [canvas background](../configuration/canvas-background.md).
 
 ## Default colors
 

docs/getting-started/usage.md

@@ -49,7 +49,7 @@ Run `npm install`, `yarn install`, or `pnpm install` to install the dependencies
 </html>
 ```
 
-As you can see, Chart.js requires minimal markup: a `canvas` tag with an `id` by which we’ll reference the chart later. By default, Chart.js charts are [responsive](../configuration/responsive.html) and take the whole enclosing container. So, we set the width of the `div` to control chart width.
+As you can see, Chart.js requires minimal markup: a `canvas` tag with an `id` by which we’ll reference the chart later. By default, Chart.js charts are [responsive](../configuration/responsive.md) and take the whole enclosing container. So, we set the width of the `div` to control chart width.
 
 Lastly, let’s create the `src/acquisitions.js` file with the following contents:
 
@@ -96,7 +96,7 @@ Time to run the example with `npm run dev`, `yarn dev`, or `pnpm dev` and naviga
 
 ![result](./usage-1.png)
 
-With just a few lines of code, we’ve got a chart with a lot of features: a [legend](../configuration/legend.html), [grid lines](../samples/scale-options/grid.html), [ticks](../samples/scale-options/ticks.html), and [tooltips](../configuration/tooltip.html) shown on hover. Refresh the web page a few times to see that the chart is also [animated](../configuration/animations.html#animations). Try clicking on the “Acquisitions by year” label to see that you’re also able to toggle datasets visibility (especially useful when you have multiple datasets). 
+With just a few lines of code, we’ve got a chart with a lot of features: a [legend](../configuration/legend.md), [grid lines](../samples/scale-options/grid.md), [ticks](../samples/scale-options/ticks.md), and [tooltips](../configuration/tooltip.md) shown on hover. Refresh the web page a few times to see that the chart is also [animated](../configuration/animations.md#animations). Try clicking on the “Acquisitions by year” label to see that you’re also able to toggle datasets visibility (especially useful when you have multiple datasets). 
 
 ### Simple customizations
 
@@ -133,7 +133,7 @@ Replace the `new Chart(...);` invocation in `src/acquisitions.js` with the follo
   );
 ```
 
-As you can see, we’ve added the `options` property to the second argument—that’s how you can specify all kinds of customization options for Chart.js. The [animation is disabled](../configuration/animations.html#disabling-animation) with a boolean flag provided via `animation`. Most chart-wide options (e.g., [responsiveness](../configuration/responsive.html) or [device pixel ratio](../configuration/device-pixel-ratio.html)) are configured like this.
+As you can see, we’ve added the `options` property to the second argument—that’s how you can specify all kinds of customization options for Chart.js. The [animation is disabled](../configuration/animations.md#disabling-animation) with a boolean flag provided via `animation`. Most chart-wide options (e.g., [responsiveness](../configuration/responsive.md) or [device pixel ratio](../configuration/device-pixel-ratio.md)) are configured like this.
 
 The legend and tooltips are hidden with boolean flags provided under the respective sections in `plugins`. Note that some of Chart.js features are extracted into plugins: self-contained, separate pieces of code. A few of them are available as a part of [Chart.js distribution](https://github.com/chartjs/Chart.js/tree/master/src/plugins), other plugins are maintained independently and can be located in the [awesome list](https://github.com/chartjs/awesome) of plugins, framework integrations, and additional chart types.
 
@@ -252,7 +252,7 @@ We’re done with the bar chart. Let’s try another Chart.js chart type.
 
 Chart.js supports many common chart types.
 
-For instance, [Bubble chart](../charts/bubble.html) allows to display three dimensions of data at the same time: locations on `x` and `y` axes represent two dimensions, and the third dimension is represented by the size of the individual bubbles.
+For instance, [Bubble chart](../charts/bubble.md) allows to display three dimensions of data at the same time: locations on `x` and `y` axes represent two dimensions, and the third dimension is represented by the size of the individual bubbles.
 
 To create the chart, stop the already running application, then go to `src/index.html`, and uncomment the following two lines:
 
@@ -301,7 +301,7 @@ Now, reset caches with `rm -rf .parcel-cache` and start the application again wi
 
 Well, it doesn’t look pretty.
 
-First of all, the chart is not square. Artworks’ width and height are equally important so we’d like to make the chart width equal to its height as well. By default, Chart.js charts have the [aspect ratio](../configuration/responsive.html) of either 1 (for all radial charts, e.g., a doughnut chart) or 2 (for all the rest). Let’s modify the aspect ratio for our chart:
+First of all, the chart is not square. Artworks’ width and height are equally important so we’d like to make the chart width equal to its height as well. By default, Chart.js charts have the [aspect ratio](../configuration/responsive.md) of either 1 (for all radial charts, e.g., a doughnut chart) or 2 (for all the rest). Let’s modify the aspect ratio for our chart:
 
 ```jsx
 // ...
@@ -349,7 +349,7 @@ Great! Behold the updated chart:
 
 ![result](./usage-5.png)
 
-However, there’s one more nitpick: what are these numbers? It’s not very obvious that the units are centimetres. Let’s apply a [custom tick format](../axes/labelling.html#creating-custom-tick-formats) to both axes to make things clear. We’ll provide a callback function that would be called to format each tick value. Here’s the updated axes configuration:
+However, there’s one more nitpick: what are these numbers? It’s not very obvious that the units are centimetres. Let’s apply a [custom tick format](../axes/labelling.md#creating-custom-tick-formats) to both axes to make things clear. We’ll provide a callback function that would be called to format each tick value. Here’s the updated axes configuration:
 
 ```jsx
 // ...
@@ -434,13 +434,13 @@ As you can see, we define three datasets with different labels. Each dataset get
 
 ![result](./usage-7.png)
 
-Here we rely on the default color palette. However, keep in mind every chart type supports a lot of [dataset options](../charts/bubble.html#dataset-properties) that you can feel free to customize.
+Here we rely on the default color palette. However, keep in mind every chart type supports a lot of [dataset options](../charts/bubble.md#dataset-properties) that you can feel free to customize.
 
 ### Plugins
 
-Another—and very powerful!—way to customize Chart.js charts is to use plugins. You can find some in the [plugin directory](https://github.com/chartjs/awesome#plugins) or create your own, ad-hoc ones. In Chart.js ecosystem, it’s idiomatic and expected to fine tune charts with plugins. For example, you can customize [canvas background](../configuration/canvas-background.html) or [add a border](../samples/plugins/chart-area-border.html) to it with simple ad-hoc plugins. Let’s try the latter.
+Another—and very powerful!—way to customize Chart.js charts is to use plugins. You can find some in the [plugin directory](https://github.com/chartjs/awesome#plugins) or create your own, ad-hoc ones. In Chart.js ecosystem, it’s idiomatic and expected to fine tune charts with plugins. For example, you can customize [canvas background](../configuration/canvas-background.md) or [add a border](../samples/plugins/chart-area-border.md) to it with simple ad-hoc plugins. Let’s try the latter.
 
-Plugins have an [extensive API](../developers/plugins.html) but, in a nutshell, a plugin is defined as an object with a `name` and one or more callback functions defined in the extension points. Insert the following snippet before and in place of the `new Chart(...);` invocation in `src/dimensions.js`:
+Plugins have an [extensive API](../developers/plugins.md) but, in a nutshell, a plugin is defined as an object with a `name` and one or more callback functions defined in the extension points. Insert the following snippet before and in place of the `new Chart(...);` invocation in `src/dimensions.js`:
 
 ```jsx
 // ...
@@ -556,7 +556,7 @@ Chart.register(
 );
 ```
 
-You can see that, in addition to the `Chart` class, we’re also loading a controller for the chart type, scales, and other chart elements (e.g., bars or points). You can look all available components up in the [documentation](./integration.html#bundle-optimization).
+You can see that, in addition to the `Chart` class, we’re also loading a controller for the chart type, scales, and other chart elements (e.g., bars or points). You can look all available components up in the [documentation](./integration.md#bundle-optimization).
 
 Alternatively, you can follow Chart.js advice in the console. For example, if you forget to import `BarController` for your bar chart, you’ll see the following message in the browser console:
 
@@ -586,6 +586,6 @@ By importing and registering only select components, we’ve removed more than 5
 
 Now you’re familiar with all major concepts of Chart.js: chart types and elements, datasets, customization, plugins, components, and tree-shaking.
 
-Feel free to review many [examples of charts](../samples/information.html) in the documentation and check the [awesome list](https://github.com/chartjs/awesome) of Chart.js plugins and additional chart types as well as [framework integrations](https://github.com/chartjs/awesome#integrations) (e.g., React, Vue, Svelte, etc.). Also, don’t hesitate to join [Chart.js Discord](https://discord.gg/HxEguTK6av) and follow [Chart.js on Twitter](https://twitter.com/chartjs).
+Feel free to review many [examples of charts](../samples/information.md) in the documentation and check the [awesome list](https://github.com/chartjs/awesome) of Chart.js plugins and additional chart types as well as [framework integrations](https://github.com/chartjs/awesome#integrations) (e.g., React, Vue, Svelte, etc.). Also, don’t hesitate to join [Chart.js Discord](https://discord.gg/HxEguTK6av) and follow [Chart.js on Twitter](https://twitter.com/chartjs).
 
 Have fun and good luck building with Chart.js!

docs/index.md

@@ -3,10 +3,10 @@
 Welcome to Chart.js!
 
 * **[Get started with Chart.js](./getting-started/) — best if you're new to Chart.js**
-* Migrate from [Chart.js v3](./migration/v4-migration.html) or [Chart.js v2](./migration/v3-migration.html)
+* Migrate from [Chart.js v3](./migration/v4-migration.md) or [Chart.js v2](./migration/v3-migration.md)
 * Join the community on [Discord](https://discord.gg/HxEguTK6av) and [Twitter](https://twitter.com/chartjs)
 * Post a question tagged with `chart.js` on [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js)
-* [Contribute to Chart.js](./developers/contributing.html)
+* [Contribute to Chart.js](./developers/contributing.md)
 
 ## Why Chart.js
 
@@ -16,7 +16,7 @@ Chart.js was created and [announced](https://twitter.com/_nnnick/status/31359920
 
 ### Features
 
-Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of [built-in chart types](./charts/area.html), you can use additional community-maintained [chart types](https://github.com/chartjs/awesome#charts). On top of that, it’s possible to combine several chart types into a [mixed chart](./charts/mixed.html) (essentially, blending multiple chart types into one on the same canvas).
+Chart.js provides a set of frequently used chart types, plugins, and customization options. In addition to a reasonable set of [built-in chart types](./charts/area.md), you can use additional community-maintained [chart types](https://github.com/chartjs/awesome#charts). On top of that, it’s possible to combine several chart types into a [mixed chart](./charts/mixed.md) (essentially, blending multiple chart types into one on the same canvas).
 
 Chart.js is highly customizable with [custom plugins](https://github.com/chartjs/awesome#plugins) to create annotations, zoom, or drag-and-drop functionalities to name a few things.
 
@@ -30,15 +30,15 @@ Chart.js comes with built-in TypeScript typings and is compatible with all popul
 
 ### Developer experience
 
-Chart.js has very thorough documentation (yes, you're reading it), [API reference](./api/), and [examples](./samples/information.html). Maintainers and community members eagerly engage in conversations on [Discord](https://discord.gg/HxEguTK6av), [GitHub Discussions](https://github.com/chartjs/Chart.js/discussions), and [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) where more than 11,000 questions are tagged with `chart.js`.
+Chart.js has very thorough documentation (yes, you're reading it), [API reference](./api/), and [examples](./samples/information.md). Maintainers and community members eagerly engage in conversations on [Discord](https://discord.gg/HxEguTK6av), [GitHub Discussions](https://github.com/chartjs/Chart.js/discussions), and [Stack Overflow](https://stackoverflow.com/questions/tagged/chart.js) where more than 11,000 questions are tagged with `chart.js`.
 
 ### Canvas rendering
 
 Chart.js renders chart elements on an HTML5 canvas unlike several others, mostly D3.js-based, charting libraries that render as SVG. Canvas rendering makes Chart.js very performant, especially for large datasets and complex visualizations that would otherwise require thousands of SVG nodes in the DOM tree. At the same time, canvas rendering disallows CSS styling, so you will have to use built-in options for that, or create a custom plugin or chart type to render everything to your liking.
 
 ### Performance
 
-Chart.js is very well suited for large datasets. Such datasets can be efficiently ingested using the internal format, so you can skip data [parsing](./general/performance.html#parsing) and [normalization](./general/performance.html#data-normalization). Alternatively, [data decimation](./configuration/decimation.html) can be configured to sample the dataset and reduce its size before rendering.
+Chart.js is very well suited for large datasets. Such datasets can be efficiently ingested using the internal format, so you can skip data [parsing](./general/performance.md#parsing) and [normalization](./general/performance.md#data-normalization). Alternatively, [data decimation](./configuration/decimation.md) can be configured to sample the dataset and reduce its size before rendering.
 
 In the end, the canvas rendering that Chart.js uses reduces the toll on your DOM tree in comparison to SVG rendering. Also, tree-shaking support allows you to include minimal parts of Chart.js code in your bundle, reducing bundle size and page load time.
 

docs/samples/advanced/data-decimation.md

@@ -112,7 +112,7 @@ module.exports = {
 };
 ```
 ## Docs
-* [Data Decimation](../../configuration/decimation.html)
-* [Line](../../charts/line.html)
-* [Time Scale](../../axes/cartesian/time.html)
+* [Data Decimation](../../configuration/decimation.md)
+* [Line](../../charts/line.md)
+* [Time Scale](../../axes/cartesian/time.md)
 

docs/samples/advanced/derived-axis-type.md

@@ -50,6 +50,6 @@ module.exports = {
 <<< @/scripts/log2.js
 
 ## Docs
-* [Data structures (`labels`)](../../general/data-structures.html)
-* [Line](../../charts/line.html)
-* [New Axes](../../developers/axes.html)
+* [Data structures (`labels`)](../../general/data-structures.md)
+* [Line](../../charts/line.md)
+* [New Axes](../../developers/axes.md)

docs/samples/advanced/derived-chart-type.md

@@ -46,5 +46,5 @@ module.exports = {
 <<< @/scripts/derived-bubble.js
 
 ## Docs
-* [Bubble Chart](../../charts/bubble.html)
-* [New Charts](../../developers/charts.html)
+* [Bubble Chart](../../charts/bubble.md)
+* [New Charts](../../developers/charts.md)

docs/samples/advanced/linear-gradient.md

@@ -110,9 +110,9 @@ module.exports = {
 ```
 
 ## Docs
-* [Colors](../../general/colors.html)
-  * [Patterns and Gradients](../../general/colors.html#patterns-and-gradients)  
-* [Data structures (`labels`)](../../general/data-structures.html)
-* [Options](../../general/options.html)
-  * [Scriptable Options](../../general/options.html#scriptable-options)
-* [Line](../../charts/line.html)
+* [Colors](../../general/colors.md)
+  * [Patterns and Gradients](../../general/colors.md#patterns-and-gradients)  
+* [Data structures (`labels`)](../../general/data-structures.md)
+* [Options](../../general/options.md)
+  * [Scriptable Options](../../general/options.md#scriptable-options)
+* [Line](../../charts/line.md)

docs/samples/advanced/programmatic-events.md

@@ -105,11 +105,11 @@ module.exports = {
 ## API
 * [Chart](../../api/classes/Chart.md)
   * [`setActiveElements`](../../api/classes/Chart.md#setactiveelements)
-* [TooltipModel](../../api/interfaces/TooltipModel.html)
-  * [`setActiveElements`](../../api/interfaces/TooltipModel.html#setactiveelements)
+* [TooltipModel](../../api/interfaces/TooltipModel.md)
+  * [`setActiveElements`](../../api/interfaces/TooltipModel.md#setactiveelements)
 
 ## Docs
-* [Bar](../../charts/bar.html)
-    * [Interactions (`hoverBorderColor`)](../../charts/bar.html#interactions)
-* [Interactions](../../configuration/interactions.html)
-* [Tooltip](../../configuration/tooltip.html)
+* [Bar](../../charts/bar.md)
+    * [Interactions (`hoverBorderColor`)](../../charts/bar.md#interactions)
+* [Interactions](../../configuration/interactions.md)
+* [Tooltip](../../configuration/tooltip.md)

docs/samples/advanced/progress-bar.md

@@ -144,9 +144,9 @@ module.exports = {
 ```
 
 ## Docs
-* [Animations](../../configuration/animations.html)
-  * [Animation Callbacks](../../configuration/animations.html#animation-callbacks)
-* [Data structures (`labels`)](../../general/data-structures.html)
-* [Line](../../charts/line.html)
-* [Options](../../general/options.html)
-  * [Scriptable Options](../../general/options.html#scriptable-options)
+* [Animations](../../configuration/animations.md)
+  * [Animation Callbacks](../../configuration/animations.md#animation-callbacks)
+* [Data structures (`labels`)](../../general/data-structures.md)
+* [Line](../../charts/line.md)
+* [Options](../../general/options.md)
+  * [Scriptable Options](../../general/options.md#scriptable-options)

docs/samples/advanced/radial-gradient.md

@@ -118,5 +118,5 @@ module.exports = {
 ## Docs
 * [Polar Area Chart](../../charts/polar.md)
   * [Styling](../../charts/polar.md#styling)
-* [Options](../../general/options.html)
-  * [Scriptable Options](../../general/options.html#scriptable-options)
+* [Options](../../general/options.md)
+  * [Scriptable Options](../../general/options.md#scriptable-options)