mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
1.4 KiB
1.4 KiB
Getting Started
Let's get started using Chart.js!
First, we need to have a canvas in our page. It's recommended to give the chart its own container for responsiveness.
<div>
<canvas id="myChart"></canvas>
</div>
Now that we have a canvas we can use, we need to include Chart.js in our page.
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
Now, we can create a chart. We add a script to our page:
// <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,
options: {}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
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 but you can also download the Chart.js.zip archive attached to every release to experiment with our samples locally from the /samples folder.