You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

00-Getting-Started.md 3.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. ---
  2. title: Getting started
  3. anchor: getting-started
  4. ---
  5. ### Download Chart.js
  6. To download a zip, go to [Chart.js on Github](https://github.com/chartjs/Chart.js) and choose the version that is right for your application.
  7. * [Standard build](https://raw.githubusercontent.com/chartjs/Chart.js/master/dist/Chart.js) (~31kB gzipped)
  8. * [Bundled with Moment.js](https://raw.githubusercontent.com/chartjs/Chart.js/master/dist/Chart.bundle.js) (~45kB gzipped)
  9. * [CDN Versions](https://cdnjs.com/libraries/Chart.js)
  10. To install via npm / bower:
  11. ```bash
  12. npm install chart.js --save
  13. ```
  14. ```bash
  15. bower install Chart.js --save
  16. ```
  17. ### Selecting the Correct Build
  18. Chart.js provides two different builds that are available for your use. The `Chart.js` and `Chart.min.js` files include Chart.js and the accompanying color parsing library. If this version is used and you require the use of the time axis, [Moment.js](http://momentjs.com/) will need to be included before Chart.js.
  19. The `Chart.bundle.js` and `Chart.bundle.min.js` builds include Moment.js in a single file. This version should be used if you require time axes and want a single file to include, select this version. Do not use this build if your application already includes Moment.js. If you do, Moment.js will be included twice, increasing the page load time and potentially introducing version issues.
  20. ### Installation
  21. To import Chart.js using an old-school script tag:
  22. ```html
  23. <script src="Chart.js"></script>
  24. <script>
  25. var myChart = new Chart({...})
  26. </script>
  27. ```
  28. To import Chart.js using an awesome module loader:
  29. ```javascript
  30. // Using CommonJS
  31. var Chart = require('src/chart.js')
  32. var myChart = new Chart({...})
  33. // ES6
  34. import Chart from 'src/chart.js'
  35. let myChart = new Chart({...})
  36. // Using requirejs
  37. require(['path/to/Chartjs'], function(Chart){
  38. var myChart = new Chart({...})
  39. })
  40. ```
  41. ### Creating a Chart
  42. To create a chart, we need to instantiate the `Chart` class. To do this, we need to pass in the node, jQuery instance, or 2d context of the canvas of where we want to draw the chart. Here's an example.
  43. ```html
  44. <canvas id="myChart" width="400" height="400"></canvas>
  45. ```
  46. ```javascript
  47. // Any of the following formats may be used
  48. var ctx = document.getElementById("myChart");
  49. var ctx = document.getElementById("myChart").getContext("2d");
  50. var ctx = $("#myChart");
  51. ```
  52. Once you have the element or context, you're ready to instantiate a pre-defined chart-type or create your own!
  53. The following example instantiates a bar chart showing the number of votes for different colors and the y-axis starting at 0.
  54. ```html
  55. <canvas id="myChart" width="400" height="400"></canvas>
  56. <script>
  57. var ctx = document.getElementById("myChart");
  58. var myChart = new Chart(ctx, {
  59. type: 'bar',
  60. data: {
  61. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  62. datasets: [{
  63. label: '# of Votes',
  64. data: [12, 19, 3, 5, 2, 3],
  65. backgroundColor: [
  66. 'rgba(255, 99, 132, 0.2)',
  67. 'rgba(54, 162, 235, 0.2)',
  68. 'rgba(255, 206, 86, 0.2)',
  69. 'rgba(75, 192, 192, 0.2)',
  70. 'rgba(153, 102, 255, 0.2)',
  71. 'rgba(255, 159, 64, 0.2)'
  72. ],
  73. borderColor: [
  74. 'rgba(255,99,132,1)',
  75. 'rgba(54, 162, 235, 1)',
  76. 'rgba(255, 206, 86, 1)',
  77. 'rgba(75, 192, 192, 1)',
  78. 'rgba(153, 102, 255, 1)',
  79. 'rgba(255, 159, 64, 1)'
  80. ],
  81. borderWidth: 1
  82. }]
  83. },
  84. options: {
  85. scales: {
  86. yAxes: [{
  87. ticks: {
  88. beginAtZero:true
  89. }
  90. }]
  91. }
  92. }
  93. });
  94. </script>
  95. ```
  96. 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.