linear.html 32 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198
  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>Linear · 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="../labelling.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="../../getting-started/">
  42. <a href="../../getting-started/">
  43. Getting Started
  44. </a>
  45. <ul class="articles">
  46. <li class="chapter " data-level="1.2.1" data-path="../../getting-started/installation.html">
  47. <a href="../../getting-started/installation.html">
  48. Installation
  49. </a>
  50. </li>
  51. <li class="chapter " data-level="1.2.2" data-path="../../getting-started/integration.html">
  52. <a href="../../getting-started/integration.html">
  53. Integration
  54. </a>
  55. </li>
  56. <li class="chapter " data-level="1.2.3" data-path="../../getting-started/usage.html">
  57. <a href="../../getting-started/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="../">
  202. <a href="../">
  203. Axes
  204. </a>
  205. <ul class="articles">
  206. <li class="chapter " data-level="1.6.1" data-path="../cartesian/">
  207. <a href="../cartesian/">
  208. Cartesian
  209. </a>
  210. <ul class="articles">
  211. <li class="chapter " data-level="1.6.1.1" data-path="../cartesian/category.html">
  212. <a href="../cartesian/category.html">
  213. Category
  214. </a>
  215. </li>
  216. <li class="chapter " data-level="1.6.1.2" data-path="../cartesian/linear.html">
  217. <a href="../cartesian/linear.html">
  218. Linear
  219. </a>
  220. </li>
  221. <li class="chapter " data-level="1.6.1.3" data-path="../cartesian/logarithmic.html">
  222. <a href="../cartesian/logarithmic.html">
  223. Logarithmic
  224. </a>
  225. </li>
  226. <li class="chapter " data-level="1.6.1.4" data-path="../cartesian/time.html">
  227. <a href="../cartesian/time.html">
  228. Time
  229. </a>
  230. </li>
  231. </ul>
  232. </li>
  233. <li class="chapter " data-level="1.6.2" data-path="./">
  234. <a href="./">
  235. Radial
  236. </a>
  237. <ul class="articles">
  238. <li class="chapter active" data-level="1.6.2.1" data-path="linear.html">
  239. <a href="linear.html">
  240. Linear
  241. </a>
  242. </li>
  243. </ul>
  244. </li>
  245. <li class="chapter " data-level="1.6.3" data-path="../labelling.html">
  246. <a href="../labelling.html">
  247. Labelling
  248. </a>
  249. </li>
  250. <li class="chapter " data-level="1.6.4" data-path="../styling.html">
  251. <a href="../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="../.." >Linear</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="linear-radial-axis">Linear Radial Axis</h1>
  340. <p>The linear scale is use to chart numerical data. As the name suggests, linear interpolation is used to determine where a value lies in relation the center of the axis.</p>
  341. <p>The following additional configuration options are provided by the radial linear scale.</p>
  342. <h2 id="configuration-options">Configuration Options</h2>
  343. <p>The axis has configuration properties for ticks, angle lines (line that appear in a radar chart outward from the center), pointLabels (labels around the edge in a radar chart). The following sections define each of the properties in those sections.</p>
  344. <table>
  345. <thead>
  346. <tr>
  347. <th>Name</th>
  348. <th>Type</th>
  349. <th>Description</th>
  350. </tr>
  351. </thead>
  352. <tbody>
  353. <tr>
  354. <td><code>angleLines</code></td>
  355. <td><code>Object</code></td>
  356. <td>Angle line configuration. <a href="#angle-line-options">more...</a></td>
  357. </tr>
  358. <tr>
  359. <td><code>gridLines</code></td>
  360. <td><code>Object</code></td>
  361. <td>Grid line configuration. <a href="../styling.html#grid-line-configuration">more...</a></td>
  362. </tr>
  363. <tr>
  364. <td><code>pointLabels</code></td>
  365. <td><code>Object</code></td>
  366. <td>Point label configuration. <a href="#point-label-options">more...</a></td>
  367. </tr>
  368. <tr>
  369. <td><code>ticks</code></td>
  370. <td><code>Object</code></td>
  371. <td>Tick configuration. <a href="#tick-options">more...</a></td>
  372. </tr>
  373. </tbody>
  374. </table>
  375. <h2 id="tick-options">Tick Options</h2>
  376. <p>The following options are provided by the linear scale. They are all located in the <code>ticks</code> sub options. The <a href="../styling.html#tick-configuration">common tick configuration</a> options are supported by this axis.</p>
  377. <table>
  378. <thead>
  379. <tr>
  380. <th>Name</th>
  381. <th>Type</th>
  382. <th>Default</th>
  383. <th>Description</th>
  384. </tr>
  385. </thead>
  386. <tbody>
  387. <tr>
  388. <td><code>backdropColor</code></td>
  389. <td><code>Color</code></td>
  390. <td><code>&apos;rgba(255, 255, 255, 0.75)&apos;</code></td>
  391. <td>Color of label backdrops</td>
  392. </tr>
  393. <tr>
  394. <td><code>backdropPaddingX</code></td>
  395. <td><code>Number</code></td>
  396. <td><code>2</code></td>
  397. <td>Horizontal padding of label backdrop.</td>
  398. </tr>
  399. <tr>
  400. <td><code>backdropPaddingY</code></td>
  401. <td><code>Number</code></td>
  402. <td><code>2</code></td>
  403. <td>Vertical padding of label backdrop.</td>
  404. </tr>
  405. <tr>
  406. <td><code>beginAtZero</code></td>
  407. <td><code>Boolean</code></td>
  408. <td><code>false</code></td>
  409. <td>if true, scale will include 0 if it is not already included.</td>
  410. </tr>
  411. <tr>
  412. <td><code>min</code></td>
  413. <td><code>Number</code></td>
  414. <td></td>
  415. <td>User defined minimum number for the scale, overrides minimum value from data. <a href="#axis-range-settings">more...</a></td>
  416. </tr>
  417. <tr>
  418. <td><code>max</code></td>
  419. <td><code>Number</code></td>
  420. <td></td>
  421. <td>User defined maximum number for the scale, overrides maximum value from data. <a href="#axis-range-settings">more...</a></td>
  422. </tr>
  423. <tr>
  424. <td><code>maxTicksLimit</code></td>
  425. <td><code>Number</code></td>
  426. <td><code>11</code></td>
  427. <td>Maximum number of ticks and gridlines to show.</td>
  428. </tr>
  429. <tr>
  430. <td><code>stepSize</code></td>
  431. <td><code>Number</code></td>
  432. <td></td>
  433. <td>User defined fixed step size for the scale. <a href="#step-size">more...</a></td>
  434. </tr>
  435. <tr>
  436. <td><code>suggestedMax</code></td>
  437. <td><code>Number</code></td>
  438. <td></td>
  439. <td>Adjustment used when calculating the maximum data value. <a href="#axis-range-settings">more...</a></td>
  440. </tr>
  441. <tr>
  442. <td><code>suggestedMin</code></td>
  443. <td><code>Number</code></td>
  444. <td></td>
  445. <td>Adjustment used when calculating the minimum data value. <a href="#axis-range-settings">more...</a></td>
  446. </tr>
  447. <tr>
  448. <td><code>showLabelBackdrop</code></td>
  449. <td><code>Boolean</code></td>
  450. <td><code>true</code></td>
  451. <td>If true, draw a background behind the tick labels</td>
  452. </tr>
  453. </tbody>
  454. </table>
  455. <h2 id="axis-range-settings">Axis Range Settings</h2>
  456. <p>Given the number of axis range settings, it is important to understand how they all interact with each other.</p>
  457. <p>The <code>suggestedMax</code> and <code>suggestedMin</code> settings only change the data values that are used to scale the axis. These are useful for extending the range of the axis while maintaining the auto fit behaviour.</p>
  458. <pre><code class="lang-javascript"><span class="hljs-keyword">let</span> minDataValue = <span class="hljs-built_in">Math</span>.min(mostNegativeValue, options.ticks.suggestedMin);
  459. <span class="hljs-keyword">let</span> maxDataValue = <span class="hljs-built_in">Math</span>.max(mostPositiveValue, options.ticks.suggestedMax);
  460. </code></pre>
  461. <p>In this example, the largest positive value is 50, but the data maximum is expanded out to 100. However, because the lowest data value is below the <code>suggestedMin</code> setting, it is ignored.</p>
  462. <pre><code class="lang-javascript"><span class="hljs-keyword">let</span> chart = <span class="hljs-keyword">new</span> Chart(ctx, {
  463. type: <span class="hljs-string">&apos;radar&apos;</span>,
  464. data: {
  465. datasets: [{
  466. label: <span class="hljs-string">&apos;First dataset&apos;</span>,
  467. data: [<span class="hljs-number">0</span>, <span class="hljs-number">20</span>, <span class="hljs-number">40</span>, <span class="hljs-number">50</span>]
  468. }],
  469. labels: [<span class="hljs-string">&apos;January&apos;</span>, <span class="hljs-string">&apos;February&apos;</span>, <span class="hljs-string">&apos;March&apos;</span>, <span class="hljs-string">&apos;April&apos;</span>]
  470. },
  471. options: {
  472. scale: {
  473. ticks: {
  474. suggestedMin: <span class="hljs-number">50</span>,
  475. suggestedMax: <span class="hljs-number">100</span>
  476. }
  477. }
  478. }
  479. });
  480. </code></pre>
  481. <p>In contrast to the <code>suggested*</code> settings, the <code>min</code> and <code>max</code> settings set explicit ends to the axes. When these are set, some data points may not be visible.</p>
  482. <h2 id="step-size">Step Size</h2>
  483. <p> If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.</p>
  484. <p>This example sets up a chart with a y axis that creates ticks at <code>0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5</code>.</p>
  485. <pre><code class="lang-javascript"><span class="hljs-keyword">let</span> options = {
  486. scales: {
  487. yAxes: [{
  488. ticks: {
  489. max: <span class="hljs-number">5</span>,
  490. min: <span class="hljs-number">0</span>,
  491. stepSize: <span class="hljs-number">0.5</span>
  492. }
  493. }]
  494. }
  495. };
  496. </code></pre>
  497. <h2 id="angle-line-options">Angle Line Options</h2>
  498. <p>The following options are used to configure angled lines that radiate from the center of the chart to the point labels. They can be found in the <code>angleLines</code> sub options. Note that these options only apply if <code>angleLines.display</code> is true.</p>
  499. <table>
  500. <thead>
  501. <tr>
  502. <th>Name</th>
  503. <th>Type</th>
  504. <th>Default</th>
  505. <th>Description</th>
  506. </tr>
  507. </thead>
  508. <tbody>
  509. <tr>
  510. <td><code>display</code></td>
  511. <td><code>Boolean</code></td>
  512. <td><code>true</code></td>
  513. <td>if true, angle lines are shown</td>
  514. </tr>
  515. <tr>
  516. <td><code>color</code></td>
  517. <td><code>Color</code></td>
  518. <td><code>rgba(0, 0, 0, 0.1)</code></td>
  519. <td>Color of angled lines</td>
  520. </tr>
  521. <tr>
  522. <td><code>lineWidth</code></td>
  523. <td><code>Number</code></td>
  524. <td><code>1</code></td>
  525. <td>Width of angled lines</td>
  526. </tr>
  527. </tbody>
  528. </table>
  529. <h2 id="point-label-options">Point Label Options</h2>
  530. <p>The following options are used to configure the point labels that are shown on the perimeter of the scale. They can be found in the <code>pointLabels</code> sub options. Note that these options only apply if <code>pointLabels.display</code> is true.</p>
  531. <table>
  532. <thead>
  533. <tr>
  534. <th>Name</th>
  535. <th>Type</th>
  536. <th>Default</th>
  537. <th>Description</th>
  538. </tr>
  539. </thead>
  540. <tbody>
  541. <tr>
  542. <td><code>callback</code></td>
  543. <td><code>Function</code></td>
  544. <td></td>
  545. <td>Callback function to transform data labels to point labels. The default implementation simply returns the current string.</td>
  546. </tr>
  547. <tr>
  548. <td><code>fontColor</code></td>
  549. <td><code>Color/Color[]</code></td>
  550. <td><code>&apos;#666&apos;</code></td>
  551. <td>Font color for point labels.</td>
  552. </tr>
  553. <tr>
  554. <td><code>fontFamily</code></td>
  555. <td><code>String</code></td>
  556. <td><code>&quot;&apos;Helvetica Neue&apos;, &apos;Helvetica&apos;, &apos;Arial&apos;, sans-serif&quot;</code></td>
  557. <td>Font family to use when rendering labels.</td>
  558. </tr>
  559. <tr>
  560. <td><code>fontSize</code></td>
  561. <td><code>Number</code></td>
  562. <td>10</td>
  563. <td>font size in pixels</td>
  564. </tr>
  565. <tr>
  566. <td><code>fontStyle</code></td>
  567. <td><code>String</code></td>
  568. <td><code>&apos;normal&apos;</code></td>
  569. <td>Font style to use when rendering point labels.</td>
  570. </tr>
  571. </tbody>
  572. </table>
  573. </section>
  574. </div>
  575. <div class="search-results">
  576. <div class="has-results">
  577. <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
  578. <ul class="search-results-list"></ul>
  579. </div>
  580. <div class="no-results">
  581. <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
  582. </div>
  583. </div>
  584. </div>
  585. </div>
  586. </div>
  587. </div>
  588. <a href="./" class="navigation navigation-prev " aria-label="Previous page: Radial">
  589. <i class="fa fa-angle-left"></i>
  590. </a>
  591. <a href="../labelling.html" class="navigation navigation-next " aria-label="Next page: Labelling">
  592. <i class="fa fa-angle-right"></i>
  593. </a>
  594. </div>
  595. <script>
  596. var gitbook = gitbook || [];
  597. gitbook.push(function() {
  598. gitbook.page.hasChanged({"page":{"title":"Linear","level":"1.6.2.1","depth":3,"next":{"title":"Labelling","level":"1.6.3","depth":2,"path":"axes/labelling.md","ref":"axes/labelling.md","articles":[]},"previous":{"title":"Radial","level":"1.6.2","depth":2,"path":"axes/radial/README.md","ref":"axes/radial/README.md","articles":[{"title":"Linear","level":"1.6.2.1","depth":3,"path":"axes/radial/linear.md","ref":"axes/radial/linear.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":"axes/radial/linear.md","mtime":"2018-03-01T21:46:31.675Z","type":"markdown"},"gitbook":{"version":"3.2.2","time":"2018-03-01T21:50:47.970Z"},"basePath":"../..","book":{"language":""}});
  599. });
  600. </script>
  601. </div>
  602. <script src="../../gitbook/gitbook.js"></script>
  603. <script src="../../gitbook/theme.js"></script>
  604. <script src="../../gitbook/gitbook-plugin-search-plus/jquery.mark.min.js"></script>
  605. <script src="../../gitbook/gitbook-plugin-search-plus/search.js"></script>
  606. <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js"></script>
  607. <script src="../../gitbook/gitbook-plugin-anchorjs/anchor-style.js"></script>
  608. <script src="../../gitbook/gitbook-plugin-ga/plugin.js"></script>
  609. <script src="../../gitbook/gitbook-plugin-sharing/buttons.js"></script>
  610. <script src="../../gitbook/gitbook-plugin-fontsettings/fontsettings.js"></script>
  611. </body>
  612. </html>