PlotLineOrBand.js 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023
  1. /* *
  2. *
  3. * (c) 2010-2019 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import H from './Globals.js';
  12. import Axis from './Axis.js';
  13. /**
  14. * Options for plot bands on axes.
  15. *
  16. * @typedef {Highcharts.XAxisPlotBandsOptions|Highcharts.YAxisPlotBandsOptions|Highcharts.ZAxisPlotBandsOptions} Highcharts.AxisPlotBandsOptions
  17. */
  18. /**
  19. * Options for plot band labels on axes.
  20. *
  21. * @typedef {Highcharts.XAxisPlotBandsLabelOptions|Highcharts.YAxisPlotBandsLabelOptions|Highcharts.ZAxisPlotBandsLabelOptions} Highcharts.AxisPlotBandsLabelOptions
  22. */
  23. /**
  24. * Options for plot lines on axes.
  25. *
  26. * @typedef {Highcharts.XAxisPlotLinesOptions|Highcharts.YAxisPlotLinesOptions|Highcharts.ZAxisPlotLinesOptions} Highcharts.AxisPlotLinesOptions
  27. */
  28. /**
  29. * Options for plot line labels on axes.
  30. *
  31. * @typedef {Highcharts.XAxisPlotLinesLabelOptions|Highcharts.YAxisPlotLinesLabelOptions|Highcharts.ZAxisPlotLinesLabelOptions} Highcharts.AxisPlotLinesLabelOptions
  32. */
  33. import U from './Utilities.js';
  34. var arrayMax = U.arrayMax, arrayMin = U.arrayMin, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, erase = U.erase, extend = U.extend, objectEach = U.objectEach, pick = U.pick;
  35. var merge = H.merge;
  36. /* eslint-disable no-invalid-this, valid-jsdoc */
  37. /**
  38. * The object wrapper for plot lines and plot bands
  39. *
  40. * @class
  41. * @name Highcharts.PlotLineOrBand
  42. *
  43. * @param {Highcharts.Axis} axis
  44. *
  45. * @param {Highcharts.AxisPlotLinesOptions|Highcharts.AxisPlotBandsOptions} [options]
  46. */
  47. H.PlotLineOrBand = function (axis, options) {
  48. this.axis = axis;
  49. if (options) {
  50. this.options = options;
  51. this.id = options.id;
  52. }
  53. };
  54. H.PlotLineOrBand.prototype = {
  55. /**
  56. * Render the plot line or plot band. If it is already existing,
  57. * move it.
  58. *
  59. * @private
  60. * @function Highcharts.PlotLineOrBand#render
  61. * @return {Highcharts.PlotLineOrBand|undefined}
  62. */
  63. render: function () {
  64. H.fireEvent(this, 'render');
  65. var plotLine = this, axis = plotLine.axis, horiz = axis.horiz, options = plotLine.options, optionsLabel = options.label, label = plotLine.label, to = options.to, from = options.from, value = options.value, isBand = defined(from) && defined(to), isLine = defined(value), svgElem = plotLine.svgElem, isNew = !svgElem, path = [], color = options.color, zIndex = pick(options.zIndex, 0), events = options.events, attribs = {
  66. 'class': 'highcharts-plot-' + (isBand ? 'band ' : 'line ') +
  67. (options.className || '')
  68. }, groupAttribs = {}, renderer = axis.chart.renderer, groupName = isBand ? 'bands' : 'lines', group;
  69. // logarithmic conversion
  70. if (axis.isLog) {
  71. from = axis.log2lin(from);
  72. to = axis.log2lin(to);
  73. value = axis.log2lin(value);
  74. }
  75. // Set the presentational attributes
  76. if (!axis.chart.styledMode) {
  77. if (isLine) {
  78. attribs.stroke = color || '#999999';
  79. attribs['stroke-width'] = pick(options.width, 1);
  80. if (options.dashStyle) {
  81. attribs.dashstyle =
  82. options.dashStyle;
  83. }
  84. }
  85. else if (isBand) { // plot band
  86. attribs.fill = color || '#e6ebf5';
  87. if (options.borderWidth) {
  88. attribs.stroke = options.borderColor;
  89. attribs['stroke-width'] = options.borderWidth;
  90. }
  91. }
  92. }
  93. // Grouping and zIndex
  94. groupAttribs.zIndex = zIndex;
  95. groupName += '-' + zIndex;
  96. group = axis.plotLinesAndBandsGroups[groupName];
  97. if (!group) {
  98. axis.plotLinesAndBandsGroups[groupName] = group =
  99. renderer.g('plot-' + groupName)
  100. .attr(groupAttribs).add();
  101. }
  102. // Create the path
  103. if (isNew) {
  104. /**
  105. * SVG element of the plot line or band.
  106. *
  107. * @name Highcharts.PlotLineOrBand#svgElement
  108. * @type {Highcharts.SVGElement}
  109. */
  110. plotLine.svgElem = svgElem = renderer
  111. .path()
  112. .attr(attribs)
  113. .add(group);
  114. }
  115. // Set the path or return
  116. if (isLine) {
  117. path = axis.getPlotLinePath({
  118. value: value,
  119. lineWidth: svgElem.strokeWidth(),
  120. acrossPanes: options.acrossPanes
  121. });
  122. }
  123. else if (isBand) { // plot band
  124. path = axis.getPlotBandPath(from, to, options);
  125. }
  126. else {
  127. return;
  128. }
  129. // common for lines and bands
  130. if ((isNew || !svgElem.d) && path && path.length) {
  131. svgElem.attr({ d: path });
  132. // events
  133. if (events) {
  134. objectEach(events, function (event, eventType) {
  135. svgElem.on(eventType, function (e) {
  136. events[eventType].apply(plotLine, [e]);
  137. });
  138. });
  139. }
  140. }
  141. else if (svgElem) {
  142. if (path) {
  143. svgElem.show(true);
  144. svgElem.animate({ d: path });
  145. }
  146. else if (svgElem.d) {
  147. svgElem.hide();
  148. if (label) {
  149. plotLine.label = label = label.destroy();
  150. }
  151. }
  152. }
  153. // the plot band/line label
  154. if (optionsLabel &&
  155. (defined(optionsLabel.text) || defined(optionsLabel.formatter)) &&
  156. path &&
  157. path.length &&
  158. axis.width > 0 &&
  159. axis.height > 0 &&
  160. !path.isFlat) {
  161. // apply defaults
  162. optionsLabel = merge({
  163. align: horiz && isBand && 'center',
  164. x: horiz ? !isBand && 4 : 10,
  165. verticalAlign: !horiz && isBand && 'middle',
  166. y: horiz ? isBand ? 16 : 10 : isBand ? 6 : -4,
  167. rotation: horiz && !isBand && 90
  168. }, optionsLabel);
  169. this.renderLabel(optionsLabel, path, isBand, zIndex);
  170. }
  171. else if (label) { // move out of sight
  172. label.hide();
  173. }
  174. // chainable
  175. return plotLine;
  176. },
  177. /**
  178. * Render and align label for plot line or band.
  179. *
  180. * @private
  181. * @function Highcharts.PlotLineOrBand#renderLabel
  182. * @param {Highcharts.AxisPlotLinesLabelOptions|Highcharts.AxisPlotBandsLabelOptions} optionsLabel
  183. * @param {Highcharts.SVGPathArray} path
  184. * @param {boolean} [isBand]
  185. * @param {number} [zIndex]
  186. * @return {void}
  187. */
  188. renderLabel: function (optionsLabel, path, isBand, zIndex) {
  189. var plotLine = this, label = plotLine.label, renderer = plotLine.axis.chart.renderer, attribs, xBounds, yBounds, x, y, labelText;
  190. // add the SVG element
  191. if (!label) {
  192. attribs = {
  193. align: optionsLabel.textAlign || optionsLabel.align,
  194. rotation: optionsLabel.rotation,
  195. 'class': 'highcharts-plot-' + (isBand ? 'band' : 'line') +
  196. '-label ' + (optionsLabel.className || '')
  197. };
  198. attribs.zIndex = zIndex;
  199. labelText = this.getLabelText(optionsLabel);
  200. /**
  201. * SVG element of the label.
  202. *
  203. * @name Highcharts.PlotLineOrBand#label
  204. * @type {Highcharts.SVGElement}
  205. */
  206. plotLine.label = label = renderer
  207. .text(labelText, 0, 0, optionsLabel.useHTML)
  208. .attr(attribs)
  209. .add();
  210. if (!this.axis.chart.styledMode) {
  211. label.css(optionsLabel.style);
  212. }
  213. }
  214. // get the bounding box and align the label
  215. // #3000 changed to better handle choice between plotband or plotline
  216. xBounds = path.xBounds ||
  217. [path[1], path[4], (isBand ? path[6] : path[1])];
  218. yBounds = path.yBounds ||
  219. [path[2], path[5], (isBand ? path[7] : path[2])];
  220. x = arrayMin(xBounds);
  221. y = arrayMin(yBounds);
  222. label.align(optionsLabel, false, {
  223. x: x,
  224. y: y,
  225. width: arrayMax(xBounds) - x,
  226. height: arrayMax(yBounds) - y
  227. });
  228. label.show(true);
  229. },
  230. /**
  231. * Get label's text content.
  232. *
  233. * @private
  234. * @function Highcharts.PlotLineOrBand#getLabelText
  235. * @param {Highcharts.AxisPlotLinesLabelOptions|Highcharts.AxisPlotBandsLabelOptions} optionsLabel
  236. * @return {string}
  237. */
  238. getLabelText: function (optionsLabel) {
  239. return defined(optionsLabel.formatter) ?
  240. optionsLabel.formatter
  241. .call(this) :
  242. optionsLabel.text;
  243. },
  244. /**
  245. * Remove the plot line or band.
  246. *
  247. * @function Highcharts.PlotLineOrBand#destroy
  248. * @return {void}
  249. */
  250. destroy: function () {
  251. // remove it from the lookup
  252. erase(this.axis.plotLinesAndBands, this);
  253. delete this.axis;
  254. destroyObjectProperties(this);
  255. }
  256. };
  257. /* eslint-enable no-invalid-this, valid-jsdoc */
  258. // Object with members for extending the Axis prototype
  259. extend(Axis.prototype, /** @lends Highcharts.Axis.prototype */ {
  260. /**
  261. * An array of colored bands stretching across the plot area marking an
  262. * interval on the axis.
  263. *
  264. * In styled mode, the plot bands are styled by the `.highcharts-plot-band`
  265. * class in addition to the `className` option.
  266. *
  267. * @productdesc {highcharts}
  268. * In a gauge, a plot band on the Y axis (value axis) will stretch along the
  269. * perimeter of the gauge.
  270. *
  271. * @type {Array<*>}
  272. * @product highcharts highstock gantt
  273. * @apioption xAxis.plotBands
  274. */
  275. /**
  276. * Flag to decide if plotBand should be rendered across all panes.
  277. *
  278. * @since 7.1.2
  279. * @product highstock
  280. * @type {boolean}
  281. * @default true
  282. * @apioption xAxis.plotBands.acrossPanes
  283. */
  284. /**
  285. * Border color for the plot band. Also requires `borderWidth` to be set.
  286. *
  287. * @type {Highcharts.ColorString}
  288. * @apioption xAxis.plotBands.borderColor
  289. */
  290. /**
  291. * Border width for the plot band. Also requires `borderColor` to be set.
  292. *
  293. * @type {number}
  294. * @default 0
  295. * @apioption xAxis.plotBands.borderWidth
  296. */
  297. /**
  298. * A custom class name, in addition to the default `highcharts-plot-band`,
  299. * to apply to each individual band.
  300. *
  301. * @type {string}
  302. * @since 5.0.0
  303. * @apioption xAxis.plotBands.className
  304. */
  305. /**
  306. * The color of the plot band.
  307. *
  308. * @sample {highcharts} highcharts/xaxis/plotbands-color/
  309. * Color band
  310. * @sample {highstock} stock/xaxis/plotbands/
  311. * Plot band on Y axis
  312. *
  313. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  314. * @default #e6ebf5
  315. * @apioption xAxis.plotBands.color
  316. */
  317. /**
  318. * An object defining mouse events for the plot band. Supported properties
  319. * are `click`, `mouseover`, `mouseout`, `mousemove`.
  320. *
  321. * @sample {highcharts} highcharts/xaxis/plotbands-events/
  322. * Mouse events demonstrated
  323. *
  324. * @since 1.2
  325. * @apioption xAxis.plotBands.events
  326. */
  327. /**
  328. * Click event on a plot band.
  329. *
  330. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  331. * @apioption xAxis.plotBands.events.click
  332. */
  333. /**
  334. * Mouse move event on a plot band.
  335. *
  336. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  337. * @apioption xAxis.plotBands.events.mousemove
  338. */
  339. /**
  340. * Mouse out event on the corner of a plot band.
  341. *
  342. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  343. * @apioption xAxis.plotBands.events.mouseout
  344. */
  345. /**
  346. * Mouse over event on a plot band.
  347. *
  348. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  349. * @apioption xAxis.plotBands.events.mouseover
  350. */
  351. /**
  352. * The start position of the plot band in axis units.
  353. *
  354. * @sample {highcharts} highcharts/xaxis/plotbands-color/
  355. * Datetime axis
  356. * @sample {highcharts} highcharts/xaxis/plotbands-from/
  357. * Categorized axis
  358. * @sample {highstock} stock/xaxis/plotbands/
  359. * Plot band on Y axis
  360. *
  361. * @type {number}
  362. * @apioption xAxis.plotBands.from
  363. */
  364. /**
  365. * An id used for identifying the plot band in Axis.removePlotBand.
  366. *
  367. * @sample {highcharts} highcharts/xaxis/plotbands-id/
  368. * Remove plot band by id
  369. * @sample {highstock} highcharts/xaxis/plotbands-id/
  370. * Remove plot band by id
  371. *
  372. * @type {string}
  373. * @apioption xAxis.plotBands.id
  374. */
  375. /**
  376. * The end position of the plot band in axis units.
  377. *
  378. * @sample {highcharts} highcharts/xaxis/plotbands-color/
  379. * Datetime axis
  380. * @sample {highcharts} highcharts/xaxis/plotbands-from/
  381. * Categorized axis
  382. * @sample {highstock} stock/xaxis/plotbands/
  383. * Plot band on Y axis
  384. *
  385. * @type {number}
  386. * @apioption xAxis.plotBands.to
  387. */
  388. /**
  389. * The z index of the plot band within the chart, relative to other
  390. * elements. Using the same z index as another element may give
  391. * unpredictable results, as the last rendered element will be on top.
  392. * Values from 0 to 20 make sense.
  393. *
  394. * @sample {highcharts} highcharts/xaxis/plotbands-color/
  395. * Behind plot lines by default
  396. * @sample {highcharts} highcharts/xaxis/plotbands-zindex/
  397. * Above plot lines
  398. * @sample {highcharts} highcharts/xaxis/plotbands-zindex-above-series/
  399. * Above plot lines and series
  400. *
  401. * @type {number}
  402. * @since 1.2
  403. * @apioption xAxis.plotBands.zIndex
  404. */
  405. /**
  406. * Text labels for the plot bands
  407. *
  408. * @product highcharts highstock gantt
  409. * @apioption xAxis.plotBands.label
  410. */
  411. /**
  412. * Horizontal alignment of the label. Can be one of "left", "center" or
  413. * "right".
  414. *
  415. * @sample {highcharts} highcharts/xaxis/plotbands-label-align/
  416. * Aligned to the right
  417. * @sample {highstock} stock/xaxis/plotbands-label/
  418. * Plot band with labels
  419. *
  420. * @type {Highcharts.AlignValue}
  421. * @default center
  422. * @since 2.1
  423. * @apioption xAxis.plotBands.label.align
  424. */
  425. /**
  426. * Rotation of the text label in degrees .
  427. *
  428. * @sample {highcharts} highcharts/xaxis/plotbands-label-rotation/
  429. * Vertical text
  430. *
  431. * @type {number}
  432. * @default 0
  433. * @since 2.1
  434. * @apioption xAxis.plotBands.label.rotation
  435. */
  436. /**
  437. * CSS styles for the text label.
  438. *
  439. * In styled mode, the labels are styled by the
  440. * `.highcharts-plot-band-label` class.
  441. *
  442. * @sample {highcharts} highcharts/xaxis/plotbands-label-style/
  443. * Blue and bold label
  444. *
  445. * @type {Highcharts.CSSObject}
  446. * @since 2.1
  447. * @apioption xAxis.plotBands.label.style
  448. */
  449. /**
  450. * The string text itself. A subset of HTML is supported.
  451. *
  452. * @type {string}
  453. * @since 2.1
  454. * @apioption xAxis.plotBands.label.text
  455. */
  456. /**
  457. * The text alignment for the label. While `align` determines where the
  458. * texts anchor point is placed within the plot band, `textAlign` determines
  459. * how the text is aligned against its anchor point. Possible values are
  460. * "left", "center" and "right". Defaults to the same as the `align` option.
  461. *
  462. * @sample {highcharts} highcharts/xaxis/plotbands-label-rotation/
  463. * Vertical text in center position but text-aligned left
  464. *
  465. * @type {Highcharts.AlignValue}
  466. * @since 2.1
  467. * @apioption xAxis.plotBands.label.textAlign
  468. */
  469. /**
  470. * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
  471. * to render the labels.
  472. *
  473. * @type {boolean}
  474. * @default false
  475. * @since 3.0.3
  476. * @apioption xAxis.plotBands.label.useHTML
  477. */
  478. /**
  479. * Vertical alignment of the label relative to the plot band. Can be one of
  480. * "top", "middle" or "bottom".
  481. *
  482. * @sample {highcharts} highcharts/xaxis/plotbands-label-verticalalign/
  483. * Vertically centered label
  484. * @sample {highstock} stock/xaxis/plotbands-label/
  485. * Plot band with labels
  486. *
  487. * @type {Highcharts.VerticalAlignValue}
  488. * @default top
  489. * @since 2.1
  490. * @apioption xAxis.plotBands.label.verticalAlign
  491. */
  492. /**
  493. * Horizontal position relative the alignment. Default varies by
  494. * orientation.
  495. *
  496. * @sample {highcharts} highcharts/xaxis/plotbands-label-align/
  497. * Aligned 10px from the right edge
  498. * @sample {highstock} stock/xaxis/plotbands-label/
  499. * Plot band with labels
  500. *
  501. * @type {number}
  502. * @since 2.1
  503. * @apioption xAxis.plotBands.label.x
  504. */
  505. /**
  506. * Vertical position of the text baseline relative to the alignment. Default
  507. * varies by orientation.
  508. *
  509. * @sample {highcharts} highcharts/xaxis/plotbands-label-y/
  510. * Label on x axis
  511. * @sample {highstock} stock/xaxis/plotbands-label/
  512. * Plot band with labels
  513. *
  514. * @type {number}
  515. * @since 2.1
  516. * @apioption xAxis.plotBands.label.y
  517. */
  518. /**
  519. * An array of lines stretching across the plot area, marking a specific
  520. * value on one of the axes.
  521. *
  522. * In styled mode, the plot lines are styled by the
  523. * `.highcharts-plot-line` class in addition to the `className` option.
  524. *
  525. * @type {Array<*>}
  526. * @product highcharts highstock gantt
  527. * @apioption xAxis.plotLines
  528. */
  529. /**
  530. * Flag to decide if plotLine should be rendered across all panes.
  531. *
  532. * @sample {highstock} stock/xaxis/plotlines-acrosspanes/
  533. * Plot lines on different panes
  534. *
  535. * @since 7.1.2
  536. * @product highstock
  537. * @type {boolean}
  538. * @default true
  539. * @apioption xAxis.plotLines.acrossPanes
  540. */
  541. /**
  542. * A custom class name, in addition to the default `highcharts-plot-line`,
  543. * to apply to each individual line.
  544. *
  545. * @type {string}
  546. * @since 5.0.0
  547. * @apioption xAxis.plotLines.className
  548. */
  549. /**
  550. * The color of the line.
  551. *
  552. * @sample {highcharts} highcharts/xaxis/plotlines-color/
  553. * A red line from X axis
  554. * @sample {highstock} stock/xaxis/plotlines/
  555. * Plot line on Y axis
  556. *
  557. * @type {Highcharts.ColorString}
  558. * @default #999999
  559. * @apioption xAxis.plotLines.color
  560. */
  561. /**
  562. * The dashing or dot style for the plot line. For possible values see
  563. * [this overview](https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-dashstyle-all/).
  564. *
  565. * @sample {highcharts} highcharts/xaxis/plotlines-dashstyle/
  566. * Dash and dot pattern
  567. * @sample {highstock} stock/xaxis/plotlines/
  568. * Plot line on Y axis
  569. *
  570. * @type {Highcharts.DashStyleValue}
  571. * @default Solid
  572. * @since 1.2
  573. * @apioption xAxis.plotLines.dashStyle
  574. */
  575. /**
  576. * An object defining mouse events for the plot line. Supported
  577. * properties are `click`, `mouseover`, `mouseout`, `mousemove`.
  578. *
  579. * @sample {highcharts} highcharts/xaxis/plotlines-events/
  580. * Mouse events demonstrated
  581. *
  582. * @since 1.2
  583. * @apioption xAxis.plotLines.events
  584. */
  585. /**
  586. * Click event on a plot band.
  587. *
  588. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  589. * @apioption xAxis.plotLines.events.click
  590. */
  591. /**
  592. * Mouse move event on a plot band.
  593. *
  594. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  595. * @apioption xAxis.plotLines.events.mousemove
  596. */
  597. /**
  598. * Mouse out event on the corner of a plot band.
  599. *
  600. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  601. * @apioption xAxis.plotLines.events.mouseout
  602. */
  603. /**
  604. * Mouse over event on a plot band.
  605. *
  606. * @type {Highcharts.EventCallbackFunction<Highcharts.PlotLineOrBand>}
  607. * @apioption xAxis.plotLines.events.mouseover
  608. */
  609. /**
  610. * An id used for identifying the plot line in Axis.removePlotLine.
  611. *
  612. * @sample {highcharts} highcharts/xaxis/plotlines-id/
  613. * Remove plot line by id
  614. *
  615. * @type {string}
  616. * @apioption xAxis.plotLines.id
  617. */
  618. /**
  619. * The position of the line in axis units.
  620. *
  621. * @sample {highcharts} highcharts/xaxis/plotlines-color/
  622. * Between two categories on X axis
  623. * @sample {highstock} stock/xaxis/plotlines/
  624. * Plot line on Y axis
  625. *
  626. * @type {number}
  627. * @apioption xAxis.plotLines.value
  628. */
  629. /**
  630. * The width or thickness of the plot line.
  631. *
  632. * @sample {highcharts} highcharts/xaxis/plotlines-color/
  633. * 2px wide line from X axis
  634. * @sample {highstock} stock/xaxis/plotlines/
  635. * Plot line on Y axis
  636. *
  637. * @type {number}
  638. * @default 2
  639. * @apioption xAxis.plotLines.width
  640. */
  641. /**
  642. * The z index of the plot line within the chart.
  643. *
  644. * @sample {highcharts} highcharts/xaxis/plotlines-zindex-behind/
  645. * Behind plot lines by default
  646. * @sample {highcharts} highcharts/xaxis/plotlines-zindex-above/
  647. * Above plot lines
  648. * @sample {highcharts} highcharts/xaxis/plotlines-zindex-above-all/
  649. * Above plot lines and series
  650. *
  651. * @type {number}
  652. * @since 1.2
  653. * @apioption xAxis.plotLines.zIndex
  654. */
  655. /**
  656. * Text labels for the plot bands
  657. *
  658. * @apioption xAxis.plotLines.label
  659. */
  660. /**
  661. * Horizontal alignment of the label. Can be one of "left", "center" or
  662. * "right".
  663. *
  664. * @sample {highcharts} highcharts/xaxis/plotlines-label-align-right/
  665. * Aligned to the right
  666. * @sample {highstock} stock/xaxis/plotlines/
  667. * Plot line on Y axis
  668. *
  669. * @type {Highcharts.AlignValue}
  670. * @default left
  671. * @since 2.1
  672. * @apioption xAxis.plotLines.label.align
  673. */
  674. /**
  675. * Callback JavaScript function to format the label. Useful properties like
  676. * the value of plot line or the range of plot band (`from` & `to`
  677. * properties) can be found in `this.options` object.
  678. *
  679. * @sample {highcharts} highcharts/xaxis/plotlines-plotbands-label-formatter
  680. * Label formatters for plot line and plot band.
  681. * @type {Highcharts.FormatterCallbackFunction<Highcharts.PlotLineOrBand>}
  682. * @apioption xAxis.plotLines.label.formatter
  683. */
  684. /**
  685. * Rotation of the text label in degrees. Defaults to 0 for horizontal plot
  686. * lines and 90 for vertical lines.
  687. *
  688. * @sample {highcharts} highcharts/xaxis/plotlines-label-verticalalign-middle/
  689. * Slanted text
  690. *
  691. * @type {number}
  692. * @since 2.1
  693. * @apioption xAxis.plotLines.label.rotation
  694. */
  695. /**
  696. * CSS styles for the text label.
  697. *
  698. * In styled mode, the labels are styled by the
  699. * `.highcharts-plot-line-label` class.
  700. *
  701. * @sample {highcharts} highcharts/xaxis/plotlines-label-style/
  702. * Blue and bold label
  703. *
  704. * @type {Highcharts.CSSObject}
  705. * @since 2.1
  706. * @apioption xAxis.plotLines.label.style
  707. */
  708. /**
  709. * The text itself. A subset of HTML is supported.
  710. *
  711. * @type {string}
  712. * @since 2.1
  713. * @apioption xAxis.plotLines.label.text
  714. */
  715. /**
  716. * The text alignment for the label. While `align` determines where the
  717. * texts anchor point is placed within the plot band, `textAlign` determines
  718. * how the text is aligned against its anchor point. Possible values are
  719. * "left", "center" and "right". Defaults to the same as the `align` option.
  720. *
  721. * @sample {highcharts} highcharts/xaxis/plotlines-label-textalign/
  722. * Text label in bottom position
  723. *
  724. * @type {Highcharts.AlignValue}
  725. * @since 2.1
  726. * @apioption xAxis.plotLines.label.textAlign
  727. */
  728. /**
  729. * Whether to [use HTML](https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting#html)
  730. * to render the labels.
  731. *
  732. * @type {boolean}
  733. * @default false
  734. * @since 3.0.3
  735. * @apioption xAxis.plotLines.label.useHTML
  736. */
  737. /**
  738. * Vertical alignment of the label relative to the plot line. Can be
  739. * one of "top", "middle" or "bottom".
  740. *
  741. * @sample {highcharts} highcharts/xaxis/plotlines-label-verticalalign-middle/
  742. * Vertically centered label
  743. *
  744. * @type {Highcharts.VerticalAlignValue}
  745. * @default {highcharts} top
  746. * @default {highstock} top
  747. * @since 2.1
  748. * @apioption xAxis.plotLines.label.verticalAlign
  749. */
  750. /**
  751. * Horizontal position relative the alignment. Default varies by
  752. * orientation.
  753. *
  754. * @sample {highcharts} highcharts/xaxis/plotlines-label-align-right/
  755. * Aligned 10px from the right edge
  756. * @sample {highstock} stock/xaxis/plotlines/
  757. * Plot line on Y axis
  758. *
  759. * @type {number}
  760. * @since 2.1
  761. * @apioption xAxis.plotLines.label.x
  762. */
  763. /**
  764. * Vertical position of the text baseline relative to the alignment. Default
  765. * varies by orientation.
  766. *
  767. * @sample {highcharts} highcharts/xaxis/plotlines-label-y/
  768. * Label below the plot line
  769. * @sample {highstock} stock/xaxis/plotlines/
  770. * Plot line on Y axis
  771. *
  772. * @type {number}
  773. * @since 2.1
  774. * @apioption xAxis.plotLines.label.y
  775. */
  776. /**
  777. * An array of objects defining plot bands on the Y axis.
  778. *
  779. * @type {Array<*>}
  780. * @extends xAxis.plotBands
  781. * @apioption yAxis.plotBands
  782. */
  783. /**
  784. * In a gauge chart, this option determines the inner radius of the
  785. * plot band that stretches along the perimeter. It can be given as
  786. * a percentage string, like `"100%"`, or as a pixel number, like `100`.
  787. * By default, the inner radius is controlled by the [thickness](
  788. * #yAxis.plotBands.thickness) option.
  789. *
  790. * @sample {highcharts} highcharts/xaxis/plotbands-gauge
  791. * Gauge plot band
  792. *
  793. * @type {number|string}
  794. * @since 2.3
  795. * @product highcharts
  796. * @apioption yAxis.plotBands.innerRadius
  797. */
  798. /**
  799. * In a gauge chart, this option determines the outer radius of the
  800. * plot band that stretches along the perimeter. It can be given as
  801. * a percentage string, like `"100%"`, or as a pixel number, like `100`.
  802. *
  803. * @sample {highcharts} highcharts/xaxis/plotbands-gauge
  804. * Gauge plot band
  805. *
  806. * @type {number|string}
  807. * @default 100%
  808. * @since 2.3
  809. * @product highcharts
  810. * @apioption yAxis.plotBands.outerRadius
  811. */
  812. /**
  813. * In a gauge chart, this option sets the width of the plot band
  814. * stretching along the perimeter. It can be given as a percentage
  815. * string, like `"10%"`, or as a pixel number, like `10`. The default
  816. * value 10 is the same as the default [tickLength](#yAxis.tickLength),
  817. * thus making the plot band act as a background for the tick markers.
  818. *
  819. * @sample {highcharts} highcharts/xaxis/plotbands-gauge
  820. * Gauge plot band
  821. *
  822. * @type {number|string}
  823. * @default 10
  824. * @since 2.3
  825. * @product highcharts
  826. * @apioption yAxis.plotBands.thickness
  827. */
  828. /**
  829. * An array of objects representing plot lines on the X axis
  830. *
  831. * @type {Array<*>}
  832. * @sample {highcharts} highcharts/xaxis/plotlines-color/
  833. * Basic plot line
  834. * @sample {highcharts} highcharts/series-solidgauge/labels-auto-aligned/
  835. * Solid gauge plot line
  836. * @extends xAxis.plotLines
  837. * @apioption yAxis.plotLines
  838. */
  839. /* eslint-disable no-invalid-this, valid-jsdoc */
  840. /**
  841. * Internal function to create the SVG path definition for a plot band.
  842. *
  843. * @function Highcharts.Axis#getPlotBandPath
  844. *
  845. * @param {number} from
  846. * The axis value to start from.
  847. *
  848. * @param {number} to
  849. * The axis value to end on.
  850. *
  851. * @return {Highcharts.SVGPathArray}
  852. * The SVG path definition in array form.
  853. */
  854. getPlotBandPath: function (from, to) {
  855. var toPath = this.getPlotLinePath({
  856. value: to,
  857. force: true,
  858. acrossPanes: this.options.acrossPanes
  859. }), path = this.getPlotLinePath({
  860. value: from,
  861. force: true,
  862. acrossPanes: this.options.acrossPanes
  863. }), result = [], i,
  864. // #4964 check if chart is inverted or plotband is on yAxis
  865. horiz = this.horiz, plus = 1, isFlat, outside = (from < this.min && to < this.min) ||
  866. (from > this.max && to > this.max);
  867. if (path && toPath) {
  868. // Flat paths don't need labels (#3836)
  869. if (outside) {
  870. isFlat = path.toString() === toPath.toString();
  871. plus = 0;
  872. }
  873. // Go over each subpath - for panes in Highstock
  874. for (i = 0; i < path.length; i += 6) {
  875. // Add 1 pixel when coordinates are the same
  876. if (horiz && toPath[i + 1] === path[i + 1]) {
  877. toPath[i + 1] += plus;
  878. toPath[i + 4] += plus;
  879. }
  880. else if (!horiz && toPath[i + 2] === path[i + 2]) {
  881. toPath[i + 2] += plus;
  882. toPath[i + 5] += plus;
  883. }
  884. result.push('M', path[i + 1], path[i + 2], 'L', path[i + 4], path[i + 5], toPath[i + 4], toPath[i + 5], toPath[i + 1], toPath[i + 2], 'z');
  885. result.isFlat = isFlat;
  886. }
  887. }
  888. else { // outside the axis area
  889. path = null;
  890. }
  891. return result;
  892. },
  893. /**
  894. * Add a plot band after render time.
  895. *
  896. * @sample highcharts/members/axis-addplotband/
  897. * Toggle the plot band from a button
  898. *
  899. * @function Highcharts.Axis#addPlotBand
  900. *
  901. * @param {Highcharts.AxisPlotBandsOptions} options
  902. * A configuration object for the plot band, as defined in
  903. * [xAxis.plotBands](https://api.highcharts.com/highcharts/xAxis.plotBands).
  904. *
  905. * @return {Highcharts.PlotLineOrBand|undefined}
  906. * The added plot band.
  907. */
  908. addPlotBand: function (options) {
  909. return this.addPlotBandOrLine(options, 'plotBands');
  910. },
  911. /**
  912. * Add a plot line after render time.
  913. *
  914. * @sample highcharts/members/axis-addplotline/
  915. * Toggle the plot line from a button
  916. *
  917. * @function Highcharts.Axis#addPlotLine
  918. *
  919. * @param {Highcharts.AxisPlotLinesOptions} options
  920. * A configuration object for the plot line, as defined in
  921. * [xAxis.plotLines](https://api.highcharts.com/highcharts/xAxis.plotLines).
  922. *
  923. * @return {Highcharts.PlotLineOrBand|undefined}
  924. * The added plot line.
  925. */
  926. addPlotLine: function (options) {
  927. return this.addPlotBandOrLine(options, 'plotLines');
  928. },
  929. /**
  930. * Add a plot band or plot line after render time. Called from addPlotBand
  931. * and addPlotLine internally.
  932. *
  933. * @private
  934. * @function Highcharts.Axis#addPlotBandOrLine
  935. *
  936. * @param {Highcharts.AxisPlotBandsOptions|Highcharts.AxisPlotLinesOptions} options
  937. * The plotBand or plotLine configuration object.
  938. *
  939. * @param {"plotBands"|"plotLines"} [coll]
  940. *
  941. * @return {Highcharts.PlotLineOrBand|undefined}
  942. */
  943. addPlotBandOrLine: function (options, coll) {
  944. var obj = new H.PlotLineOrBand(this, options).render(), userOptions = this.userOptions;
  945. if (obj) { // #2189
  946. // Add it to the user options for exporting and Axis.update
  947. if (coll) {
  948. // Workaround Microsoft/TypeScript issue #32693
  949. var updatedOptions = (userOptions[coll] || []);
  950. updatedOptions.push(options);
  951. userOptions[coll] = updatedOptions;
  952. }
  953. this.plotLinesAndBands.push(obj);
  954. }
  955. return obj;
  956. },
  957. /**
  958. * Remove a plot band or plot line from the chart by id. Called internally
  959. * from `removePlotBand` and `removePlotLine`.
  960. *
  961. * @private
  962. * @function Highcharts.Axis#removePlotBandOrLine
  963. * @param {string} id
  964. * @return {void}
  965. */
  966. removePlotBandOrLine: function (id) {
  967. var plotLinesAndBands = this.plotLinesAndBands, options = this.options, userOptions = this.userOptions, i = plotLinesAndBands.length;
  968. while (i--) {
  969. if (plotLinesAndBands[i].id === id) {
  970. plotLinesAndBands[i].destroy();
  971. }
  972. }
  973. ([
  974. options.plotLines || [],
  975. userOptions.plotLines || [],
  976. options.plotBands || [],
  977. userOptions.plotBands || []
  978. ]).forEach(function (arr) {
  979. i = arr.length;
  980. while (i--) {
  981. if (arr[i].id === id) {
  982. erase(arr, arr[i]);
  983. }
  984. }
  985. });
  986. },
  987. /**
  988. * Remove a plot band by its id.
  989. *
  990. * @sample highcharts/members/axis-removeplotband/
  991. * Remove plot band by id
  992. * @sample highcharts/members/axis-addplotband/
  993. * Toggle the plot band from a button
  994. *
  995. * @function Highcharts.Axis#removePlotBand
  996. *
  997. * @param {string} id
  998. * The plot band's `id` as given in the original configuration
  999. * object or in the `addPlotBand` option.
  1000. *
  1001. * @return {void}
  1002. */
  1003. removePlotBand: function (id) {
  1004. this.removePlotBandOrLine(id);
  1005. },
  1006. /**
  1007. * Remove a plot line by its id.
  1008. *
  1009. * @sample highcharts/xaxis/plotlines-id/
  1010. * Remove plot line by id
  1011. * @sample highcharts/members/axis-addplotline/
  1012. * Toggle the plot line from a button
  1013. *
  1014. * @function Highcharts.Axis#removePlotLine
  1015. *
  1016. * @param {string} id
  1017. * The plot line's `id` as given in the original configuration
  1018. * object or in the `addPlotLine` option.
  1019. */
  1020. removePlotLine: function (id) {
  1021. this.removePlotBandOrLine(id);
  1022. }
  1023. });