config/Options/common/grid.ts

  1. /**
  2.  * Copyright (c) 2017 ~ present NAVER Corp.
  3.  * billboard.js project is licensed under the MIT license
  4.  */
  5. /**
  6.  * grid config options
  7.  */
  8. type Lines = {value?: number, text?: string, class?: string, position?: string}[];
  10. export default {
  11. 	/**
  12. 	 * Set related options
  13. 	 * @name grid
  14. 	 * @memberof Options
  15. 	 * @type {object}
  16. 	 * @property {boolean} [front=false] Set 'grid & focus lines' to be positioned over grid lines and chart elements.
  17. 	 * @property {object} x Grid x object
  18. 	 * @property {boolean} [x.show=false] Show grids along x axis.
  19. 	 * @property {Array} [x.lines=[]] Show additional grid lines along x axis.<br>
  20. 	 *  This option accepts array including object that has value, text, position and class. text, position and class are optional. For position, start, middle and end (default) are available.
  21. 	 *  If x axis is category axis, value can be category name. If x axis is timeseries axis, value can be date string, Date object and unixtime integer.
  22. 	 * @property {object} y Grid y object
  23. 	 * @property {boolean} [y.show=false] Show grids along x axis.
  24. 	 * @property {Array} [y.lines=[]] Show additional grid lines along y axis.<br>
  25. 	 *  This option accepts array including object that has value, text, position and class.
  26. 	 * @property {number} [y.ticks=undefined] Number of y grids to be shown.
  27. 	 * @property {object} focus Grid focus object
  28. 	 * @property {boolean} [focus.edge=false] Show edged focus grid line.<br>**NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set.
  29. 	 * @property {boolean} [focus.show=true] Show grid line when focus.
  30. 	 * @property {boolean} [focus.y=false] Show y coordinate focus grid line.<br>**NOTE:** Available when [`tooltip.grouped=false`](#.tooltip) option is set.
  31. 	 * @property {object} lines Grid lines object
  32. 	 * @property {boolean} [lines.front=true] Set grid lines to be positioned over chart elements.
  33. 	 * @default undefined
  34. 	 * @see [Demo](https://naver.github.io/billboard.js/demo/#Grid.GridLines)
  35. 	 * @see [Demo: X Grid Lines](https://naver.github.io/billboard.js/demo/#Grid.OptionalXGridLines)
  36. 	 * @see [Demo: Y Grid Lines](https://naver.github.io/billboard.js/demo/#Grid.OptionalYGridLines)
  37. 	 * @example
  38. 	 * grid: {
  39. 	 *   x: {
  40. 	 *     show: true,
  41. 	 *     lines: [
  42. 	 *       {value: 2, text: "Label on 2"},
  43. 	 *       {value: 5, text: "Label on 5", class: "label-5"},
  44. 	 *       {value: 6, text: "Label on 6", position: "start"}
  45. 	 *     ]
  46. 	 *   },
  47. 	 *   y: {
  48. 	 *     show: true,
  49. 	 *     lines: [
  50. 	 *       {value: 100, text: "Label on 100"},
  51. 	 *       {value: 200, text: "Label on 200", class: "label-200"},
  52. 	 *       {value: 300, text: "Label on 300", position: 'middle'}
  53. 	 *     ],
  54. 	 *     ticks: 5
  55. 	 *   },
  56. 	 *   front: true,
  57. 	 *   focus: {
  58. 	 *      show: false,
  59. 	 *
  60. 	 *      // Below options are available when 'tooltip.grouped=false' option is set
  61. 	 *      edge: true,
  62. 	 *      y: true
  63. 	 *   },
  64. 	 *   lines: {
  65. 	 *      front: false
  66. 	 *   }
  67. 	 * }
  68. 	 */
  69. 	grid_x_show: false,
  70. 	grid_x_type: "tick",
  71. 	grid_x_lines: <Lines>[],
  72. 	grid_y_show: false,
  73. 	grid_y_lines: <Lines>[],
  74. 	grid_y_ticks: <number | undefined>undefined,
  75. 	grid_focus_edge: false,
  76. 	grid_focus_show: true,
  77. 	grid_focus_y: false,
  78. 	grid_front: false,
  79. 	grid_lines_front: true
  80. };