Tick.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648
  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. /**
  13. * Optional parameters for the tick.
  14. * @private
  15. * @interface Highcharts.TickParametersObject
  16. */ /**
  17. * Set category for the tick.
  18. * @name Highcharts.TickParametersObject#category
  19. * @type {string|undefined}
  20. */ /**
  21. * @name Highcharts.TickParametersObject#options
  22. * @type {Highcharts.Dictionary<any>|undefined}
  23. */ /**
  24. * Set tickmarkOffset for the tick.
  25. * @name Highcharts.TickParametersObject#tickmarkOffset
  26. * @type {number|undefined}
  27. */
  28. import U from './Utilities.js';
  29. var clamp = U.clamp, correctFloat = U.correctFloat, defined = U.defined, destroyObjectProperties = U.destroyObjectProperties, extend = U.extend, isNumber = U.isNumber, objectEach = U.objectEach, pick = U.pick;
  30. var fireEvent = H.fireEvent, merge = H.merge, deg2rad = H.deg2rad;
  31. /* eslint-disable no-invalid-this, valid-jsdoc */
  32. /**
  33. * The Tick class.
  34. *
  35. * @class
  36. * @name Highcharts.Tick
  37. *
  38. * @param {Highcharts.Axis} axis
  39. * The axis of the tick.
  40. *
  41. * @param {number} pos
  42. * The position of the tick on the axis in terms of axis values.
  43. *
  44. * @param {string} [type]
  45. * The type of tick, either 'minor' or an empty string
  46. *
  47. * @param {boolean} [noLabel=false]
  48. * Whether to disable the label or not. Defaults to false.
  49. *
  50. * @param {object} [parameters]
  51. * Optional parameters for the tick.
  52. */
  53. H.Tick = function (axis, pos, type, noLabel, parameters) {
  54. /**
  55. * The related axis of the tick.
  56. * @name Highcharts.Tick#axis
  57. * @type {Highcharts.Axis}
  58. */
  59. this.axis = axis;
  60. /**
  61. * The logical position of the tick on the axis in terms of axis values.
  62. * @name Highcharts.Tick#pos
  63. * @type {number}
  64. */
  65. this.pos = pos;
  66. /**
  67. * The tick type, which can be `"minor"`, or an empty string.
  68. * @name Highcharts.Tick#type
  69. * @type {string}
  70. */
  71. this.type = type || '';
  72. this.isNew = true;
  73. this.isNewLabel = true;
  74. this.parameters = parameters || {};
  75. /**
  76. * The mark offset of the tick on the axis. Usually `undefined`, numeric for
  77. * grid axes.
  78. * @name Highcharts.Tick#tickmarkOffset
  79. * @type {number|undefined}
  80. */
  81. this.tickmarkOffset = this.parameters.tickmarkOffset;
  82. this.options = this.parameters.options;
  83. if (!type && !noLabel) {
  84. this.addLabel();
  85. }
  86. };
  87. /** @lends Highcharts.Tick.prototype */
  88. H.Tick.prototype = {
  89. /**
  90. * Write the tick label.
  91. *
  92. * @private
  93. * @function Highcharts.Tick#addLabel
  94. * @return {void}
  95. */
  96. addLabel: function () {
  97. var tick = this, axis = tick.axis, options = axis.options, chart = axis.chart, categories = axis.categories, names = axis.names, pos = tick.pos, labelOptions = pick(tick.options && tick.options.labels, options.labels), str, tickPositions = axis.tickPositions, isFirst = pos === tickPositions[0], isLast = pos === tickPositions[tickPositions.length - 1], value = this.parameters.category || (categories ?
  98. pick(categories[pos], names[pos], pos) :
  99. pos), label = tick.label, animateLabels = (!labelOptions.step || labelOptions.step === 1) &&
  100. axis.tickInterval === 1, tickPositionInfo = tickPositions.info, dateTimeLabelFormat, dateTimeLabelFormats, i, list;
  101. // Set the datetime label format. If a higher rank is set for this
  102. // position, use that. If not, use the general format.
  103. if (axis.isDatetimeAxis && tickPositionInfo) {
  104. dateTimeLabelFormats = chart.time.resolveDTLFormat(options.dateTimeLabelFormats[(!options.grid &&
  105. tickPositionInfo.higherRanks[pos]) ||
  106. tickPositionInfo.unitName]);
  107. dateTimeLabelFormat = dateTimeLabelFormats.main;
  108. }
  109. // set properties for access in render method
  110. /**
  111. * True if the tick is the first one on the axis.
  112. * @name Highcharts.Tick#isFirst
  113. * @readonly
  114. * @type {boolean|undefined}
  115. */
  116. tick.isFirst = isFirst;
  117. /**
  118. * True if the tick is the last one on the axis.
  119. * @name Highcharts.Tick#isLast
  120. * @readonly
  121. * @type {boolean|undefined}
  122. */
  123. tick.isLast = isLast;
  124. // Get the string
  125. tick.formatCtx = {
  126. axis: axis,
  127. chart: chart,
  128. isFirst: isFirst,
  129. isLast: isLast,
  130. dateTimeLabelFormat: dateTimeLabelFormat,
  131. tickPositionInfo: tickPositionInfo,
  132. value: axis.isLog ? correctFloat(axis.lin2log(value)) : value,
  133. pos: pos
  134. };
  135. str = axis.labelFormatter.call(tick.formatCtx, this.formatCtx);
  136. // Set up conditional formatting based on the format list if existing.
  137. list = dateTimeLabelFormats && dateTimeLabelFormats.list;
  138. if (list) {
  139. tick.shortenLabel = function () {
  140. for (i = 0; i < list.length; i++) {
  141. label.attr({
  142. text: axis.labelFormatter.call(extend(tick.formatCtx, { dateTimeLabelFormat: list[i] }))
  143. });
  144. if (label.getBBox().width <
  145. axis.getSlotWidth(tick) - 2 *
  146. pick(labelOptions.padding, 5)) {
  147. return;
  148. }
  149. }
  150. label.attr({
  151. text: ''
  152. });
  153. };
  154. }
  155. // Call only after first render
  156. if (animateLabels && axis._addedPlotLB && axis.isXAxis) {
  157. tick.moveLabel(str, labelOptions);
  158. }
  159. // First call
  160. if (!defined(label) && !tick.movedLabel) {
  161. tick.label = label = tick.createLabel({ x: 0, y: 0 }, str, labelOptions);
  162. // Base value to detect change for new calls to getBBox
  163. tick.rotation = 0;
  164. // update
  165. }
  166. else if (label && label.textStr !== str && !animateLabels) {
  167. // When resetting text, also reset the width if dynamically set
  168. // (#8809)
  169. if (label.textWidth &&
  170. !(labelOptions.style && labelOptions.style.width) &&
  171. !label.styles.width) {
  172. label.css({ width: null });
  173. }
  174. label.attr({ text: str });
  175. label.textPxLength = label.getBBox().width;
  176. }
  177. },
  178. /**
  179. * Try to replace the label if the same one already exists.
  180. *
  181. * @private
  182. * @function Highcharts.Tick#moveLabel
  183. * @param {string} str
  184. * @param {Highcharts.XAxisLabelsOptions} labelOptions
  185. *
  186. * @return {void}
  187. */
  188. moveLabel: function (str, labelOptions) {
  189. var tick = this, label = tick.label, moved = false, xAxis = tick.axis, chart = xAxis.chart, labelPos, reversed = xAxis.reversed, inverted = chart.inverted, xPos, yPos;
  190. if (label && label.textStr === str) {
  191. tick.movedLabel = label;
  192. moved = true;
  193. delete tick.label;
  194. }
  195. else { // Find a label with the same string
  196. objectEach(xAxis.ticks, function (currentTick) {
  197. if (!moved &&
  198. !currentTick.isNew &&
  199. currentTick !== tick &&
  200. currentTick.label &&
  201. currentTick.label.textStr === str) {
  202. tick.movedLabel = currentTick.label;
  203. moved = true;
  204. currentTick.labelPos = tick.movedLabel.xy;
  205. delete currentTick.label;
  206. }
  207. });
  208. }
  209. // Create new label if the actual one is moved
  210. if (!moved && (tick.labelPos || label)) {
  211. labelPos = tick.labelPos || label.xy;
  212. xPos = inverted ?
  213. labelPos.x : (reversed ? 0 : xAxis.width + xAxis.left);
  214. yPos = inverted ?
  215. (reversed ? (xAxis.width + xAxis.left) : 0) : labelPos.y;
  216. tick.movedLabel = tick.createLabel({ x: xPos, y: yPos }, str, labelOptions);
  217. if (tick.movedLabel) {
  218. tick.movedLabel.attr({ opacity: 0 });
  219. }
  220. }
  221. },
  222. /**
  223. * Render and return the label of the tick.
  224. *
  225. * @private
  226. * @function Highcharts.Tick#createLabel
  227. * @param {Highcharts.PositionObject} xy
  228. * @param {string} str
  229. * @param {Highcharts.XAxisLabelsOptions} labelOptions
  230. * @return {Highcharts.SVGElement|undefined}
  231. */
  232. createLabel: function (xy, str, labelOptions) {
  233. var axis = this.axis, chart = axis.chart, label = defined(str) && labelOptions.enabled ?
  234. chart.renderer
  235. .text(str, xy.x, xy.y, labelOptions.useHTML)
  236. .add(axis.labelGroup) :
  237. null;
  238. // Un-rotated length
  239. if (label) {
  240. // Without position absolute, IE export sometimes is wrong
  241. if (!chart.styledMode) {
  242. label.css(merge(labelOptions.style));
  243. }
  244. label.textPxLength = label.getBBox().width;
  245. }
  246. return label;
  247. },
  248. /**
  249. * Replace labels with the moved ones to perform animation. Additionally
  250. * destroy unused labels.
  251. *
  252. * @private
  253. * @function Highcharts.Tick#replaceMovedLabel
  254. * @return {void}
  255. */
  256. replaceMovedLabel: function () {
  257. var tick = this, label = tick.label, axis = tick.axis, reversed = axis.reversed, chart = tick.axis.chart, inverted = chart.inverted, x, y;
  258. // Animate and destroy
  259. if (label && !tick.isNew) {
  260. x = inverted ? label.xy.x : (reversed ? axis.left : axis.width + axis.left);
  261. y = inverted ?
  262. (reversed ? axis.width + axis.top : axis.top) :
  263. label.xy.y;
  264. label.animate({ x: x, y: y, opacity: 0 }, void 0, label.destroy);
  265. delete tick.label;
  266. }
  267. axis.isDirty = true;
  268. tick.label = tick.movedLabel;
  269. delete tick.movedLabel;
  270. },
  271. /**
  272. * Get the offset height or width of the label
  273. *
  274. * @private
  275. * @function Highcharts.Tick#getLabelSize
  276. * @return {number}
  277. */
  278. getLabelSize: function () {
  279. return this.label ?
  280. this.label.getBBox()[this.axis.horiz ? 'height' : 'width'] :
  281. 0;
  282. },
  283. /**
  284. * Handle the label overflow by adjusting the labels to the left and right
  285. * edge, or hide them if they collide into the neighbour label.
  286. *
  287. * @private
  288. * @function Highcharts.Tick#handleOverflow
  289. * @param {Highcharts.PositionObject} xy
  290. * @return {void}
  291. */
  292. handleOverflow: function (xy) {
  293. var tick = this, axis = this.axis, labelOptions = axis.options.labels, pxPos = xy.x, chartWidth = axis.chart.chartWidth, spacing = axis.chart.spacing, leftBound = pick(axis.labelLeft, Math.min(axis.pos, spacing[3])), rightBound = pick(axis.labelRight, Math.max(!axis.isRadial ? axis.pos + axis.len : 0, chartWidth - spacing[1])), label = this.label, rotation = this.rotation, factor = {
  294. left: 0,
  295. center: 0.5,
  296. right: 1
  297. }[axis.labelAlign || label.attr('align')], labelWidth = label.getBBox().width, slotWidth = axis.getSlotWidth(tick), modifiedSlotWidth = slotWidth, xCorrection = factor, goRight = 1, leftPos, rightPos, textWidth, css = {};
  298. // Check if the label overshoots the chart spacing box. If it does, move
  299. // it. If it now overshoots the slotWidth, add ellipsis.
  300. if (!rotation &&
  301. pick(labelOptions.overflow, 'justify') === 'justify') {
  302. leftPos = pxPos - factor * labelWidth;
  303. rightPos = pxPos + (1 - factor) * labelWidth;
  304. if (leftPos < leftBound) {
  305. modifiedSlotWidth =
  306. xy.x + modifiedSlotWidth * (1 - factor) - leftBound;
  307. }
  308. else if (rightPos > rightBound) {
  309. modifiedSlotWidth =
  310. rightBound - xy.x + modifiedSlotWidth * factor;
  311. goRight = -1;
  312. }
  313. modifiedSlotWidth = Math.min(slotWidth, modifiedSlotWidth); // #4177
  314. if (modifiedSlotWidth < slotWidth && axis.labelAlign === 'center') {
  315. xy.x += (goRight *
  316. (slotWidth -
  317. modifiedSlotWidth -
  318. xCorrection * (slotWidth - Math.min(labelWidth, modifiedSlotWidth))));
  319. }
  320. // If the label width exceeds the available space, set a text width
  321. // to be picked up below. Also, if a width has been set before, we
  322. // need to set a new one because the reported labelWidth will be
  323. // limited by the box (#3938).
  324. if (labelWidth > modifiedSlotWidth ||
  325. (axis.autoRotation && (label.styles || {}).width)) {
  326. textWidth = modifiedSlotWidth;
  327. }
  328. // Add ellipsis to prevent rotated labels to be clipped against the edge
  329. // of the chart
  330. }
  331. else if (rotation < 0 &&
  332. pxPos - factor * labelWidth < leftBound) {
  333. textWidth = Math.round(pxPos / Math.cos(rotation * deg2rad) - leftBound);
  334. }
  335. else if (rotation > 0 &&
  336. pxPos + factor * labelWidth > rightBound) {
  337. textWidth = Math.round((chartWidth - pxPos) /
  338. Math.cos(rotation * deg2rad));
  339. }
  340. if (textWidth) {
  341. if (tick.shortenLabel) {
  342. tick.shortenLabel();
  343. }
  344. else {
  345. css.width = Math.floor(textWidth);
  346. if (!(labelOptions.style || {}).textOverflow) {
  347. css.textOverflow = 'ellipsis';
  348. }
  349. label.css(css);
  350. }
  351. }
  352. },
  353. /**
  354. * Gets the x and y positions for ticks in terms of pixels.
  355. *
  356. * @private
  357. * @function Highcharts.Tick#getPosition
  358. *
  359. * @param {boolean} horiz
  360. * Whether the tick is on an horizontal axis or not.
  361. *
  362. * @param {number} tickPos
  363. * Position of the tick.
  364. *
  365. * @param {number} tickmarkOffset
  366. * Tickmark offset for all ticks.
  367. *
  368. * @param {boolean} [old]
  369. * Whether the axis has changed or not.
  370. *
  371. * @return {Highcharts.PositionObject}
  372. * The tick position.
  373. *
  374. * @fires Highcharts.Tick#event:afterGetPosition
  375. */
  376. getPosition: function (horiz, tickPos, tickmarkOffset, old) {
  377. var axis = this.axis, chart = axis.chart, cHeight = (old && chart.oldChartHeight) || chart.chartHeight, pos;
  378. pos = {
  379. x: horiz ?
  380. correctFloat(axis.translate(tickPos + tickmarkOffset, null, null, old) +
  381. axis.transB) :
  382. (axis.left +
  383. axis.offset +
  384. (axis.opposite ?
  385. (((old && chart.oldChartWidth) ||
  386. chart.chartWidth) -
  387. axis.right -
  388. axis.left) :
  389. 0)),
  390. y: horiz ?
  391. (cHeight -
  392. axis.bottom +
  393. axis.offset -
  394. (axis.opposite ? axis.height : 0)) :
  395. correctFloat(cHeight -
  396. axis.translate(tickPos + tickmarkOffset, null, null, old) -
  397. axis.transB)
  398. };
  399. // Chrome workaround for #10516
  400. pos.y = clamp(pos.y, -1e5, 1e5);
  401. fireEvent(this, 'afterGetPosition', { pos: pos });
  402. return pos;
  403. },
  404. /**
  405. * Get the x, y position of the tick label
  406. *
  407. * @private
  408. * @return {Highcharts.PositionObject}
  409. */
  410. getLabelPosition: function (x, y, label, horiz, labelOptions, tickmarkOffset, index, step) {
  411. var axis = this.axis, transA = axis.transA, reversed = ( // #7911
  412. axis.isLinked && axis.linkedParent ?
  413. axis.linkedParent.reversed :
  414. axis.reversed), staggerLines = axis.staggerLines, rotCorr = axis.tickRotCorr || { x: 0, y: 0 }, yOffset = labelOptions.y,
  415. // Adjust for label alignment if we use reserveSpace: true (#5286)
  416. labelOffsetCorrection = (!horiz && !axis.reserveSpaceDefault ?
  417. -axis.labelOffset * (axis.labelAlign === 'center' ? 0.5 : 1) :
  418. 0), line, pos = {};
  419. if (!defined(yOffset)) {
  420. if (axis.side === 0) {
  421. yOffset = label.rotation ? -8 : -label.getBBox().height;
  422. }
  423. else if (axis.side === 2) {
  424. yOffset = rotCorr.y + 8;
  425. }
  426. else {
  427. // #3140, #3140
  428. yOffset = Math.cos(label.rotation * deg2rad) *
  429. (rotCorr.y - label.getBBox(false, 0).height / 2);
  430. }
  431. }
  432. x = x +
  433. labelOptions.x +
  434. labelOffsetCorrection +
  435. rotCorr.x -
  436. (tickmarkOffset && horiz ?
  437. tickmarkOffset * transA * (reversed ? -1 : 1) :
  438. 0);
  439. y = y + yOffset - (tickmarkOffset && !horiz ?
  440. tickmarkOffset * transA * (reversed ? 1 : -1) : 0);
  441. // Correct for staggered labels
  442. if (staggerLines) {
  443. line = (index / (step || 1) % staggerLines);
  444. if (axis.opposite) {
  445. line = staggerLines - line - 1;
  446. }
  447. y += line * (axis.labelOffset / staggerLines);
  448. }
  449. pos.x = x;
  450. pos.y = Math.round(y);
  451. fireEvent(this, 'afterGetLabelPosition', { pos: pos, tickmarkOffset: tickmarkOffset, index: index });
  452. return pos;
  453. },
  454. /**
  455. * Extendible method to return the path of the marker
  456. *
  457. * @private
  458. *
  459. */
  460. getMarkPath: function (x, y, tickLength, tickWidth, horiz, renderer) {
  461. return renderer.crispLine([
  462. 'M',
  463. x,
  464. y,
  465. 'L',
  466. x + (horiz ? 0 : -tickLength),
  467. y + (horiz ? tickLength : 0)
  468. ], tickWidth);
  469. },
  470. /**
  471. * Renders the gridLine.
  472. *
  473. * @private
  474. * @param {boolean} old Whether or not the tick is old
  475. * @param {number} opacity The opacity of the grid line
  476. * @param {number} reverseCrisp Modifier for avoiding overlapping 1 or -1
  477. * @return {void}
  478. */
  479. renderGridLine: function (old, opacity, reverseCrisp) {
  480. var tick = this, axis = tick.axis, options = axis.options, gridLine = tick.gridLine, gridLinePath, attribs = {}, pos = tick.pos, type = tick.type, tickmarkOffset = pick(tick.tickmarkOffset, axis.tickmarkOffset), renderer = axis.chart.renderer, gridPrefix = type ? type + 'Grid' : 'grid', gridLineWidth = options[gridPrefix + 'LineWidth'], gridLineColor = options[gridPrefix + 'LineColor'], dashStyle = options[gridPrefix + 'LineDashStyle'];
  481. if (!gridLine) {
  482. if (!axis.chart.styledMode) {
  483. attribs.stroke = gridLineColor;
  484. attribs['stroke-width'] = gridLineWidth;
  485. if (dashStyle) {
  486. attribs.dashstyle = dashStyle;
  487. }
  488. }
  489. if (!type) {
  490. attribs.zIndex = 1;
  491. }
  492. if (old) {
  493. opacity = 0;
  494. }
  495. /**
  496. * The rendered grid line of the tick.
  497. * @name Highcharts.Tick#gridLine
  498. * @type {Highcharts.SVGElement|undefined}
  499. */
  500. tick.gridLine = gridLine = renderer.path()
  501. .attr(attribs)
  502. .addClass('highcharts-' + (type ? type + '-' : '') + 'grid-line')
  503. .add(axis.gridGroup);
  504. }
  505. if (gridLine) {
  506. gridLinePath = axis.getPlotLinePath({
  507. value: pos + tickmarkOffset,
  508. lineWidth: gridLine.strokeWidth() * reverseCrisp,
  509. force: 'pass',
  510. old: old
  511. });
  512. // If the parameter 'old' is set, the current call will be followed
  513. // by another call, therefore do not do any animations this time
  514. if (gridLinePath) {
  515. gridLine[old || tick.isNew ? 'attr' : 'animate']({
  516. d: gridLinePath,
  517. opacity: opacity
  518. });
  519. }
  520. }
  521. },
  522. /**
  523. * Renders the tick mark.
  524. *
  525. * @private
  526. * @param {Highcharts.PositionObject} xy The position vector of the mark
  527. * @param {number} opacity The opacity of the mark
  528. * @param {number} reverseCrisp Modifier for avoiding overlapping 1 or -1
  529. * @return {void}
  530. */
  531. renderMark: function (xy, opacity, reverseCrisp) {
  532. var tick = this, axis = tick.axis, options = axis.options, renderer = axis.chart.renderer, type = tick.type, tickPrefix = type ? type + 'Tick' : 'tick', tickSize = axis.tickSize(tickPrefix), mark = tick.mark, isNewMark = !mark, x = xy.x, y = xy.y, tickWidth = pick(options[tickPrefix + 'Width'], !type && axis.isXAxis ? 1 : 0), // X axis defaults to 1
  533. tickColor = options[tickPrefix + 'Color'];
  534. if (tickSize) {
  535. // negate the length
  536. if (axis.opposite) {
  537. tickSize[0] = -tickSize[0];
  538. }
  539. // First time, create it
  540. if (isNewMark) {
  541. /**
  542. * The rendered mark of the tick.
  543. * @name Highcharts.Tick#mark
  544. * @type {Highcharts.SVGElement|undefined}
  545. */
  546. tick.mark = mark = renderer.path()
  547. .addClass('highcharts-' + (type ? type + '-' : '') + 'tick')
  548. .add(axis.axisGroup);
  549. if (!axis.chart.styledMode) {
  550. mark.attr({
  551. stroke: tickColor,
  552. 'stroke-width': tickWidth
  553. });
  554. }
  555. }
  556. mark[isNewMark ? 'attr' : 'animate']({
  557. d: tick.getMarkPath(x, y, tickSize[0], mark.strokeWidth() * reverseCrisp, axis.horiz, renderer),
  558. opacity: opacity
  559. });
  560. }
  561. },
  562. /**
  563. * Renders the tick label.
  564. * Note: The label should already be created in init(), so it should only
  565. * have to be moved into place.
  566. *
  567. * @private
  568. * @param {Highcharts.PositionObject} xy The position vector of the label
  569. * @param {boolean} old Whether or not the tick is old
  570. * @param {number} opacity The opacity of the label
  571. * @param {number} index The index of the tick
  572. * @return {void}
  573. */
  574. renderLabel: function (xy, old, opacity, index) {
  575. var tick = this, axis = tick.axis, horiz = axis.horiz, options = axis.options, label = tick.label, labelOptions = options.labels, step = labelOptions.step, tickmarkOffset = pick(tick.tickmarkOffset, axis.tickmarkOffset), show = true, x = xy.x, y = xy.y;
  576. if (label && isNumber(x)) {
  577. label.xy = xy = tick.getLabelPosition(x, y, label, horiz, labelOptions, tickmarkOffset, index, step);
  578. // Apply show first and show last. If the tick is both first and
  579. // last, it is a single centered tick, in which case we show the
  580. // label anyway (#2100).
  581. if ((tick.isFirst &&
  582. !tick.isLast &&
  583. !pick(options.showFirstLabel, 1)) ||
  584. (tick.isLast &&
  585. !tick.isFirst &&
  586. !pick(options.showLastLabel, 1))) {
  587. show = false;
  588. // Handle label overflow and show or hide accordingly
  589. }
  590. else if (horiz &&
  591. !labelOptions.step &&
  592. !labelOptions.rotation &&
  593. !old &&
  594. opacity !== 0) {
  595. tick.handleOverflow(xy);
  596. }
  597. // apply step
  598. if (step && index % step) {
  599. // show those indices dividable by step
  600. show = false;
  601. }
  602. // Set the new position, and show or hide
  603. if (show && isNumber(xy.y)) {
  604. xy.opacity = opacity;
  605. label[tick.isNewLabel ? 'attr' : 'animate'](xy);
  606. tick.isNewLabel = false;
  607. }
  608. else {
  609. label.attr('y', -9999); // #1338
  610. tick.isNewLabel = true;
  611. }
  612. }
  613. },
  614. /**
  615. * Put everything in place
  616. *
  617. * @private
  618. * @param {number} index
  619. * @param {boolean} [old]
  620. * Use old coordinates to prepare an animation into new position
  621. * @param {number} [opacity]
  622. * @return {voids}
  623. */
  624. render: function (index, old, opacity) {
  625. var tick = this, axis = tick.axis, horiz = axis.horiz, pos = tick.pos, tickmarkOffset = pick(tick.tickmarkOffset, axis.tickmarkOffset), xy = tick.getPosition(horiz, pos, tickmarkOffset, old), x = xy.x, y = xy.y, reverseCrisp = ((horiz && x === axis.pos + axis.len) ||
  626. (!horiz && y === axis.pos)) ? -1 : 1; // #1480, #1687
  627. opacity = pick(opacity, 1);
  628. this.isActive = true;
  629. // Create the grid line
  630. this.renderGridLine(old, opacity, reverseCrisp);
  631. // create the tick mark
  632. this.renderMark(xy, opacity, reverseCrisp);
  633. // the label is created on init - now move it into place
  634. this.renderLabel(xy, old, opacity, index);
  635. tick.isNew = false;
  636. H.fireEvent(this, 'afterRender');
  637. },
  638. /**
  639. * Destructor for the tick prototype
  640. *
  641. * @private
  642. * @function Highcharts.Tick#destroy
  643. * @return {void}
  644. */
  645. destroy: function () {
  646. destroyObjectProperties(this, this.axis);
  647. }
  648. };