CandlestickSeries.js 10 KB

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