CandlestickSeries.js 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342
  1. /* *
  2. *
  3. * (c) 2010-2021 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. var __extends = (this && this.__extends) || (function () {
  12. var extendStatics = function (d, b) {
  13. extendStatics = Object.setPrototypeOf ||
  14. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  15. function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
  16. return extendStatics(d, b);
  17. };
  18. return function (d, b) {
  19. extendStatics(d, b);
  20. function __() { this.constructor = d; }
  21. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  22. };
  23. })();
  24. import O from '../../Core/Options.js';
  25. var defaultOptions = O.defaultOptions;
  26. import palette from '../../Core/Color/Palette.js';
  27. import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
  28. var _a = SeriesRegistry.seriesTypes, ColumnSeries = _a.column, OHLCSeries = _a.ohlc;
  29. import U from '../../Core/Utilities.js';
  30. var merge = U.merge;
  31. /* *
  32. *
  33. * Code
  34. *
  35. * */
  36. /**
  37. * The candlestick series type.
  38. *
  39. * @private
  40. * @class
  41. * @name Highcharts.seriesTypes.candlestick
  42. *
  43. * @augments Highcharts.seriesTypes.ohlc
  44. */
  45. var CandlestickSeries = /** @class */ (function (_super) {
  46. __extends(CandlestickSeries, _super);
  47. function CandlestickSeries() {
  48. /* *
  49. *
  50. * Static properties
  51. *
  52. * */
  53. var _this = _super !== null && _super.apply(this, arguments) || this;
  54. /* *
  55. *
  56. * Properties
  57. *
  58. * */
  59. _this.data = void 0;
  60. _this.options = void 0;
  61. _this.points = void 0;
  62. return _this;
  63. }
  64. /* *
  65. *
  66. * Functions
  67. *
  68. * */
  69. /* eslint-disable valid-jsdoc */
  70. /**
  71. * Postprocess mapping between options and SVG attributes
  72. *
  73. * @private
  74. * @function Highcharts.seriesTypes.candlestick#pointAttribs
  75. */
  76. CandlestickSeries.prototype.pointAttribs = function (point, state) {
  77. var attribs = ColumnSeries.prototype.pointAttribs.call(this, point, state), options = this.options, isUp = point.open < point.close, stroke = options.lineColor || this.color, color = point.color || this.color, // (#14826)
  78. stateOptions;
  79. attribs['stroke-width'] = options.lineWidth;
  80. attribs.fill = point.options.color ||
  81. (isUp ? (options.upColor || color) : color);
  82. attribs.stroke = point.options.lineColor ||
  83. (isUp ? (options.upLineColor || stroke) : stroke);
  84. // Select or hover states
  85. if (state) {
  86. stateOptions = options.states[state];
  87. attribs.fill = stateOptions.color || attribs.fill;
  88. attribs.stroke = stateOptions.lineColor || attribs.stroke;
  89. attribs['stroke-width'] =
  90. stateOptions.lineWidth || attribs['stroke-width'];
  91. }
  92. return attribs;
  93. };
  94. /**
  95. * Draw the data points.
  96. *
  97. * @private
  98. * @function Highcharts.seriesTypes.candlestick#drawPoints
  99. * @return {void}
  100. */
  101. CandlestickSeries.prototype.drawPoints = function () {
  102. var series = this, points = series.points, chart = series.chart, reversedYAxis = series.yAxis.reversed;
  103. points.forEach(function (point) {
  104. var graphic = point.graphic, plotOpen, plotClose, topBox, bottomBox, hasTopWhisker, hasBottomWhisker, crispCorr, crispX, path, halfWidth, isNew = !graphic;
  105. if (typeof point.plotY !== 'undefined') {
  106. if (!graphic) {
  107. point.graphic = graphic = chart.renderer.path()
  108. .add(series.group);
  109. }
  110. if (!series.chart.styledMode) {
  111. graphic
  112. .attr(series.pointAttribs(point, (point.selected && 'select'))) // #3897
  113. .shadow(series.options.shadow);
  114. }
  115. // Crisp vector coordinates
  116. crispCorr = (graphic.strokeWidth() % 2) / 2;
  117. // #2596:
  118. crispX = Math.round(point.plotX) - crispCorr;
  119. plotOpen = point.plotOpen;
  120. plotClose = point.plotClose;
  121. topBox = Math.min(plotOpen, plotClose);
  122. bottomBox = Math.max(plotOpen, plotClose);
  123. halfWidth = Math.round(point.shapeArgs.width / 2);
  124. hasTopWhisker = reversedYAxis ?
  125. bottomBox !== point.yBottom :
  126. Math.round(topBox) !==
  127. Math.round(point.plotHigh);
  128. hasBottomWhisker = reversedYAxis ?
  129. Math.round(topBox) !==
  130. Math.round(point.plotHigh) :
  131. bottomBox !== point.yBottom;
  132. topBox = Math.round(topBox) + crispCorr;
  133. bottomBox = Math.round(bottomBox) + crispCorr;
  134. // Create the path. Due to a bug in Chrome 49, the path is
  135. // first instanciated with no values, then the values
  136. // pushed. For unknown reasons, instanciating the path array
  137. // with all the values would lead to a crash when updating
  138. // frequently (#5193).
  139. path = [];
  140. path.push(['M', crispX - halfWidth, bottomBox], ['L', crispX - halfWidth, topBox], ['L', crispX + halfWidth, topBox], ['L', crispX + halfWidth, bottomBox], ['Z'], // Ensure a nice rectangle #2602
  141. ['M', crispX, topBox], [
  142. 'L',
  143. // #460, #2094
  144. crispX,
  145. hasTopWhisker ?
  146. Math.round(reversedYAxis ?
  147. point.yBottom :
  148. point.plotHigh) :
  149. topBox
  150. ], ['M', crispX, bottomBox], [
  151. 'L',
  152. // #460, #2094
  153. crispX,
  154. hasBottomWhisker ?
  155. Math.round(reversedYAxis ?
  156. point.plotHigh :
  157. point.yBottom) :
  158. bottomBox
  159. ]);
  160. graphic[isNew ? 'attr' : 'animate']({ d: path })
  161. .addClass(point.getClassName(), true);
  162. }
  163. });
  164. /* eslint-enable valid-jsdoc */
  165. };
  166. /**
  167. * A candlestick chart is a style of financial chart used to describe price
  168. * movements over time.
  169. *
  170. * @sample stock/demo/candlestick/
  171. * Candlestick chart
  172. *
  173. * @extends plotOptions.ohlc
  174. * @excluding borderColor,borderRadius,borderWidth
  175. * @product highstock
  176. * @optionparent plotOptions.candlestick
  177. */
  178. CandlestickSeries.defaultOptions = merge(OHLCSeries.defaultOptions, defaultOptions.plotOptions, {
  179. /**
  180. * The specific line color for up candle sticks. The default is to
  181. * inherit the general `lineColor` setting.
  182. *
  183. * @sample {highstock} stock/plotoptions/candlestick-linecolor/
  184. * Candlestick line colors
  185. *
  186. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  187. * @since 1.3.6
  188. * @product highstock
  189. * @apioption plotOptions.candlestick.upLineColor
  190. */
  191. /**
  192. * @type {Highcharts.DataGroupingApproximationValue|Function}
  193. * @default ohlc
  194. * @product highstock
  195. * @apioption plotOptions.candlestick.dataGrouping.approximation
  196. */
  197. states: {
  198. /**
  199. * @extends plotOptions.column.states.hover
  200. * @product highstock
  201. */
  202. hover: {
  203. /**
  204. * The pixel width of the line/border around the candlestick.
  205. *
  206. * @product highstock
  207. */
  208. lineWidth: 2
  209. }
  210. },
  211. /**
  212. * @extends plotOptions.ohlc.tooltip
  213. */
  214. tooltip: defaultOptions.plotOptions.ohlc.tooltip,
  215. /**
  216. * @type {number|null}
  217. * @product highstock
  218. */
  219. threshold: null,
  220. /**
  221. * The color of the line/border of the candlestick.
  222. *
  223. * In styled mode, the line stroke can be set with the
  224. * `.highcharts-candlestick-series .highcahrts-point` rule.
  225. *
  226. * @see [upLineColor](#plotOptions.candlestick.upLineColor)
  227. *
  228. * @sample {highstock} stock/plotoptions/candlestick-linecolor/
  229. * Candlestick line colors
  230. *
  231. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  232. * @default #000000
  233. * @product highstock
  234. */
  235. lineColor: palette.neutralColor100,
  236. /**
  237. * The pixel width of the candlestick line/border. Defaults to `1`.
  238. *
  239. *
  240. * In styled mode, the line stroke width can be set with the
  241. * `.highcharts-candlestick-series .highcahrts-point` rule.
  242. *
  243. * @product highstock
  244. */
  245. lineWidth: 1,
  246. /**
  247. * The fill color of the candlestick when values are rising.
  248. *
  249. * In styled mode, the up color can be set with the
  250. * `.highcharts-candlestick-series .highcharts-point-up` rule.
  251. *
  252. * @sample {highstock} stock/plotoptions/candlestick-color/
  253. * Custom colors
  254. * @sample {highstock} highcharts/css/candlestick/
  255. * Colors in styled mode
  256. *
  257. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  258. * @default #ffffff
  259. * @product highstock
  260. */
  261. upColor: palette.backgroundColor,
  262. /**
  263. * @product highstock
  264. */
  265. stickyTracking: true
  266. });
  267. return CandlestickSeries;
  268. }(OHLCSeries));
  269. SeriesRegistry.registerSeriesType('candlestick', CandlestickSeries);
  270. /* *
  271. *
  272. * Default Export
  273. *
  274. * */
  275. export default CandlestickSeries;
  276. /* *
  277. *
  278. * API Options
  279. *
  280. * */
  281. /**
  282. * A `candlestick` series. If the [type](#series.candlestick.type)
  283. * option is not specified, it is inherited from [chart.type](
  284. * #chart.type).
  285. *
  286. * @type {*}
  287. * @extends series,plotOptions.candlestick
  288. * @excluding dataParser, dataURL, marker
  289. * @product highstock
  290. * @apioption series.candlestick
  291. */
  292. /**
  293. * An array of data points for the series. For the `candlestick` series
  294. * type, points can be given in the following ways:
  295. *
  296. * 1. An array of arrays with 5 or 4 values. In this case, the values correspond
  297. * to `x,open,high,low,close`. If the first value is a string, it is applied
  298. * as the name of the point, and the `x` value is inferred. The `x` value can
  299. * also be omitted, in which case the inner arrays should be of length 4.
  300. * Then the `x` value is automatically calculated, either starting at 0 and
  301. * incremented by 1, or from `pointStart` and `pointInterval` given in the
  302. * series options.
  303. * ```js
  304. * data: [
  305. * [0, 7, 2, 0, 4],
  306. * [1, 1, 4, 2, 8],
  307. * [2, 3, 3, 9, 3]
  308. * ]
  309. * ```
  310. *
  311. * 2. An array of objects with named values. The following snippet shows only a
  312. * few settings, see the complete options set below. If the total number of
  313. * data points exceeds the series'
  314. * [turboThreshold](#series.candlestick.turboThreshold), this option is not
  315. * available.
  316. * ```js
  317. * data: [{
  318. * x: 1,
  319. * open: 9,
  320. * high: 2,
  321. * low: 4,
  322. * close: 6,
  323. * name: "Point2",
  324. * color: "#00FF00"
  325. * }, {
  326. * x: 1,
  327. * open: 1,
  328. * high: 4,
  329. * low: 7,
  330. * close: 7,
  331. * name: "Point1",
  332. * color: "#FF00FF"
  333. * }]
  334. * ```
  335. *
  336. * @type {Array<Array<(number|string),number,number,number>|Array<(number|string),number,number,number,number>|*>}
  337. * @extends series.ohlc.data
  338. * @excluding y
  339. * @product highstock
  340. * @apioption series.candlestick.data
  341. */
  342. ''; // adds doclets above to transpilat