installation.html 27 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004
  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 · Chart.js documentation</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, user-scalable=no">
  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/device-pixel-ratio.html">
  74. <a href="../general/device-pixel-ratio.html">
  75. Pixel Ratio
  76. </a>
  77. </li>
  78. <li class="chapter " data-level="1.3.3" data-path="../general/interactions/">
  79. <a href="../general/interactions/">
  80. Interactions
  81. </a>
  82. <ul class="articles">
  83. <li class="chapter " data-level="1.3.3.1" data-path="../general/interactions/events.html">
  84. <a href="../general/interactions/events.html">
  85. Events
  86. </a>
  87. </li>
  88. <li class="chapter " data-level="1.3.3.2" data-path="../general/interactions/modes.html">
  89. <a href="../general/interactions/modes.html">
  90. Modes
  91. </a>
  92. </li>
  93. </ul>
  94. </li>
  95. <li class="chapter " data-level="1.3.4" data-path="../general/options.html">
  96. <a href="../general/options.html">
  97. Options
  98. </a>
  99. </li>
  100. <li class="chapter " data-level="1.3.5" data-path="../general/colors.html">
  101. <a href="../general/colors.html">
  102. Colors
  103. </a>
  104. </li>
  105. <li class="chapter " data-level="1.3.6" data-path="../general/fonts.html">
  106. <a href="../general/fonts.html">
  107. Fonts
  108. </a>
  109. </li>
  110. </ul>
  111. </li>
  112. <li class="chapter " data-level="1.4" data-path="../configuration/">
  113. <a href="../configuration/">
  114. Configuration
  115. </a>
  116. <ul class="articles">
  117. <li class="chapter " data-level="1.4.1" data-path="../configuration/animations.html">
  118. <a href="../configuration/animations.html">
  119. Animations
  120. </a>
  121. </li>
  122. <li class="chapter " data-level="1.4.2" data-path="../configuration/layout.html">
  123. <a href="../configuration/layout.html">
  124. Layout
  125. </a>
  126. </li>
  127. <li class="chapter " data-level="1.4.3" data-path="../configuration/legend.html">
  128. <a href="../configuration/legend.html">
  129. Legend
  130. </a>
  131. </li>
  132. <li class="chapter " data-level="1.4.4" data-path="../configuration/title.html">
  133. <a href="../configuration/title.html">
  134. Title
  135. </a>
  136. </li>
  137. <li class="chapter " data-level="1.4.5" data-path="../configuration/tooltip.html">
  138. <a href="../configuration/tooltip.html">
  139. Tooltip
  140. </a>
  141. </li>
  142. <li class="chapter " data-level="1.4.6" data-path="../configuration/elements.html">
  143. <a href="../configuration/elements.html">
  144. Elements
  145. </a>
  146. </li>
  147. </ul>
  148. </li>
  149. <li class="chapter " data-level="1.5" data-path="../charts/">
  150. <a href="../charts/">
  151. Charts
  152. </a>
  153. <ul class="articles">
  154. <li class="chapter " data-level="1.5.1" data-path="../charts/line.html">
  155. <a href="../charts/line.html">
  156. Line
  157. </a>
  158. </li>
  159. <li class="chapter " data-level="1.5.2" data-path="../charts/bar.html">
  160. <a href="../charts/bar.html">
  161. Bar
  162. </a>
  163. </li>
  164. <li class="chapter " data-level="1.5.3" data-path="../charts/radar.html">
  165. <a href="../charts/radar.html">
  166. Radar
  167. </a>
  168. </li>
  169. <li class="chapter " data-level="1.5.4" data-path="../charts/doughnut.html">
  170. <a href="../charts/doughnut.html">
  171. Doughnut & Pie
  172. </a>
  173. </li>
  174. <li class="chapter " data-level="1.5.5" data-path="../charts/polar.html">
  175. <a href="../charts/polar.html">
  176. Polar Area
  177. </a>
  178. </li>
  179. <li class="chapter " data-level="1.5.6" data-path="../charts/bubble.html">
  180. <a href="../charts/bubble.html">
  181. Bubble
  182. </a>
  183. </li>
  184. <li class="chapter " data-level="1.5.7" data-path="../charts/scatter.html">
  185. <a href="../charts/scatter.html">
  186. Scatter
  187. </a>
  188. </li>
  189. <li class="chapter " data-level="1.5.8" data-path="../charts/area.html">
  190. <a href="../charts/area.html">
  191. Area
  192. </a>
  193. </li>
  194. <li class="chapter " data-level="1.5.9" data-path="../charts/mixed.html">
  195. <a href="../charts/mixed.html">
  196. Mixed
  197. </a>
  198. </li>
  199. </ul>
  200. </li>
  201. <li class="chapter " data-level="1.6" data-path="../axes/">
  202. <a href="../axes/">
  203. Axes
  204. </a>
  205. <ul class="articles">
  206. <li class="chapter " data-level="1.6.1" data-path="../axes/cartesian/">
  207. <a href="../axes/cartesian/">
  208. Cartesian
  209. </a>
  210. <ul class="articles">
  211. <li class="chapter " data-level="1.6.1.1" data-path="../axes/cartesian/category.html">
  212. <a href="../axes/cartesian/category.html">
  213. Category
  214. </a>
  215. </li>
  216. <li class="chapter " data-level="1.6.1.2" data-path="../axes/cartesian/linear.html">
  217. <a href="../axes/cartesian/linear.html">
  218. Linear
  219. </a>
  220. </li>
  221. <li class="chapter " data-level="1.6.1.3" data-path="../axes/cartesian/logarithmic.html">
  222. <a href="../axes/cartesian/logarithmic.html">
  223. Logarithmic
  224. </a>
  225. </li>
  226. <li class="chapter " data-level="1.6.1.4" data-path="../axes/cartesian/time.html">
  227. <a href="../axes/cartesian/time.html">
  228. Time
  229. </a>
  230. </li>
  231. </ul>
  232. </li>
  233. <li class="chapter " data-level="1.6.2" data-path="../axes/radial/">
  234. <a href="../axes/radial/">
  235. Radial
  236. </a>
  237. <ul class="articles">
  238. <li class="chapter " data-level="1.6.2.1" data-path="../axes/radial/linear.html">
  239. <a href="../axes/radial/linear.html">
  240. Linear
  241. </a>
  242. </li>
  243. </ul>
  244. </li>
  245. <li class="chapter " data-level="1.6.3" data-path="../axes/labelling.html">
  246. <a href="../axes/labelling.html">
  247. Labelling
  248. </a>
  249. </li>
  250. <li class="chapter " data-level="1.6.4" data-path="../axes/styling.html">
  251. <a href="../axes/styling.html">
  252. Styling
  253. </a>
  254. </li>
  255. </ul>
  256. </li>
  257. <li class="chapter " data-level="1.7" data-path="../developers/">
  258. <a href="../developers/">
  259. Developers
  260. </a>
  261. <ul class="articles">
  262. <li class="chapter " data-level="1.7.1" data-path="../developers/api.html">
  263. <a href="../developers/api.html">
  264. Chart.js API
  265. </a>
  266. </li>
  267. <li class="chapter " data-level="1.7.2" data-path="../developers/updates.html">
  268. <a href="../developers/updates.html">
  269. Updating Charts
  270. </a>
  271. </li>
  272. <li class="chapter " data-level="1.7.3" data-path="../developers/plugins.html">
  273. <a href="../developers/plugins.html">
  274. Plugins
  275. </a>
  276. </li>
  277. <li class="chapter " data-level="1.7.4" data-path="../developers/charts.html">
  278. <a href="../developers/charts.html">
  279. New Charts
  280. </a>
  281. </li>
  282. <li class="chapter " data-level="1.7.5" data-path="../developers/axes.html">
  283. <a href="../developers/axes.html">
  284. New Axes
  285. </a>
  286. </li>
  287. <li class="chapter " data-level="1.7.6" data-path="../developers/contributing.html">
  288. <a href="../developers/contributing.html">
  289. Contributing
  290. </a>
  291. </li>
  292. </ul>
  293. </li>
  294. <li class="chapter " data-level="1.8" data-path="../notes/">
  295. <a href="../notes/">
  296. Additional Notes
  297. </a>
  298. <ul class="articles">
  299. <li class="chapter " data-level="1.8.1" data-path="../notes/comparison.html">
  300. <a href="../notes/comparison.html">
  301. Comparison Table
  302. </a>
  303. </li>
  304. <li class="chapter " data-level="1.8.2" data-path="../notes/extensions.html">
  305. <a href="../notes/extensions.html">
  306. Popular Extensions
  307. </a>
  308. </li>
  309. <li class="chapter " data-level="1.8.3" data-path="../notes/license.html">
  310. <a href="../notes/license.html">
  311. License
  312. </a>
  313. </li>
  314. </ul>
  315. </li>
  316. <li class="divider"></li>
  317. <li>
  318. <a href="https://www.gitbook.com" target="blank" class="gitbook-link">
  319. Published with GitBook
  320. </a>
  321. </li>
  322. </ul>
  323. </nav>
  324. </div>
  325. <div class="book-body">
  326. <div class="body-inner">
  327. <div class="book-header" role="navigation">
  328. <!-- Title -->
  329. <h1>
  330. <i class="fa fa-circle-o-notch fa-spin"></i>
  331. <a href=".." >Installation</a>
  332. </h1>
  333. </div>
  334. <div class="page-wrapper" tabindex="-1" role="main">
  335. <div class="page-inner">
  336. <div class="search-plus" id="book-search-results">
  337. <div class="search-noresults">
  338. <section class="normal markdown-section">
  339. <h1 id="installation">Installation</h1>
  340. <p>Chart.js can be installed via npm or bower. It is recommended to get Chart.js this way.</p>
  341. <h2 id="npm">npm</h2>
  342. <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>
  343. <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>
  344. <pre><code class="lang-bash">npm install chart.js --save
  345. </code></pre>
  346. <h2 id="bower">Bower</h2>
  347. <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>
  348. <pre><code class="lang-bash">bower install chart.js --save
  349. </code></pre>
  350. <h2 id="cdn">CDN</h2>
  351. <h3 id="cdnjs">CDNJS</h3>
  352. <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>
  353. <p>Chart.js built files are available on <a href="https://cdnjs.com/" target="_blank">CDNJS</a>:</p>
  354. <p><a href="https://cdnjs.com/libraries/Chart.js" target="_blank">https://cdnjs.com/libraries/Chart.js</a></p>
  355. <h3 id="jsdelivr">jsDelivr</h3>
  356. <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>
  357. <p>Chart.js built files are also available through <a href="http://www.jsdelivr.com/" target="_blank">jsDelivr</a>:</p>
  358. <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>
  359. <h2 id="github">Github</h2>
  360. <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>
  361. <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>
  362. <p>If you download or clone the repository, you must <a href="../developers/contributing.html#building-and-testing">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>
  363. <h1 id="selecting-the-correct-build">Selecting the Correct Build</h1>
  364. <p>Chart.js provides two different builds for you to choose: <code>Stand-Alone Build</code>, <code>Bundled Build</code>.</p>
  365. <h2 id="stand-alone-build">Stand-Alone Build</h2>
  366. <p>Files:</p>
  367. <ul>
  368. <li><code>dist/Chart.js</code></li>
  369. <li><code>dist/Chart.min.js</code></li>
  370. </ul>
  371. <p>The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include <a href="http://momentjs.com/" target="_blank">Moment.js</a> before Chart.js for the functionality of the time axis.</p>
  372. <h2 id="bundled-build">Bundled Build</h2>
  373. <p>Files:</p>
  374. <ul>
  375. <li><code>dist/Chart.bundle.js</code></li>
  376. <li><code>dist/Chart.bundle.min.js</code></li>
  377. </ul>
  378. <p>The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatability issues.</p>
  379. </section>
  380. </div>
  381. <div class="search-results">
  382. <div class="has-results">
  383. <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
  384. <ul class="search-results-list"></ul>
  385. </div>
  386. <div class="no-results">
  387. <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
  388. </div>
  389. </div>
  390. </div>
  391. </div>
  392. </div>
  393. </div>
  394. <a href="./" class="navigation navigation-prev " aria-label="Previous page: Getting Started">
  395. <i class="fa fa-angle-left"></i>
  396. </a>
  397. <a href="integration.html" class="navigation navigation-next " aria-label="Next page: Integration">
  398. <i class="fa fa-angle-right"></i>
  399. </a>
  400. </div>
  401. <script>
  402. var gitbook = gitbook || [];
  403. gitbook.push(function() {
  404. 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":{},"title":"Chart.js documentation","gitbook":"3.2.2"},"file":{"path":"getting-started/installation.md","mtime":"2018-03-01T21:46:31.679Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-03-01T21:50:47.970Z"},"basePath":"..","book":{"language":""}});
  405. });
  406. </script>
  407. </div>
  408. <script src="../gitbook/gitbook.js"></script>
  409. <script src="../gitbook/theme.js"></script>
  410. <script src="../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
  411. <script src="../gitbook/gitbook-plugin-search-plus/search.js"></script>
  412. <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"></script>
  413. <script src="../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
  414. <script src="../gitbook/gitbook-plugin-ga/plugin.js"></script>
  415. <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
  416. <script src="../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
  417. </body>
  418. </html>