highcharts 9.2.0 → 9.3.1

package/es-modules/Series/HLC/HLCSeries.js

@@ -0,0 +1,383 @@
+/* *
+ *
+ *  (c) 2010-2021 Pawel Lysy
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+import HLCPoint from './HLCPoint.js';
+import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
+var ColumnSeries = SeriesRegistry.seriesTypes.column;
+import U from '../../Core/Utilities.js';
+var extend = U.extend, merge = U.merge;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * The hlc series type.
+ *
+ * @private
+ * @class
+ * @name Highcharts.seriesTypes.hlc
+ *
+ * @augments Highcharts.Series
+ */
+var HLCSeries = /** @class */ (function (_super) {
+    __extends(HLCSeries, _super);
+    function HLCSeries() {
+        /* *
+         *
+         *  Static Properties
+         *
+         * */
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        _this.data = void 0;
+        _this.options = void 0;
+        _this.points = void 0;
+        _this.yData = void 0;
+        return _this;
+        /* eslint-enable valid-jsdoc */
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * Extend the path if close is not between high and low.
+     *
+     * @param {SVGPath} path the path array of the point
+     * @param {number} halfStrokeWidth
+     * @param {number} value value of the point to which the stem should be extended
+     */
+    HLCSeries.prototype.extendStem = function (path, halfStrokeWidth, value) {
+        var start = path[0];
+        var end = path[1];
+        // We don't need to worry about crisp - close value
+        // is already crisped and halfStrokeWidth should remove it.
+        if (typeof start[2] === 'number') {
+            start[2] = Math.max(value + halfStrokeWidth, start[2]);
+        }
+        if (typeof end[2] === 'number') {
+            end[2] = Math.min(value - halfStrokeWidth, end[2]);
+        }
+    };
+    /**
+     * Function to create SVGPath of the point based on the
+     * plot positions of this point.
+     *
+     * @param {SVGPath} point
+     * @param {SVGElement} graphic
+     * @returns {SVGPath}
+     */
+    HLCSeries.prototype.getPointPath = function (point, graphic) {
+        // crisp vector coordinates
+        var strokeWidth = graphic.strokeWidth(), series = point.series, crispCorr = (strokeWidth % 2) / 2, 
+        // #2596:
+        crispX = Math.round(point.plotX) - crispCorr, halfWidth = Math.round(point.shapeArgs.width / 2);
+        var path, plotClose = point.plotClose;
+        // the vertical stem
+        path = [
+            ['M', crispX, Math.round(point.yBottom)],
+            ['L', crispX, Math.round(point.plotHigh)]
+        ];
+        // close
+        if (point.close !== null) {
+            plotClose = Math.round(point.plotClose) + crispCorr;
+            path.push(['M', crispX, plotClose], ['L', crispX + halfWidth, plotClose]);
+            series.extendStem(path, strokeWidth / 2, plotClose);
+        }
+        return path;
+    };
+    /**
+     * Draw single point
+     * @private
+     */
+    HLCSeries.prototype.drawSinglePoint = function (point) {
+        var series = point.series, chart = series.chart;
+        var path, graphic = point.graphic, isNew = !graphic;
+        if (typeof point.plotY !== 'undefined') {
+            // Create and/or update the graphic
+            if (!graphic) {
+                point.graphic = graphic = chart.renderer.path()
+                    .add(series.group);
+            }
+            if (!chart.styledMode) {
+                graphic.attr(series.pointAttribs(point, (point.selected && 'select'))); // #3897
+            }
+            // crisp vector coordinates
+            path = series.getPointPath(point, graphic);
+            graphic[isNew ? 'attr' : 'animate']({ d: path })
+                .addClass(point.getClassName(), true);
+        }
+    };
+    /**
+     * Draw the data points
+     * @private
+     */
+    HLCSeries.prototype.drawPoints = function () {
+        this.points.forEach(this.drawSinglePoint);
+    };
+    /**
+     * @private
+     * @function Highcharts.seriesTypes.hlc#init
+     * @return {void}
+     */
+    HLCSeries.prototype.init = function () {
+        _super.prototype.init.apply(this, arguments);
+        this.options.stacking = void 0; // #8817
+    };
+    /**
+     * Postprocess mapping between options and SVG attributes
+     * @private
+     */
+    HLCSeries.prototype.pointAttribs = function (point, state) {
+        var attribs = _super.prototype.pointAttribs.call(this, point, state);
+        delete attribs.fill;
+        return attribs;
+    };
+    HLCSeries.prototype.toYData = function (point) {
+        // return a plain array for speedy calculation
+        return [point.high, point.low, point.close];
+    };
+    /**
+     * Translate data points from raw values x and y to plotX and plotY
+     *
+     * @private
+     * @function Highcharts.seriesTypes.hlc#translate
+     * @return {void}
+     */
+    HLCSeries.prototype.translate = function () {
+        var series = this, yAxis = series.yAxis, names = (this.pointArrayMap && this.pointArrayMap.slice()) || [], translated = names.map(function (name) {
+            return "plot" + (name.charAt(0).toUpperCase() + name.slice(1));
+        });
+        translated.push('yBottom');
+        names.push('low');
+        _super.prototype.translate.apply(series);
+        // Do the translation
+        series.points.forEach(function (point) {
+            names.forEach(function (name, i) {
+                var value = point[name];
+                if (value !== null) {
+                    if (series.dataModify) {
+                        value = series.dataModify.modifyValue(value);
+                    }
+                    point[translated[i]] =
+                        yAxis.toPixels(value, true);
+                }
+            });
+            // Align the tooltip to the high value to avoid covering the
+            // point
+            point.tooltipPos[1] =
+                point.plotHigh + yAxis.pos - series.chart.plotTop;
+        });
+    };
+    /**
+     * An HLC chart is a style of financial chart used to describe price
+     * movements over time. It displays high, low and close values per
+     * data point.
+     *
+     * @sample stock/demo/hlc/
+     *         HLC chart
+     *
+     * @extends      plotOptions.column
+     * @excluding    borderColor, borderRadius, borderWidth, crisp, stacking,
+     *               stack
+     * @product      highstock
+     * @optionparent plotOptions.hlc
+     */
+    HLCSeries.defaultOptions = merge(ColumnSeries.defaultOptions, {
+        /**
+         * The approximate pixel width of each group. If for example a series
+         * with 30 points is displayed over a 600 pixel wide plot area, no
+         * grouping is performed. If however the series contains so many points
+         * that the spacing is less than the groupPixelWidth, Highcharts will
+         * try to group it into appropriate groups so that each is more or less
+         * two pixels wide. Defaults to `5`.
+         *
+         * @type      {number}
+         * @default   5
+         * @product   highstock
+         * @apioption plotOptions.hlc.dataGrouping.groupPixelWidth
+         */
+        /**
+         * @type      {Highcharts.DataGroupingApproximationValue|Function}
+         * @default   hlc
+         * @product   highstock
+         * @apioption plotOptions.hlc.dataGrouping.approximation
+         */
+        /**
+         * @default   close
+         * @apioption plotOptions.hlc.colorKey
+         */
+        /**
+         * The pixel width of the line/border. Defaults to `1`.
+         *
+         * @sample {highstock} stock/plotoptions/hlc-linewidth/
+         *         A greater line width
+         *
+         * @type    {number}
+         * @default 1
+         * @product highstock
+         *
+         * @public
+         */
+        lineWidth: 1,
+        tooltip: {
+            pointFormat: '<span style="color:{point.color}">\u25CF</span> ' +
+                '<b> {series.name}</b><br/>' +
+                'High: {point.high}<br/>' +
+                'Low: {point.low}<br/>' +
+                'Close: {point.close}<br/>'
+        },
+        threshold: null,
+        states: {
+            /**
+             * @extends plotOptions.column.states.hover
+             * @product highstock
+             */
+            hover: {
+                /**
+                 * The pixel width of the line representing the HLC point.
+                 *
+                 * @type    {number}
+                 * @default 3
+                 * @product highstock
+                 */
+                lineWidth: 3
+            }
+        },
+        /**
+         * Determines which one of  `high`, `low`, `close` values should
+         * be represented as `point.y`, which is later used to set dataLabel
+         * position and [compare](#plotOptions.series.compare).
+         *
+         * @sample {highstock} stock/plotoptions/hlc-pointvalkey/
+         *         Possible values
+         *
+         * @type       {string}
+         * @default    close
+         * @validvalue ["high", "low", "close"]
+         * @product    highstock
+         * @apioption  plotOptions.hlc.pointValKey
+         */
+        /**
+         * @default   close
+         * @apioption plotOptions.hlc.colorKey
+         */
+        stickyTracking: true
+    });
+    return HLCSeries;
+}(ColumnSeries));
+extend(HLCSeries.prototype, {
+    animate: null,
+    directTouch: false,
+    pointArrayMap: ['high', 'low', 'close'],
+    pointAttrToOptions: {
+        stroke: 'color',
+        'stroke-width': 'lineWidth'
+    },
+    pointValKey: 'close'
+});
+HLCSeries.prototype.pointClass = HLCPoint;
+SeriesRegistry.registerSeriesType('hlc', HLCSeries);
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default HLCSeries;
+/* *
+ *
+ *  API Options
+ *
+ * */
+/**
+ * A `hlc` series. If the [type](#series.hlc.type) option is not
+ * specified, it is inherited from [chart.type](#chart.type).
+ *
+ * @extends   series,plotOptions.hlc
+ * @excluding dataParser, dataURL
+ * @product   highstock
+ * @apioption series.hlc
+ */
+/**
+ * An array of data points for the series. For the `hlc` series type,
+ * points can be given in the following ways:
+ *
+ * 1. An array of arrays with 4 or 3 values. In this case, the values correspond
+ *    to `x,high,low,close`. If the first value is a string, it is applied
+ *    as the name of the point, and the `x` value is inferred. The `x` value can
+ *    also be omitted, in which case the inner arrays should be of length of 3\.
+ *    Then the `x` value is automatically calculated, either starting at 0 and
+ *    incremented by 1, or from `pointStart` and `pointInterval` given in the
+ *    series options.
+ *    ```js
+ *    data: [
+ *        [0, 5, 6, 7],
+ *        [1, 4, 8, 2],
+ *        [2, 3, 4, 10]
+ *    ]
+ *    ```
+ *
+ * 2. An array of objects with named values. The following snippet shows only a
+ *    few settings, see the complete options set below. If the total number of
+ *    data points exceeds the series'
+ *    [turboThreshold](#series.hlc.turboThreshold), this option is not
+ *    available.
+ *    ```js
+ *    data: [{
+ *        x: 1,
+ *        high: 4,
+ *        low: 5,
+ *        close: 2,
+ *        name: "Point2",
+ *        color: "#00FF00"
+ *    }, {
+ *        x: 1,
+ *        high: 3,
+ *        low: 6,
+ *        close: 7,
+ *        name: "Point1",
+ *        color: "#FF00FF"
+ *    }]
+ *    ```
+ *
+ * @type      {Array<Array<(number|string),number,number>|Array<(number|string),number,number,number>|*>}
+ * @extends   series.arearange.data
+ * @excluding y, marker
+ * @product   highstock
+ * @apioption series.hlc.data
+ */
+/**
+ * The closing value of each data point.
+ *
+ * @type      {number}
+ * @product   highstock
+ * @apioption series.hlc.data.close
+ */
+''; // adds doclets above to transpilat

package/es-modules/Series/Heatmap/HeatmapPoint.js

@@ -21,8 +21,6 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import ColorMapMixin from '../../Mixins/ColorMapSeries.js';
-var colorMapPointMixin = ColorMapMixin.colorMapPointMixin;
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 var ScatterPoint = SeriesRegistry.seriesTypes.scatter.prototype.pointClass;
 import U from '../../Core/Utilities.js';
@@ -134,8 +132,9 @@ var HeatmapPoint = /** @class */ (function (_super) {
     return HeatmapPoint;
 }(ScatterPoint));
 extend(HeatmapPoint.prototype, {
-    dataLabelOnNull: colorMapPointMixin.dataLabelOnNull,
-    moveToTopOnHover: colorMapPointMixin.moveToTopOnHover
+    dataLabelOnNull: true,
+    moveToTopOnHover: true,
+    ttBelow: false
 });
 /* *
  *

package/es-modules/Series/Heatmap/HeatmapSeries.js

@@ -22,11 +22,10 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import Color from '../../Core/Color/Color.js';
-import ColorMapMixin from '../../Mixins/ColorMapSeries.js';
-var colorMapSeriesMixin = ColorMapMixin.colorMapSeriesMixin;
+import ColorMapComposition from '../ColorMapComposition.js';
+var colorMapSeriesMixin = ColorMapComposition.colorMapSeriesMixin;
 import HeatmapPoint from './HeatmapPoint.js';
 import LegendSymbol from '../../Core/Legend/LegendSymbol.js';
-import palette from '../../Core/Color/Palette.js';
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 var Series = SeriesRegistry.series, _a = SeriesRegistry.seriesTypes, ColumnSeries = _a.column, ScatterSeries = _a.scatter;
 import SVGRenderer from '../../Core/Renderer/SVG/SVGRenderer.js';
@@ -87,11 +86,25 @@ var HeatmapSeries = /** @class */ (function (_super) {
             this.points.forEach(function (point) {
                 if (point.graphic) {
                     point.graphic[_this.chart.styledMode ? 'css' : 'animate'](_this.colorAttribs(point));
+                    // @todo
+                    // Applying the border radius here is not optimal. It should
+                    // be set in the shapeArgs or returned from `markerAttribs`.
+                    // However, Series.drawPoints does not pick up markerAttribs
+                    // to be passed over to `renderer.symbol`. Also, image
+                    // symbols are not positioned by their top left corner like
+                    // other symbols are. This should be refactored, then we
+                    // could save ourselves some tests for .hasImage etc. And
+                    // the evaluation of borderRadius would be moved to
+                    // `markerAttribs`.
                     if (_this.options.borderRadius) {
                         point.graphic.attr({
                             r: _this.options.borderRadius
                         });
                     }
+                    // Saving option for reapplying later
+                    // when changing point's states (#16165)
+                    (point.shapeArgs || {}).r = _this.options.borderRadius;
+                    (point.shapeArgs || {}).d = point.graphic.pathArray;
                     if (point.value === null) { // #15708
                         point.graphic.addClass('highcharts-null-point');
                     }
@@ -363,7 +376,7 @@ var HeatmapSeries = /** @class */ (function (_super) {
          *
          * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
          */
-        nullColor: palette.neutralColor3,
+        nullColor: "#f7f7f7" /* neutralColor3 */,
         dataLabels: {
             formatter: function () {
                 var numberFormatter = this.series.chart.numberFormatter;
@@ -549,8 +562,7 @@ extend(HeatmapSeries.prototype, {
      */
     alignDataLabel: ColumnSeries.prototype.alignDataLabel,
     axisTypes: colorMapSeriesMixin.axisTypes,
-    colorAttribs: colorMapSeriesMixin.colorAttribs,
-    colorKey: colorMapSeriesMixin.colorKey,
+    colorKey: 'value',
     directTouch: true,
     /**
      * @private
@@ -563,6 +575,7 @@ extend(HeatmapSeries.prototype, {
     pointClass: HeatmapPoint,
     trackerGroups: colorMapSeriesMixin.trackerGroups
 });
+ColorMapComposition.compose(HeatmapSeries);
 SeriesRegistry.registerSeriesType('heatmap', HeatmapSeries);
 /* *
  *

package/es-modules/Series/HeikinAshi/HeikinAshiSeries.js

@@ -162,8 +162,7 @@ var HeikinAshiSeries = /** @class */ (function (_super) {
 }(CandlestickSeries));
 // Assign haikinashi data into the points.
 addEvent(HeikinAshiSeries, 'afterTranslate', function () {
-    var series = this, points = series.points, heikiashiData = series.heikiashiData;
-    var cropStart = series.cropStart || 0;
+    var series = this, points = series.points, heikiashiData = series.heikiashiData, cropStart = series.cropStart || 0;
     // Reset the proccesed data.
     series.processedYData.length = 0;
     // Modify points.
@@ -196,7 +195,7 @@ addEvent(Axis, 'postProcessData', function () {
 });
 /* *
  *
- *  Prototype Properties
+ *  Class Prototype
  *
  * */
 HeikinAshiSeries.prototype.pointClass = HeikinAshiPoint;

package/es-modules/Series/Histogram/HistogramSeries.js

@@ -22,7 +22,7 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
-import DerivedSeriesMixin from '../../Mixins/DerivedSeries.js';
+import DerivedComposition from '../DerivedComposition.js';
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 var ColumnSeries = SeriesRegistry.seriesTypes.column;
 import U from '../../Core/Utilities.js';
@@ -217,13 +217,9 @@ var HistogramSeries = /** @class */ (function (_super) {
     return HistogramSeries;
 }(ColumnSeries));
 extend(HistogramSeries.prototype, {
-    addBaseSeriesEvents: DerivedSeriesMixin.addBaseSeriesEvents,
-    addEvents: DerivedSeriesMixin.addEvents,
-    destroy: DerivedSeriesMixin.destroy,
-    hasDerivedData: DerivedSeriesMixin.hasDerivedData,
-    init: DerivedSeriesMixin.init,
-    setBaseSeries: DerivedSeriesMixin.setBaseSeries
+    hasDerivedData: DerivedComposition.hasDerivedData
 });
+DerivedComposition.compose(HistogramSeries);
 SeriesRegistry.registerSeriesType('histogram', HistogramSeries);
 /* *
  *

package/es-modules/Series/HollowCandlestick/HollowCandlestickPoint.js

@@ -62,8 +62,8 @@ var HollowCandlestickPoint = /** @class */ (function (_super) {
      */
     HollowCandlestickPoint.prototype.getClassName = function () {
         var className = _super.prototype.getClassName.apply(this);
-        var point = this, index = point.index, isBullish = point.series.hollowCandlestickData[index];
-        if (isBullish === 'up') {
+        var point = this, index = point.index, currentPoint = point.series.hollowCandlestickData[index];
+        if (!currentPoint.isBullish && currentPoint.trendDirection === 'up') {
             className += '-bearish-up';
         }
         return className;

package/es-modules/Series/HollowCandlestick/HollowCandlestickSeries.js

@@ -29,7 +29,6 @@ var __extends = (this && this.__extends) || (function () {
 import HollowCandlestickPoint from './HollowCandlestickPoint.js';
 import SeriesRegistry from '../../Core/Series/SeriesRegistry.js';
 import U from '../../Core/Utilities.js';
-import palette from '../../Core/Color/Palette.js';
 import Axis from '../../Core/Axis/Axis.js';
 var CandlestickSeries = SeriesRegistry.seriesTypes.candlestick;
 var addEvent = U.addEvent, merge = U.merge;
@@ -87,7 +86,10 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
         hollowCandlestickData = this.hollowCandlestickData;
         if (!hollowCandlestickData.length && processedYData && processedYData.length) {
             // First point is allways bullish (transparent).
-            hollowCandlestickData.push(true);
+            hollowCandlestickData.push({
+                isBullish: true,
+                trendDirection: 'up'
+            });
             for (var i = 1; i < processedYData.length; i++) {
                 var dataPoint = processedYData[i], previousDataPoint = processedYData[i - 1];
                 hollowCandlestickData.push(series.isBullish(dataPoint, previousDataPoint));
@@ -100,21 +102,18 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
      *
      * @function Highcharts.seriesTypes.hollowcandlestick#getLineColor
      *
-     * @param {boolean|string} isBullish
-     *        Type of candle (bearish/bullish).
+     * @param {string} trendDirection
+     *        Type of candle direction (bearish/bullish)(down/up).
      *
      * @return {ColorType}
      *
      */
-    HollowCandlestickSeries.prototype.getLineColor = function (isBullish) {
+    HollowCandlestickSeries.prototype.getLineColor = function (trendDirection) {
         var series = this;
-        // Return fill color only for bearish candles.
-        if (typeof (isBullish) === 'boolean') {
-            return series.options.upColor || palette.positiveColor;
-        }
-        return isBullish === 'up' ?
-            series.options.upColor || palette.positiveColor :
-            series.options.color || palette.negativeColor;
+        // Return line color based on trend direction
+        return trendDirection === 'up' ?
+            series.options.upColor || "#06b535" /* positiveColor */ :
+            series.options.color || "#f21313" /* negativeColor */;
     };
     /**
      * Return fill color based on candle type.
@@ -122,21 +121,21 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
      *
      * @function Highcharts.seriesTypes.hollowcandlestick#getPointFill
      *
-     * @param {boolean|string} isBullish
-     *        Type of candle (bearish/bullish).
+     * @param {HollowcandleInfo} hollowcandleInfo
+     *        Information about the current candle.
      *
      * @return {ColorType}
      *
      */
-    HollowCandlestickSeries.prototype.getPointFill = function (isBullish) {
+    HollowCandlestickSeries.prototype.getPointFill = function (hollowcandleInfo) {
         var series = this;
         // Return fill color only for bearish candles.
-        if (typeof (isBullish) === 'boolean') {
+        if (hollowcandleInfo.isBullish) {
             return 'transparent';
         }
-        return isBullish === 'up' ?
-            series.options.upColor || palette.positiveColor :
-            series.options.color || palette.negativeColor;
+        return hollowcandleInfo.trendDirection === 'up' ?
+            series.options.upColor || "#06b535" /* positiveColor */ :
+            series.options.color || "#f21313" /* negativeColor */;
     };
     /**
      * @private
@@ -159,16 +158,16 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
       * @param {Array<(number)>} previousDataPoint
      *        Previous point.
      *
-     * @return {boolean|string}
+     * @return {HollowcandleInfo}
      *
      */
     HollowCandlestickSeries.prototype.isBullish = function (dataPoint, previousDataPoint) {
-        // Compare points' open and close value.
-        if (dataPoint[0] <= dataPoint[3]) {
-            return true; // bullish
-        }
-        // For bearish candles.
-        return dataPoint[3] < previousDataPoint[3] ? 'down' : 'up';
+        return {
+            // Compare points' open and close value.
+            isBullish: dataPoint[0] <= dataPoint[3],
+            // For bearish candles.
+            trendDirection: dataPoint[3] < previousDataPoint[3] ? 'down' : 'up'
+        };
     };
     /**
      * Add color and fill attribute for each point.
@@ -185,9 +184,9 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
      */
     HollowCandlestickSeries.prototype.pointAttribs = function (point, state) {
         var attribs = _super.prototype.pointAttribs.call(this, point, state), stateOptions;
-        var index = point.index, isBullish = this.hollowCandlestickData[index];
-        attribs.fill = this.getPointFill(isBullish) || attribs.fill;
-        attribs.stroke = this.getLineColor(isBullish) || attribs.stroke;
+        var index = point.index, hollowcandleInfo = this.hollowCandlestickData[index];
+        attribs.fill = this.getPointFill(hollowcandleInfo) || attribs.fill;
+        attribs.stroke = this.getLineColor(hollowcandleInfo.trendDirection) || attribs.stroke;
         // Select or hover states
         if (state) {
             stateOptions = this.options.states[state];
@@ -223,7 +222,7 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
          * @type    {ColorType}
          * @product highstock
          */
-        color: palette.negativeColor,
+        color: "#f21313" /* negativeColor */,
         dataGrouping: {
             groupAll: true,
             groupPixelWidth: 10
@@ -240,7 +239,7 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
          * @type    {ColorType}
          * @product highstock
          */
-        lineColor: palette.negativeColor,
+        lineColor: "#f21313" /* negativeColor */,
         /**
          * The fill color of the candlestick when the current
          * close is higher than the previous one.
@@ -253,7 +252,7 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
          * @type    {ColorType}
          * @product highstock
          */
-        upColor: palette.positiveColor,
+        upColor: "#06b535" /* positiveColor */,
         /**
          * The color of the line/border of the hollow candlestick when
          * the current close is higher than the previous one.
@@ -266,7 +265,7 @@ var HollowCandlestickSeries = /** @class */ (function (_super) {
          * @type    {ColorType}
          * @product highstock
          */
-        upLineColor: palette.positiveColor
+        upLineColor: "#06b535" /* positiveColor */
     });
     return HollowCandlestickSeries;
 }(CandlestickSeries));
@@ -290,7 +289,7 @@ addEvent(Axis, 'postProcessData', function () {
 });
 /* *
  *
- *  Prototype Properties
+ *  Class Prototype
  *
  * */
 HollowCandlestickSeries.prototype.pointClass = HollowCandlestickPoint;