| commit | author | age | ||
| 83c3f6 | 1 | # Chart.js |
| SP | 2 | |
| 3 | [](https://chartjs-slack.herokuapp.com/) | |
| 4 | ||
| 5 | ## Installation | |
| 6 | ||
| 7 | You can download the latest version of Chart.js from the [GitHub releases](https://github.com/chartjs/Chart.js/releases/latest) or use a [Chart.js CDN](https://cdnjs.com/libraries/Chart.js). Detailed installation instructions can be found on the [installation](./getting-started/installation.md) page. | |
| 8 | ||
| 9 | ## Creating a Chart | |
| 10 | ||
| 11 | 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. | |
| 12 | ||
| 13 | 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](./getting-started/usage.md) | |
| 14 | ```html | |
| 15 | <canvas id="myChart" width="400" height="400"></canvas> | |
| 16 | <script> | |
| 17 | var ctx = document.getElementById("myChart").getContext('2d'); | |
| 18 | var myChart = new Chart(ctx, { | |
| 19 | type: 'bar', | |
| 20 | data: { | |
| 21 | labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], | |
| 22 | datasets: [{ | |
| 23 | label: '# of Votes', | |
| 24 | data: [12, 19, 3, 5, 2, 3], | |
| 25 | backgroundColor: [ | |
| 26 | 'rgba(255, 99, 132, 0.2)', | |
| 27 | 'rgba(54, 162, 235, 0.2)', | |
| 28 | 'rgba(255, 206, 86, 0.2)', | |
| 29 | 'rgba(75, 192, 192, 0.2)', | |
| 30 | 'rgba(153, 102, 255, 0.2)', | |
| 31 | 'rgba(255, 159, 64, 0.2)' | |
| 32 | ], | |
| 33 | borderColor: [ | |
| 34 | 'rgba(255,99,132,1)', | |
| 35 | 'rgba(54, 162, 235, 1)', | |
| 36 | 'rgba(255, 206, 86, 1)', | |
| 37 | 'rgba(75, 192, 192, 1)', | |
| 38 | 'rgba(153, 102, 255, 1)', | |
| 39 | 'rgba(255, 159, 64, 1)' | |
| 40 | ], | |
| 41 | borderWidth: 1 | |
| 42 | }] | |
| 43 | }, | |
| 44 | options: { | |
| 45 | scales: { | |
| 46 | yAxes: [{ | |
| 47 | ticks: { | |
| 48 | beginAtZero:true | |
| 49 | } | |
| 50 | }] | |
| 51 | } | |
| 52 | } | |
| 53 | }); | |
| 54 | </script> | |
| 55 | ``` | |
| 56 | ||
| 57 | ## Contributing | |
| 58 | ||
| 59 | Before submitting an issue or a pull request to the project, please take a moment to look over the [contributing guidelines](https://github.com/chartjs/Chart.js/blob/master/docs/developers/contributing.md) first. | |
| 60 | ||
| 61 | For support using Chart.js, please post questions with the [`chartjs` tag on Stack Overflow](http://stackoverflow.com/questions/tagged/chartjs). | |
| 62 | ||
| 63 | ## License | |
| 64 | ||
| 65 | Chart.js is available under the [MIT license](http://opensource.org/licenses/MIT). | |
