StockChart.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760
  1. /* *
  2. *
  3. * (c) 2010-2020 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 Axis from '../Axis/Axis.js';
  12. import Chart from '../Chart/Chart.js';
  13. import H from '../Globals.js';
  14. import Point from '../Series/Point.js';
  15. import SVGRenderer from '../Renderer/SVG/SVGRenderer.js';
  16. import U from '../Utilities.js';
  17. var addEvent = U.addEvent, arrayMax = U.arrayMax, arrayMin = U.arrayMin, clamp = U.clamp, defined = U.defined, extend = U.extend, find = U.find, format = U.format, getOptions = U.getOptions, isNumber = U.isNumber, isString = U.isString, merge = U.merge, pick = U.pick, splat = U.splat;
  18. import '../Pointer.js';
  19. import '../Series/Series.js';
  20. // Has a dependency on Navigator due to the use of
  21. // defaultOptions.navigator
  22. import '../Navigator.js';
  23. // Has a dependency on Scrollbar due to the use of
  24. // defaultOptions.scrollbar
  25. import '../Scrollbar.js';
  26. // Has a dependency on RangeSelector due to the use of
  27. // defaultOptions.rangeSelector
  28. import '../../Extensions/RangeSelector.js';
  29. var Series = H.Series, seriesProto = Series.prototype, seriesInit = seriesProto.init, seriesProcessData = seriesProto.processData, pointTooltipFormatter = Point.prototype.tooltipFormatter;
  30. /**
  31. * Compare the values of the series against the first non-null, non-
  32. * zero value in the visible range. The y axis will show percentage
  33. * or absolute change depending on whether `compare` is set to `"percent"`
  34. * or `"value"`. When this is applied to multiple series, it allows
  35. * comparing the development of the series against each other. Adds
  36. * a `change` field to every point object.
  37. *
  38. * @see [compareBase](#plotOptions.series.compareBase)
  39. * @see [Axis.setCompare()](/class-reference/Highcharts.Axis#setCompare)
  40. *
  41. * @sample {highstock} stock/plotoptions/series-compare-percent/
  42. * Percent
  43. * @sample {highstock} stock/plotoptions/series-compare-value/
  44. * Value
  45. *
  46. * @type {string}
  47. * @since 1.0.1
  48. * @product highstock
  49. * @apioption plotOptions.series.compare
  50. */
  51. /**
  52. * Defines if comparison should start from the first point within the visible
  53. * range or should start from the first point **before** the range.
  54. *
  55. * In other words, this flag determines if first point within the visible range
  56. * will have 0% (`compareStart=true`) or should have been already calculated
  57. * according to the previous point (`compareStart=false`).
  58. *
  59. * @sample {highstock} stock/plotoptions/series-comparestart/
  60. * Calculate compare within visible range
  61. *
  62. * @type {boolean}
  63. * @default false
  64. * @since 6.0.0
  65. * @product highstock
  66. * @apioption plotOptions.series.compareStart
  67. */
  68. /**
  69. * When [compare](#plotOptions.series.compare) is `percent`, this option
  70. * dictates whether to use 0 or 100 as the base of comparison.
  71. *
  72. * @sample {highstock} stock/plotoptions/series-comparebase/
  73. * Compare base is 100
  74. *
  75. * @type {number}
  76. * @default 0
  77. * @since 5.0.6
  78. * @product highstock
  79. * @validvalue [0, 100]
  80. * @apioption plotOptions.series.compareBase
  81. */
  82. /* eslint-disable no-invalid-this, valid-jsdoc */
  83. /**
  84. * Factory function for creating new stock charts. Creates a new
  85. * {@link Highcharts.Chart|Chart} object with different default options than the
  86. * basic Chart.
  87. *
  88. * @example
  89. * var chart = Highcharts.stockChart('container', {
  90. * series: [{
  91. * data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  92. * pointInterval: 24 * 60 * 60 * 1000
  93. * }]
  94. * });
  95. *
  96. * @function Highcharts.stockChart
  97. *
  98. * @param {string|Highcharts.HTMLDOMElement} [renderTo]
  99. * The DOM element to render to, or its id.
  100. *
  101. * @param {Highcharts.Options} options
  102. * The chart options structure as described in the
  103. * [options reference](https://api.highcharts.com/highstock).
  104. *
  105. * @param {Highcharts.ChartCallbackFunction} [callback]
  106. * A function to execute when the chart object is finished loading and
  107. * rendering. In most cases the chart is built in one thread, but in
  108. * Internet Explorer version 8 or less the chart is sometimes
  109. * initialized before the document is ready, and in these cases the
  110. * chart object will not be finished synchronously. As a consequence,
  111. * code that relies on the newly built Chart object should always run in
  112. * the callback. Defining a
  113. * [chart.events.load](https://api.highcharts.com/highstock/chart.events.load)
  114. * handler is equivalent.
  115. *
  116. * @return {Highcharts.Chart}
  117. * The chart object.
  118. */
  119. H.StockChart = H.stockChart = function (a, b, c) {
  120. var hasRenderToArg = isString(a) || a.nodeName, options = arguments[hasRenderToArg ? 1 : 0], userOptions = options,
  121. // to increase performance, don't merge the data
  122. seriesOptions = options.series, defaultOptions = getOptions(), opposite,
  123. // Always disable startOnTick:true on the main axis when the navigator
  124. // is enabled (#1090)
  125. navigatorEnabled = pick(options.navigator && options.navigator.enabled, defaultOptions.navigator.enabled, true);
  126. // apply X axis options to both single and multi y axes
  127. options.xAxis = splat(options.xAxis || {}).map(function (xAxisOptions, i) {
  128. return merge({
  129. minPadding: 0,
  130. maxPadding: 0,
  131. overscroll: 0,
  132. ordinal: true,
  133. title: {
  134. text: null
  135. },
  136. labels: {
  137. overflow: 'justify'
  138. },
  139. showLastLabel: true
  140. }, defaultOptions.xAxis, // #3802
  141. defaultOptions.xAxis && defaultOptions.xAxis[i], // #7690
  142. xAxisOptions, // user options
  143. {
  144. type: 'datetime',
  145. categories: null
  146. }, (navigatorEnabled ? {
  147. startOnTick: false,
  148. endOnTick: false
  149. } : null));
  150. });
  151. // apply Y axis options to both single and multi y axes
  152. options.yAxis = splat(options.yAxis || {}).map(function (yAxisOptions, i) {
  153. opposite = pick(yAxisOptions.opposite, true);
  154. return merge({
  155. labels: {
  156. y: -2
  157. },
  158. opposite: opposite,
  159. /**
  160. * @default {highcharts} true
  161. * @default {highstock} false
  162. * @apioption yAxis.showLastLabel
  163. *
  164. * @private
  165. */
  166. showLastLabel: !!(
  167. // #6104, show last label by default for category axes
  168. yAxisOptions.categories ||
  169. yAxisOptions.type === 'category'),
  170. title: {
  171. text: null
  172. }
  173. }, defaultOptions.yAxis, // #3802
  174. defaultOptions.yAxis && defaultOptions.yAxis[i], // #7690
  175. yAxisOptions // user options
  176. );
  177. });
  178. options.series = null;
  179. options = merge({
  180. chart: {
  181. panning: {
  182. enabled: true,
  183. type: 'x'
  184. },
  185. pinchType: 'x'
  186. },
  187. navigator: {
  188. enabled: navigatorEnabled
  189. },
  190. scrollbar: {
  191. // #4988 - check if setOptions was called
  192. enabled: pick(defaultOptions.scrollbar.enabled, true)
  193. },
  194. rangeSelector: {
  195. // #4988 - check if setOptions was called
  196. enabled: pick(defaultOptions.rangeSelector.enabled, true)
  197. },
  198. title: {
  199. text: null
  200. },
  201. tooltip: {
  202. split: pick(defaultOptions.tooltip.split, true),
  203. crosshairs: true
  204. },
  205. legend: {
  206. enabled: false
  207. }
  208. }, options, // user's options
  209. {
  210. isStock: true // internal flag
  211. });
  212. options.series = userOptions.series = seriesOptions;
  213. return hasRenderToArg ?
  214. new Chart(a, options, c) :
  215. new Chart(options, b);
  216. };
  217. // Handle som Stock-specific series defaults, override the plotOptions before
  218. // series options are handled.
  219. addEvent(Series, 'setOptions', function (e) {
  220. var overrides;
  221. if (this.chart.options.isStock) {
  222. if (this.is('column') || this.is('columnrange')) {
  223. overrides = {
  224. borderWidth: 0,
  225. shadow: false
  226. };
  227. }
  228. else if (!this.is('scatter') && !this.is('sma')) {
  229. overrides = {
  230. marker: {
  231. enabled: false,
  232. radius: 2
  233. }
  234. };
  235. }
  236. if (overrides) {
  237. e.plotOptions[this.type] = merge(e.plotOptions[this.type], overrides);
  238. }
  239. }
  240. });
  241. // Override the automatic label alignment so that the first Y axis' labels
  242. // are drawn on top of the grid line, and subsequent axes are drawn outside
  243. addEvent(Axis, 'autoLabelAlign', function (e) {
  244. var chart = this.chart, options = this.options, panes = chart._labelPanes = chart._labelPanes || {}, key, labelOptions = this.options.labels;
  245. if (this.chart.options.isStock && this.coll === 'yAxis') {
  246. key = options.top + ',' + options.height;
  247. // do it only for the first Y axis of each pane
  248. if (!panes[key] && labelOptions.enabled) {
  249. if (labelOptions.x === 15) { // default
  250. labelOptions.x = 0;
  251. }
  252. if (typeof labelOptions.align === 'undefined') {
  253. labelOptions.align = 'right';
  254. }
  255. panes[key] = this;
  256. e.align = 'right';
  257. e.preventDefault();
  258. }
  259. }
  260. });
  261. // Clear axis from label panes (#6071)
  262. addEvent(Axis, 'destroy', function () {
  263. var chart = this.chart, key = this.options && (this.options.top + ',' + this.options.height);
  264. if (key && chart._labelPanes && chart._labelPanes[key] === this) {
  265. delete chart._labelPanes[key];
  266. }
  267. });
  268. // Override getPlotLinePath to allow for multipane charts
  269. addEvent(Axis, 'getPlotLinePath', function (e) {
  270. var axis = this, series = (this.isLinked && !this.series ?
  271. this.linkedParent.series :
  272. this.series), chart = axis.chart, renderer = chart.renderer, axisLeft = axis.left, axisTop = axis.top, x1, y1, x2, y2, result = [], axes = [], // #3416 need a default array
  273. axes2, uniqueAxes, translatedValue = e.translatedValue, value = e.value, force = e.force, transVal;
  274. /**
  275. * Return the other axis based on either the axis option or on related
  276. * series.
  277. * @private
  278. */
  279. function getAxis(coll) {
  280. var otherColl = coll === 'xAxis' ? 'yAxis' : 'xAxis', opt = axis.options[otherColl];
  281. // Other axis indexed by number
  282. if (isNumber(opt)) {
  283. return [chart[otherColl][opt]];
  284. }
  285. // Other axis indexed by id (like navigator)
  286. if (isString(opt)) {
  287. return [chart.get(opt)];
  288. }
  289. // Auto detect based on existing series
  290. return series.map(function (s) {
  291. return s[otherColl];
  292. });
  293. }
  294. if ( // For stock chart, by default render paths across the panes
  295. // except the case when `acrossPanes` is disabled by user (#6644)
  296. (chart.options.isStock && e.acrossPanes !== false) &&
  297. // Ignore in case of colorAxis or zAxis. #3360, #3524, #6720
  298. axis.coll === 'xAxis' || axis.coll === 'yAxis') {
  299. e.preventDefault();
  300. // Get the related axes based on series
  301. axes = getAxis(axis.coll);
  302. // Get the related axes based options.*Axis setting #2810
  303. axes2 = (axis.isXAxis ? chart.yAxis : chart.xAxis);
  304. axes2.forEach(function (A) {
  305. if (defined(A.options.id) ?
  306. A.options.id.indexOf('navigator') === -1 :
  307. true) {
  308. var a = (A.isXAxis ? 'yAxis' : 'xAxis'), rax = (defined(A.options[a]) ?
  309. chart[a][A.options[a]] :
  310. chart[a][0]);
  311. if (axis === rax) {
  312. axes.push(A);
  313. }
  314. }
  315. });
  316. // Remove duplicates in the axes array. If there are no axes in the axes
  317. // array, we are adding an axis without data, so we need to populate
  318. // this with grid lines (#2796).
  319. uniqueAxes = axes.length ?
  320. [] :
  321. [axis.isXAxis ? chart.yAxis[0] : chart.xAxis[0]]; // #3742
  322. axes.forEach(function (axis2) {
  323. if (uniqueAxes.indexOf(axis2) === -1 &&
  324. // Do not draw on axis which overlap completely. #5424
  325. !find(uniqueAxes, function (unique) {
  326. return unique.pos === axis2.pos && unique.len === axis2.len;
  327. })) {
  328. uniqueAxes.push(axis2);
  329. }
  330. });
  331. transVal = pick(translatedValue, axis.translate(value, null, null, e.old));
  332. if (isNumber(transVal)) {
  333. if (axis.horiz) {
  334. uniqueAxes.forEach(function (axis2) {
  335. var skip;
  336. y1 = axis2.pos;
  337. y2 = y1 + axis2.len;
  338. x1 = x2 = Math.round(transVal + axis.transB);
  339. // outside plot area
  340. if (force !== 'pass' &&
  341. (x1 < axisLeft || x1 > axisLeft + axis.width)) {
  342. if (force) {
  343. x1 = x2 = clamp(x1, axisLeft, axisLeft + axis.width);
  344. }
  345. else {
  346. skip = true;
  347. }
  348. }
  349. if (!skip) {
  350. result.push(['M', x1, y1], ['L', x2, y2]);
  351. }
  352. });
  353. }
  354. else {
  355. uniqueAxes.forEach(function (axis2) {
  356. var skip;
  357. x1 = axis2.pos;
  358. x2 = x1 + axis2.len;
  359. y1 = y2 = Math.round(axisTop + axis.height - transVal);
  360. // outside plot area
  361. if (force !== 'pass' &&
  362. (y1 < axisTop || y1 > axisTop + axis.height)) {
  363. if (force) {
  364. y1 = y2 = clamp(y1, axisTop, axisTop + axis.height);
  365. }
  366. else {
  367. skip = true;
  368. }
  369. }
  370. if (!skip) {
  371. result.push(['M', x1, y1], ['L', x2, y2]);
  372. }
  373. });
  374. }
  375. }
  376. e.path = result.length > 0 ?
  377. renderer.crispPolyLine(result, e.lineWidth || 1) :
  378. // #3557 getPlotLinePath in regular Highcharts also returns null
  379. null;
  380. }
  381. });
  382. /**
  383. * Function to crisp a line with multiple segments
  384. *
  385. * @private
  386. * @function Highcharts.SVGRenderer#crispPolyLine
  387. * @param {Highcharts.SVGPathArray} points
  388. * @param {number} width
  389. * @return {Highcharts.SVGPathArray}
  390. */
  391. SVGRenderer.prototype.crispPolyLine = function (points, width) {
  392. // points format: [['M', 0, 0], ['L', 100, 0]]
  393. // normalize to a crisp line
  394. for (var i = 0; i < points.length; i = i + 2) {
  395. var start = points[i], end = points[i + 1];
  396. if (start[1] === end[1]) {
  397. // Substract due to #1129. Now bottom and left axis gridlines behave
  398. // the same.
  399. start[1] = end[1] =
  400. Math.round(start[1]) - (width % 2 / 2);
  401. }
  402. if (start[2] === end[2]) {
  403. start[2] = end[2] =
  404. Math.round(start[2]) + (width % 2 / 2);
  405. }
  406. }
  407. return points;
  408. };
  409. // Wrapper to hide the label
  410. addEvent(Axis, 'afterHideCrosshair', function () {
  411. if (this.crossLabel) {
  412. this.crossLabel = this.crossLabel.hide();
  413. }
  414. });
  415. // Extend crosshairs to also draw the label
  416. addEvent(Axis, 'afterDrawCrosshair', function (event) {
  417. // Check if the label has to be drawn
  418. if (!defined(this.crosshair.label) ||
  419. !this.crosshair.label.enabled ||
  420. !this.cross) {
  421. return;
  422. }
  423. var chart = this.chart, log = this.logarithmic, options = this.options.crosshair.label, // the label's options
  424. horiz = this.horiz, // axis orientation
  425. opposite = this.opposite, // axis position
  426. left = this.left, // left position
  427. top = this.top, // top position
  428. crossLabel = this.crossLabel, // the svgElement
  429. posx, posy, crossBox, formatOption = options.format, formatFormat = '', limit, align, tickInside = this.options.tickPosition === 'inside', snap = this.crosshair.snap !== false, value, offset = 0,
  430. // Use last available event (#5287)
  431. e = event.e || (this.cross && this.cross.e), point = event.point, min = this.min, max = this.max;
  432. if (log) {
  433. min = log.lin2log(min);
  434. max = log.lin2log(max);
  435. }
  436. align = (horiz ? 'center' : opposite ?
  437. (this.labelAlign === 'right' ? 'right' : 'left') :
  438. (this.labelAlign === 'left' ? 'left' : 'center'));
  439. // If the label does not exist yet, create it.
  440. if (!crossLabel) {
  441. crossLabel = this.crossLabel = chart.renderer
  442. .label(null, null, null, options.shape || 'callout')
  443. .addClass('highcharts-crosshair-label' + (this.series[0] &&
  444. ' highcharts-color-' + this.series[0].colorIndex))
  445. .attr({
  446. align: options.align || align,
  447. padding: pick(options.padding, 8),
  448. r: pick(options.borderRadius, 3),
  449. zIndex: 2
  450. })
  451. .add(this.labelGroup);
  452. // Presentational
  453. if (!chart.styledMode) {
  454. crossLabel
  455. .attr({
  456. fill: options.backgroundColor ||
  457. (this.series[0] && this.series[0].color) ||
  458. '#666666',
  459. stroke: options.borderColor || '',
  460. 'stroke-width': options.borderWidth || 0
  461. })
  462. .css(extend({
  463. color: '#ffffff',
  464. fontWeight: 'normal',
  465. fontSize: '11px',
  466. textAlign: 'center'
  467. }, options.style));
  468. }
  469. }
  470. if (horiz) {
  471. posx = snap ? point.plotX + left : e.chartX;
  472. posy = top + (opposite ? 0 : this.height);
  473. }
  474. else {
  475. posx = opposite ? this.width + left : 0;
  476. posy = snap ? point.plotY + top : e.chartY;
  477. }
  478. if (!formatOption && !options.formatter) {
  479. if (this.dateTime) {
  480. formatFormat = '%b %d, %Y';
  481. }
  482. formatOption =
  483. '{value' + (formatFormat ? ':' + formatFormat : '') + '}';
  484. }
  485. // Show the label
  486. value = snap ?
  487. point[this.isXAxis ? 'x' : 'y'] :
  488. this.toValue(horiz ? e.chartX : e.chartY);
  489. crossLabel.attr({
  490. text: formatOption ?
  491. format(formatOption, { value: value }, chart) :
  492. options.formatter.call(this, value),
  493. x: posx,
  494. y: posy,
  495. // Crosshair should be rendered within Axis range (#7219)
  496. visibility: value < min || value > max ?
  497. 'hidden' :
  498. 'visible'
  499. });
  500. crossBox = crossLabel.getBBox();
  501. // now it is placed we can correct its position
  502. if (isNumber(crossLabel.y)) {
  503. if (horiz) {
  504. if ((tickInside && !opposite) || (!tickInside && opposite)) {
  505. posy = crossLabel.y - crossBox.height;
  506. }
  507. }
  508. else {
  509. posy = crossLabel.y - (crossBox.height / 2);
  510. }
  511. }
  512. // check the edges
  513. if (horiz) {
  514. limit = {
  515. left: left - crossBox.x,
  516. right: left + this.width - crossBox.x
  517. };
  518. }
  519. else {
  520. limit = {
  521. left: this.labelAlign === 'left' ? left : 0,
  522. right: this.labelAlign === 'right' ?
  523. left + this.width :
  524. chart.chartWidth
  525. };
  526. }
  527. // left edge
  528. if (crossLabel.translateX < limit.left) {
  529. offset = limit.left - crossLabel.translateX;
  530. }
  531. // right edge
  532. if (crossLabel.translateX + crossBox.width >= limit.right) {
  533. offset = -(crossLabel.translateX + crossBox.width - limit.right);
  534. }
  535. // show the crosslabel
  536. crossLabel.attr({
  537. x: posx + offset,
  538. y: posy,
  539. // First set x and y, then anchorX and anchorY, when box is actually
  540. // calculated, #5702
  541. anchorX: horiz ?
  542. posx :
  543. (this.opposite ? 0 : chart.chartWidth),
  544. anchorY: horiz ?
  545. (this.opposite ? chart.chartHeight : 0) :
  546. posy + crossBox.height / 2
  547. });
  548. });
  549. /* ************************************************************************** *
  550. * Start value compare logic *
  551. * ************************************************************************** */
  552. /**
  553. * Extend series.init by adding a method to modify the y value used for plotting
  554. * on the y axis. This method is called both from the axis when finding dataMin
  555. * and dataMax, and from the series.translate method.
  556. *
  557. * @ignore
  558. * @function Highcharts.Series#init
  559. */
  560. seriesProto.init = function () {
  561. // Call base method
  562. seriesInit.apply(this, arguments);
  563. // Set comparison mode
  564. this.setCompare(this.options.compare);
  565. };
  566. /**
  567. * Highstock only. Set the
  568. * [compare](https://api.highcharts.com/highstock/plotOptions.series.compare)
  569. * mode of the series after render time. In most cases it is more useful running
  570. * {@link Axis#setCompare} on the X axis to update all its series.
  571. *
  572. * @function Highcharts.Series#setCompare
  573. *
  574. * @param {string} [compare]
  575. * Can be one of `null` (default), `"percent"` or `"value"`.
  576. */
  577. seriesProto.setCompare = function (compare) {
  578. // Set or unset the modifyValue method
  579. this.modifyValue = (compare === 'value' || compare === 'percent') ?
  580. function (value, point) {
  581. var compareValue = this.compareValue;
  582. if (typeof value !== 'undefined' &&
  583. typeof compareValue !== 'undefined') { // #2601, #5814
  584. // Get the modified value
  585. if (compare === 'value') {
  586. value -= compareValue;
  587. // Compare percent
  588. }
  589. else {
  590. value = 100 * (value / compareValue) -
  591. (this.options.compareBase === 100 ? 0 : 100);
  592. }
  593. // record for tooltip etc.
  594. if (point) {
  595. point.change = value;
  596. }
  597. return value;
  598. }
  599. return 0;
  600. } :
  601. null;
  602. // Survive to export, #5485
  603. this.userOptions.compare = compare;
  604. // Mark dirty
  605. if (this.chart.hasRendered) {
  606. this.isDirty = true;
  607. }
  608. };
  609. /**
  610. * Extend series.processData by finding the first y value in the plot area,
  611. * used for comparing the following values
  612. *
  613. * @ignore
  614. * @function Highcharts.Series#processData
  615. */
  616. seriesProto.processData = function (force) {
  617. var series = this, i, keyIndex = -1, processedXData, processedYData, compareStart = series.options.compareStart === true ? 0 : 1, length, compareValue;
  618. // call base method
  619. seriesProcessData.apply(this, arguments);
  620. if (series.xAxis && series.processedYData) { // not pies
  621. // local variables
  622. processedXData = series.processedXData;
  623. processedYData = series.processedYData;
  624. length = processedYData.length;
  625. // For series with more than one value (range, OHLC etc), compare
  626. // against close or the pointValKey (#4922, #3112, #9854)
  627. if (series.pointArrayMap) {
  628. keyIndex = series.pointArrayMap.indexOf(series.options.pointValKey || series.pointValKey || 'y');
  629. }
  630. // find the first value for comparison
  631. for (i = 0; i < length - compareStart; i++) {
  632. compareValue = processedYData[i] && keyIndex > -1 ?
  633. processedYData[i][keyIndex] :
  634. processedYData[i];
  635. if (isNumber(compareValue) &&
  636. processedXData[i + compareStart] >=
  637. series.xAxis.min &&
  638. compareValue !== 0) {
  639. series.compareValue = compareValue;
  640. break;
  641. }
  642. }
  643. }
  644. return;
  645. };
  646. // Modify series extremes
  647. addEvent(Series, 'afterGetExtremes', function (e) {
  648. var dataExtremes = e.dataExtremes;
  649. if (this.modifyValue && dataExtremes) {
  650. var extremes = [
  651. this.modifyValue(dataExtremes.dataMin),
  652. this.modifyValue(dataExtremes.dataMax)
  653. ];
  654. dataExtremes.dataMin = arrayMin(extremes);
  655. dataExtremes.dataMax = arrayMax(extremes);
  656. }
  657. });
  658. /**
  659. * Highstock only. Set the compare mode on all series belonging to an Y axis
  660. * after render time.
  661. *
  662. * @see [series.plotOptions.compare](https://api.highcharts.com/highstock/series.plotOptions.compare)
  663. *
  664. * @sample stock/members/axis-setcompare/
  665. * Set compoare
  666. *
  667. * @function Highcharts.Axis#setCompare
  668. *
  669. * @param {string} [compare]
  670. * The compare mode. Can be one of `null` (default), `"value"` or
  671. * `"percent"`.
  672. *
  673. * @param {boolean} [redraw=true]
  674. * Whether to redraw the chart or to wait for a later call to
  675. * {@link Chart#redraw}.
  676. */
  677. Axis.prototype.setCompare = function (compare, redraw) {
  678. if (!this.isXAxis) {
  679. this.series.forEach(function (series) {
  680. series.setCompare(compare);
  681. });
  682. if (pick(redraw, true)) {
  683. this.chart.redraw();
  684. }
  685. }
  686. };
  687. /**
  688. * Extend the tooltip formatter by adding support for the point.change variable
  689. * as well as the changeDecimals option.
  690. *
  691. * @ignore
  692. * @function Highcharts.Point#tooltipFormatter
  693. *
  694. * @param {string} pointFormat
  695. */
  696. Point.prototype.tooltipFormatter = function (pointFormat) {
  697. var point = this;
  698. var numberFormatter = point.series.chart.numberFormatter;
  699. pointFormat = pointFormat.replace('{point.change}', (point.change > 0 ? '+' : '') + numberFormatter(point.change, pick(point.series.tooltipOptions.changeDecimals, 2)));
  700. return pointTooltipFormatter.apply(this, [pointFormat]);
  701. };
  702. /* ************************************************************************** *
  703. * End value compare logic *
  704. * ************************************************************************** */
  705. // Extend the Series prototype to create a separate series clip box. This is
  706. // related to using multiple panes, and a future pane logic should incorporate
  707. // this feature (#2754).
  708. addEvent(Series, 'render', function () {
  709. var chart = this.chart, clipHeight;
  710. // Only do this on not 3d (#2939, #5904) nor polar (#6057) charts, and only
  711. // if the series type handles clipping in the animate method (#2975).
  712. if (!(chart.is3d && chart.is3d()) &&
  713. !chart.polar &&
  714. this.xAxis &&
  715. !this.xAxis.isRadial // Gauge, #6192
  716. ) {
  717. clipHeight = this.yAxis.len;
  718. // Include xAxis line width (#8031) but only if the Y axis ends on the
  719. // edge of the X axis (#11005).
  720. if (this.xAxis.axisLine) {
  721. var dist = chart.plotTop + chart.plotHeight -
  722. this.yAxis.pos - this.yAxis.len, lineHeightCorrection = Math.floor(this.xAxis.axisLine.strokeWidth() / 2);
  723. if (dist >= 0) {
  724. clipHeight -= Math.max(lineHeightCorrection - dist, 0);
  725. }
  726. }
  727. // First render, initial clip box
  728. if (!this.clipBox && this.animate) {
  729. this.clipBox = merge(chart.clipBox);
  730. this.clipBox.width = this.xAxis.len;
  731. this.clipBox.height = clipHeight;
  732. // On redrawing, resizing etc, update the clip rectangle
  733. }
  734. else if (chart[this.sharedClipKey]) {
  735. // animate in case resize is done during initial animation
  736. chart[this.sharedClipKey].animate({
  737. width: this.xAxis.len,
  738. height: clipHeight
  739. });
  740. // also change markers clip animation for consistency
  741. // (marker clip rects should exist only on chart init)
  742. if (chart[this.sharedClipKey + 'm']) {
  743. chart[this.sharedClipKey + 'm'].animate({
  744. width: this.xAxis.len
  745. });
  746. }
  747. }
  748. }
  749. });
  750. addEvent(Chart, 'update', function (e) {
  751. var options = e.options;
  752. // Use case: enabling scrollbar from a disabled state.
  753. // Scrollbar needs to be initialized from a controller, Navigator in this
  754. // case (#6615)
  755. if ('scrollbar' in options && this.navigator) {
  756. merge(true, this.options.scrollbar, options.scrollbar);
  757. this.navigator.update({}, false);
  758. delete options.scrollbar;
  759. }
  760. });