DataLabels.js 51 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189
  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. * Callback JavaScript function to format the data label as a string. Note that
  14. * if a `format` is defined, the format takes precedence and the formatter is
  15. * ignored.
  16. *
  17. * @callback Highcharts.DataLabelsFormatterCallbackFunction
  18. *
  19. * @param {Highcharts.DataLabelsFormatterContextObject} this
  20. * Data label context to format
  21. *
  22. * @return {number|string|null|undefined}
  23. * Formatted data label text
  24. */
  25. /**
  26. * Context for the callback function to format the data label.
  27. *
  28. * @interface Highcharts.DataLabelsFormatterContextObject
  29. */ /**
  30. * Stacked series and pies only. The point's percentage of the total.
  31. * @name Highcharts.DataLabelsFormatterContextObject#percentage
  32. * @type {number|undefined}
  33. */ /**
  34. * The point object. The point name, if defined, is available through
  35. * `this.point.name`.
  36. * @name Highcharts.DataLabelsFormatterContextObject#point
  37. * @type {Highcharts.Point}
  38. */ /**
  39. * The series object. The series name is available through `this.series.name`.
  40. * @name Highcharts.DataLabelsFormatterContextObject#series
  41. * @type {Highcharts.Series}
  42. */ /**
  43. * Stacked series only. The total value at this point's x value.
  44. * @name Highcharts.DataLabelsFormatterContextObject#total
  45. * @type {number|undefined}
  46. */ /**
  47. * The x value.
  48. * @name Highcharts.DataLabelsFormatterContextObject#x
  49. * @type {number}
  50. */ /**
  51. * The y value.
  52. * @name Highcharts.DataLabelsFormatterContextObject#y
  53. * @type {number|null}
  54. */
  55. /**
  56. * Options for the series data labels, appearing next to each data point.
  57. *
  58. * Since v6.2.0, multiple data labels can be applied to each single point by
  59. * defining them as an array of configs.
  60. *
  61. * In styled mode, the data labels can be styled with the
  62. * `.highcharts-data-label-box` and `.highcharts-data-label` class names.
  63. *
  64. * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-enabled|Highcharts-Demo:}
  65. * Data labels enabled
  66. * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-datalabels-multiple|Highcharts-Demo:}
  67. * Multiple data labels on a bar series
  68. * @see {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/series-datalabels|Highcharts-Demo:}
  69. * Style mode example
  70. *
  71. * @interface Highcharts.DataLabelsOptionsObject
  72. */
  73. /**
  74. * Values for handling data labels that flow outside the plot area.
  75. *
  76. * @typedef {"allow"|"justify"} Highcharts.DataLabelsOverflowValue
  77. */
  78. import U from './Utilities.js';
  79. var animObject = U.animObject, arrayMax = U.arrayMax, clamp = U.clamp, defined = U.defined, extend = U.extend, isArray = U.isArray, objectEach = U.objectEach, pick = U.pick, relativeLength = U.relativeLength, splat = U.splat;
  80. import './Series.js';
  81. var format = H.format, merge = H.merge, noop = H.noop, Series = H.Series, seriesTypes = H.seriesTypes, stableSort = H.stableSort;
  82. /* eslint-disable valid-jsdoc */
  83. /**
  84. * General distribution algorithm for distributing labels of differing size
  85. * along a confined length in two dimensions. The algorithm takes an array of
  86. * objects containing a size, a target and a rank. It will place the labels as
  87. * close as possible to their targets, skipping the lowest ranked labels if
  88. * necessary.
  89. *
  90. * @private
  91. * @function Highcharts.distribute
  92. * @param {Highcharts.DataLabelsBoxArray} boxes
  93. * @param {number} len
  94. * @param {number} maxDistance
  95. * @return {void}
  96. */
  97. H.distribute = function (boxes, len, maxDistance) {
  98. var i, overlapping = true, origBoxes = boxes, // Original array will be altered with added .pos
  99. restBoxes = [], // The outranked overshoot
  100. box, target, total = 0, reducedLen = origBoxes.reducedLen || len;
  101. /**
  102. * @private
  103. */
  104. function sortByTarget(a, b) {
  105. return a.target - b.target;
  106. }
  107. // If the total size exceeds the len, remove those boxes with the lowest
  108. // rank
  109. i = boxes.length;
  110. while (i--) {
  111. total += boxes[i].size;
  112. }
  113. // Sort by rank, then slice away overshoot
  114. if (total > reducedLen) {
  115. stableSort(boxes, function (a, b) {
  116. return (b.rank || 0) - (a.rank || 0);
  117. });
  118. i = 0;
  119. total = 0;
  120. while (total <= reducedLen) {
  121. total += boxes[i].size;
  122. i++;
  123. }
  124. restBoxes = boxes.splice(i - 1, boxes.length);
  125. }
  126. // Order by target
  127. stableSort(boxes, sortByTarget);
  128. // So far we have been mutating the original array. Now
  129. // create a copy with target arrays
  130. boxes = boxes.map(function (box) {
  131. return {
  132. size: box.size,
  133. targets: [box.target],
  134. align: pick(box.align, 0.5)
  135. };
  136. });
  137. while (overlapping) {
  138. // Initial positions: target centered in box
  139. i = boxes.length;
  140. while (i--) {
  141. box = boxes[i];
  142. // Composite box, average of targets
  143. target = (Math.min.apply(0, box.targets) +
  144. Math.max.apply(0, box.targets)) / 2;
  145. box.pos = clamp(target - box.size * box.align, 0, len - box.size);
  146. }
  147. // Detect overlap and join boxes
  148. i = boxes.length;
  149. overlapping = false;
  150. while (i--) {
  151. // Overlap
  152. if (i > 0 &&
  153. boxes[i - 1].pos + boxes[i - 1].size >
  154. boxes[i].pos) {
  155. // Add this size to the previous box
  156. boxes[i - 1].size += boxes[i].size;
  157. boxes[i - 1].targets = boxes[i - 1]
  158. .targets
  159. .concat(boxes[i].targets);
  160. boxes[i - 1].align = 0.5;
  161. // Overlapping right, push left
  162. if (boxes[i - 1].pos + boxes[i - 1].size > len) {
  163. boxes[i - 1].pos = len - boxes[i - 1].size;
  164. }
  165. boxes.splice(i, 1); // Remove this item
  166. overlapping = true;
  167. }
  168. }
  169. }
  170. // Add the rest (hidden boxes)
  171. origBoxes.push.apply(origBoxes, restBoxes);
  172. // Now the composite boxes are placed, we need to put the original boxes
  173. // within them
  174. i = 0;
  175. boxes.some(function (box) {
  176. var posInCompositeBox = 0;
  177. if (box.targets.some(function () {
  178. origBoxes[i].pos = box.pos + posInCompositeBox;
  179. // If the distance between the position and the target exceeds
  180. // maxDistance, abort the loop and decrease the length in increments
  181. // of 10% to recursively reduce the number of visible boxes by
  182. // rank. Once all boxes are within the maxDistance, we're good.
  183. if (Math.abs(origBoxes[i].pos - origBoxes[i].target) >
  184. maxDistance) {
  185. // Reset the positions that are already set
  186. origBoxes.slice(0, i + 1).forEach(function (box) {
  187. delete box.pos;
  188. });
  189. // Try with a smaller length
  190. origBoxes.reducedLen =
  191. (origBoxes.reducedLen || len) - (len * 0.1);
  192. // Recurse
  193. if (origBoxes.reducedLen > len * 0.1) {
  194. H.distribute(origBoxes, len, maxDistance);
  195. }
  196. // Exceeded maxDistance => abort
  197. return true;
  198. }
  199. posInCompositeBox += origBoxes[i].size;
  200. i++;
  201. })) {
  202. // Exceeded maxDistance => abort
  203. return true;
  204. }
  205. });
  206. // Add the rest (hidden) boxes and sort by target
  207. stableSort(origBoxes, sortByTarget);
  208. };
  209. /**
  210. * Draw the data labels
  211. *
  212. * @private
  213. * @function Highcharts.Series#drawDataLabels
  214. * @return {void}
  215. * @fires Highcharts.Series#event:afterDrawDataLabels
  216. */
  217. Series.prototype.drawDataLabels = function () {
  218. var series = this, chart = series.chart, seriesOptions = series.options, seriesDlOptions = seriesOptions.dataLabels, points = series.points, pointOptions, hasRendered = series.hasRendered || 0, dataLabelsGroup, seriesAnimDuration = animObject(seriesOptions.animation).duration, fadeInDuration = Math.min(seriesAnimDuration, 200), defer = !chart.renderer.forExport && pick(seriesDlOptions.defer, fadeInDuration > 0), renderer = chart.renderer;
  219. /**
  220. * Handle the dataLabels.filter option.
  221. * @private
  222. */
  223. function applyFilter(point, options) {
  224. var filter = options.filter, op, prop, val;
  225. if (filter) {
  226. op = filter.operator;
  227. prop = point[filter.property];
  228. val = filter.value;
  229. if ((op === '>' && prop > val) ||
  230. (op === '<' && prop < val) ||
  231. (op === '>=' && prop >= val) ||
  232. (op === '<=' && prop <= val) ||
  233. (op === '==' && prop == val) || // eslint-disable-line eqeqeq
  234. (op === '===' && prop === val)) {
  235. return true;
  236. }
  237. return false;
  238. }
  239. return true;
  240. }
  241. /**
  242. * Merge two objects that can be arrays. If one of them is an array, the
  243. * other is merged into each element. If both are arrays, each element is
  244. * merged by index. If neither are arrays, we use normal merge.
  245. * @private
  246. */
  247. function mergeArrays(one, two) {
  248. var res = [], i;
  249. if (isArray(one) && !isArray(two)) {
  250. res = one.map(function (el) {
  251. return merge(el, two);
  252. });
  253. }
  254. else if (isArray(two) && !isArray(one)) {
  255. res = two.map(function (el) {
  256. return merge(one, el);
  257. });
  258. }
  259. else if (!isArray(one) && !isArray(two)) {
  260. res = merge(one, two);
  261. }
  262. else {
  263. i = Math.max(one.length, two.length);
  264. while (i--) {
  265. res[i] = merge(one[i], two[i]);
  266. }
  267. }
  268. return res;
  269. }
  270. // Merge in plotOptions.dataLabels for series
  271. seriesDlOptions = mergeArrays(mergeArrays(chart.options.plotOptions &&
  272. chart.options.plotOptions.series &&
  273. chart.options.plotOptions.series.dataLabels, chart.options.plotOptions &&
  274. chart.options.plotOptions[series.type] &&
  275. chart.options.plotOptions[series.type].dataLabels), seriesDlOptions);
  276. H.fireEvent(this, 'drawDataLabels');
  277. if (isArray(seriesDlOptions) ||
  278. seriesDlOptions.enabled ||
  279. series._hasPointLabels) {
  280. // Create a separate group for the data labels to avoid rotation
  281. dataLabelsGroup = series.plotGroup('dataLabelsGroup', 'data-labels', defer && !hasRendered ? 'hidden' : 'inherit', // #5133, #10220
  282. seriesDlOptions.zIndex || 6);
  283. if (defer) {
  284. dataLabelsGroup.attr({ opacity: +hasRendered }); // #3300
  285. if (!hasRendered) {
  286. setTimeout(function () {
  287. var group = series.dataLabelsGroup;
  288. if (group) {
  289. if (series.visible) { // #2597, #3023, #3024
  290. dataLabelsGroup.show(true);
  291. }
  292. group[seriesOptions.animation ? 'animate' : 'attr']({ opacity: 1 }, { duration: fadeInDuration });
  293. }
  294. }, seriesAnimDuration - fadeInDuration);
  295. }
  296. }
  297. // Make the labels for each point
  298. points.forEach(function (point) {
  299. // Merge in series options for the point.
  300. // @note dataLabelAttribs (like pointAttribs) would eradicate
  301. // the need for dlOptions, and simplify the section below.
  302. pointOptions = splat(mergeArrays(seriesDlOptions, point.dlOptions || // dlOptions is used in treemaps
  303. (point.options && point.options.dataLabels)));
  304. // Handle each individual data label for this point
  305. pointOptions.forEach(function (labelOptions, i) {
  306. // Options for one datalabel
  307. var labelEnabled = (labelOptions.enabled &&
  308. // #2282, #4641, #7112, #10049
  309. (!point.isNull || point.dataLabelOnNull) &&
  310. applyFilter(point, labelOptions)), labelConfig, formatString, labelText, style, rotation, attr, dataLabel = point.dataLabels ? point.dataLabels[i] :
  311. point.dataLabel, connector = point.connectors ? point.connectors[i] :
  312. point.connector, labelDistance = pick(labelOptions.distance, point.labelDistance), isNew = !dataLabel;
  313. if (labelEnabled) {
  314. // Create individual options structure that can be extended
  315. // without affecting others
  316. labelConfig = point.getLabelConfig();
  317. formatString = pick(labelOptions[point.formatPrefix + 'Format'], labelOptions.format);
  318. labelText = defined(formatString) ?
  319. format(formatString, labelConfig, chart) :
  320. (labelOptions[point.formatPrefix + 'Formatter'] ||
  321. labelOptions.formatter).call(labelConfig, labelOptions);
  322. style = labelOptions.style;
  323. rotation = labelOptions.rotation;
  324. if (!chart.styledMode) {
  325. // Determine the color
  326. style.color = pick(labelOptions.color, style.color, series.color, '#000000');
  327. // Get automated contrast color
  328. if (style.color === 'contrast') {
  329. point.contrastColor = renderer.getContrast((point.color || series.color));
  330. style.color = (!defined(labelDistance) &&
  331. labelOptions.inside) ||
  332. labelDistance < 0 ||
  333. !!seriesOptions.stacking ?
  334. point.contrastColor :
  335. '#000000';
  336. }
  337. else {
  338. delete point.contrastColor;
  339. }
  340. if (seriesOptions.cursor) {
  341. style.cursor = seriesOptions.cursor;
  342. }
  343. }
  344. attr = {
  345. r: labelOptions.borderRadius || 0,
  346. rotation: rotation,
  347. padding: labelOptions.padding,
  348. zIndex: 1
  349. };
  350. if (!chart.styledMode) {
  351. attr.fill = labelOptions.backgroundColor;
  352. attr.stroke = labelOptions.borderColor;
  353. attr['stroke-width'] = labelOptions.borderWidth;
  354. }
  355. // Remove unused attributes (#947)
  356. objectEach(attr, function (val, name) {
  357. if (typeof val === 'undefined') {
  358. delete attr[name];
  359. }
  360. });
  361. }
  362. // If the point is outside the plot area, destroy it. #678, #820
  363. if (dataLabel && (!labelEnabled || !defined(labelText))) {
  364. point.dataLabel =
  365. point.dataLabel && point.dataLabel.destroy();
  366. if (point.dataLabels) {
  367. // Remove point.dataLabels if this was the last one
  368. if (point.dataLabels.length === 1) {
  369. delete point.dataLabels;
  370. }
  371. else {
  372. delete point.dataLabels[i];
  373. }
  374. }
  375. if (!i) {
  376. delete point.dataLabel;
  377. }
  378. if (connector) {
  379. point.connector = point.connector.destroy();
  380. if (point.connectors) {
  381. // Remove point.connectors if this was the last one
  382. if (point.connectors.length === 1) {
  383. delete point.connectors;
  384. }
  385. else {
  386. delete point.connectors[i];
  387. }
  388. }
  389. }
  390. // Individual labels are disabled if the are explicitly disabled
  391. // in the point options, or if they fall outside the plot area.
  392. }
  393. else if (labelEnabled && defined(labelText)) {
  394. if (!dataLabel) {
  395. // Create new label element
  396. point.dataLabels = point.dataLabels || [];
  397. dataLabel = point.dataLabels[i] = rotation ?
  398. // Labels don't rotate, use text element
  399. renderer.text(labelText, 0, -9999)
  400. .addClass('highcharts-data-label') :
  401. // We can use label
  402. renderer.label(labelText, 0, -9999, labelOptions.shape, null, null, labelOptions.useHTML, null, 'data-label');
  403. // Store for backwards compatibility
  404. if (!i) {
  405. point.dataLabel = dataLabel;
  406. }
  407. dataLabel.addClass(' highcharts-data-label-color-' + point.colorIndex +
  408. ' ' + (labelOptions.className || '') +
  409. ( // #3398
  410. labelOptions.useHTML ?
  411. ' highcharts-tracker' :
  412. ''));
  413. }
  414. else {
  415. // Use old element and just update text
  416. attr.text = labelText;
  417. }
  418. // Store data label options for later access
  419. dataLabel.options = labelOptions;
  420. dataLabel.attr(attr);
  421. if (!chart.styledMode) {
  422. // Styles must be applied before add in order to read
  423. // text bounding box
  424. dataLabel.css(style).shadow(labelOptions.shadow);
  425. }
  426. if (!dataLabel.added) {
  427. dataLabel.add(dataLabelsGroup);
  428. }
  429. if (labelOptions.textPath && !labelOptions.useHTML) {
  430. dataLabel.setTextPath((point.getDataLabelPath &&
  431. point.getDataLabelPath(dataLabel)) || point.graphic, labelOptions.textPath);
  432. if (point.dataLabelPath &&
  433. !labelOptions.textPath.enabled) {
  434. // clean the DOM
  435. point.dataLabelPath = point.dataLabelPath.destroy();
  436. }
  437. }
  438. // Now the data label is created and placed at 0,0, so we
  439. // need to align it
  440. series.alignDataLabel(point, dataLabel, labelOptions, null, isNew);
  441. }
  442. });
  443. });
  444. }
  445. H.fireEvent(this, 'afterDrawDataLabels');
  446. };
  447. /**
  448. * Align each individual data label.
  449. *
  450. * @private
  451. * @function Highcharts.Series#alignDataLabel
  452. * @param {Highcharts.Point} point
  453. * @param {Highcharts.SVGElement} dataLabel
  454. * @param {Highcharts.DataLabelsOptionsObject} options
  455. * @param {Highcharts.BBoxObject} alignTo
  456. * @param {boolean} [isNew]
  457. * @return {void}
  458. */
  459. Series.prototype.alignDataLabel = function (point, dataLabel, options, alignTo, isNew) {
  460. var series = this, chart = this.chart, inverted = this.isCartesian && chart.inverted, enabledDataSorting = this.enabledDataSorting, plotX = pick(point.dlBox && point.dlBox.centerX, point.plotX, -9999), plotY = pick(point.plotY, -9999), bBox = dataLabel.getBBox(), baseline, rotation = options.rotation, normRotation, negRotation, align = options.align, rotCorr, // rotation correction
  461. isInsidePlot = chart.isInsidePlot(plotX, Math.round(plotY), inverted),
  462. // Math.round for rounding errors (#2683), alignTo to allow column
  463. // labels (#2700)
  464. alignAttr, // the final position;
  465. justify = pick(options.overflow, (enabledDataSorting ? 'none' : 'justify')) === 'justify', visible = this.visible &&
  466. (point.series.forceDL ||
  467. (enabledDataSorting && !justify) ||
  468. isInsidePlot ||
  469. (alignTo && chart.isInsidePlot(plotX, inverted ?
  470. alignTo.x + 1 :
  471. alignTo.y + alignTo.height - 1, inverted))), setStartPos = function (alignOptions) {
  472. if (enabledDataSorting && series.xAxis && !justify) {
  473. series.setDataLabelStartPos(point, dataLabel, isNew, isInsidePlot, alignOptions);
  474. }
  475. };
  476. if (visible) {
  477. baseline = chart.renderer.fontMetrics(chart.styledMode ? void 0 : options.style.fontSize, dataLabel).b;
  478. // The alignment box is a singular point
  479. alignTo = extend({
  480. x: inverted ? this.yAxis.len - plotY : plotX,
  481. y: Math.round(inverted ? this.xAxis.len - plotX : plotY),
  482. width: 0,
  483. height: 0
  484. }, alignTo);
  485. // Add the text size for alignment calculation
  486. extend(options, {
  487. width: bBox.width,
  488. height: bBox.height
  489. });
  490. // Allow a hook for changing alignment in the last moment, then do the
  491. // alignment
  492. if (rotation) {
  493. justify = false; // Not supported for rotated text
  494. rotCorr = chart.renderer.rotCorr(baseline, rotation); // #3723
  495. alignAttr = {
  496. x: (alignTo.x +
  497. options.x +
  498. alignTo.width / 2 +
  499. rotCorr.x),
  500. y: (alignTo.y +
  501. options.y +
  502. { top: 0, middle: 0.5, bottom: 1 }[options.verticalAlign] *
  503. alignTo.height)
  504. };
  505. setStartPos(alignAttr); // data sorting
  506. dataLabel[isNew ? 'attr' : 'animate'](alignAttr)
  507. .attr({
  508. align: align
  509. });
  510. // Compensate for the rotated label sticking out on the sides
  511. normRotation = (rotation + 720) % 360;
  512. negRotation = normRotation > 180 && normRotation < 360;
  513. if (align === 'left') {
  514. alignAttr.y -= negRotation ? bBox.height : 0;
  515. }
  516. else if (align === 'center') {
  517. alignAttr.x -= bBox.width / 2;
  518. alignAttr.y -= bBox.height / 2;
  519. }
  520. else if (align === 'right') {
  521. alignAttr.x -= bBox.width;
  522. alignAttr.y -= negRotation ? 0 : bBox.height;
  523. }
  524. dataLabel.placed = true;
  525. dataLabel.alignAttr = alignAttr;
  526. }
  527. else {
  528. setStartPos(alignTo); // data sorting
  529. dataLabel.align(options, null, alignTo);
  530. alignAttr = dataLabel.alignAttr;
  531. }
  532. // Handle justify or crop
  533. if (justify && alignTo.height >= 0) { // #8830
  534. this.justifyDataLabel(dataLabel, options, alignAttr, bBox, alignTo, isNew);
  535. // Now check that the data label is within the plot area
  536. }
  537. else if (pick(options.crop, true)) {
  538. visible =
  539. chart.isInsidePlot(alignAttr.x, alignAttr.y) &&
  540. chart.isInsidePlot(alignAttr.x + bBox.width, alignAttr.y + bBox.height);
  541. }
  542. // When we're using a shape, make it possible with a connector or an
  543. // arrow pointing to thie point
  544. if (options.shape && !rotation) {
  545. dataLabel[isNew ? 'attr' : 'animate']({
  546. anchorX: inverted ?
  547. chart.plotWidth - point.plotY :
  548. point.plotX,
  549. anchorY: inverted ?
  550. chart.plotHeight - point.plotX :
  551. point.plotY
  552. });
  553. }
  554. }
  555. // To use alignAttr property in hideOverlappingLabels
  556. if (isNew && enabledDataSorting) {
  557. dataLabel.placed = false;
  558. }
  559. // Show or hide based on the final aligned position
  560. if (!visible && (!enabledDataSorting || justify)) {
  561. dataLabel.hide(true);
  562. dataLabel.placed = false; // don't animate back in
  563. }
  564. };
  565. /**
  566. * Set starting position for data label sorting animation.
  567. *
  568. * @private
  569. * @function Highcharts.Series#setDataLabelStartPos
  570. * @param {Highcharts.SVGElement} dataLabel
  571. * @param {Highcharts.ColumnPoint} point
  572. * @param {boolean | undefined} [isNew]
  573. * @param {boolean} [isInside]
  574. * @param {Highcharts.AlignObject} [alignOptions]
  575. *
  576. * @return {void}
  577. */
  578. Series.prototype.setDataLabelStartPos = function (point, dataLabel, isNew, isInside, alignOptions) {
  579. var chart = this.chart, inverted = chart.inverted, xAxis = this.xAxis, reversed = xAxis.reversed, labelCenter = inverted ? dataLabel.height / 2 : dataLabel.width / 2, pointWidth = point.pointWidth, halfWidth = pointWidth ? pointWidth / 2 : 0, startXPos, startYPos;
  580. startXPos = inverted ?
  581. alignOptions.x :
  582. (reversed ?
  583. -labelCenter - halfWidth :
  584. xAxis.width - labelCenter + halfWidth);
  585. startYPos = inverted ?
  586. (reversed ?
  587. this.yAxis.height - labelCenter + halfWidth :
  588. -labelCenter - halfWidth) : alignOptions.y;
  589. dataLabel.startXPos = startXPos;
  590. dataLabel.startYPos = startYPos;
  591. // We need to handle visibility in case of sorting point outside plot area
  592. if (!isInside) {
  593. dataLabel
  594. .attr({ opacity: 1 })
  595. .animate({ opacity: 0 }, void 0, dataLabel.hide);
  596. }
  597. else if (dataLabel.visibility === 'hidden') {
  598. dataLabel.show();
  599. dataLabel
  600. .attr({ opacity: 0 })
  601. .animate({ opacity: 1 });
  602. }
  603. // Save start position on first render, but do not change position
  604. if (!chart.hasRendered) {
  605. return;
  606. }
  607. // Set start position
  608. if (isNew) {
  609. dataLabel.attr({ x: dataLabel.startXPos, y: dataLabel.startYPos });
  610. }
  611. dataLabel.placed = true;
  612. };
  613. /**
  614. * If data labels fall partly outside the plot area, align them back in, in a
  615. * way that doesn't hide the point.
  616. *
  617. * @private
  618. * @function Highcharts.Series#justifyDataLabel
  619. * @param {Highcharts.SVGElement} dataLabel
  620. * @param {Highcharts.DataLabelsOptionsObject} options
  621. * @param {Highcharts.SVGAttributes} alignAttr
  622. * @param {Highcharts.BBoxObject} bBox
  623. * @param {Highcharts.BBoxObject} [alignTo]
  624. * @param {boolean} [isNew]
  625. * @return {boolean|undefined}
  626. */
  627. Series.prototype.justifyDataLabel = function (dataLabel, options, alignAttr, bBox, alignTo, isNew) {
  628. var chart = this.chart, align = options.align, verticalAlign = options.verticalAlign, off, justified, padding = dataLabel.box ? 0 : (dataLabel.padding || 0);
  629. // Off left
  630. off = alignAttr.x + padding;
  631. if (off < 0) {
  632. if (align === 'right') {
  633. options.align = 'left';
  634. options.inside = true;
  635. }
  636. else {
  637. options.x = -off;
  638. }
  639. justified = true;
  640. }
  641. // Off right
  642. off = alignAttr.x + bBox.width - padding;
  643. if (off > chart.plotWidth) {
  644. if (align === 'left') {
  645. options.align = 'right';
  646. options.inside = true;
  647. }
  648. else {
  649. options.x = chart.plotWidth - off;
  650. }
  651. justified = true;
  652. }
  653. // Off top
  654. off = alignAttr.y + padding;
  655. if (off < 0) {
  656. if (verticalAlign === 'bottom') {
  657. options.verticalAlign = 'top';
  658. options.inside = true;
  659. }
  660. else {
  661. options.y = -off;
  662. }
  663. justified = true;
  664. }
  665. // Off bottom
  666. off = alignAttr.y + bBox.height - padding;
  667. if (off > chart.plotHeight) {
  668. if (verticalAlign === 'top') {
  669. options.verticalAlign = 'bottom';
  670. options.inside = true;
  671. }
  672. else {
  673. options.y = chart.plotHeight - off;
  674. }
  675. justified = true;
  676. }
  677. if (justified) {
  678. dataLabel.placed = !isNew;
  679. dataLabel.align(options, null, alignTo);
  680. }
  681. return justified;
  682. };
  683. if (seriesTypes.pie) {
  684. seriesTypes.pie.prototype.dataLabelPositioners = {
  685. // Based on the value computed in Highcharts' distribute algorithm.
  686. radialDistributionY: function (point) {
  687. return point.top + point.distributeBox.pos;
  688. },
  689. // get the x - use the natural x position for labels near the
  690. // top and bottom, to prevent the top and botton slice
  691. // connectors from touching each other on either side
  692. // Based on the value computed in Highcharts' distribute algorithm.
  693. radialDistributionX: function (series, point, y, naturalY) {
  694. return series.getX(y < point.top + 2 || y > point.bottom - 2 ?
  695. naturalY :
  696. y, point.half, point);
  697. },
  698. // dataLabels.distance determines the x position of the label
  699. justify: function (point, radius, seriesCenter) {
  700. return seriesCenter[0] + (point.half ? -1 : 1) *
  701. (radius + point.labelDistance);
  702. },
  703. // Left edges of the left-half labels touch the left edge of the plot
  704. // area. Right edges of the right-half labels touch the right edge of
  705. // the plot area.
  706. alignToPlotEdges: function (dataLabel, half, plotWidth, plotLeft) {
  707. var dataLabelWidth = dataLabel.getBBox().width;
  708. return half ? dataLabelWidth + plotLeft :
  709. plotWidth - dataLabelWidth - plotLeft;
  710. },
  711. // Connectors of each side end in the same x position. Labels are
  712. // aligned to them. Left edge of the widest left-half label touches the
  713. // left edge of the plot area. Right edge of the widest right-half label
  714. // touches the right edge of the plot area.
  715. alignToConnectors: function (points, half, plotWidth, plotLeft) {
  716. var maxDataLabelWidth = 0, dataLabelWidth;
  717. // find widest data label
  718. points.forEach(function (point) {
  719. dataLabelWidth = point.dataLabel.getBBox().width;
  720. if (dataLabelWidth > maxDataLabelWidth) {
  721. maxDataLabelWidth = dataLabelWidth;
  722. }
  723. });
  724. return half ? maxDataLabelWidth + plotLeft :
  725. plotWidth - maxDataLabelWidth - plotLeft;
  726. }
  727. };
  728. /**
  729. * Override the base drawDataLabels method by pie specific functionality
  730. *
  731. * @private
  732. * @function Highcharts.seriesTypes.pie#drawDataLabels
  733. * @return {void}
  734. */
  735. seriesTypes.pie.prototype.drawDataLabels = function () {
  736. var series = this, data = series.data, point, chart = series.chart, options = series.options.dataLabels, connectorPadding = options.connectorPadding, connectorWidth, plotWidth = chart.plotWidth, plotHeight = chart.plotHeight, plotLeft = chart.plotLeft, maxWidth = Math.round(chart.chartWidth / 3), connector, seriesCenter = series.center, radius = seriesCenter[2] / 2, centerY = seriesCenter[1], dataLabel, dataLabelWidth,
  737. // labelPos,
  738. labelPosition, labelHeight,
  739. // divide the points into right and left halves for anti collision
  740. halves = [
  741. [],
  742. [] // left
  743. ], x, y, visibility, j, overflow = [0, 0, 0, 0], // top, right, bottom, left
  744. dataLabelPositioners = series.dataLabelPositioners, pointDataLabelsOptions;
  745. // get out if not enabled
  746. if (!series.visible ||
  747. (!options.enabled &&
  748. !series._hasPointLabels)) {
  749. return;
  750. }
  751. // Reset all labels that have been shortened
  752. data.forEach(function (point) {
  753. if (point.dataLabel && point.visible && point.dataLabel.shortened) {
  754. point.dataLabel
  755. .attr({
  756. width: 'auto'
  757. }).css({
  758. width: 'auto',
  759. textOverflow: 'clip'
  760. });
  761. point.dataLabel.shortened = false;
  762. }
  763. });
  764. // run parent method
  765. Series.prototype.drawDataLabels.apply(series);
  766. data.forEach(function (point) {
  767. if (point.dataLabel) {
  768. if (point.visible) { // #407, #2510
  769. // Arrange points for detection collision
  770. halves[point.half].push(point);
  771. // Reset positions (#4905)
  772. point.dataLabel._pos = null;
  773. // Avoid long labels squeezing the pie size too far down
  774. if (!defined(options.style.width) &&
  775. !defined(point.options.dataLabels &&
  776. point.options.dataLabels.style &&
  777. point.options.dataLabels.style.width)) {
  778. if (point.dataLabel.getBBox().width > maxWidth) {
  779. point.dataLabel.css({
  780. // Use a fraction of the maxWidth to avoid
  781. // wrapping close to the end of the string.
  782. width: maxWidth * 0.7
  783. });
  784. point.dataLabel.shortened = true;
  785. }
  786. }
  787. }
  788. else {
  789. point.dataLabel = point.dataLabel.destroy();
  790. // Workaround to make pies destroy multiple datalabels
  791. // correctly. This logic needs rewriting to support multiple
  792. // datalabels fully.
  793. if (point.dataLabels && point.dataLabels.length === 1) {
  794. delete point.dataLabels;
  795. }
  796. }
  797. }
  798. });
  799. /* Loop over the points in each half, starting from the top and bottom
  800. * of the pie to detect overlapping labels.
  801. */
  802. halves.forEach(function (points, i) {
  803. var top, bottom, length = points.length, positions = [], naturalY, sideOverflow, size, distributionLength;
  804. if (!length) {
  805. return;
  806. }
  807. // Sort by angle
  808. series.sortByAngle(points, i - 0.5);
  809. // Only do anti-collision when we have dataLabels outside the pie
  810. // and have connectors. (#856)
  811. if (series.maxLabelDistance > 0) {
  812. top = Math.max(0, centerY - radius - series.maxLabelDistance);
  813. bottom = Math.min(centerY + radius + series.maxLabelDistance, chart.plotHeight);
  814. points.forEach(function (point) {
  815. // check if specific points' label is outside the pie
  816. if (point.labelDistance > 0 && point.dataLabel) {
  817. // point.top depends on point.labelDistance value
  818. // Used for calculation of y value in getX method
  819. point.top = Math.max(0, centerY - radius - point.labelDistance);
  820. point.bottom = Math.min(centerY + radius + point.labelDistance, chart.plotHeight);
  821. size = point.dataLabel.getBBox().height || 21;
  822. // point.positionsIndex is needed for getting index of
  823. // parameter related to specific point inside positions
  824. // array - not every point is in positions array.
  825. point.distributeBox = {
  826. target: point.labelPosition.natural.y -
  827. point.top + size / 2,
  828. size: size,
  829. rank: point.y
  830. };
  831. positions.push(point.distributeBox);
  832. }
  833. });
  834. distributionLength = bottom + size - top;
  835. H.distribute(positions, distributionLength, distributionLength / 5);
  836. }
  837. // Now the used slots are sorted, fill them up sequentially
  838. for (j = 0; j < length; j++) {
  839. point = points[j];
  840. // labelPos = point.labelPos;
  841. labelPosition = point.labelPosition;
  842. dataLabel = point.dataLabel;
  843. visibility = point.visible === false ? 'hidden' : 'inherit';
  844. naturalY = labelPosition.natural.y;
  845. y = naturalY;
  846. if (positions && defined(point.distributeBox)) {
  847. if (typeof point.distributeBox.pos === 'undefined') {
  848. visibility = 'hidden';
  849. }
  850. else {
  851. labelHeight = point.distributeBox.size;
  852. // Find label's y position
  853. y = dataLabelPositioners
  854. .radialDistributionY(point);
  855. }
  856. }
  857. // It is needed to delete point.positionIndex for
  858. // dynamically added points etc.
  859. delete point.positionIndex; // @todo unused
  860. // Find label's x position
  861. // justify is undocumented in the API - preserve support for it
  862. if (options.justify) {
  863. x = dataLabelPositioners.justify(point, radius, seriesCenter);
  864. }
  865. else {
  866. switch (options.alignTo) {
  867. case 'connectors':
  868. x = dataLabelPositioners.alignToConnectors(points, i, plotWidth, plotLeft);
  869. break;
  870. case 'plotEdges':
  871. x = dataLabelPositioners.alignToPlotEdges(dataLabel, i, plotWidth, plotLeft);
  872. break;
  873. default:
  874. x = dataLabelPositioners.radialDistributionX(series, point, y, naturalY);
  875. }
  876. }
  877. // Record the placement and visibility
  878. dataLabel._attr = {
  879. visibility: visibility,
  880. align: labelPosition.alignment
  881. };
  882. dataLabel._pos = {
  883. x: (x +
  884. options.x +
  885. ({
  886. left: connectorPadding,
  887. right: -connectorPadding
  888. }[labelPosition.alignment] || 0)),
  889. // 10 is for the baseline (label vs text)
  890. y: y + options.y - 10
  891. };
  892. // labelPos.x = x;
  893. // labelPos.y = y;
  894. labelPosition.final.x = x;
  895. labelPosition.final.y = y;
  896. // Detect overflowing data labels
  897. if (pick(options.crop, true)) {
  898. dataLabelWidth = dataLabel.getBBox().width;
  899. sideOverflow = null;
  900. // Overflow left
  901. if (x - dataLabelWidth < connectorPadding &&
  902. i === 1 // left half
  903. ) {
  904. sideOverflow = Math.round(dataLabelWidth - x + connectorPadding);
  905. overflow[3] = Math.max(sideOverflow, overflow[3]);
  906. // Overflow right
  907. }
  908. else if (x + dataLabelWidth > plotWidth - connectorPadding &&
  909. i === 0 // right half
  910. ) {
  911. sideOverflow = Math.round(x + dataLabelWidth - plotWidth + connectorPadding);
  912. overflow[1] = Math.max(sideOverflow, overflow[1]);
  913. }
  914. // Overflow top
  915. if (y - labelHeight / 2 < 0) {
  916. overflow[0] = Math.max(Math.round(-y + labelHeight / 2), overflow[0]);
  917. // Overflow left
  918. }
  919. else if (y + labelHeight / 2 > plotHeight) {
  920. overflow[2] = Math.max(Math.round(y + labelHeight / 2 - plotHeight), overflow[2]);
  921. }
  922. dataLabel.sideOverflow = sideOverflow;
  923. }
  924. } // for each point
  925. }); // for each half
  926. // Do not apply the final placement and draw the connectors until we
  927. // have verified that labels are not spilling over.
  928. if (arrayMax(overflow) === 0 ||
  929. this.verifyDataLabelOverflow(overflow)) {
  930. // Place the labels in the final position
  931. this.placeDataLabels();
  932. this.points.forEach(function (point) {
  933. // #8864: every connector can have individual options
  934. pointDataLabelsOptions =
  935. merge(options, point.options.dataLabels);
  936. connectorWidth =
  937. pick(pointDataLabelsOptions.connectorWidth, 1);
  938. // Draw the connector
  939. if (connectorWidth) {
  940. var isNew;
  941. connector = point.connector;
  942. dataLabel = point.dataLabel;
  943. if (dataLabel &&
  944. dataLabel._pos &&
  945. point.visible &&
  946. point.labelDistance > 0) {
  947. visibility = dataLabel._attr.visibility;
  948. isNew = !connector;
  949. if (isNew) {
  950. point.connector = connector = chart.renderer
  951. .path()
  952. .addClass('highcharts-data-label-connector ' +
  953. ' highcharts-color-' + point.colorIndex +
  954. (point.className ?
  955. ' ' + point.className :
  956. ''))
  957. .add(series.dataLabelsGroup);
  958. if (!chart.styledMode) {
  959. connector.attr({
  960. 'stroke-width': connectorWidth,
  961. 'stroke': (pointDataLabelsOptions.connectorColor ||
  962. point.color ||
  963. '#666666')
  964. });
  965. }
  966. }
  967. connector[isNew ? 'attr' : 'animate']({
  968. d: point.getConnectorPath()
  969. });
  970. connector.attr('visibility', visibility);
  971. }
  972. else if (connector) {
  973. point.connector = connector.destroy();
  974. }
  975. }
  976. });
  977. }
  978. };
  979. /**
  980. * Extendable method for getting the path of the connector between the data
  981. * label and the pie slice.
  982. *
  983. * @private
  984. * @function Highcharts.seriesTypes.pie#connectorPath
  985. *
  986. * @param {*} labelPos
  987. *
  988. * @return {Highcharts.SVGPathArray}
  989. */
  990. // TODO: depracated - remove it
  991. /*
  992. seriesTypes.pie.prototype.connectorPath = function (labelPos) {
  993. var x = labelPos.x,
  994. y = labelPos.y;
  995. return pick(this.options.dataLabels.softConnector, true) ? [
  996. 'M',
  997. // end of the string at the label
  998. x + (labelPos[6] === 'left' ? 5 : -5), y,
  999. 'C',
  1000. x, y, // first break, next to the label
  1001. 2 * labelPos[2] - labelPos[4], 2 * labelPos[3] - labelPos[5],
  1002. labelPos[2], labelPos[3], // second break
  1003. 'L',
  1004. labelPos[4], labelPos[5] // base
  1005. ] : [
  1006. 'M',
  1007. // end of the string at the label
  1008. x + (labelPos[6] === 'left' ? 5 : -5), y,
  1009. 'L',
  1010. labelPos[2], labelPos[3], // second break
  1011. 'L',
  1012. labelPos[4], labelPos[5] // base
  1013. ];
  1014. };
  1015. */
  1016. /**
  1017. * Perform the final placement of the data labels after we have verified
  1018. * that they fall within the plot area.
  1019. *
  1020. * @private
  1021. * @function Highcharts.seriesTypes.pie#placeDataLabels
  1022. * @return {void}
  1023. */
  1024. seriesTypes.pie.prototype.placeDataLabels = function () {
  1025. this.points.forEach(function (point) {
  1026. var dataLabel = point.dataLabel, _pos;
  1027. if (dataLabel && point.visible) {
  1028. _pos = dataLabel._pos;
  1029. if (_pos) {
  1030. // Shorten data labels with ellipsis if they still overflow
  1031. // after the pie has reached minSize (#223).
  1032. if (dataLabel.sideOverflow) {
  1033. dataLabel._attr.width =
  1034. Math.max(dataLabel.getBBox().width -
  1035. dataLabel.sideOverflow, 0);
  1036. dataLabel.css({
  1037. width: dataLabel._attr.width + 'px',
  1038. textOverflow: ((this.options.dataLabels.style || {})
  1039. .textOverflow ||
  1040. 'ellipsis')
  1041. });
  1042. dataLabel.shortened = true;
  1043. }
  1044. dataLabel.attr(dataLabel._attr);
  1045. dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
  1046. dataLabel.moved = true;
  1047. }
  1048. else if (dataLabel) {
  1049. dataLabel.attr({ y: -9999 });
  1050. }
  1051. }
  1052. // Clear for update
  1053. delete point.distributeBox;
  1054. }, this);
  1055. };
  1056. seriesTypes.pie.prototype.alignDataLabel = noop;
  1057. /**
  1058. * Verify whether the data labels are allowed to draw, or we should run more
  1059. * translation and data label positioning to keep them inside the plot area.
  1060. * Returns true when data labels are ready to draw.
  1061. *
  1062. * @private
  1063. * @function Highcharts.seriesTypes.pie#verifyDataLabelOverflow
  1064. * @param {Array<number>} overflow
  1065. * @return {boolean}
  1066. */
  1067. seriesTypes.pie.prototype.verifyDataLabelOverflow = function (overflow) {
  1068. var center = this.center, options = this.options, centerOption = options.center, minSize = options.minSize || 80, newSize = minSize,
  1069. // If a size is set, return true and don't try to shrink the pie
  1070. // to fit the labels.
  1071. ret = options.size !== null;
  1072. if (!ret) {
  1073. // Handle horizontal size and center
  1074. if (centerOption[0] !== null) { // Fixed center
  1075. newSize = Math.max(center[2] -
  1076. Math.max(overflow[1], overflow[3]), minSize);
  1077. }
  1078. else { // Auto center
  1079. newSize = Math.max(
  1080. // horizontal overflow
  1081. center[2] - overflow[1] - overflow[3], minSize);
  1082. // horizontal center
  1083. center[0] += (overflow[3] - overflow[1]) / 2;
  1084. }
  1085. // Handle vertical size and center
  1086. if (centerOption[1] !== null) { // Fixed center
  1087. newSize = clamp(newSize, minSize, center[2] - Math.max(overflow[0], overflow[2]));
  1088. }
  1089. else { // Auto center
  1090. newSize = clamp(newSize, minSize,
  1091. // vertical overflow
  1092. center[2] - overflow[0] - overflow[2]);
  1093. // vertical center
  1094. center[1] += (overflow[0] - overflow[2]) / 2;
  1095. }
  1096. // If the size must be decreased, we need to run translate and
  1097. // drawDataLabels again
  1098. if (newSize < center[2]) {
  1099. center[2] = newSize;
  1100. center[3] = Math.min(// #3632
  1101. relativeLength(options.innerSize || 0, newSize), newSize);
  1102. this.translate(center);
  1103. if (this.drawDataLabels) {
  1104. this.drawDataLabels();
  1105. }
  1106. // Else, return true to indicate that the pie and its labels is
  1107. // within the plot area
  1108. }
  1109. else {
  1110. ret = true;
  1111. }
  1112. }
  1113. return ret;
  1114. };
  1115. }
  1116. if (seriesTypes.column) {
  1117. /**
  1118. * Override the basic data label alignment by adjusting for the position of
  1119. * the column.
  1120. *
  1121. * @private
  1122. * @function Highcharts.seriesTypes.column#alignDataLabel
  1123. * @param {Highcharts.Point} point
  1124. * @param {Highcharts.SVGElement} dataLabel
  1125. * @param {Highcharts.DataLabelsOptionsObject} options
  1126. * @param {Highcharts.BBoxObject} alignTo
  1127. * @param {boolean} [isNew]
  1128. * @return {void}
  1129. */
  1130. seriesTypes.column.prototype.alignDataLabel = function (point, dataLabel, options, alignTo, isNew) {
  1131. var inverted = this.chart.inverted, series = point.series,
  1132. // data label box for alignment
  1133. dlBox = point.dlBox || point.shapeArgs, below = pick(point.below, // range series
  1134. point.plotY >
  1135. pick(this.translatedThreshold, series.yAxis.len)),
  1136. // draw it inside the box?
  1137. inside = pick(options.inside, !!this.options.stacking), overshoot;
  1138. // Align to the column itself, or the top of it
  1139. if (dlBox) { // Area range uses this method but not alignTo
  1140. alignTo = merge(dlBox);
  1141. if (alignTo.y < 0) {
  1142. alignTo.height += alignTo.y;
  1143. alignTo.y = 0;
  1144. }
  1145. overshoot = alignTo.y + alignTo.height - series.yAxis.len;
  1146. if (overshoot > 0) {
  1147. alignTo.height -= overshoot;
  1148. }
  1149. if (inverted) {
  1150. alignTo = {
  1151. x: series.yAxis.len - alignTo.y - alignTo.height,
  1152. y: series.xAxis.len - alignTo.x - alignTo.width,
  1153. width: alignTo.height,
  1154. height: alignTo.width
  1155. };
  1156. }
  1157. // Compute the alignment box
  1158. if (!inside) {
  1159. if (inverted) {
  1160. alignTo.x += below ? 0 : alignTo.width;
  1161. alignTo.width = 0;
  1162. }
  1163. else {
  1164. alignTo.y += below ? alignTo.height : 0;
  1165. alignTo.height = 0;
  1166. }
  1167. }
  1168. }
  1169. // When alignment is undefined (typically columns and bars), display the
  1170. // individual point below or above the point depending on the threshold
  1171. options.align = pick(options.align, !inverted || inside ? 'center' : below ? 'right' : 'left');
  1172. options.verticalAlign = pick(options.verticalAlign, inverted || inside ? 'middle' : below ? 'top' : 'bottom');
  1173. // Call the parent method
  1174. Series.prototype.alignDataLabel.call(this, point, dataLabel, options, alignTo, isNew);
  1175. // Hide dataLabel when column is outside plotArea (#12370).
  1176. if (alignTo &&
  1177. ((alignTo.height <= 0 && alignTo.y === this.chart.plotHeight) ||
  1178. (alignTo.width <= 0 && alignTo.x === 0))) {
  1179. dataLabel.hide(true);
  1180. dataLabel.placed = false; // don't animate back in
  1181. }
  1182. // If label was justified and we have contrast, set it:
  1183. if (options.inside && point.contrastColor) {
  1184. dataLabel.css({
  1185. color: point.contrastColor
  1186. });
  1187. }
  1188. };
  1189. }