From 9902a4be041bda22bc545e2d1531d01347e1fc4e Mon Sep 17 00:00:00 2001 From: sbosse Date: Mon, 21 Jul 2025 23:35:40 +0200 Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025 --- js/ui/chart/docs/getting-started/README.md | 43 ++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 js/ui/chart/docs/getting-started/README.md diff --git a/js/ui/chart/docs/getting-started/README.md b/js/ui/chart/docs/getting-started/README.md new file mode 100644 index 0000000..9dd7ed6 --- /dev/null +++ b/js/ui/chart/docs/getting-started/README.md @@ -0,0 +1,43 @@ +# Getting Started + +Let's get started using Chart.js! + +First, we need to have a canvas in our page. + +```html + +``` + +Now that we have a canvas we can use, we need to include Chart.js in our page. + +```html + +``` + +Now, we can create a chart. We add a script to our page: + +```javascript +var ctx = document.getElementById('myChart').getContext('2d'); +var chart = new Chart(ctx, { + // The type of chart we want to create + type: 'line', + + // The data for our dataset + data: { + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'My First dataset', + backgroundColor: 'rgb(255, 99, 132)', + borderColor: 'rgb(255, 99, 132)', + data: [0, 10, 5, 2, 20, 30, 45] + }] + }, + + // Configuration options go here + options: {} +}); +``` + +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. + +All our examples are [available online](https://www.chartjs.org/samples/latest/) but you can also download the `Chart.js.zip` archive attached to every [release](https://github.com/chartjs/Chart.js/releases) to experiment with our samples locally from the `/samples` folder.