Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace html extension with md extension for docs #11439

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/axes/labelling.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion docs/developers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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).

:::

Expand Down
2 changes: 1 addition & 1 deletion docs/general/colors.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
22 changes: 11 additions & 11 deletions docs/getting-started/usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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
// ...
Expand Down Expand Up @@ -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
// ...
Expand Down Expand Up @@ -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
// ...
Expand Down Expand Up @@ -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:

Expand Down Expand Up @@ -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!
10 changes: 5 additions & 5 deletions docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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.

Expand All @@ -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.

Expand Down
6 changes: 3 additions & 3 deletions docs/samples/advanced/data-decimation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

6 changes: 3 additions & 3 deletions docs/samples/advanced/derived-axis-type.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
4 changes: 2 additions & 2 deletions docs/samples/advanced/derived-chart-type.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
12 changes: 6 additions & 6 deletions docs/samples/advanced/linear-gradient.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
12 changes: 6 additions & 6 deletions docs/samples/advanced/programmatic-events.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
12 changes: 6 additions & 6 deletions docs/samples/advanced/progress-bar.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
4 changes: 2 additions & 2 deletions docs/samples/advanced/radial-gradient.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Loading
Loading