mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 20:29:12 +02:00
b2f7adc2b4
Integrate the upcoming awesome list and make our README.md welcome page more user friendly by displaying the Chart.js logo, adding the docs TOC and removing instructions that was already in the docs. |
||
---|---|---|
.. | ||
axes | ||
charts | ||
configuration | ||
developers | ||
general | ||
getting-started | ||
notes | ||
README.md | ||
style.css | ||
SUMMARY.md |
Chart.js
Installation
You can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN. Detailed installation instructions can be found on the installation page.
Creating a Chart
It's easy to get started with Chart.js. All that's required is the script included in your page along with a single <canvas>
node to render the chart.
In this example, we create a bar chart for a single dataset and render that in our page. You can see all the ways to use Chart.js in the usage documentation.
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var 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],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
Contributing
Before submitting an issue or a pull request to the project, please take a moment to look over the contributing guidelines first.
For support using Chart.js, please post questions with the chartjs
tag on Stack Overflow.
License
Chart.js is available under the MIT license.