igniteui-webcomponents-charts 4.6.0 → 4.7.0

package/esm5/lib/igc-data-chart-component.js

@@ -46,6 +46,7 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         _this._series = null;
         _this._axes = null;
         _this._dataSource = null;
+        _this._highlightedDataSource = null;
         _this._axesAdapter = null;
         _this._seriesAdapter = null;
         _this._disconnected = false;
@@ -80,6 +81,7 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             i.owner = _this;
             i._provideRenderer(_this._dataSource);
             i.provideData(_this._dataSource);
+            i.provideHighlightedData(_this._highlightedDataSource);
             i.bindAxes(_this.actualAxes);
             if (_this.parentElement) {
                 i._styling(_this, _this, _this);
@@ -246,6 +248,17 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(IgcDataChartComponent.prototype, "highlightedDataSource", {
+        get: function () {
+            return this._highlightedDataSource;
+        },
+        set: function (value) {
+            this._highlightedDataSource = value;
+            this.bindHighlightedData();
+        },
+        enumerable: false,
+        configurable: true
+    });
     IgcDataChartComponent.prototype.bindData = function () {
         //console.log("binding data: " + this._dataSource);
         if (this.actualAxes && this.actualAxes.length > 0) {
@@ -261,6 +274,14 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
             }
         }
     };
+    IgcDataChartComponent.prototype.bindHighlightedData = function () {
+        if (this.actualSeries && this.actualSeries.length > 0) {
+            var currSeries = this.actualSeries;
+            for (var i = 0; i < currSeries.length; i++) {
+                currSeries[i].provideHighlightedData(this._highlightedDataSource);
+            }
+        }
+    };
     IgcDataChartComponent.prototype.updateContentChildren = function () {
         this.contentAxes.length = 0;
         this.contentSeries.length = 0;
@@ -491,11 +512,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
     * ```
     */
         get: function () {
-            return this.i.ux;
+            return this.i.u0;
         },
         set: function (v) {
-            this.i.ux = ensureBool(v);
-            this._a("isSquare", this.i.ux);
+            this.i.u0 = ensureBool(v);
+            this._a("isSquare", this.i.u0);
         },
         enumerable: false,
         configurable: true
@@ -512,11 +533,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         * ```
         */
         get: function () {
-            return this.i.v4;
+            return this.i.v7;
         },
         set: function (v) {
-            this.i.v4 = +v;
-            this._a("windowScaleHorizontal", this.i.v4);
+            this.i.v7 = +v;
+            this._a("windowScaleHorizontal", this.i.v7);
         },
         enumerable: false,
         configurable: true
@@ -533,11 +554,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         * ```
         */
         get: function () {
-            return this.i.v5;
+            return this.i.v8;
         },
         set: function (v) {
-            this.i.v5 = +v;
-            this._a("windowScaleVertical", this.i.v5);
+            this.i.v8 = +v;
+            this._a("windowScaleVertical", this.i.v8);
         },
         enumerable: false,
         configurable: true
@@ -548,11 +569,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * This property is effectively a shortcut to the Width of the ActualWindowRect property.
         */
         get: function () {
-            return this.i.vp;
+            return this.i.vs;
         },
         set: function (v) {
-            this.i.vp = +v;
-            this._a("actualWindowScaleHorizontal", this.i.vp);
+            this.i.vs = +v;
+            this._a("actualWindowScaleHorizontal", this.i.vs);
         },
         enumerable: false,
         configurable: true
@@ -563,11 +584,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * This property is effectively a shortcut to the Height of the ActualWindowRect property.
         */
         get: function () {
-            return this.i.vq;
+            return this.i.vt;
         },
         set: function (v) {
-            this.i.vq = +v;
-            this._a("actualWindowScaleVertical", this.i.vq);
+            this.i.vt = +v;
+            this._a("actualWindowScaleVertical", this.i.vt);
         },
         enumerable: false,
         configurable: true
@@ -583,11 +604,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         * ```
         */
         get: function () {
-            return this.i.uv;
+            return this.i.uy;
         },
         set: function (v) {
-            this.i.uv = ensureBool(v);
-            this._a("isHorizontalZoomEnabled", this.i.uv);
+            this.i.uy = ensureBool(v);
+            this._a("isHorizontalZoomEnabled", this.i.uy);
         },
         enumerable: false,
         configurable: true
@@ -603,11 +624,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         * ```
         */
         get: function () {
-            return this.i.uy;
+            return this.i.u1;
         },
         set: function (v) {
-            this.i.uy = ensureBool(v);
-            this._a("isVerticalZoomEnabled", this.i.uy);
+            this.i.u1 = ensureBool(v);
+            this._a("isVerticalZoomEnabled", this.i.u1);
         },
         enumerable: false,
         configurable: true
@@ -619,11 +640,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         *  Try setting the `GridMode` property to bring your grid lines in front of the data series.
         */
         get: function () {
-            return this.i.ub;
+            return this.i.ue;
         },
         set: function (v) {
-            this.i.ub = ensureEnum(GridMode_$type, v);
-            this._a("gridMode", enumToString(GridMode_$type, this.i.ub));
+            this.i.ue = ensureEnum(GridMode_$type, v);
+            this._a("gridMode", enumToString(GridMode_$type, this.i.ue));
         },
         enumerable: false,
         configurable: true
@@ -633,11 +654,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
         */
         get: function () {
-            return this.i.ur;
+            return this.i.uu;
         },
         set: function (v) {
-            this.i.ur = ensureBool(v);
-            this._a("alignsGridLinesToPixels", this.i.ur);
+            this.i.uu = ensureBool(v);
+            this._a("alignsGridLinesToPixels", this.i.uu);
         },
         enumerable: false,
         configurable: true
@@ -647,11 +668,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
         */
         get: function () {
-            return this.i.vs;
+            return this.i.vv;
         },
         set: function (v) {
-            this.i.vs = +v;
-            this._a("autoExpandMarginMaximumValue", this.i.vs);
+            this.i.vv = +v;
+            this._a("autoExpandMarginMaximumValue", this.i.vv);
         },
         enumerable: false,
         configurable: true
@@ -661,11 +682,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
         */
         get: function () {
-            return this.i.vr;
+            return this.i.vu;
         },
         set: function (v) {
-            this.i.vr = +v;
-            this._a("autoExpandMarginExtraPadding", this.i.vr);
+            this.i.vu = +v;
+            this._a("autoExpandMarginExtraPadding", this.i.vu);
         },
         enumerable: false,
         configurable: true
@@ -675,11 +696,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets a whether the series viewer should suppress truncation of axis labels.
         */
         get: function () {
-            return this.i.u5;
+            return this.i.u8;
         },
         set: function (v) {
-            this.i.u5 = ensureBool(v);
-            this._a("shouldSuppressAxisLabelTruncation", this.i.u5);
+            this.i.u8 = ensureBool(v);
+            this._a("shouldSuppressAxisLabelTruncation", this.i.u8);
         },
         enumerable: false,
         configurable: true
@@ -689,11 +710,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
         */
         get: function () {
-            return this.i.u1;
+            return this.i.u4;
         },
         set: function (v) {
-            this.i.u1 = ensureBool(v);
-            this._a("shouldAutoExpandMarginForInitialLabels", this.i.u1);
+            this.i.u4 = ensureBool(v);
+            this._a("shouldAutoExpandMarginForInitialLabels", this.i.u4);
         },
         enumerable: false,
         configurable: true
@@ -703,11 +724,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
         */
         get: function () {
-            return this.i.u4;
+            return this.i.u7;
         },
         set: function (v) {
-            this.i.u4 = ensureBool(v);
-            this._a("shouldConsiderAutoRotationForInitialLabels", this.i.u4);
+            this.i.u7 = ensureBool(v);
+            this._a("shouldConsiderAutoRotationForInitialLabels", this.i.u7);
         },
         enumerable: false,
         configurable: true
@@ -717,11 +738,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
         */
         get: function () {
-            return this.i.u6;
+            return this.i.u9;
         },
         set: function (v) {
-            this.i.u6 = ensureBool(v);
-            this._a("suppressAutoMarginAndAngleRecalculation", this.i.u6);
+            this.i.u9 = ensureBool(v);
+            this._a("suppressAutoMarginAndAngleRecalculation", this.i.u9);
         },
         enumerable: false,
         configurable: true
@@ -731,11 +752,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
         */
         get: function () {
-            return this.i.t6;
+            return this.i.t9;
         },
         set: function (v) {
-            this.i.t6 = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v);
-            this._a("autoMarginAndAngleUpdateMode", enumToString(AutoMarginsAndAngleUpdateMode_$type, this.i.t6));
+            this.i.t9 = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v);
+            this._a("autoMarginAndAngleUpdateMode", enumToString(AutoMarginsAndAngleUpdateMode_$type, this.i.t9));
         },
         enumerable: false,
         configurable: true
@@ -747,11 +768,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Axis.Stroke is set.
         */
         get: function () {
-            return brushToString(this.i.x7);
+            return brushToString(this.i.ya);
         },
         set: function (v) {
-            this.i.x7 = stringToBrush(v);
-            this._a("defaultAxisStroke", brushToString(this.i.x7));
+            this.i.ya = stringToBrush(v);
+            this._a("defaultAxisStroke", brushToString(this.i.ya));
         },
         enumerable: false,
         configurable: true
@@ -763,11 +784,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Axis.MajorStroke is set.
         */
         get: function () {
-            return brushToString(this.i.x5);
+            return brushToString(this.i.x8);
         },
         set: function (v) {
-            this.i.x5 = stringToBrush(v);
-            this._a("defaultAxisMajorStroke", brushToString(this.i.x5));
+            this.i.x8 = stringToBrush(v);
+            this._a("defaultAxisMajorStroke", brushToString(this.i.x8));
         },
         enumerable: false,
         configurable: true
@@ -779,11 +800,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Axis.MinorStroke is set.
         */
         get: function () {
-            return brushToString(this.i.x6);
+            return brushToString(this.i.x9);
         },
         set: function (v) {
-            this.i.x6 = stringToBrush(v);
-            this._a("defaultAxisMinorStroke", brushToString(this.i.x6));
+            this.i.x9 = stringToBrush(v);
+            this._a("defaultAxisMinorStroke", brushToString(this.i.x9));
         },
         enumerable: false,
         configurable: true
@@ -793,11 +814,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual resolved left plot area margin;
         */
         get: function () {
-            return this.i.vm;
+            return this.i.vp;
         },
         set: function (v) {
-            this.i.vm = +v;
-            this._a("actualPlotAreaMarginLeft", this.i.vm);
+            this.i.vp = +v;
+            this._a("actualPlotAreaMarginLeft", this.i.vp);
         },
         enumerable: false,
         configurable: true
@@ -807,11 +828,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual resolved top plot area margin;
         */
         get: function () {
-            return this.i.vo;
+            return this.i.vr;
         },
         set: function (v) {
-            this.i.vo = +v;
-            this._a("actualPlotAreaMarginTop", this.i.vo);
+            this.i.vr = +v;
+            this._a("actualPlotAreaMarginTop", this.i.vr);
         },
         enumerable: false,
         configurable: true
@@ -821,11 +842,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual resolved right plot area margin;
         */
         get: function () {
-            return this.i.vn;
+            return this.i.vq;
         },
         set: function (v) {
-            this.i.vn = +v;
-            this._a("actualPlotAreaMarginRight", this.i.vn);
+            this.i.vq = +v;
+            this._a("actualPlotAreaMarginRight", this.i.vq);
         },
         enumerable: false,
         configurable: true
@@ -835,11 +856,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets the actual resolved bottom plot area margin;
         */
         get: function () {
-            return this.i.vl;
+            return this.i.vo;
         },
         set: function (v) {
-            this.i.vl = +v;
-            this._a("actualPlotAreaMarginBottom", this.i.vl);
+            this.i.vo = +v;
+            this._a("actualPlotAreaMarginBottom", this.i.vo);
         },
         enumerable: false,
         configurable: true
@@ -849,11 +870,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets mode to use for automatically calculating the plot area margin.
         */
         get: function () {
-            return this.i.t9;
+            return this.i.uc;
         },
         set: function (v) {
-            this.i.t9 = ensureEnum(ComputedPlotAreaMarginMode_$type, v);
-            this._a("computedPlotAreaMarginMode", enumToString(ComputedPlotAreaMarginMode_$type, this.i.t9));
+            this.i.uc = ensureEnum(ComputedPlotAreaMarginMode_$type, v);
+            this._a("computedPlotAreaMarginMode", enumToString(ComputedPlotAreaMarginMode_$type, this.i.uc));
         },
         enumerable: false,
         configurable: true
@@ -863,11 +884,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
         */
         get: function () {
-            return this.i.ug;
+            return this.i.uj;
         },
         set: function (v) {
-            this.i.ug = ensureEnum(SeriesPlotAreaMarginHorizontalMode_$type, v);
-            this._a("seriesPlotAreaMarginHorizontalMode", enumToString(SeriesPlotAreaMarginHorizontalMode_$type, this.i.ug));
+            this.i.uj = ensureEnum(SeriesPlotAreaMarginHorizontalMode_$type, v);
+            this._a("seriesPlotAreaMarginHorizontalMode", enumToString(SeriesPlotAreaMarginHorizontalMode_$type, this.i.uj));
         },
         enumerable: false,
         configurable: true
@@ -877,11 +898,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
         */
         get: function () {
-            return this.i.uj;
+            return this.i.um;
         },
         set: function (v) {
-            this.i.uj = ensureEnum(SeriesPlotAreaMarginVerticalMode_$type, v);
-            this._a("seriesPlotAreaMarginVerticalMode", enumToString(SeriesPlotAreaMarginVerticalMode_$type, this.i.uj));
+            this.i.um = ensureEnum(SeriesPlotAreaMarginVerticalMode_$type, v);
+            this._a("seriesPlotAreaMarginVerticalMode", enumToString(SeriesPlotAreaMarginVerticalMode_$type, this.i.um));
         },
         enumerable: false,
         configurable: true
@@ -891,11 +912,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Margin applied to the left of the plot area.
         */
         get: function () {
-            return this.i.v0;
+            return this.i.v3;
         },
         set: function (v) {
-            this.i.v0 = +v;
-            this._a("plotAreaMarginLeft", this.i.v0);
+            this.i.v3 = +v;
+            this._a("plotAreaMarginLeft", this.i.v3);
         },
         enumerable: false,
         configurable: true
@@ -905,11 +926,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Margin applied above the plot area.
         */
         get: function () {
-            return this.i.v2;
+            return this.i.v5;
         },
         set: function (v) {
-            this.i.v2 = +v;
-            this._a("plotAreaMarginTop", this.i.v2);
+            this.i.v5 = +v;
+            this._a("plotAreaMarginTop", this.i.v5);
         },
         enumerable: false,
         configurable: true
@@ -919,11 +940,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Margin applied to the right of the plot area.
         */
         get: function () {
-            return this.i.v1;
+            return this.i.v4;
         },
         set: function (v) {
-            this.i.v1 = +v;
-            this._a("plotAreaMarginRight", this.i.v1);
+            this.i.v4 = +v;
+            this._a("plotAreaMarginRight", this.i.v4);
         },
         enumerable: false,
         configurable: true
@@ -933,11 +954,11 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
          * Margin applied below the plot area.
         */
         get: function () {
-            return this.i.vz;
+            return this.i.v2;
         },
         set: function (v) {
-            this.i.vz = +v;
-            this._a("plotAreaMarginBottom", this.i.vz);
+            this.i.v2 = +v;
+            this._a("plotAreaMarginBottom", this.i.v2);
         },
         enumerable: false,
         configurable: true
@@ -953,27 +974,27 @@ var IgcDataChartComponent = /** @class */ /*@__PURE__*/ (function (_super) {
         return null;
     };
     IgcDataChartComponent.prototype.refreshComputedPlotAreaMargin = function () {
-        this.i.xd();
+        this.i.xg();
     };
     IgcDataChartComponent.prototype.recalculateMarginAutoExpansion = function () {
-        this.i.xc();
+        this.i.xf();
     };
     IgcDataChartComponent.prototype.recalculateAutoLabelsAngle = function () {
-        this.i.xb();
+        this.i.xe();
     };
     /**
      * Notifies the chart that the CSS styles in effect have been updated.
     
     */
     IgcDataChartComponent.prototype.styleUpdated = function () {
-        this.i.xe();
+        this.i.xh();
     };
     /**
      * Export serialized visual data.
     
     */
     IgcDataChartComponent.prototype.exportSerializedVisualData = function () {
-        var iv = this.i.wm();
+        var iv = this.i.wp();
         return (iv);
     };
     IgcDataChartComponent._observedAttributesIgcDataChartComponent = null;

package/esm5/lib/igc-data-chart-default-tooltips-component.js

@@ -14,8 +14,12 @@ var IgcDataChartDefaultTooltipsComponent = /** @class */ /*@__PURE__*/ (function
             var ret = context ? html(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <span class=\"ui-tooltip-priority\">", "</span>\n            </div>"], ["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <span class=\"ui-tooltip-priority\">", "</span>\n            </div>"])), context.series.xAxis.isDateTime ? html(templateObject_1 || (templateObject_1 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), _this.shortDate(context.series.xAxis.getItemValue(_this.asAny(context.item), 'dateTimeMemberPath'))) : html(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))), context.series.xAxis.isDateTime ? html(templateObject_3 || (templateObject_3 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_5 || (templateObject_5 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), _this.format(context.series.xAxis.getItemValue(_this.asAny(context.item), 'label'))) : html(templateObject_6 || (templateObject_6 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_7 || (templateObject_7 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""]))), _this.getBrush(context.series), context.series.title, _this.getAnchoredValue(context.series, context.item)) : html(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
             return ret;
         };
+        this.rangeCategoryTooltip = function (context) {
+            var ret = context ? html(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <span class=\"ui-tooltip-priority\">", " - </span>\n                <span class=\"ui-tooltip-priority\">", "</span>\n            </div>"], ["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <span class=\"ui-tooltip-priority\">", " - </span>\n                <span class=\"ui-tooltip-priority\">", "</span>\n            </div>"])), context.series.xAxis.isDateTime ? html(templateObject_11 || (templateObject_11 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), _this.shortDate(context.series.xAxis.getItemValue(_this.asAny(context.item), 'dateTimeMemberPath'))) : html(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))), context.series.xAxis.isDateTime ? html(templateObject_13 || (templateObject_13 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_15 || (templateObject_15 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), _this.format(context.series.xAxis.getItemValue(_this.asAny(context.item), 'label'))) : html(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_17 || (templateObject_17 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_18 || (templateObject_18 = __makeTemplateObject([""], [""]))), _this.getBrush(context.series), context.series.title, _this.getLowValue(context.series, context.item), _this.getHighValue(context.series, context.item)) : html(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""])));
+            return ret;
+        };
         this.financialTooltip = function (context) {
-            var ret = context ? html(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <table>\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                </table>\n            </div>"], ["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <table>\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                </table>\n            </div>"])), context.series.xAxis.isDateTime ? html(templateObject_11 || (templateObject_11 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), context.itemLabel) : html(templateObject_12 || (templateObject_12 = __makeTemplateObject([""], [""]))), context.series.xAxis.isDateTime ? html(templateObject_13 || (templateObject_13 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_14 || (templateObject_14 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_15 || (templateObject_15 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), _this.format(context.series.xAxis.getItemValue(_this.asAny(context.item), 'label'))) : html(templateObject_16 || (templateObject_16 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_17 || (templateObject_17 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_18 || (templateObject_18 = __makeTemplateObject([""], [""]))), _this.getBrush(context.series), context.series.title, _this.hasOpen(context.series) ? html(templateObject_19 || (templateObject_19 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualOpenLabel, _this.getOpenValue(context.series, context.item)) : html(templateObject_20 || (templateObject_20 = __makeTemplateObject([""], [""]))), _this.hasHigh(context.series) ? html(templateObject_21 || (templateObject_21 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualHighLabel, _this.getHighValue(context.series, context.item)) : html(templateObject_22 || (templateObject_22 = __makeTemplateObject([""], [""]))), _this.hasLow(context.series) ? html(templateObject_23 || (templateObject_23 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualLowLabel, _this.getLowValue(context.series, context.item)) : html(templateObject_24 || (templateObject_24 = __makeTemplateObject([""], [""]))), _this.hasClose(context.series) ? html(templateObject_25 || (templateObject_25 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualCloseLabel, _this.getCloseValue(context.series, context.item)) : html(templateObject_26 || (templateObject_26 = __makeTemplateObject([""], [""]))), _this.hasVolume(context.series) ? html(templateObject_27 || (templateObject_27 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualVolumeLabel, _this.getVolumeValue(context.series, context.item)) : html(templateObject_28 || (templateObject_28 = __makeTemplateObject([""], [""])))) : html(templateObject_30 || (templateObject_30 = __makeTemplateObject([""], [""])));
+            var ret = context ? html(templateObject_39 || (templateObject_39 = __makeTemplateObject(["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <table>\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                </table>\n            </div>"], ["\n            <div class='ui-chart-default-tooltip-content'>            \n                ", "\n                ", "\n                ", "\n                ", "\n                <span style=\"color: ", "\">", ": </span>\n                <table>\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                    ", "\n                </table>\n            </div>"])), context.series.xAxis.isDateTime ? html(templateObject_21 || (templateObject_21 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), context.itemLabel) : html(templateObject_22 || (templateObject_22 = __makeTemplateObject([""], [""]))), context.series.xAxis.isDateTime ? html(templateObject_23 || (templateObject_23 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_24 || (templateObject_24 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_25 || (templateObject_25 = __makeTemplateObject(["<span>", "</span>"], ["<span>", "</span>"])), _this.format(context.series.xAxis.getItemValue(_this.asAny(context.item), 'label'))) : html(templateObject_26 || (templateObject_26 = __makeTemplateObject([""], [""]))), !context.series.xAxis.isDateTime && context.series.xAxis.label ? html(templateObject_27 || (templateObject_27 = __makeTemplateObject(["<br />"], ["<br />"]))) : html(templateObject_28 || (templateObject_28 = __makeTemplateObject([""], [""]))), _this.getBrush(context.series), context.series.title, _this.hasOpen(context.series) ? html(templateObject_29 || (templateObject_29 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualOpenLabel, _this.getOpenValue(context.series, context.item)) : html(templateObject_30 || (templateObject_30 = __makeTemplateObject([""], [""]))), _this.hasHigh(context.series) ? html(templateObject_31 || (templateObject_31 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualHighLabel, _this.getHighValue(context.series, context.item)) : html(templateObject_32 || (templateObject_32 = __makeTemplateObject([""], [""]))), _this.hasLow(context.series) ? html(templateObject_33 || (templateObject_33 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualLowLabel, _this.getLowValue(context.series, context.item)) : html(templateObject_34 || (templateObject_34 = __makeTemplateObject([""], [""]))), _this.hasClose(context.series) ? html(templateObject_35 || (templateObject_35 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualCloseLabel, _this.getCloseValue(context.series, context.item)) : html(templateObject_36 || (templateObject_36 = __makeTemplateObject([""], [""]))), _this.hasVolume(context.series) ? html(templateObject_37 || (templateObject_37 = __makeTemplateObject(["<tr><td>", ":</td><td>", "</td></tr>"], ["<tr><td>", ":</td><td>", "</td></tr>"])), context.series.actualVolumeLabel, _this.getVolumeValue(context.series, context.item)) : html(templateObject_38 || (templateObject_38 = __makeTemplateObject([""], [""])))) : html(templateObject_40 || (templateObject_40 = __makeTemplateObject([""], [""])));
             return ret;
         };
         this.afterContentInit();
@@ -34,6 +38,19 @@ var IgcDataChartDefaultTooltipsComponent = /** @class */ /*@__PURE__*/ (function
                 }
             }
         }
+        if (series.isCategory &&
+            !series.isVertical &&
+            !series.isFinancial &&
+            series.isRange) {
+            if (series.showDefaultTooltip) {
+                series.tooltipTemplate = this.rangeCategoryTooltip;
+            }
+            else {
+                if (series.tooltipTemplate === this.rangeCategoryTooltip) {
+                    series.tooltipTemplate = null;
+                }
+            }
+        }
         if (series.isFinancial) {
             if (series.showDefaultTooltip) {
                 series.tooltipTemplate = this.financialTooltip;
@@ -118,7 +135,7 @@ var IgcDataChartDefaultTooltipsComponent = /** @class */ /*@__PURE__*/ (function
         return this.getItemValue(series, item, "valueMemberPath", series.valueMemberPath);
     };
     IgcDataChartDefaultTooltipsComponent.prototype.getBrush = function (series) {
-        return series.actualBrush;
+        return series.safeActualBrush;
     };
     IgcDataChartDefaultTooltipsComponent.prototype.asAny = function (item) {
         return item;
@@ -134,4 +151,4 @@ var IgcDataChartDefaultTooltipsComponent = /** @class */ /*@__PURE__*/ (function
     return IgcDataChartDefaultTooltipsComponent;
 }());
 export { IgcDataChartDefaultTooltipsComponent };
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40;