config/Options/shape/area.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * area config options
  7.  */
  8. export default {
  9. 	/**
  10. 	 * Set area options
  11. 	 * @name area
  12. 	 * @memberof Options
  13. 	 * @type {object}
  14. 	 * @property {object} area Area object
  15. 	 * @property {boolean} [area.above=false] Set background area `above` the data chart line.
  16. 	 * @property {boolean} [area.below=false] Set background area `below` the data chart line.
  17. 	 *  - **NOTE**: Can't be used along with `above` option. When above & below options are set to true, `above` will be prioritized.
  18. 	 * @property {boolean} [area.front=true] Set area node to be positioned over line node.
  19. 	 * @property {boolean|object} [area.linearGradient=false] Set the linear gradient on area.<br><br>
  20. 	 * Or customize by giving below object value:
  21. 	 *  - x {Array}: `x1`, `x2` value (default: `[0, 0]`)
  22. 	 *  - y {Array}: `y1`, `y2` value (default: `[0, 1]`)
  23. 	 *  - stops {Array}: Each item should be having `[offset, stop-color, stop-opacity]` values.
  24. 	 *    - (default: `[[0, $DATA_COLOR, 1], [1, $DATA_COLOR, 0]]`)
  25. 	 * @property {boolean} [area.zerobased=true] Set if min or max value will be 0 on area chart.
  26. 	 * @see [MDN's &lt;linearGradient>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient), [&lt;stop>](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop)
  27. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Chart.AreaChart)
  28. 	 * @see [Demo: above](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Above)
  29. 	 * @see [Demo: below](https://naver.github.io/billboard.js/demo/#AreaChartOptions.Below)
  30. 	 * @see [Demo: linearGradient](https://naver.github.io/billboard.js/demo/#AreaChartOptions.LinearGradient)
  31. 	 * @example
  32. 	 *  area: {
  33. 	 *      above: true,
  34. 	 *      below: false,
  35. 	 *      zerobased: false,
  36. 	 *
  37. 	 *      // <g class='bb-areas'> will be positioned behind the line <g class='bb-lines'> in stacking order
  38. 	 *      front: false,
  39. 	 *
  40. 	 *      // will generate follwing linearGradient:
  41. 	 *      // for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
  42. 	 *      // <linearGradient x1="0" x2="0" y1="0" y2="1">
  43. 	 *      //    <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
  44. 	 *      //    <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
  45. 	 *      // </linearGradient>
  46. 	 *      linearGradient: true,
  47. 	 *
  48. 	 *      // Or customized gradient
  49. 	 *      linearGradient: {
  50. 	 *      	x: [0, 0],  // x1, x2 attributes
  51. 	 *      	y: [0, 0],  // y1, y2 attributes
  52. 	 *      	stops: [
  53. 	 *      	  // offset, stop-color, stop-opacity
  54. 	 *      	  [0, "#7cb5ec", 1],
  55. 	 *
  56. 	 *      	  // setting 'null' for stop-color, will set its original data color
  57. 	 *      	  [0.5, null, 0],
  58. 	 *
  59. 	 *      	  // setting 'function' for stop-color, will pass data id as argument.
  60. 	 *      	  // It should return color string or null value
  61. 	 *      	  [1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
  62. 	 *      	]
  63. 	 *      }
  64. 	 *  }
  65. 	 */
  66. 	area_above: false,
  67. 	area_below: false,
  68. 	area_front: true,
  69. 	area_linearGradient: <boolean | {
  70. 		x?: [number, number],
  71. 		y?: [number, number],
  72. 		stops?: [number, string | null | Function, number]
  73. 	}>false,
  74. 	area_zerobased: true
  75. };