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. * A candlestick chart is a style of financial chart used to describe price
  38. * movements over time.
  39. *
  40. * @sample stock/demo/candlestick/
  41. * Candlestick chart
  42. *
  43. * @extends plotOptions.ohlc
  44. * @excluding borderColor,borderRadius,borderWidth
  45. * @product highstock
  46. * @optionparent plotOptions.candlestick
  47. */
  48. /**
  49. * The candlestick series type.
  50. *
  51. * @private
  52. * @class
  53. * @name Highcharts.seriesTypes.candlestick
  54. *
  55. * @augments Highcharts.seriesTypes.ohlc
  56. */
  57. var CandlestickSeries = /** @class */ (function (_super) {
  58. __extends(CandlestickSeries, _super);
  59. function CandlestickSeries() {
  60. var _this = _super !== null && _super.apply(this, arguments) || this;
  61. /* *
  62. *
  63. * Properties
  64. *
  65. * */
  66. _this.data = void 0;
  67. _this.options = void 0;
  68. _this.points = void 0;
  69. return _this;
  70. }
  71. /* *
  72. *
  73. * Functions
  74. *
  75. * */
  76. /* eslint-disable valid-jsdoc */
  77. /**
  78. * Postprocess mapping between options and SVG attributes
  79. *
  80. * @private
  81. * @function Highcharts.seriesTypes.candlestick#pointAttribs
  82. */
  83. CandlestickSeries.prototype.pointAttribs = function (point, state) {
  84. 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)
  85. stateOptions;
  86. attribs['stroke-width'] = options.lineWidth;
  87. attribs.fill = point.options.color ||
  88. (isUp ? (options.upColor || color) : color);
  89. attribs.stroke = point.options.lineColor ||
  90. (isUp ? (options.upLineColor || stroke) : stroke);
  91. // Select or hover states
  92. if (state) {
  93. stateOptions = options.states[state];
  94. attribs.fill = stateOptions.color || attribs.fill;
  95. attribs.stroke = stateOptions.lineColor || attribs.stroke;
  96. attribs['stroke-width'] =
  97. stateOptions.lineWidth || attribs['stroke-width'];
  98. }
  99. return attribs;
  100. };
  101. /**
  102. * Draw the data points.
  103. *
  104. * @private
  105. * @function Highcharts.seriesTypes.candlestick#drawPoints
  106. * @return {void}
  107. */
  108. CandlestickSeries.prototype.drawPoints = function () {
  109. var series = this, points = series.points, chart = series.chart, reversedYAxis = series.yAxis.reversed;
  110. points.forEach(function (point) {
  111. var graphic = point.graphic, plotOpen, plotClose, topBox, bottomBox, hasTopWhisker, hasBottomWhisker, crispCorr, crispX, path, halfWidth, isNew = !graphic;
  112. if (typeof point.plotY !== 'undefined') {
  113. if (!graphic) {
  114. point.graphic = graphic = chart.renderer.path()
  115. .add(series.group);
  116. }
  117. if (!series.chart.styledMode) {
  118. graphic
  119. .attr(series.pointAttribs(point, (point.selected && 'select'))) // #3897
  120. .shadow(series.options.shadow);
  121. }
  122. // Crisp vector coordinates
  123. crispCorr = (graphic.strokeWidth() % 2) / 2;
  124. // #2596:
  125. crispX = Math.round(point.plotX) - crispCorr;
  126. plotOpen = point.plotOpen;
  127. plotClose = point.plotClose;
  128. topBox = Math.min(plotOpen, plotClose);
  129. bottomBox = Math.max(plotOpen, plotClose);
  130. halfWidth = Math.round(point.shapeArgs.width / 2);
  131. hasTopWhisker = reversedYAxis ?
  132. bottomBox !== point.yBottom :
  133. Math.round(topBox) !==
  134. Math.round(point.plotHigh);
  135. hasBottomWhisker = reversedYAxis ?
  136. Math.round(topBox) !==
  137. Math.round(point.plotHigh) :
  138. bottomBox !== point.yBottom;
  139. topBox = Math.round(topBox) + crispCorr;
  140. bottomBox = Math.round(bottomBox) + crispCorr;
  141. // Create the path. Due to a bug in Chrome 49, the path is
  142. // first instanciated with no values, then the values
  143. // pushed. For unknown reasons, instanciating the path array
  144. // with all the values would lead to a crash when updating
  145. // frequently (#5193).
  146. path = [];
  147. path.push(['M', crispX - halfWidth, bottomBox], ['L', crispX - halfWidth, topBox], ['L', crispX + halfWidth, topBox], ['L', crispX + halfWidth, bottomBox], ['Z'], // Ensure a nice rectangle #2602
  148. ['M', crispX, topBox], [
  149. 'L',
  150. // #460, #2094
  151. crispX,
  152. hasTopWhisker ?
  153. Math.round(reversedYAxis ?
  154. point.yBottom :
  155. point.plotHigh) :
  156. topBox
  157. ], ['M', crispX, bottomBox], [
  158. 'L',
  159. // #460, #2094
  160. crispX,
  161. hasBottomWhisker ?
  162. Math.round(reversedYAxis ?
  163. point.plotHigh :
  164. point.yBottom) :
  165. bottomBox
  166. ]);
  167. graphic[isNew ? 'attr' : 'animate']({ d: path })
  168. .addClass(point.getClassName(), true);
  169. }
  170. });
  171. /* eslint-enable valid-jsdoc */
  172. };
  173. /* *
  174. *
  175. * Static properties
  176. *
  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
  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