Updated docs (why Chart.js + getting started + step-by-step guide) (#…

…10816)

* Update docs

* Minor fixes

* Replace screenshots with live demos

* Replace the last screenshot with a live demo

* Bring back images

* Bring back images #2

* Remove unnecessary files

* Apply suggestions from code review

Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com>

* Very last tiny fixes

Co-authored-by: Jacco van den Berg <jaccoberg2281@gmail.com>

docs/developers/index.md

@@ -16,16 +16,20 @@ Latest builds are available for testing at:
 - <https://www.chartjs.org/dist/master/chart.js>
 - <https://www.chartjs.org/dist/master/chart.min.js>
 
-**WARNING: Development builds MUST not be used for production purposes or as replacement for CDN.**
+:::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).
+
+:::
 
 ## Browser support
 
 All modern and up-to-date browsers are supported, including, but not limited to:
 
-Chrome
-Edge
-Firefox
-Safari
+* Chrome
+* Edge
+* Firefox
+* Safari
 
 As of version 3, we have dropped Internet Explorer 11 support.
 

docs/getting-started/index.md

@@ -1,106 +1,93 @@
 # Getting Started
 
-Let's get started using Chart.js!
+Let's get started with Chart.js!
 
-First, we need to have a canvas in our page. It's recommended to give the chart its own container for [responsiveness](../configuration/responsive.md).
+* **[Follow a step-by-step guide](./usage) to get up to speed with Chart.js**
+* [Install Chart.js](./installation) from npm or a CDN 
+* [Integrate Chart.js](./integration) with bundlers, loaders, and front-end frameworks
+
+Alternatively, see the example below or check [samples](../samples).
+
+## Create a Chart
+
+In this example, we create a bar chart for a single dataset and render it on an HTML page. Add this code snippet to your page:
 
 ```html
 <div>
   <canvas id="myChart"></canvas>
 </div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+
+<script>
+  const ctx = document.getElementById('myChart');
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
+</script>
 ```
 
-Now that we have a canvas we can use, we need to include Chart.js in our page.
+You should get a chart like this:
+
+![demo](./preview.png)
+
+Let's break this code down.
+
+First, we need to have a canvas in our page. It's recommended to give the chart its own container for [responsiveness](../configuration/responsive.md).
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<div>
+  <canvas id="myChart"></canvas>
+</div>
 ```
 
-Now, we can create a chart. We add a script to our page:
+Now that we have a canvas, we can include Chart.js from a CDN.
 
 ```html
-<script>
-  const labels = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-  ];
-
-  const data = {
-    labels: labels,
-    datasets: [{
-      label: 'My First dataset',
-      backgroundColor: 'rgb(255, 99, 132)',
-      borderColor: 'rgb(255, 99, 132)',
-      data: [0, 10, 5, 2, 20, 30, 45],
-    }]
-  };
-
-  const config = {
-    type: 'line',
-    data: data,
-    options: {}
-  };
-</script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 ```
 
-Finally, render the chart using our configuration:
+Finally, we can create a chart. We add a script that acquires the `myChart` canvas element and instantiates `new Chart` with desired configuration: `bar` chart type, labels, data points, and options. 
 
 ```html
 <script>
-  const myChart = new Chart(
-    document.getElementById('myChart'),
-    config
-  );
+  const ctx = document.getElementById('myChart');
+
+  new Chart(ctx, {
+    type: 'bar',
+    data: {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+        borderWidth: 1
+      }]
+    },
+    options: {
+      scales: {
+        y: {
+          beginAtZero: true
+        }
+      }
+    }
+  });
 </script>
 ```
 
-It's that easy to get started using Chart.js! From here you can explore the many options that can help you customise your charts with scales, tooltips, labels, colors, custom actions, and much more.
-
-Here the sample above is presented with our sample block:
-
-```js chart-editor
-// <block:setup:1>
-const labels = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-];
-const data = {
-  labels: labels,
-  datasets: [{
-    label: 'My First dataset',
-    backgroundColor: 'rgb(255, 99, 132)',
-    borderColor: 'rgb(255, 99, 132)',
-    data: [0, 10, 5, 2, 20, 30, 45],
-  }]
-};
-// </block:setup>
-
-// <block:config:0>
-const config = {
-  type: 'line',
-  data: data,
-  options: {}
-};
-// </block:config>
-
-module.exports = {
-  actions: [],
-  config: config,
-};
-```
-
-:::tip Note
-As you can see, some of the boilerplate needed is not visible in our sample blocks, as the samples focus on the configuration options.
-:::
-
-All our examples are [available online](../samples/).
-
-To run the samples locally you first have to install all the necessary packages using the `npm ci` command, after this you can run `npm run docs:dev` to build the documentation. As soon as the build is done, you can go to [http://localhost:8080/samples/](http://localhost:8080/samples/) to see the samples.
+You can see all the ways to use Chart.js in the [step-by-step guide](./usage).

docs/getting-started/installation.md

@@ -1,6 +1,4 @@
----
-title: Installation
----
+# Installation
 
 ## npm
 
@@ -29,7 +27,7 @@ Chart.js built files are also available through [jsDelivr](https://www.jsdelivr.
 
 <https://www.jsdelivr.com/package/npm/chart.js?path=dist>
 
-## Github
+## GitHub
 
 [![github](https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&maxAge=600)](https://github.com/chartjs/Chart.js/releases/latest)
 

docs/getting-started/integration.md

@@ -2,6 +2,8 @@
 
 Chart.js can be integrated with plain JavaScript or with different module loaders. The examples below show how to load Chart.js in different systems.
 
+If you're using a front-end framework (e.g., React, Angular, or Vue), please see [available integrations](https://github.com/chartjs/awesome#integrations).
+
 ## Script Tag
 
 ```html
@@ -118,7 +120,7 @@ Because Chart.js is an ESM library, in CommonJS modules you should use a dynamic
 const { Chart } = await import('chart.js');
 ```
 
-## Require JS
+## RequireJS
 
 **Important:** RequireJS can load only [AMD modules](https://requirejs.org/docs/whyamd.html), so be sure to require one of the UMD builds instead (i.e. `dist/chart.umd.js`).
 
@@ -128,7 +130,9 @@ require(['path/to/chartjs/dist/chart.umd.js'], function(Chart){
 });
 ```
 
-**Note:** in order to use the time scale, you need to make sure [one of the available date adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library are fully loaded **after** requiring Chart.js. For this you can use nested requires:
+:::tip Note
+
+In order to use the time scale, you need to make sure [one of the available date adapters](https://github.com/chartjs/awesome#adapters) and corresponding date library are fully loaded **after** requiring Chart.js. For this you can use nested requires:
 
 ```javascript
 require(['chartjs'], function(Chart) {
@@ -139,3 +143,4 @@ require(['chartjs'], function(Chart) {
     });
 });
 ```
+:::