config/Options/axis/y2.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * y2 Axis  config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Show or hide y2 axis.
  11. 	 * - **NOTE**:
  12. 	 *   - When set to `false` will not generate y2 axis node. In this case, all 'y2' axis related functionality won't work properly.
  13. 	 *   - If need to use 'y2' related options while y2 isn't visible, set the value `true` and control visibility by css display property.
  14. 	 * @name axis․y2․show
  15. 	 * @memberof Options
  16. 	 * @type {boolean}
  17. 	 * @default false
  18. 	 * @example
  19. 	 * axis: {
  20. 	 *   y2: {
  21. 	 *     show: true
  22. 	 *   }
  23. 	 * }
  24. 	 */
  25. 	axis_y2_show: false,
  27. 	/**
  28. 	 * Set type of y2 axis.<br><br>
  29. 	 * **Available Values:**
  30. 	 *  - indexed
  31. 	 *  - log
  32. 	 *  - timeseries
  33. 	 *
  34. 	 * **NOTE:**<br>
  35. 	 * - **log** type:
  36. 	 *   - the bound data values must be exclusively-positive.
  37. 	 *   - y2 axis min value should be >= 0.
  38. 	 *   - [`data.groups`](#.data%25E2%2580%25A4groups)(stacked data) option aren't supported.
  39. 	 *
  40. 	 * @name axis․y2․type
  41. 	 * @memberof Options
  42. 	 * @type {string}
  43. 	 * @default "indexed"
  44. 	 * @see [Demo: log](https://naver.github.io/billboard.js/demo/#Axis.LogScales)
  45. 	 * @example
  46. 	 * axis: {
  47. 	 *   y2: {
  48. 	 *     type: "indexed"
  49. 	 *   }
  50. 	 * }
  51. 	 */
  52. 	axis_y2_type: <"indexed" | "log" | "timeseries">"indexed",
  54. 	/**
  55. 	 * Set max value of y2 axis.
  56. 	 * @name axis․y2․max
  57. 	 * @memberof Options
  58. 	 * @type {number}
  59. 	 * @default undefined
  60. 	 * @example
  61. 	 * axis: {
  62. 	 *   y2: {
  63. 	 *     max: 1000
  64. 	 *   }
  65. 	 * }
  66. 	 */
  67. 	axis_y2_max: <number | undefined>undefined,
  69. 	/**
  70. 	 * Set min value of y2 axis.
  71. 	 * @name axis․y2․min
  72. 	 * @memberof Options
  73. 	 * @type {number}
  74. 	 * @default undefined
  75. 	 * @example
  76. 	 * axis: {
  77. 	 *   y2: {
  78. 	 *     min: -1000
  79. 	 *   }
  80. 	 * }
  81. 	 */
  82. 	axis_y2_min: <number | undefined>undefined,
  84. 	/**
  85. 	 * Change the direction of y2 axis.<br><br>
  86. 	 * If true set, the direction will be `top -> bottom`.
  87. 	 * @name axis․y2․inverted
  88. 	 * @memberof Options
  89. 	 * @type {boolean}
  90. 	 * @default false
  91. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.InvertedAxis)
  92. 	 * @example
  93. 	 * axis: {
  94. 	 *   y2: {
  95. 	 *     inverted: true
  96. 	 *   }
  97. 	 * }
  98. 	 */
  99. 	axis_y2_inverted: false,
  101. 	/**
  102. 	 * Set center value of y2 axis.
  103. 	 * @name axis․y2․center
  104. 	 * @memberof Options
  105. 	 * @type {number}
  106. 	 * @default undefined
  107. 	 * @example
  108. 	 * axis: {
  109. 	 *   y2: {
  110. 	 *     center: 0
  111. 	 *   }
  112. 	 * }
  113. 	 */
  114. 	axis_y2_center: <number | undefined>undefined,
  116. 	/**
  117. 	 * Show y2 axis inside of the chart.
  118. 	 * @name axis․y2․inner
  119. 	 * @memberof Options
  120. 	 * @type {boolean}
  121. 	 * @default false
  122. 	 * @example
  123. 	 * axis: {
  124. 	 *   y2: {
  125. 	 *     inner: true
  126. 	 *   }
  127. 	 * }
  128. 	 */
  129. 	axis_y2_inner: false,
  131. 	/**
  132. 	 * Set label on y2 axis.<br><br>
  133. 	 * You can set y2 axis label and change its position by this option. This option works in the same way as [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label).
  134. 	 * @name axis․y2․label
  135. 	 * @memberof Options
  136. 	 * @type {string|object}
  137. 	 * @default {}
  138. 	 * @see [axis.x.label](#.axis%25E2%2580%25A4x%25E2%2580%25A4label) for position string value.
  139. 	 * @example
  140. 	 * axis: {
  141. 	 *   y2: {
  142. 	 *     label: "Your Y2 Axis"
  143. 	 *   }
  144. 	 * }
  145. 	 *
  146. 	 * axis: {
  147. 	 *   y2: {
  148. 	 *     label: {
  149. 	 *        text: "Your Y2 Axis",
  150. 	 *        position: "outer-middle"
  151. 	 *     }
  152. 	 *   }
  153. 	 * }
  154. 	 */
  155. 	axis_y2_label: <string | object>{},
  157. 	/**
  158. 	 * Set formatter for y2 axis tick text.<br><br>
  159. 	 * This option works in the same way as axis.y.format.
  160. 	 * @name axis․y2․tick․format
  161. 	 * @memberof Options
  162. 	 * @type {Function}
  163. 	 * @default undefined
  164. 	 * @example
  165. 	 * axis: {
  166. 	 *   y2: {
  167. 	 *     tick: {
  168. 	 *       format: d3.format("$,")
  169. 	 *       //or format: function(d) { return "$" + d; }
  170. 	 *     }
  171. 	 *   }
  172. 	 * }
  173. 	 */
  174. 	axis_y2_tick_format: <Function | undefined>undefined,
  176. 	/**
  177. 	 * Setting for culling ticks.
  178. 	 * - `true`: the ticks will be culled, then only limited tick text will be shown.<br>
  179. 	 *   This option does not hide the tick lines by default, if want to hide tick lines, set `axis.y2.tick.culling.lines=false`.
  180. 	 * - `false`: all of ticks will be shown.<br><br>
  181. 	 * The number of ticks to be shown can be chaned by `axis.y2.tick.culling.max`.
  182. 	 * @name axis․y2․tick․culling
  183. 	 * @memberof Options
  184. 	 * @type {boolean}
  185. 	 * @default false
  186. 	 * @example
  187. 	 * axis: {
  188. 	 *   y2: {
  189. 	 *     tick: {
  190. 	 *       culling: false
  191. 	 *     }
  192. 	 *   }
  193. 	 * }
  194. 	 */
  195. 	axis_y2_tick_culling: false,
  197. 	/**
  198. 	 * The number of tick texts will be adjusted to less than this value.
  199. 	 * @name axis․y2․tick․culling․max
  200. 	 * @memberof Options
  201. 	 * @type {number}
  202. 	 * @default 5
  203. 	 * @example
  204. 	 * axis: {
  205. 	 *   y2: {
  206. 	 *     tick: {
  207. 	 *       culling: {
  208. 	 *           max: 5
  209. 	 *       }
  210. 	 *     }
  211. 	 *   }
  212. 	 * }
  213. 	 */
  214. 	axis_y2_tick_culling_max: 5,
  216. 	/**
  217. 	 * Control visibility of tick lines within culling option, along with tick text.
  218. 	 * @name axis․y2․tick․culling․lines
  219. 	 * @memberof Options
  220. 	 * @type {boolean}
  221. 	 * @default true
  222. 	 * @example
  223. 	 * axis: {
  224. 	 *   y2: {
  225. 	 *     tick: {
  226. 	 *       culling: {
  227. 	 *           lines: false,
  228. 	 *       }
  229. 	 *     }
  230. 	 *   }
  231. 	 * }
  232. 	 */
  233. 	axis_y2_tick_culling_lines: true,
  235. 	/**
  236. 	 * Show or hide y2 axis outer tick.
  237. 	 * @name axis․y2․tick․outer
  238. 	 * @memberof Options
  239. 	 * @type {boolean}
  240. 	 * @default true
  241. 	 * @example
  242. 	 * axis: {
  243. 	 *   y2: {
  244. 	 *     tick: {
  245. 	 *       outer: false
  246. 	 *     }
  247. 	 *   }
  248. 	 * }
  249. 	 */
  250. 	axis_y2_tick_outer: true,
  252. 	/**
  253. 	 * Set y2 axis tick values manually.
  254. 	 * @name axis․y2․tick․values
  255. 	 * @memberof Options
  256. 	 * @type {Array|Function}
  257. 	 * @default null
  258. 	 * @example
  259. 	 * axis: {
  260. 	 *   y2: {
  261. 	 *     tick: {
  262. 	 *       values: [100, 1000, 10000],
  263. 	 *
  264. 	 *       // an Array value should be returned
  265. 	 *       values: function() {
  266. 	 *       	return [ ... ];
  267. 	 *       }
  268. 	 *     }
  269. 	 *   }
  270. 	 * }
  271. 	 */
  272. 	axis_y2_tick_values: <number[] | (() => number[]) | null>null,
  274. 	/**
  275. 	 * Rotate y2 axis tick text.
  276. 	 * - If you set negative value, it will rotate to opposite direction.
  277. 	 * - Applied when [`axis.rotated`](#.axis%25E2%2580%25A4rotated) option is `true`.
  278. 	 * @name axis․y2․tick․rotate
  279. 	 * @memberof Options
  280. 	 * @type {number}
  281. 	 * @default 0
  282. 	 * @example
  283. 	 * axis: {
  284. 	 *   y2: {
  285. 	 *     tick: {
  286. 	 *       rotate: 60
  287. 	 *     }
  288. 	 *   }
  289. 	 * }
  290. 	 */
  291. 	axis_y2_tick_rotate: 0,
  293. 	/**
  294. 	 * Set the number of y2 axis ticks.
  295. 	 * - **NOTE:** This works in the same way as axis.y.tick.count.
  296. 	 * @name axis․y2․tick․count
  297. 	 * @memberof Options
  298. 	 * @type {number}
  299. 	 * @default undefined
  300. 	 * @example
  301. 	 * axis: {
  302. 	 *   y2: {
  303. 	 *     tick: {
  304. 	 *       count: 5
  305. 	 *     }
  306. 	 *   }
  307. 	 * }
  308. 	 */
  309. 	axis_y2_tick_count: <number | undefined>undefined,
  311. 	/**
  312. 	 * Show or hide y2 axis tick line.
  313. 	 * @name axis․y2․tick․show
  314. 	 * @memberof Options
  315. 	 * @type {boolean}
  316. 	 * @default true
  317. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
  318. 	 * @example
  319. 	 * axis: {
  320. 	 *   y2: {
  321. 	 *     tick: {
  322. 	 *       show: false
  323. 	 *     }
  324. 	 *   }
  325. 	 * }
  326. 	 */
  327. 	axis_y2_tick_show: true,
  329. 	/**
  330. 	 * Set axis tick step(interval) size.
  331. 	 * - **NOTE:** Will be ignored if `axis.y2.tick.count` or `axis.y2.tick.values` options are set.
  332. 	 * @name axis․y2․tick․stepSize
  333. 	 * @memberof Options
  334. 	 * @type {number}
  335. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.StepSizeForYAxis)
  336. 	 * @example
  337. 	 * axis: {
  338. 	 *   y2: {
  339. 	 *     tick: {
  340. 	 *       // tick value will step as indicated interval value.
  341. 	 *       // ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
  342. 	 *       stepSize: 15
  343. 	 *     }
  344. 	 *   }
  345. 	 * }
  346. 	 */
  347. 	axis_y2_tick_stepSize: <number | null>null,
  349. 	/**
  350. 	 * Show or hide y2 axis tick text.
  351. 	 * @name axis․y2․tick․text․show
  352. 	 * @memberof Options
  353. 	 * @type {boolean}
  354. 	 * @default true
  355. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.HideTickLineText)
  356. 	 * @example
  357. 	 * axis: {
  358. 	 *   y2: {
  359. 	 *     tick: {
  360. 	 *       text: {
  361. 	 *           show: false
  362. 	 *       }
  363. 	 *     }
  364. 	 *   }
  365. 	 * }
  366. 	 */
  367. 	axis_y2_tick_text_show: true,
  369. 	/**
  370. 	 * Set the y2 Axis tick text's position relatively its original position
  371. 	 * @name axis․y2․tick․text․position
  372. 	 * @memberof Options
  373. 	 * @type {object}
  374. 	 * @default {x: 0, y:0}
  375. 	 * @example
  376. 	 * axis: {
  377. 	 *   y2: {
  378. 	 *     tick: {
  379. 	 *       text: {
  380. 	 *         position: {
  381. 	 *           x: 10,
  382. 	 *           y: 10
  383. 	 *         }
  384. 	 *       }
  385. 	 *     }
  386. 	 *   }
  387. 	 * }
  388. 	 */
  389. 	axis_y2_tick_text_position: {x: 0, y: 0},
  391. 	/**
  392. 	 * Set padding for y2 axis.<br><br>
  393. 	 * You can set padding for y2 axis to create more space on the edge of the axis.
  394. 	 * This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
  395. 	 *
  396. 	 * - **NOTE:**
  397. 	 *   - Given values are translated relative to the y2 Axis domain value for padding
  398. 	 *   - For area and bar type charts, [area.zerobased](#.area) or [bar.zerobased](#.bar) options should be set to 'false` to get padded bottom.
  399. 	 * @name axis․y2․padding
  400. 	 * @memberof Options
  401. 	 * @type {object|number}
  402. 	 * @default {}
  403. 	 * @example
  404. 	 * axis: {
  405. 	 *   y2: {
  406. 	 *     padding: {
  407. 	 *       top: 100,
  408. 	 *       bottom: 100
  409. 	 *     }
  410. 	 *
  411. 	 *     // or set both values at once.
  412. 	 *     padding: 10
  413. 	 * }
  414. 	 */
  415. 	axis_y2_padding: <number | {top?: number, bottom?: number}>{},
  417. 	/**
  418. 	 * Set default range of y2 axis.<br><br>
  419. 	 * This option set the default value for y2 axis when there is no data on init.
  420. 	 * @name axis․y2․default
  421. 	 * @memberof Options
  422. 	 * @type {Array}
  423. 	 * @default undefined
  424. 	 * @example
  425. 	 * axis: {
  426. 	 *   y2: {
  427. 	 *     default: [0, 1000]
  428. 	 *   }
  429. 	 * }
  430. 	 */
  431. 	axis_y2_default: undefined,
  433. 	/**
  434. 	 * Set additional axes for y2 Axis.
  435. 	 * - **NOTE:** Axis' scale is based on y2 Axis value if domain option isn't set.
  436. 	 *
  437. 	 * Each axis object should consist with following options:
  438. 	 *
  439. 	 * | Name | Type | Default | Description |
  440. 	 * | --- | --- | --- | --- |
  441. 	 * | domain | Array | - | Set the domain value |
  442. 	 * | tick.outer | boolean | true | Show outer tick |
  443. 	 * | tick.format | Function | - | Set formatter for tick text |
  444. 	 * | tick.count | Number | - | Set the number of y axis ticks |
  445. 	 * | tick.values | Array | - | Set tick values manually |
  446. 	 * @name axis․y2․axes
  447. 	 * @memberof Options
  448. 	 * @type {Array}
  449. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Axis.MultiAxes)
  450. 	 * @see [Demo: Domain](https://naver.github.io/billboard.js/demo/#Axis.MultiAxesDomain)
  451. 	 * @example
  452. 	 * y2: {
  453. 	 *    axes: [
  454. 	 *      {
  455. 	 *        // if set, will not be correlated with the main y2 Axis domain value
  456. 	 *        domain: [0, 1000],
  457. 	 *        tick: {
  458. 	 *          outer: false,
  459. 	 *          format: function(x) {
  460. 	 *             return x + "%";
  461. 	 *          },
  462. 	 *          count: 2,
  463. 	 *          values: [10, 20, 30]
  464. 	 *        }
  465. 	 *      },
  466. 	 *      ...
  467. 	 *    ]
  468. 	 * }
  469. 	 */
  470. 	axis_y2_axes: []
  471. };