CandlestickSeries.js 9.9 KB

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