installation.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991
  1. <!DOCTYPE HTML>
  2. <html lang="" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  6. <title>Installation · GitBook</title>
  7. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  8. <meta name="description" content="">
  9. <meta name="generator" content="GitBook 3.2.2">
  10. <meta name="author" content="chartjs">
  11. <link rel="stylesheet" href="../gitbook/style.css">
  12. <link rel="stylesheet" href="../gitbook/gitbook-plugin-search-plus/search.css">
  13. <link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
  14. <link rel="stylesheet" href="../gitbook/gitbook-plugin-fontsettings/website.css">
  15. <link rel="stylesheet" href="../style.css">
  16. <meta name="HandheldFriendly" content="true"/>
  17. <meta name="viewport" content="width=device-width, initial-scale=1">
  18. <meta name="apple-mobile-web-app-capable" content="yes">
  19. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  20. <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
  21. <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
  22. <link rel="next" href="integration.html" />
  23. <link rel="prev" href="./" />
  24. <link rel="stylesheet" href="../gitbook/gitbook-plugin-chartjs/style.css">
  25. <script src="../gitbook/gitbook-plugin-chartjs/Chart.bundle.js"></script>
  26. <script src="../gitbook/gitbook-plugin-chartjs/chartjs-plugin-deferred.js"></script>
  27. </head>
  28. <body>
  29. <div class="book">
  30. <div class="book-summary">
  31. <div id="book-search-input" role="search">
  32. <input type="text" placeholder="Type to search" />
  33. </div>
  34. <nav role="navigation">
  35. <ul class="summary">
  36. <li class="chapter " data-level="1.1" data-path="../">
  37. <a href="../">
  38. Chart.js
  39. </a>
  40. </li>
  41. <li class="chapter " data-level="1.2" data-path="./">
  42. <a href="./">
  43. Getting Started
  44. </a>
  45. <ul class="articles">
  46. <li class="chapter active" data-level="1.2.1" data-path="installation.html">
  47. <a href="installation.html">
  48. Installation
  49. </a>
  50. </li>
  51. <li class="chapter " data-level="1.2.2" data-path="integration.html">
  52. <a href="integration.html">
  53. Integration
  54. </a>
  55. </li>
  56. <li class="chapter " data-level="1.2.3" data-path="usage.html">
  57. <a href="usage.html">
  58. Usage
  59. </a>
  60. </li>
  61. </ul>
  62. </li>
  63. <li class="chapter " data-level="1.3" data-path="../general/">
  64. <a href="../general/">
  65. General
  66. </a>
  67. <ul class="articles">
  68. <li class="chapter " data-level="1.3.1" data-path="../general/responsive.html">
  69. <a href="../general/responsive.html">
  70. Responsive
  71. </a>
  72. </li>
  73. <li class="chapter " data-level="1.3.2" data-path="../general/interactions/">
  74. <a href="../general/interactions/">
  75. Interactions
  76. </a>
  77. <ul class="articles">
  78. <li class="chapter " data-level="1.3.2.1" data-path="../general/interactions/events.html">
  79. <a href="../general/interactions/events.html">
  80. Events
  81. </a>
  82. </li>
  83. <li class="chapter " data-level="1.3.2.2" data-path="../general/interactions/modes.html">
  84. <a href="../general/interactions/modes.html">
  85. Modes
  86. </a>
  87. </li>
  88. </ul>
  89. </li>
  90. <li class="chapter " data-level="1.3.3" data-path="../general/options.html">
  91. <a href="../general/options.html">
  92. Options
  93. </a>
  94. </li>
  95. <li class="chapter " data-level="1.3.4" data-path="../general/colors.html">
  96. <a href="../general/colors.html">
  97. Colors
  98. </a>
  99. </li>
  100. <li class="chapter " data-level="1.3.5" data-path="../general/fonts.html">
  101. <a href="../general/fonts.html">
  102. Fonts
  103. </a>
  104. </li>
  105. </ul>
  106. </li>
  107. <li class="chapter " data-level="1.4" data-path="../configuration/">
  108. <a href="../configuration/">
  109. Configuration
  110. </a>
  111. <ul class="articles">
  112. <li class="chapter " data-level="1.4.1" data-path="../configuration/animations.html">
  113. <a href="../configuration/animations.html">
  114. Animations
  115. </a>
  116. </li>
  117. <li class="chapter " data-level="1.4.2" data-path="../configuration/layout.html">
  118. <a href="../configuration/layout.html">
  119. Layout
  120. </a>
  121. </li>
  122. <li class="chapter " data-level="1.4.3" data-path="../configuration/legend.html">
  123. <a href="../configuration/legend.html">
  124. Legend
  125. </a>
  126. </li>
  127. <li class="chapter " data-level="1.4.4" data-path="../configuration/title.html">
  128. <a href="../configuration/title.html">
  129. Title
  130. </a>
  131. </li>
  132. <li class="chapter " data-level="1.4.5" data-path="../configuration/tooltip.html">
  133. <a href="../configuration/tooltip.html">
  134. Tooltip
  135. </a>
  136. </li>
  137. <li class="chapter " data-level="1.4.6" data-path="../configuration/elements.html">
  138. <a href="../configuration/elements.html">
  139. Elements
  140. </a>
  141. </li>
  142. </ul>
  143. </li>
  144. <li class="chapter " data-level="1.5" data-path="../charts/">
  145. <a href="../charts/">
  146. Charts
  147. </a>
  148. <ul class="articles">
  149. <li class="chapter " data-level="1.5.1" data-path="../charts/line.html">
  150. <a href="../charts/line.html">
  151. Line
  152. </a>
  153. </li>
  154. <li class="chapter " data-level="1.5.2" data-path="../charts/bar.html">
  155. <a href="../charts/bar.html">
  156. Bar
  157. </a>
  158. </li>
  159. <li class="chapter " data-level="1.5.3" data-path="../charts/radar.html">
  160. <a href="../charts/radar.html">
  161. Radar
  162. </a>
  163. </li>
  164. <li class="chapter " data-level="1.5.4" data-path="../charts/doughnut.html">
  165. <a href="../charts/doughnut.html">
  166. Doughnut & Pie
  167. </a>
  168. </li>
  169. <li class="chapter " data-level="1.5.5" data-path="../charts/polar.html">
  170. <a href="../charts/polar.html">
  171. Polar Area
  172. </a>
  173. </li>
  174. <li class="chapter " data-level="1.5.6" data-path="../charts/bubble.html">
  175. <a href="../charts/bubble.html">
  176. Bubble
  177. </a>
  178. </li>
  179. <li class="chapter " data-level="1.5.7" data-path="../charts/scatter.html">
  180. <a href="../charts/scatter.html">
  181. Scatter
  182. </a>
  183. </li>
  184. <li class="chapter " data-level="1.5.8" data-path="../charts/area.html">
  185. <a href="../charts/area.html">
  186. Area
  187. </a>
  188. </li>
  189. <li class="chapter " data-level="1.5.9" data-path="../charts/mixed.html">
  190. <a href="../charts/mixed.html">
  191. Mixed
  192. </a>
  193. </li>
  194. </ul>
  195. </li>
  196. <li class="chapter " data-level="1.6" data-path="../axes/">
  197. <a href="../axes/">
  198. Axes
  199. </a>
  200. <ul class="articles">
  201. <li class="chapter " data-level="1.6.1" data-path="../axes/cartesian/">
  202. <a href="../axes/cartesian/">
  203. Cartesian
  204. </a>
  205. <ul class="articles">
  206. <li class="chapter " data-level="1.6.1.1" data-path="../axes/cartesian/category.html">
  207. <a href="../axes/cartesian/category.html">
  208. Category
  209. </a>
  210. </li>
  211. <li class="chapter " data-level="1.6.1.2" data-path="../axes/cartesian/linear.html">
  212. <a href="../axes/cartesian/linear.html">
  213. Linear
  214. </a>
  215. </li>
  216. <li class="chapter " data-level="1.6.1.3" data-path="../axes/cartesian/logarithmic.html">
  217. <a href="../axes/cartesian/logarithmic.html">
  218. Logarithmic
  219. </a>
  220. </li>
  221. <li class="chapter " data-level="1.6.1.4" data-path="../axes/cartesian/time.html">
  222. <a href="../axes/cartesian/time.html">
  223. Time
  224. </a>
  225. </li>
  226. </ul>
  227. </li>
  228. <li class="chapter " data-level="1.6.2" data-path="../axes/radial/">
  229. <a href="../axes/radial/">
  230. Radial
  231. </a>
  232. <ul class="articles">
  233. <li class="chapter " data-level="1.6.2.1" data-path="../axes/radial/linear.html">
  234. <a href="../axes/radial/linear.html">
  235. Linear
  236. </a>
  237. </li>
  238. </ul>
  239. </li>
  240. <li class="chapter " data-level="1.6.3" data-path="../axes/labelling.html">
  241. <a href="../axes/labelling.html">
  242. Labelling
  243. </a>
  244. </li>
  245. <li class="chapter " data-level="1.6.4" data-path="../axes/styling.html">
  246. <a href="../axes/styling.html">
  247. Styling
  248. </a>
  249. </li>
  250. </ul>
  251. </li>
  252. <li class="chapter " data-level="1.7" data-path="../developers/">
  253. <a href="../developers/">
  254. Developers
  255. </a>
  256. <ul class="articles">
  257. <li class="chapter " data-level="1.7.1" data-path="../developers/api.html">
  258. <a href="../developers/api.html">
  259. Chart.js API
  260. </a>
  261. </li>
  262. <li class="chapter " data-level="1.7.2" data-path="../developers/updates.html">
  263. <a href="../developers/updates.html">
  264. Updating Charts
  265. </a>
  266. </li>
  267. <li class="chapter " data-level="1.7.3" data-path="../developers/plugins.html">
  268. <a href="../developers/plugins.html">
  269. Plugins
  270. </a>
  271. </li>
  272. <li class="chapter " data-level="1.7.4" data-path="../developers/charts.html">
  273. <a href="../developers/charts.html">
  274. New Charts
  275. </a>
  276. </li>
  277. <li class="chapter " data-level="1.7.5" data-path="../developers/axes.html">
  278. <a href="../developers/axes.html">
  279. New Axes
  280. </a>
  281. </li>
  282. <li class="chapter " data-level="1.7.6" data-path="../developers/contributing.html">
  283. <a href="../developers/contributing.html">
  284. Contributing
  285. </a>
  286. </li>
  287. </ul>
  288. </li>
  289. <li class="chapter " data-level="1.8" data-path="../notes/">
  290. <a href="../notes/">
  291. Additional Notes
  292. </a>
  293. <ul class="articles">
  294. <li class="chapter " data-level="1.8.1" data-path="../notes/comparison.html">
  295. <a href="../notes/comparison.html">
  296. Comparison Table
  297. </a>
  298. </li>
  299. <li class="chapter " data-level="1.8.2" data-path="../notes/extensions.html">
  300. <a href="../notes/extensions.html">
  301. Popular Extensions
  302. </a>
  303. </li>
  304. <li class="chapter " data-level="1.8.3" data-path="../notes/license.html">
  305. <a href="../notes/license.html">
  306. License
  307. </a>
  308. </li>
  309. </ul>
  310. </li>
  311. <li class="divider"></li>
  312. <li>
  313. <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
  314. Published with GitBook
  315. </a>
  316. </li>
  317. </ul>
  318. </nav>
  319. </div>
  320. <div class="book-body">
  321. <div class="body-inner">
  322. <div class="book-header" role="navigation">
  323. <!-- Title -->
  324. <h1>
  325. <i class="fa fa-circle-o-notch fa-spin"></i>
  326. <a href=".." >Installation</a>
  327. </h1>
  328. </div>
  329. <div class="page-wrapper" tabindex="-1" role="main">
  330. <div class="page-inner">
  331. <div class="search-plus" id="book-search-results">
  332. <div class="search-noresults">
  333. <section class="normal markdown-section">
  334. <h1 id="installation">Installation</h1>
  335. <p>Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way.</p>
  336. <h2 id="npm">npm</h2>
  337. <p><a href="https://npmjs.com/package/chart.js" target="_blank"><img src="https://img.shields.io/npm/v/chart.js.svg?style=flat-square&amp;maxAge=600" alt="npm"></a>
  338. <a href="https://npmjs.com/package/chart.js" target="_blank"><img src="https://img.shields.io/npm/dm/chart.js.svg?style=flat-square&amp;maxAge=600" alt="npm"></a></p>
  339. <pre><code class="lang-bash">npm install chart.js --save
  340. </code></pre>
  341. <h2 id="bower">Bower</h2>
  342. <p><a href="https://libraries.io/bower/chartjs" target="_blank"><img src="https://img.shields.io/bower/v/chartjs.svg?style=flat-square&amp;maxAge=600" alt="bower"></a></p>
  343. <pre><code class="lang-bash">bower install chart.js --save
  344. </code></pre>
  345. <h2 id="cdn">CDN</h2>
  346. <h3 id="cdnjs">CDNJS</h3>
  347. <p><a href="https://cdnjs.com/libraries/Chart.js" target="_blank"><img src="https://img.shields.io/cdnjs/v/Chart.js.svg?style=flat-square&amp;maxAge=600" alt="cdnjs"></a></p>
  348. <p>Chart.js built files are available on <a href="https://cdnjs.com/" target="_blank">CDNJS</a>:</p>
  349. <p><a href="https://cdnjs.com/libraries/Chart.js" target="_blank">https://cdnjs.com/libraries/Chart.js</a></p>
  350. <h3 id="jsdelivr">jsDelivr</h3>
  351. <p><a href="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/" target="_blank"><img src="https://img.shields.io/npm/v/chart.js.svg?label=jsdelivr&amp;style=flat-square&amp;maxAge=600" alt="jsdelivr"></a> <a href="https://www.jsdelivr.com/package/npm/chart.js" target="_blank"><img src="https://data.jsdelivr.com/v1/package/npm/chart.js/badge" alt="jsdelivr hits"></a></p>
  352. <p>Chart.js built files are also available through <a href="http://www.jsdelivr.com/" target="_blank">jsDelivr</a>:</p>
  353. <p><a href="https://www.jsdelivr.com/package/npm/chart.js?path=dist" target="_blank">https://www.jsdelivr.com/package/npm/chart.js?path=dist</a></p>
  354. <h2 id="github">Github</h2>
  355. <p><a href="https://github.com/chartjs/Chart.js/releases/latest" target="_blank"><img src="https://img.shields.io/github/release/chartjs/Chart.js.svg?style=flat-square&amp;maxAge=600" alt="github"></a></p>
  356. <p>You can download the latest version of <a href="https://github.com/chartjs/Chart.js/releases/latest" target="_blank">Chart.js on GitHub</a>.</p>
  357. <p>If you download or clone the repository, you must <a href="../developers/contributing.html#building-chartjs">build</a> Chart.js to generate the dist files. Chart.js no longer comes with prebuilt release versions, so an alternative option to downloading the repo is <strong>strongly</strong> advised.</p>
  358. <h1 id="selecting-the-correct-build">Selecting the Correct Build</h1>
  359. <p>Chart.js provides two different builds that are available for your use.</p>
  360. <h2 id="stand-alone-build">Stand-Alone Build</h2>
  361. <p>Files:</p>
  362. <ul>
  363. <li><code>dist/Chart.js</code></li>
  364. <li><code>dist/Chart.min.js</code></li>
  365. </ul>
  366. <p>This version only includes Chart.js. If this version is used and you require the use of the time axis, <a href="http://momentjs.com/" target="_blank">Moment.js</a> will need to be included before Chart.js.</p>
  367. <h2 id="bundled-build">Bundled Build</h2>
  368. <p>Files:</p>
  369. <ul>
  370. <li><code>dist/Chart.bundle.js</code></li>
  371. <li><code>dist/Chart.bundle.min.js</code></li>
  372. </ul>
  373. <p>The bundled version includes Moment.js built into the same file. This version should be used if you wish to use time axes and want a single file to include. 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.</p>
  374. </section>
  375. </div>
  376. <div class="search-results">
  377. <div class="has-results">
  378. <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
  379. <ul class="search-results-list"></ul>
  380. </div>
  381. <div class="no-results">
  382. <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
  383. </div>
  384. </div>
  385. </div>
  386. </div>
  387. </div>
  388. </div>
  389. <a href="./" class="navigation navigation-prev " aria-label="Previous page: Getting Started">
  390. <i class="fa fa-angle-left"></i>
  391. </a>
  392. <a href="integration.html" class="navigation navigation-next " aria-label="Next page: Integration">
  393. <i class="fa fa-angle-right"></i>
  394. </a>
  395. </div>
  396. <script>
  397. var gitbook = gitbook || [];
  398. gitbook.push(function() {
  399. gitbook.page.hasChanged({"page":{"title":"Installation","level":"1.2.1","depth":2,"next":{"title":"Integration","level":"1.2.2","depth":2,"path":"getting-started/integration.md","ref":"getting-started/integration.md","articles":[]},"previous":{"title":"Getting Started","level":"1.2","depth":1,"path":"getting-started/README.md","ref":"getting-started/README.md","articles":[{"title":"Installation","level":"1.2.1","depth":2,"path":"getting-started/installation.md","ref":"getting-started/installation.md","articles":[]},{"title":"Integration","level":"1.2.2","depth":2,"path":"getting-started/integration.md","ref":"getting-started/integration.md","articles":[]},{"title":"Usage","level":"1.2.3","depth":2,"path":"getting-started/usage.md","ref":"getting-started/usage.md","articles":[]}]},"dir":"ltr"},"config":{"plugins":["-lunr","-search","search-plus","anchorjs","chartjs","ga"],"root":"./docs","styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"anchorjs":{"icon":"#","placement":"left","visible":"always"},"ga":{"configuration":"auto","token":"UA-28909194-3"},"theme-default":{"styles":{"website":"style.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false},"search-plus":{},"chartjs":{"defaults":null},"highlight":{},"sharing":{"facebook":true,"twitter":true,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"fontsettings":{"theme":"white","family":"sans","size":2}},"theme":"default","author":"chartjs","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"gitbook":"3.2.2"},"file":{"path":"getting-started/installation.md","mtime":"2017-10-28T15:03:49.270Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2017-10-28T15:09:53.587Z"},"basePath":"..","book":{"language":""}});
  400. });
  401. </script>
  402. </div>
  403. <script src="../gitbook/gitbook.js"></script>
  404. <script src="../gitbook/theme.js"></script>
  405. <script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
  406. <script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>
  407. <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/3.1.1/anchor.min.js"></script>
  408. <script src="../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
  409. <script src="../gitbook/gitbook-plugin-ga/plugin.js"></script>
  410. <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
  411. <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
  412. </body>
  413. </html>