diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
index 7af7f06a635..5bb9261c440 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
@@ -31,6 +31,18 @@
@return ($pixels / $context) * 1rem;
}
+/// Relative value(em/rem) to pixel.
+/// @access public
+/// @param {number|string} $num - The relative value to be converted.
+/// @param {number|string} $context [$browser-context] - The base context to convert against.
+@function px($num, $context: $browser-context) {
+ @if type-of $num == 'number' {
+ @return ($num / ($num * 0 + 1)) * 16px;
+ }
+
+ @return $num;
+}
+
/// Calculates the luminance for a given color.
/// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests.
///
@@ -403,17 +415,19 @@
///
@function resolve-value($ctx, $extra: null) {
$result: null;
+
@each $fn, $args in $ctx {
@if function-exists($fn) {
@if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') {
$result: call(get-function($fn), $extra, $args...);
} @else if $result != null {
- $result: call(get-function($fn), $result, $args...)
+ $result: call(get-function($fn), $result, $args...);
} @else {
- $result: call(get-function($fn), $args...)
+ $result: call(get-function($fn), $args);
}
}
}
+
@return $result;
}
@@ -423,6 +437,21 @@
@return hsl(random(360), 100%, 50%);
}
+@function igx-generate-series-colors($palette) {
+ @return (
+ igx-color($palette, 'primary'),
+ igx-color($palette, 'secondary'),
+ rgb(249, 98, 50),
+ rgb(60, 189, 201),
+ rgb(220, 63, 118),
+ rgb(255, 152, 0),
+ rgb(78, 98, 207),
+ rgb(84, 194, 90),
+ rgb(121, 85, 72),
+ rgb(154, 154, 154)
+ );
+}
+
/// Applies an `igx-palette` to a given theme schema.
/// @access private
/// @param {Map} $schema - A theme schema.
@@ -448,6 +477,12 @@
} @else {
$result: extend($result, (#{$key}: $value));
}
+
+ @if $value == 'series' {
+ $result: extend($result, (
+ #{$key}: #{igx-generate-series-colors($palette)}
+ ));
+ }
}
@return $result;
}
@@ -567,3 +602,47 @@
@function if-rtl($if, $else: null) {
@return if-ltr($else, $if);
}
+
+@function expand-shorthand($list) {
+ $len: length($list);
+
+ $margins: (
+ 'margin-top': null,
+ 'margin-right': null,
+ 'margin-bottom': null,
+ 'margin-left': null,
+ );
+
+ @for $i from 1 through 4 {
+ $n: $i % $len;
+ $n: if($n != 0, $n, $len);
+
+ @if $len == 3 and $i == 4 {
+ $n: 2;
+ }
+
+ $key: nth(map-keys($margins), $i);
+ $value: nth($list, $n);
+
+ $margins: map-merge($margins, ($key: $value));
+ }
+
+ @return $margins;
+}
+
+@function map-keys-prefix($map, $prefix, $separator: '-') {
+ $keys: map-keys($map);
+ $len: length($keys);
+ $result: ();
+
+ @for $i from 1 through $len {
+ $key: nth($keys, $i);
+
+ $result: map-merge($result, (
+ '#{$prefix}#{$separator}#{$key}': map-get($map, $key))
+ );
+ }
+
+ @return $result;
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss
index c2d20ae2616..bdb597f88b7 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss
@@ -238,12 +238,14 @@
/// :root {
/// @include css-vars-from-theme($my-theme);
/// }
-@mixin css-vars-from-theme($theme) {
- $prefix: map-get($theme, 'name');
-
+@mixin css-vars-from-theme($theme, $prefix: null) {
@each $key, $value in $theme {
@if $key != 'name' and $key != 'palette' and type-of($value) != 'map' {
- --#{$prefix}-#{$key}: #{$value};
+ @if $prefix {
+ --#{$prefix}-#{$key}: #{$value};
+ } @else {
+ --#{$key}: #{$value};
+ }
}
}
}
@@ -269,9 +271,10 @@
/// @requires {mixin} css-vars-from-theme
@mixin igx-css-vars($theme) {
$scope: if(is-root(), ':root', '&');
+ $prefix: map-get($theme, 'name');
#{$scope} {
- @include css-vars-from-theme($theme);
+ @include css-vars-from-theme($theme, $prefix);
}
}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss
new file mode 100644
index 00000000000..e49234b6ac5
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss
@@ -0,0 +1,296 @@
+////
+/// @group themes
+/// @access public
+/// @author Silvia Ivanova
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @param {List} $brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
+/// @param {List} $marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @param {List} $negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
+/// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {List} $marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected.
+/// @param {List} $negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
+/// @param {String} $title-alignment [null] - The horizontal alignment to use for the title.
+/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
+/// @param {String} $title-text-style [null] - Sets the CSS font property of the chart title.
+/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {String} $subtitle-alignment [null] - The horizontal alignment to use for the subtitle.
+/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @param {String} $subtitle-text-style [null] - Sets the CSS font property of the chart subtitle.
+/// @param {Number} $thickness [null] - Sets the thickness for all series in a chart.
+/// @param {List} $trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart.
+/// @param {Number} $trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
+/// @param {List} $x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis.
+/// @param {Color} $x-axis-label-text-color [null] - Sets the color of labels on the X-axis.
+/// @param {String} $x-axis-label-text-style [null] - Sets the CSS font property for labels on X-axis.
+/// @param {String} $x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
+/// @param {Color} $x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @param {Number} $x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @param {Color} $x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @param {Number} $x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @param {Color} $x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @param {Color} $x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @param {Number} $x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @param {Number} $x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis.
+/// @param {Color} $x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis.
+/// @param {Number} $x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis.
+/// @param {String} $x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title.
+/// @param {List} $x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis.
+/// @param {Color} $x-axis-title-text-color [null] - Sets the color of the title on the X-axis.
+/// @param {String} $x-axis-title-text-style [null] - Sets the CSS font property for the title on the X-axis.
+/// @param {List} $y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis.
+/// @param {Color} $y-axis-label-text-color [null] - Sets the color of labels on the Y-axis.
+/// @param {String} $y-axis-label-text-style [null] - Sets the CSS font property for labels on Y-axis.
+/// @param {String} $y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels.
+/// @param {Color} $y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis.
+/// @param {Number} $y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @param {Color} $y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @param {Number} $y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @param {Color} $y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @param {Color} $y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @param {Number} $y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @param {String} $y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title.
+/// @param {List} $y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis.
+/// @param {Color} $y-axis-title-text-color [null] - Sets the color of a title on the Y-axis.
+/// @param {String} $y-axis-title-text-style [null] - Sets the CSS font property for the title on the Y-axis.
+/// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
+/// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
+/// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $custom-chart-theme: igx-category-chart-theme($brushes: (red, green, blue));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($custom-chart-theme);
+@function igx-category-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $margin: null,
+ $brushes: null,
+ $marker-brushes: null,
+ $negative-brushes: null,
+ $outlines: null,
+ $marker-outlines: null,
+ $negative-outlines: null,
+ $title-margin: null,
+ $title-alignment: null,
+ $title-text-color: null,
+ $title-text-style: null,
+ $subtitle-margin: null,
+ $subtitle-alignment: null,
+ $subtitle-text-color: null,
+ $subtitle-text-style: null,
+ $thickness: null,
+ $trend-line-brushes: null,
+ $trend-line-thickness: null,
+ $x-axis-label-margin: null,
+ $x-axis-label-text-color: null,
+ $x-axis-label-text-style: null,
+ $x-axis-label-vertical-alignment: null,
+ $x-axis-major-stroke: null,
+ $x-axis-major-stroke-thickness: null,
+ $x-axis-minor-stroke: null,
+ $x-axis-minor-stroke-thickness: null,
+ $x-axis-strip: null,
+ $x-axis-stroke: null,
+ $x-axis-stroke-thickness: null,
+ $x-axis-tick-length: null,
+ $x-axis-tick-stroke: null,
+ $x-axis-tick-stroke-thickness: null,
+ $x-axis-title-alignment: null,
+ $x-axis-title-margin: null,
+ $x-axis-title-text-color: null,
+ $x-axis-title-text-style: null,
+ $y-axis-label-margin: null,
+ $y-axis-label-text-color: null,
+ $y-axis-label-text-style: null,
+ $y-axis-label-vertical-alignment: null,
+ $y-axis-major-stroke: null,
+ $y-axis-major-stroke-thickness: null,
+ $y-axis-minor-stroke: null,
+ $y-axis-minor-stroke-thickness: null,
+ $y-axis-strip: null,
+ $y-axis-stroke: null,
+ $y-axis-stroke-thickness: null,
+ $y-axis-title-alignment: null,
+ $y-axis-title-margin: null,
+ $y-axis-title-text-color: null,
+ $y-axis-title-text-style: null,
+ $y-axis-tick-length: null,
+ $y-axis-tick-stroke: null,
+ $y-axis-tick-stroke-thickness: null
+) {
+ $name: 'category-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+ $margin-default: map-get($theme, 'margin');
+ $title-margin-default: map-get($theme, 'title-margin');
+ $subtitle-margin-default: map-get($theme, 'subtitle-margin');
+ $x-axis-label-margin-default: map-get($theme, 'x-axis-label-margin');
+ $x-axis-title-margin-default: map-get($theme, 'x-axis-title-margin');
+ $y-axis-label-margin-default: map-get($theme, 'y-axis-label-margin');
+ $y-axis-title-margin-default: map-get($theme, 'y-axis-title-margin');
+
+ @if not($margin) {
+ $margin: $margin-default;
+ } @else {
+ $margin: expand-shorthand(($margin));
+ }
+
+ @if not($title-margin) {
+ $title-margin: $title-margin-default;
+ } @else {
+ $title-margin: map-keys-prefix(expand-shorthand(($title-margin)), 'title');
+ }
+
+ @if not($subtitle-margin) {
+ $subtitle-margin: $subtitle-margin-default;
+ } @else {
+ $subtitle-margin: map-keys-prefix(expand-shorthand(($subtitle-margin)), 'subtitle');
+ }
+
+ @if not($x-axis-label-margin) {
+ $x-axis-label-margin: $x-axis-label-margin-default;
+ } @else {
+ $x-axis-label-margin: map-keys-prefix(expand-shorthand(($x-axis-label-margin)), 'x-axis-label');
+ }
+
+ @if not($x-axis-title-margin) {
+ $x-axis-title-margin: $x-axis-title-margin-default;
+ } @else {
+ $x-axis-title-margin: map-keys-prefix(expand-shorthand(($x-axis-title-margin)), 'x-axis-title');
+ }
+
+ @if not($y-axis-label-margin) {
+ $y-axis-label-margin: $y-axis-label-margin-default;
+ } @else {
+ $y-axis-label-margin: map-keys-prefix(expand-shorthand(($y-axis-label-margin)), 'y-axis-label');
+ }
+
+ @if not($y-axis-title-margin) {
+ $y-axis-title-margin: $y-axis-title-margin-default;
+ } @else {
+ $y-axis-title-margin: map-keys-prefix(expand-shorthand(($y-axis-title-margin)), 'y-axis-title');
+ }
+
+ @return extend(
+ $theme,
+ $margin,
+ $title-margin,
+ $subtitle-margin,
+ $x-axis-label-margin,
+ $x-axis-title-margin,
+ $y-axis-label-margin,
+ $y-axis-title-margin,
+ (
+ name: $name,
+ brushes: $brushes,
+ marker-brushes: $marker-brushes,
+ negative-brushes: $negative-brushes,
+ outlines: $outlines,
+ marker-outlines: $marker-outlines,
+ negative-outlines: $negative-outlines,
+ title-alignment: $title-alignment,
+ title-text-color: $title-text-color,
+ title-text-style: $title-text-style,
+ subtitle-alignment: $subtitle-alignment,
+ subtitle-text-color: $subtitle-text-color,
+ subtitle-text-style: $subtitle-text-style,
+ thickness: $thickness,
+ trend-line-brushes: $trend-line-brushes,
+ trend-line-thickness: $trend-line-thickness,
+ x-axis-label-text-color: $x-axis-label-text-color,
+ x-axis-label-text-style: $x-axis-label-text-style,
+ x-axis-label-vertical-alignment: $x-axis-label-vertical-alignment,
+ x-axis-major-stroke: $x-axis-major-stroke,
+ x-axis-major-stroke-thickness: $x-axis-major-stroke-thickness,
+ x-axis-minor-stroke: $x-axis-minor-stroke,
+ x-axis-minor-stroke-thickness: $x-axis-minor-stroke-thickness,
+ x-axis-strip: $x-axis-strip,
+ x-axis-stroke: $x-axis-stroke,
+ x-axis-stroke-thickness: $x-axis-stroke-thickness,
+ x-axis-tick-length: $x-axis-tick-length,
+ x-axis-tick-stroke: $x-axis-tick-stroke,
+ x-axis-tick-stroke-thickness: $x-axis-tick-stroke-thickness,
+ x-axis-title-alignment: $x-axis-title-alignment,
+ x-axis-title-text-color: $x-axis-title-text-color,
+ x-axis-title-text-style: $x-axis-title-text-style,
+ y-axis-label-text-color: $y-axis-label-text-color,
+ y-axis-label-text-style: $y-axis-label-text-style,
+ y-axis-label-vertical-alignment: $y-axis-label-vertical-alignment,
+ y-axis-major-stroke: $y-axis-major-stroke,
+ y-axis-major-stroke-thickness: $y-axis-major-stroke-thickness,
+ y-axis-minor-stroke: $y-axis-minor-stroke,
+ y-axis-minor-stroke-thickness: $y-axis-minor-stroke-thickness,
+ y-axis-strip: $y-axis-strip,
+ y-axis-stroke: $y-axis-stroke,
+ y-axis-stroke-thickness: $y-axis-stroke-thickness,
+ y-axis-title-alignment: $y-axis-title-alignment,
+ y-axis-title-text-color: $y-axis-title-text-color,
+ y-axis-title-text-style: $y-axis-title-text-style,
+ y-axis-tick-length: $y-axis-tick-length,
+ y-axis-tick-stroke: $y-axis-tick-stroke,
+ y-axis-tick-stroke-thickness: $y-axis-tick-stroke-thickness
+ )
+ );
+}
+
+/// Adds typography styles for the category-chart component.
+/// Uses the 'h1', 'h3', 'h4', and 'subtitle-1'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {Map} $categories [(
+/// 'title': 'h1',
+/// 'subtitle': 'subtitle-1,
+/// 'x-axis-label-text-style': 'h3',
+/// 'y-axis-label-text-style': 'h3',
+/// 'x-axis-title-text-style': 'h4',
+/// 'y-axis-title-text-style': 'h4',
+/// )] - The categories from the typographic scale used for type styles.
+/// @requires {mixin} igx-type-style
+@mixin igx-category-chart-typography($type-scale, $categories: (
+ 'title': 'h1',
+ 'subtitle': 'subtitle-1',
+ 'x-axis-label-text-style': 'h4',
+ 'x-axis-title-text-style': 'h3',
+ 'y-axis-label-text-style': 'h4',
+ 'y-axis-title-text-style': 'h3',
+)) {
+ $name: 'category-chart';
+ $title: map-get($categories, 'title');
+ $subtitle: map-get($categories, 'subtitle');
+ $x-axis-label-text-style: map-get($categories, 'x-axis-label-text-style');
+ $x-axis-title-text-style: map-get($categories, 'x-axis-title-text-style');
+ $y-axis-label-text-style: map-get($categories, 'y-axis-label-text-style');
+ $y-axis-title-text-style: map-get($categories, 'y-axis-title-text-style');
+
+ $title-styles: igx-type-scale-category($type-scale, $title);
+ $subtitle-styles: igx-type-scale-category($type-scale, $subtitle);
+ $x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label);
+ $x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title);
+ $y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style);
+ $y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style);
+
+ @include igx-font-var('title-text-style', $title-styles, $name);
+ @include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
+ @include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
+ @include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
+ @include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
+ @include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss
new file mode 100644
index 00000000000..efde2deabca
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss
@@ -0,0 +1,120 @@
+////
+/// @group themes
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
+/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected.
+/// @param {List} $marker-brushes [null] - Defines the palette from which automatically assigned marker brushes are selected.
+/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {List} $marker-outlines [null] - Defines the palette from which automatically assigned marker outlines are selected.
+/// @param {Color} $plot-area-background [null] - Sets the brush used as the background for the current Chart object's plot area.
+/// @param {String} $title-horizontal-alignment [null] - The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right';
+/// @param {String} $subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right';
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-data-chart-theme($brushes: (orange, blue, pink));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-data-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $margin: null,
+ $title-text-color: null,
+ $title-margin: null,
+ $subtitle-text-color: null,
+ $subtitle-margin: null,
+ $brushes: null,
+ $outlines: null,
+ $marker-brushes: null,
+ $marker-outlines: null,
+ $plot-area-background: null,
+ $title-horizontal-alignment: null,
+ $subtitle-horizontal-alignment: null,
+) {
+ $name: 'data-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+ $margin-default: map-get($theme, 'margin');
+ $title-margin-default: map-get($theme, 'title-margin');
+ $subtitle-margin-default: map-get($theme, 'subtitle-margin');
+
+ @if not($margin) {
+ $margin: $margin-default;
+ } @else {
+ $margin: expand-shorthand(($margin));
+ }
+
+ @if not($title-margin) {
+ $title-margin: $title-margin-default;
+ } @else {
+ $title-margin: map-keys-prefix(expand-shorthand(($title-margin)), 'title');
+ }
+
+ @if not($subtitle-margin) {
+ $subtitle-margin: $subtitle-margin-default;
+ } @else {
+ $subtitle-margin: map-keys-prefix(expand-shorthand(($subtitle-margin)), 'subtitle');
+ }
+
+ @return extend(
+ $theme,
+ $margin,
+ $title-margin,
+ $subtitle-margin,
+ (
+ name: $name,
+ title-text-color: $title-text-color,
+ subtitle-text-color: null,
+ brushes: $brushes,
+ outlines: $outlines,
+ marker-brushes: $marker-brushes,
+ marker-outlines: $marker-outlines,
+ plot-area-background: $plot-area-background,
+ title-horizontal-alignment: $title-horizontal-alignment,
+ subtitle-horizontal-alignment: $subtitle-horizontal-alignment,
+ )
+ );
+}
+
+/// Adds typography styles for the data-chart component.
+/// Uses the 'h1' and 'subtitle-1'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {Map} $categories [(title: 'h6', subtitle: 'subtitle-1')] - The categories from the typographic scale used for type styles.
+/// @requires {mixin} igx-type-style
+@mixin igx-data-chart-typography($type-scale, $categories: (
+ title: 'h1',
+ subtitle: 'subtitle-1',
+)) {
+ $name: 'data-chart';
+ $title: map-get($categories, 'title');
+ $subtitle: map-get($categories, 'subtitle');
+
+ $title-styles: igx-type-scale-category($type-scale, $title);
+ $subtitle-styles: igx-type-scale-category($type-scale, $subtitle);
+
+ @include igx-font-var('title-text-style', $title-styles, $name);
+ @include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss
new file mode 100644
index 00000000000..40daf229a77
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss
@@ -0,0 +1,69 @@
+////
+/// @group themes
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Color} $others-category-fill [null] - Sets the fill color for others category.
+/// @param {Number} $others-category-opacity [null] - Sets the opacity for others category.
+/// @param {Color} $others-category-stroke [null] - Sets the others category stroke color.
+/// @param {Number} $others-category-stroke-thickness [null] - Sets the others category stroke thickness.
+/// @param {Color} $selected-slice-fill [null] - Sets the fill color of the selected slice.
+/// @param {Number} $selected-slice-opacity [null] - Sets the opacity of the selected slice.
+/// @param {Color} $selected-slice-stroke [null] - Sets the stroke color of the selected slice.
+/// @param {Number} $selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-doughnut-chart-theme($brushes: (orange, blue, pink));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-doughnut-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $brushes: null,
+ $outlines: null,
+ $others-category-fill: null,
+ $others-category-opacity: null,
+ $others-category-stroke: null,
+ $others-category-stroke-thickness: null,
+ $selected-slice-fill: null,
+ $selected-slice-opacity: null,
+ $selected-slice-stroke: null,
+ $selected-slice-stroke-thickness: null,
+) {
+ $name: 'doughnut-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend(
+ $theme,
+ (
+ name: 'ring-series',
+ brushes: $brushes,
+ outlines: $outlines,
+ others-category-fill: $others-category-fill,
+ others-category-opacity: $others-category-opacity,
+ others-category-stroke: $others-category-stroke,
+ others-category-stroke-thickness: $others-category-stroke-thickness,
+ selected-slice-fill: $selected-slice-fill,
+ selected-slice-opacity: $selected-slice-opacity,
+ selected-slice-stroke: $selected-slice-stroke,
+ selected-slice-stroke-thickness: $selected-slice-stroke-thickness,
+ )
+ );
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss
new file mode 100644
index 00000000000..d67f3220c0e
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss
@@ -0,0 +1,289 @@
+////
+/// @group themes
+/// @access private
+/// @author Dilyana Dimova
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @param {String} $title-alignment [null] - The horizontal alignment to use for the title.
+/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
+/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {String} $subtitle-alignment [null] - Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
+/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series brushes colors are selected.
+/// @param {List} $marker-brushes [null]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @param {List} $negative-brushes [null] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
+/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {List} $marker-outlines [null] - Defines the palette from which automatically assigned series marker outline colors are selected.
+/// @param {List} $negative-outlines [null] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
+/// @param {List} $indicator-brushes [null] - Defines the brushes used for financial indicators.
+/// @param {List} $indicator-negative-brushes [null] - Defines the brushes used for negative elements in financial indicators.
+/// @param {Number} $indicator-thickness [null]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @param {Color} $plot-area-background [null]- Gets or sets the brush used as the background for the current Chart object's plot area.
+/// @param {Number} $thickness [null] - Sets the thickness for all series in a chart.
+/// @param {Number} $toolbar-height [null] - Sets the height of the tooolbar.
+/// @param {List} $trend-line-brushes [null] - Defines the palette of brushes used for coloring trend lines in a chart.
+/// @param {Number} $trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
+/// @param {List} $volume-brushes [null]- Defines the brushes to use for filling volume series in the volume pane.
+/// @param {List} $volume-outlines [null] - Defines the brushes to use for outlining volume series in the volume pane.
+/// @param {Number} $volume-thickness [null]- Defines the outline thickness of volume series in the volume pane.
+/// @param {List} $x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis.
+/// @param {Color} $x-axis-label-text-color [null] - Sets the color of labels on the X-axis.
+/// @param {String} $x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
+/// @param {Color} $x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @param {Number} $x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @param {Color} $x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @param {Number} $x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @param {Color} $x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @param {Color} $x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @param {Number} $x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @param {Number} $x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis.
+/// @param {Color} $x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis.
+/// @param {Number} $x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis.
+/// @param {String} $x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title.
+/// @param {List} $x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis.
+/// @param {Color} $x-axis-title-text-color [null] - Sets the color of the title on the X-axis.
+/// @param {List} $y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis.
+/// @param {Color} $y-axis-label-text-color [null] - Sets the color of labels on the Y-axis.
+/// @param {String} $y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels.
+/// @param {Color} $y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis.
+/// @param {Number} $y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @param {Color} $y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @param {Number} $y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @param {Color} $y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @param {Color} $y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @param {Number} $y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @param {String} $y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title.
+/// @param {List} $y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis.
+/// @param {Color} $y-axis-title-text-color [null] - Sets the color of a title on the Y-axis.
+/// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
+/// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
+/// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
+/// @param {String} $zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
+/// @param {Number} $zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-financial-chart-theme($title-alignment: left, $brushes: red, blue, yellow, pink);
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-financial-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $margin: null,
+ $title-alignment: null,
+ $title-text-color: null,
+ $title-margin: null,
+ $subtitle-text-color: null,
+ $subtitle-margin: null,
+ $subtitle-alignment: null,
+ $brushes: null,
+ $outlines: null,
+ $marker-brushes: null,
+ $marker-outlines: null,
+ $plot-area-background: null,
+ $indicator-brushes: null,
+ $indicator-negative-brushes: null,
+ $indicator-thickness: null,
+ $negative-brushes: null,
+ $negative-outlines: null,
+ $overlay-brushes: null,
+ $overlay-outlines: null,
+ $overlay-thickness: null,
+ $thickness: null,
+ $toolbar-height: null,
+ $trend-line-brushes: null,
+ $trend-line-thickness: null,
+ $volume-brushes: null,
+ $volume-outlines: null,
+ $volume-thickness: null,
+ $x-axis-label-margin: null,
+ $x-axis-label-text-color: null,
+ $x-axis-label-vertical-alignment: null,
+ $x-axis-major-stroke: null,
+ $x-axis-major-stroke-thickness: null,
+ $x-axis-minor-stroke: null,
+ $x-axis-minor-stroke-thickness: null,
+ $x-axis-strip: null,
+ $x-axis-stroke: null,
+ $x-axis-stroke-thickness: null,
+ $x-axis-title-alignment: null,
+ $x-axis-title-margin: null,
+ $x-axis-title-text-color: null,
+ $y-axis-label-margin: null,
+ $y-axis-label-text-color: null,
+ $y-axis-label-vertical-alignment: null,
+ $y-axis-major-stroke: null,
+ $y-axis-major-stroke-thickness: null,
+ $y-axis-minor-stroke: null,
+ $y-axis-minor-stroke-thickness: null,
+ $y-axis-strip: null,
+ $y-axis-stroke: null,
+ $y-axis-stroke-thickness: null,
+ $y-axis-title-alignment: null,
+ $y-axis-title-margin: null,
+ $y-axis-title-text-color: null,
+ $zoom-slider-x-axis-major-stroke: null,
+ $zoom-slider-x-axis-major-stroke-thickness: null
+) {
+ $name: 'financial-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+ $title-margin-default: map-get($theme, 'title-margin');
+ $subtitle-margin-default: map-get($theme, 'subtitle-margin');
+ $x-axis-label-margin-default: map-get($theme, 'x-axis-label-margin');
+ $x-axis-title-margin-default: map-get($theme, 'x-axis-title-margin');
+ $y-axis-label-margin-default: map-get($theme, 'y-axis-label-margin');
+ $y-axis-title-margin-default: map-get($theme, 'x-axis-title-margin');
+
+ @if not($title-margin) {
+ $title-margin: $title-margin-default;
+ } @else {
+ $title-margin: map-keys-prefix(expand-shorthand(($title-margin)), 'title');
+ }
+
+ @if not($subtitle-margin) {
+ $subtitle-margin: $subtitle-margin-default;
+ } @else {
+ $subtitle-margin: map-keys-prefix(expand-shorthand(($subtitle-margin)), 'subtitle');
+ }
+
+ @if not($x-axis-label-margin) {
+ $x-axis-label-margin: $x-axis-label-margin-default;
+ } @else {
+ $x-axis-label-margin: map-keys-prefix(expand-shorthand(($x-axis-label-margin)), 'x-axis-label');
+ }
+
+ @if not($x-axis-title-margin) {
+ $x-axis-title-margin: $x-axis-title-margin-default;
+ } @else {
+ $x-axis-title-margin: map-keys-prefix(expand-shorthand(($x-axis-title-margin)), 'x-axis-title');
+ }
+
+ @if not($y-axis-label-margin) {
+ $y-axis-label-margin: $y-axis-label-margin-default;
+ } @else {
+ $y-axis-label-margin: map-keys-prefix(expand-shorthand(($y-axis-label-margin)), 'y-axis-label');
+ }
+
+ @if not($y-axis-title-margin) {
+ $y-axis-title-margin: $y-axis-title-margin-default;
+ } @else {
+ $y-axis-title-margin: map-keys-prefix(expand-shorthand(($y-axis-title-margin)), 'y-axis-title');
+ }
+
+ @return extend(
+ $theme,
+ $margin,
+ $title-margin,
+ $subtitle-margin,
+ $x-axis-label-margin,
+ $x-axis-title-margin,
+ $y-axis-label-margin,
+ $y-axis-title-margin,
+ (
+ name: $name,
+ margin: $margin,
+ title-alignment: $title-alignment,
+ title-text-color: $title-text-color,
+ title-margin: $title-margin,
+ subtitle-text-color: $subtitle-text-color,
+ subtitle-margin: $subtitle-margin,
+ subtitle-alignment: $subtitle-alignment,
+ brushes: $brushes,
+ outlines: $outlines,
+ marker-brushes: $marker-brushes,
+ marker-outlines: $marker-outlines,
+ plot-area-background: $plot-area-background,
+ indicator-brushes: $indicator-brushes,
+ indicator-negative-brushes: $indicator-negative-brushes,
+ indicator-thickness: $indicator-thickness,
+ negative-brushes: $negative-brushes,
+ negative-outlines: $negative-outlines,
+ overlay-brushes: $overlay-brushes,
+ overlay-outlines: $overlay-outlines,
+ overlay-thickness: $overlay-thickness,
+ thickness: $thickness,
+ toolbar-height: $toolbar-height,
+ trend-line-brushes: $trend-line-brushes,
+ trend-line-thickness: $trend-line-thickness,
+ volume-brushes: $volume-brushes,
+ volume-outlines: $volume-outlines,
+ volume-thickness: $volume-thickness,
+ x-axis-label-margin: $x-axis-label-margin,
+ x-axis-label-text-color: $x-axis-label-text-color,
+ x-axis-label-vertical-alignment: $x-axis-label-vertical-alignment,
+ x-axis-major-stroke: $x-axis-major-stroke,
+ x-axis-major-stroke-thickness: $x-axis-major-stroke-thickness,
+ x-axis-minor-stroke: $x-axis-minor-stroke,
+ x-axis-minor-stroke-thickness: $x-axis-minor-stroke-thickness,
+ x-axis-strip: $x-axis-strip,
+ x-axis-stroke: $x-axis-stroke,
+ x-axis-stroke-thickness: $x-axis-stroke-thickness,
+ x-axis-title-alignment: $x-axis-title-alignment,
+ x-axis-title-margin: $x-axis-title-margin,
+ x-axis-title-text-color: $x-axis-title-text-color,
+ y-axis-label-margin: $y-axis-label-margin,
+ y-axis-label-text-color: $y-axis-label-text-color,
+ y-axis-label-vertical-alignment: $y-axis-label-vertical-alignment,
+ y-axis-major-stroke: $y-axis-major-stroke,
+ y-axis-major-stroke-thickness: $y-axis-major-stroke-thickness,
+ y-axis-minor-stroke: $y-axis-minor-stroke,
+ y-axis-minor-stroke-thickness: $y-axis-minor-stroke-thickness,
+ y-axis-strip: $y-axis-strip,
+ y-axis-stroke: $y-axis-stroke,
+ y-axis-stroke-thickness: $y-axis-stroke-thickness,
+ y-axis-title-alignment: $y-axis-title-alignment,
+ y-axis-title-margin: $y-axis-title-margin,
+ y-axis-title-text-color: $y-axis-title-text-color,
+ zoom-slider-x-axis-major-stroke: $zoom-slider-x-axis-major-stroke,
+ zoom-slider-x-axis-major-stroke-thicknes: $zoom-slider-x-axis-major-stroke-thickness
+ )
+ );
+}
+
+@mixin igx-financial-chart-typography($type-scale, $categories: (
+ 'title': 'h1',
+ 'subtitle': 'subtitle-1',
+ 'x-axis-label-text-style': 'h4',
+ 'x-axis-title-text-style': 'h3',
+ 'y-axis-label-text-style': 'h4',
+ 'y-axis-title-text-style': 'h3',
+)) {
+ $name: 'financial-chart';
+ $title: map-get($categories, 'title');
+ $subtitle: map-get($categories, 'subtitle');
+ $x-axis-label-text-style: map-get($categories, 'x-axis-label-text-style');
+ $x-axis-title-text-style: map-get($categories, 'x-axis-title-text-style');
+ $y-axis-label-text-style: map-get($categories, 'y-axis-label-text-style');
+ $y-axis-title-text-style: map-get($categories, 'y-axis-title-text-style');
+
+ $title-styles: igx-type-scale-category($type-scale, $title);
+ $subtitle-styles: igx-type-scale-category($type-scale, $subtitle);
+ $x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label-text-style);
+ $x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title-text-style);
+ $y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style);
+ $y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style);
+
+ @include igx-font-var('title-text-style', $title-styles, $name);
+ @include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
+ @include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
+ @include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
+ @include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
+ @include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss
new file mode 100644
index 00000000000..c9bea0f1bac
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss
@@ -0,0 +1,76 @@
+////
+/// @group themes
+/// @access private
+/// @author Marin Popov
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+///
+/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected.
+/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {String} $outer-label-alignment [null] - Sets which side of the chart the outer labels should appear.
+/// @param {Color} $outer-label-text-color [null] - Sets the Color used for the outer labels.
+/// @param {Color} $outer-label-visibility [null] - Sets whether the outer labels are visible.
+/// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices.
+/// @param {Color} $text-color - [null] Sets the Color used for the inner labels.
+///
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-funnel-chart-theme($brushes: (orange, blue, pink));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-funnel-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $brushes: null,
+ $outlines: null,
+ $outer-label-alignment: null,
+ $outer-label-text-color: null,
+ $outer-label-visibility: null,
+ $outline-thickness: null,
+ $text-color: null,
+) {
+ $name: 'funnel-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend($theme, (
+ name: $name,
+ brushes: $brushes,
+ outlines: $outlines,
+ outer-label-alignment: $outer-label-alignment,
+ outer-label-text-color: $outer-label-text-color,
+ outer-label-visibility: $outer-label-visibility,
+ outline-thickness: $outline-thickness,
+ text-color: $text-color,
+ ));
+}
+
+@mixin igx-funnel-chart-typography($type-scale, $categories: (
+ outer-label-text-style: 'h1',
+ text-style: 'subtitle-1',
+)) {
+ $name: 'funnel-chart';
+ $outer-label-text-style: map-get($categories, 'outer-label-text-style');
+ $text-style: map-get($categories, 'text-style');
+
+ $outer-label: igx-type-scale-category($type-scale, $outer-label-text-style);
+ $text: igx-type-scale-category($type-scale, $text-style);
+
+ @include igx-font-var('outer-label-text-style', $outer-label, $name);
+ @include igx-font-var('text-style', $text, $name);
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss
new file mode 100644
index 00000000000..b5b32c29fbc
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss
@@ -0,0 +1,129 @@
+////
+/// @group themes
+/// @access public
+/// @author Silvia Ivanova
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+///
+/// @param {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.
+/// @param {Color} $backing-outline [null] - Sets the color to use for the outline of the backing.
+/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
+/// @param {Color} $font-brush [null] - Sets the color to use for the label font.
+/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.
+/// @param {Number} $needle-breadth [null] - Sets the needle breadth.
+/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.
+/// @param {Number} $needle-inner-base-width [null] - Sets the width of the needle's inner base.
+/// @param {Number} $needle-inner-point-width [null] - Sets the width of the needle's inner point.
+/// @param {Number} $needle-outer-base-width [null] - Sets the width of the needle's outer base.
+/// @param {Number} $needle-outer-point-width [null] - Sets the width of the needle's outer point.
+/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.
+/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.
+/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.
+/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.
+/// @param {Color} $scale-outline [null] - Sets the color to use for the outline of the scale.
+/// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.
+/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
+/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $custom-gauge-theme: igx-linear-gauge-theme($brushes: (red, green, blue));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($custom-gauge-theme);
+@function igx-linear-gauge-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+ $rest...
+) {
+ $name: 'linear-gauge';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend(
+ $theme,
+ keywords($rest),
+ (
+ name: $name,
+ ),
+ );
+}
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $width [null] - The width of the gauge in pixels, string (px) or percentage (%).
+/// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%).
+/// @param {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.
+/// @param {Color} $backing-outline [null] - Sets the color to use for the outline of the backing.
+/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
+/// @param {Color} $font-brush [null] - Sets the color to use for the label font.
+/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.
+/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.
+/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.
+/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.
+/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.
+/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.
+/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
+/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.
+/// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $custom-gauge-theme: igx-radial-gauge-theme($brushes: (red, green, blue));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($custom-gauge-theme);
+@function igx-radial-gauge-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+ $rest...
+) {
+ $name: 'radial-gauge';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend(
+ $theme,
+ keywords($rest),
+ (
+ name: $name,
+ ),
+ );
+}
+
+/// Adds typography styles for the linear-gauge component.
+/// @access private
+/// @group typography
+/// @requires {mixin} igx-type-style
+@mixin igx-gauge-typography() {
+ $scope: if(is-root(), ':root', '&');
+
+ #{$scope} {
+ @include css-vars-from-theme((font: inherit), 'linear-gauge');
+ @include css-vars-from-theme((font: inherit), 'radial-gauge');
+ }
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss
new file mode 100644
index 00000000000..c63cdbc9e71
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss
@@ -0,0 +1,39 @@
+////
+/// @group themes
+/// @access private
+/// @author Dilyana Dimova
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-map-theme: igx-geo-map-theme($width: 550px);
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-map-theme);
+@function igx-geo-map-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+ $plot-area-background: null
+) {
+ $name: 'geo-map';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend( $theme, (
+ name: $name,
+ plot-area-background: $plot-area-background
+ ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss
new file mode 100644
index 00000000000..690777ba12f
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss
@@ -0,0 +1,113 @@
+////
+/// @group themes
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Color} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.
+/// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.
+/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
+/// @param {Color} $font-brush [null] - Sets the brush to use for the label font.
+/// @param {Color} $minor-tick-brush [null] - Sets the brush to use for the minor tickmarks.
+/// @param {Number} $minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks.
+/// @param {List} $range-brushes [null] - Sets a collection of brushes to be used as the palette for bullet graph ranges.
+/// @param {List} $range-outlines [null] - Sets a collection of brushes to be used as the palette for bullet graph outlines.
+/// @param {Color} $scale-background-brush [null] - Sets the background brush for the scale.
+/// @param {Color} $scale-background-outline [null] - Sets the background outline for the scale.
+/// @param {Number} $scale-background-thickness [null] - Sets the background outline thickness for the scale.
+/// @param {Number} $target-value-breadth [null] - Sets the breadth of the target value element.
+/// @param {Color} $target-value-brush [null] - Sets the brush to use when rendering the fill of the comparative marker.
+/// @param {Color} $target-value-outline [null] - Sets the brush to use when rendering the outline of the target value.
+/// @param {Number} $target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar.
+/// @param {Color} $tick-brush [null] - Sets the brush to use for the major tickmarks.
+/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.
+/// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.
+/// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-bullet-graph-theme($brushes: (orange, blue, pink));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-bullet-graph-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $backing-brush: null,
+ $backing-outline: null,
+ $backing-stroke-thickness: null,
+ $font-brush: null,
+ $minor-tick-brush: null,
+ $minor-tick-thickness: null,
+ $range-brushes: null,
+ $range-outlines: null,
+ $scale-background-brush: null,
+ $scale-background-outline: null,
+ $scale-background-thickness: null,
+ $target-value-breadth: null,
+ $target-value-brush: null,
+ $target-value-outline: null,
+ $target-value-thickness: null,
+ $tick-brush: null,
+ $tick-stroke-thickness: null,
+ $value-brush: null,
+ $value-outline: null,
+ $value-stroke-thickness: null,
+) {
+ $name: 'bullet-graph';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ backing-brush: $backing-brush,
+ backing-outline: $backing-outline,
+ backing-stroke-thickness: $backing-stroke-thickness,
+ font-brush: $font-brush,
+ minor-tick-brush: $minor-tick-brush,
+ minor-tick-thickness: $minor-tick-thickness,
+ range-brushes: $range-brushes,
+ range-outlines: $range-outlines,
+ scale-background-brush: $scale-background-brush,
+ scale-background-outline: $scale-background-outline,
+ scale-background-thickness: $scale-background-thickness,
+ target-value-breadth: $target-value-breadth,
+ target-value-brush: $target-value-brush,
+ target-value-outline: $target-value-outline,
+ target-value-thickness: $target-value-thickness,
+ tick-brush: $tick-brush,
+ tick-stroke-thickness: $tick-stroke-thickness,
+ value-brush: $value-brush,
+ value-outline: $value-outline,
+ value-stroke-thickness: $value-stroke-thickness,
+ )
+ );
+}
+
+/// Adds typography styles for the graph component.
+/// @access private
+/// @group typography
+/// @requires {mixin} igx-type-style
+@mixin igx-graph-typography() {
+ $scope: if(is-root(), ':root', '&');
+
+ #{$scope} {
+ @include css-vars-from-theme((font: inherit), 'bullet-graph');
+ }
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss
new file mode 100644
index 00000000000..ffda53f06fb
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss
@@ -0,0 +1,68 @@
+////
+/// @group themes
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {List} $brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {Number} $label-extent [null] - Sets the pixel amount by which the labels are offset from the edge of the slices.
+/// @param {Color} $label-inner-color [null] - Sets the color for labels rendered inside of the pie chart.
+/// @param {Color} $label-outer-color [null] - Sets the color for labels rendered outside of the pie chart.
+/// @param {String} $labels-position [null] - Sets the position of chart labels. Valid values are: 'none', 'center', 'insideEnd', 'outsideEnd', and 'bestFit'.
+/// @param {Number} $leader-line-margin [null] - Sets the margin between a label and the end of its leader line.
+/// @param {String} $leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
+/// @param {String} $leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
+/// @param {Number} $radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-pie-chart-theme($brushes: (red, orange, blue));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-pie-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $brushes: null,
+ $outlines: null,
+ $label-extent: null,
+ $label-inner-color: null,
+ $label-outer-color: null,
+ $labels-position: null,
+ $leader-line-margin: null,
+ $leader-line-type: null,
+ $leader-line-visibility: null,
+ $radius-factor: null,
+) {
+ $name: 'pie-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+
+ @return extend( $theme, (
+ name: $name,
+ brushes: $brushes,
+ outlines: $outlines,
+ label-extent: $label-extent,
+ label-inner-color: $label-inner-color,
+ label-outer-color: $label-outer-color,
+ labels-position: $labels-position,
+ leader-line-margin: $leader-line-margin,
+ leader-line-type: $leader-line-type,
+ leader-line-visibility: $leader-line-visibility,
+ radius-factor: $radius-factor,
+ ));
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss
new file mode 100644
index 00000000000..9613072bd23
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss
@@ -0,0 +1,248 @@
+////
+/// @group themes
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @param {Color} $title-alignment [null] - Sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
+/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
+/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @param {String} $subtitle-alignment [null] - Sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
+/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected.
+/// @param {List} $marker-brushes [null] - Sets the palette of brushes used for rendering fill area of data point markers.
+/// @param {List} $outlines [null] - Sets the palette of brushes to use for outlines on the chart series.
+/// @param {List} $marker-outlines [null] - Sets the palette of brushes used for rendering outlines of data point markers.
+/// @param {Number} $thickness [null] - Sets the thickness for all series in this chart.
+/// @param {List} $trend-line-brushes [null] - Sets the palette of brushes to used for coloring trend lines in this chart.
+/// @param {Number} $trend-line-thickness [null] - Sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble.
+/// @param {List} $x-axis-label-margin [null] - Sets the margin of labels on the X-axis.
+/// @param {Color} $x-axis-label-text-color [null] - Sets color of labels on the X-axis.
+/// @param {String} $x-axis-label-vertical-alignment [null] - Sets Vertical alignment of X-axis labels.
+/// @param {Color} $x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @param {Number} $x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @param {Color} $x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @param {Number} $x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @param {Color} $x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @param {Color} $x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @param {Number} $x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @param {String} $x-axis-title-alignment [null] - Sets Horizontal alignment of the X-axis title.
+/// @param {Color} $x-axis-title-color [null] - Sets color of title on the X-axis.
+/// @param {List} $x-axis-title-margin [null] - Sets the margin around the title on the X-axis.
+/// @param {List} $y-axis-label-margin [null] - Sets the margin of labels on the Y-axis.
+/// @param {Color} $y-axis-label-text-color [null] - Sets color of labels on the Y-axis.
+/// @param {String} $y-axis-label-vertical-alignment [null] - Sets Vertical alignment of Y-axis labels.
+/// @param {Color} $y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the Y-axis.
+/// @param {Number} $y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @param {Color} $y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @param {Number} $y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @param {Color} $y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @param {Color} $y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @param {Number} $y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @param {String} $y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
+/// @param {Color} $y-axis-title-color [null] - Sets color of title on the Y-axis.
+/// @param {List} $y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-chart-theme: igx-shape-chart-theme($brushes: (orange, blue, pink));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-chart-theme);
+@function igx-shape-chart-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+ $margin: null,
+ $title-text-color: null,
+ $title-margin: null,
+ $subtitle-text-color: null,
+ $subtitle-margin: null,
+ $brushes: null,
+ $outlines: null,
+ $marker-brushes: null,
+ $marker-outlines: null,
+ $thickness: null,
+ $trend-line-brushes: null,
+ $trend-line-thickness: null,
+ $x-axis-label-margin: null,
+ $x-axis-label-text-color: null,
+ $x-axis-label-vertical-alignment: null,
+ $x-axis-major-stroke: null,
+ $x-axis-major-stroke-thickness: null,
+ $x-axis-minor-stroke: null,
+ $x-axis-minor-stroke-thickness: null,
+ $x-axis-strip: null,
+ $x-axis-stroke: null,
+ $x-axis-stroke-thickness: null,
+ $x-axis-title-alignment: null,
+ $x-axis-title-color: null,
+ $x-axis-title-margin: null,
+ $y-axis-label-margin: null,
+ $y-axis-label-text-color: null,
+ $y-axis-label-vertical-alignment: null,
+ $y-axis-major-stroke: null,
+ $y-axis-major-stroke-thickness: null,
+ $y-axis-minor-stroke: null,
+ $y-axis-minor-stroke-thickness: null,
+ $y-axis-strip: null,
+ $y-axis-stroke: null,
+ $y-axis-stroke-thickness: null,
+ $y-axis-title-alignment: null,
+ $y-axis-title-color: null,
+ $y-axis-title-margin: null,
+) {
+ $name: 'shape-chart';
+ $chart-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $chart-schema: map-get($schema, $name);
+ } @else {
+ $chart-schema: $schema;
+ }
+
+ $theme: apply-palette($chart-schema, $palette);
+ $margin-default: map-get($theme, 'margin');
+ $title-margin-default: map-get($theme, 'title-margin');
+ $subtitle-margin-default: map-get($theme, 'subtitle-margin');
+ $x-axis-label-margin-default: map-get($theme, 'x-axis-label-margin');
+ $y-axis-label-margin-default: map-get($theme, 'y-axis-label-margin');
+ $x-axis-title-margin-default: map-get($theme, 'x-axis-title-margin');
+ $y-axis-title-margin-default: map-get($theme, 'y-axis-title-margin');
+
+ @if not($margin) {
+ $margin: $margin-default;
+ } @else {
+ $margin: expand-shorthand(($margin));
+ }
+
+ @if not($title-margin) {
+ $title-margin: $title-margin-default;
+ } @else {
+ $title-margin: map-keys-prefix(expand-shorthand(($title-margin)), 'title');
+ }
+
+ @if not($subtitle-margin) {
+ $subtitle-margin: $subtitle-margin-default;
+ } @else {
+ $subtitle-margin: map-keys-prefix(expand-shorthand(($subtitle-margin)), 'subtitle');
+ }
+
+ @if not($x-axis-label-margin) {
+ $x-axis-label-margin: $x-axis-label-margin-default;
+ } @else {
+ $x-axis-label-margin: map-keys-prefix(expand-shorthand(($x-axis-label-margin)), 'x-axis-label');
+ }
+
+ @if not($y-axis-label-margin) {
+ $y-axis-label-margin: $y-axis-label-margin-default;
+ } @else {
+ $y-axis-label-margin: map-keys-prefix(expand-shorthand(($y-axis-label-margin)), 'y-axis-label');
+ }
+
+ @if not($x-axis-title-margin) {
+ $x-axis-title-margin: $x-axis-title-margin-default;
+ } @else {
+ $x-axis-title-margin: map-keys-prefix(expand-shorthand(($x-axis-title-margin)), 'x-axis-title');
+ }
+
+ @if not($y-axis-title-margin) {
+ $y-axis-title-margin: $y-axis-title-margin-default;
+ } @else {
+ $y-axis-title-margin: map-keys-prefix(expand-shorthand(($y-axis-title-margin)), 'y-axis-title');
+ }
+
+ @return extend(
+ $theme,
+ $margin,
+ $title-margin,
+ $subtitle-margin,
+ $x-axis-label-margin,
+ $x-axis-title-margin,
+ $y-axis-label-margin,
+ $y-axis-title-margin,
+ (
+ name: $name,
+ title-text-color: $title-text-color,
+ subtitle-text-color: $subtitle-text-color,
+ brushes: $brushes,
+ outlines: $outlines,
+ thickness: $thickness,
+ trend-line-brushes: $trend-line-brushes,
+ trend-line-thickness: $trend-line-thickness,
+ x-axis-label-text-color: $x-axis-label-text-color,
+ x-axis-label-vertical-alignment: $x-axis-label-vertical-alignment,
+ x-axis-major-stroke: $x-axis-major-stroke,
+ x-axis-major-stroke-thickness: $x-axis-major-stroke-thickness,
+ x-axis-minor-stroke: $x-axis-minor-stroke,
+ x-axis-minor-stroke-thickness: $x-axis-minor-stroke-thickness,
+ x-axis-strip: $x-axis-strip,
+ x-axis-stroke: $x-axis-stroke,
+ x-axis-stroke-thickness: $x-axis-stroke-thickness,
+ x-axis-title-alignment: $x-axis-title-alignment,
+ x-axis-title-color: $x-axis-title-color,
+ y-axis-label-text-color: $y-axis-label-text-color,
+ y-axis-label-vertical-alignment: $y-axis-label-vertical-alignment,
+ y-axis-major-stroke: $y-axis-major-stroke,
+ y-axis-major-stroke-thickness: $y-axis-major-stroke-thickness,
+ y-axis-minor-stroke: $y-axis-minor-stroke,
+ y-axis-minor-stroke-thickness: $y-axis-minor-stroke-thickness,
+ y-axis-strip: $y-axis-strip,
+ y-axis-stroke: $y-axis-stroke,
+ y-axis-stroke-thickness: $y-axis-stroke-thickness,
+ y-axis-title-alignment: $y-axis-title-alignment,
+ y-axis-title-color: $y-axis-title-color,
+ )
+ );
+}
+
+/// Adds typography styles for the data-chart component.
+/// Uses the 'h3', 'h4', 'h6', and 'subtitle-1'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {Map} $categories [(
+/// 'title': 'h6',
+/// 'subtitle': 'subtitle-1,
+/// 'x-axis-label-text-style': 'h4',
+/// 'y-axis-label-text-style': 'h4',
+/// 'x-axis-title-text-style': 'h3',
+/// 'y-axis-title-text-style': 'h3',
+/// )] - The categories from the typographic scale used for type styles.
+/// @requires {mixin} igx-type-style
+@mixin igx-shape-chart-typography($type-scale, $categories: (
+ 'title': 'h6',
+ 'subtitle': 'subtitle-1',
+ 'x-axis-label-text-style': 'h4',
+ 'y-axis-label-text-style': 'h4',
+ 'x-axis-title-text-style': 'h3',
+ 'y-axis-title-text-style': 'h3',
+)) {
+ $name: 'shape-chart';
+ $title: map-get($categories, 'title');
+ $subtitle: map-get($categories, 'subtitle');
+ $x-axis-title-text-style: map-get($categories, 'x-axis-title-text-style');
+ $x-axis-label-text-style: map-get($categories, 'x-axis-label-text-style');
+ $y-axis-title-text-style: map-get($categories, 'y-axis-title-text-style');
+ $y-axis-label-text-style: map-get($categories, 'y-axis-label-text-style');
+
+ $title-styles: igx-type-scale-category($type-scale, $title);
+ $subtitle-styles: igx-type-scale-category($type-scale, $subtitle);
+ $x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title-text-style);
+ $x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label-text-style);
+ $y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style);
+ $y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style);
+
+ @include igx-font-var('title-text-style', $title-styles, $name);
+ @include igx-font-var('subtitle-text-style', $subtitle-styles, $name);
+ @include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
+ @include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
+ @include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
+ @include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss
new file mode 100644
index 00000000000..a799325525a
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss
@@ -0,0 +1,102 @@
+////
+/// @group themes
+/// @access public
+/// @author Simeon Simeonoff
+////
+
+/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+///
+/// @param {Color} $brush [null] - Sets the sparkline brush.
+/// @param {Number} $line-thickness [null] - Sets the line thickness of the sparkline.
+/// @param {Color} $marker-brush [null] - Sets the marker brush of the sparkline.
+/// @param {Color} $marker-size [null] - Sets the marker size of the sparkline.
+/// @param {Color} $first-marker-brush [null] - Sets the first marker brush of the sparkline.
+/// @param {Number} $first-marker-size [null] - Sets the first marker size of the sparkline.
+/// @param {Color} $last-marker-brush [null] - Sets the last marker brush of the sparkline.
+/// @param {Number} $last-marker-size [null] - Sets the last marker size of the sparkline.
+/// @param {Color} $low-marker-brush [null] - Sets the low marker brush of the sparkline.
+/// @param {Number} $low-marker-size [null] - Sets the low marker size of the sparkline.
+/// @param {Color} $high-marker-brush [null] - Sets the high marker brush of the sparkline.
+/// @param {Number} $high-marker-size [null] - Sets the high marker size of the sparkline.
+/// @param {Color} $negative-brush [null] - Sets the negative brush of the sparkline.
+/// @param {Color} $negative-marker-brush [null] - Sets the negative marker brush of the sparkline.
+/// @param {Number} $negative marker-size [null] - Sets the negative marker size of the sparkline.
+/// @param {Color} $trend-line-brush [null] - Sets the trendline brush of the sparkline.
+/// @param {Color} $trend-line-thickness [null] - Sets the thickness of the sparkline's trendline.
+/// @param {Color} $horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
+/// @param {Color} $vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
+/// @param {Color} $normal-range-fill [null] - Sets the normal range brush of the sparkline.
+/// @requires $default-palette
+/// @requires $light-schema
+/// @requires apply-palette
+/// @requires extend
+///
+/// @example scss
+/// $my-sparkline-theme: igx-sparkline-theme($brushes: (orange, blue, pink));
+/// // Pass the theme to the igx-css-vars mixin
+/// @include igx-css-vars($my-sparkline-theme);
+@function igx-sparkline-theme(
+ $palette: $default-palette,
+ $schema: $light-schema,
+
+ $brush: null,
+ $line-thickness: null,
+ $marker-brush: null,
+ $marker-size: null,
+ $first-marker-brush: null,
+ $first-marker-size: null,
+ $last-marker-brush: null,
+ $last-marker-size: null,
+ $low-marker-brush: null,
+ $low-marker-size: null,
+ $high-marker-brush: null,
+ $high-marker-size: null,
+ $negative-brush: null,
+ $negative-marker-brush: null,
+ $negative-marker-size: null,
+ $trend-line-brush: null,
+ $trend-line-thickness: null,
+ $horizontal-axis-brush: null,
+ $vertical-axis-brush: null,
+ $normal-range-fill: null,
+) {
+ $name: 'sparkline';
+ $sparkline-schema: ();
+
+ @if map-has-key($schema, $name) {
+ $sparkline-schema: map-get($schema, $name);
+ } @else {
+ $sparkline-schema: $schema;
+ }
+
+ $theme: apply-palette($sparkline-schema, $palette);
+
+ @return extend(
+ $theme,
+ (
+ name: $name,
+ brush: $brush,
+ line-thickness: $line-thickness,
+ marker-brush: $marker-brush,
+ marker-size: $marker-size,
+ first-marker-brush: $first-marker-brush,
+ first-marker-size: $first-marker-size,
+ last-marker-brush: $last-marker-brush,
+ last-marker-size: $last-marker-size,
+ low-marker-brush: $low-marker-brush,
+ low-marker-size: $low-marker-size,
+ high-marker-brush: $high-marker-brush,
+ high-marker-size: $high-marker-size,
+ negative-brush: $negative-brush,
+ negative-marker-brush: $negative-marker-brush,
+ negative-marker-size: $negative-marker-size,
+ trend-line-brush: $trend-line-brush,
+ trend-line-thickness: $trend-line-thickness,
+ horizontal-axis-brush: $horizontal-axis-brush,
+ vertical-axis-brush: $vertical-axis-brush,
+ normal-range-fill: $normal-range-fill,
+ )
+ );
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
index 7c8bbe3ec33..7991f398f49 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -17,6 +17,17 @@
@import '../components/calendar/calendar-theme';
@import '../components/card/card-theme';
@import '../components/carousel/carousel-theme';
+@import '../components/charts/data-chart-theme';
+@import '../components/charts/doughnut-chart-theme';
+@import '../components/charts/gauge-theme';
+@import '../components/charts/financial-chart-theme';
+@import '../components/charts/graph-theme';
+@import '../components/charts/category-chart-theme';
+@import '../components/charts/geo-map-theme';
+@import '../components/charts/pie-chart-theme';
+@import '../components/charts/sparkline-theme';
+@import '../components/charts/funnel-chart-theme';
+@import '../components/charts/shape-chart-theme';
@import '../components/checkbox/checkbox-theme';
@import '../components/chip/chip-theme';
@import '../components/column-hiding/column-hiding-theme';
@@ -214,6 +225,90 @@
));
}
+ @if not(index($exclude, 'data-chart')) {
+ @include igx-css-vars(igx-data-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'doughnut-chart')) {
+ @include igx-css-vars(igx-doughnut-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'linear-gauge')) {
+ @include igx-css-vars(igx-linear-gauge-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'radial-gauge')) {
+ @include igx-css-vars(igx-radial-gauge-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'financial-chart')) {
+ @include igx-css-vars(igx-financial-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'bullet-graph')) {
+ @include igx-css-vars(igx-bullet-graph-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'category-chart')) {
+ @include igx-css-vars(igx-category-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'geo-map')) {
+ @include igx-css-vars(igx-geo-map-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'pie-chart')) {
+ @include igx-css-vars(igx-pie-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'sparkline')) {
+ @include igx-css-vars(igx-sparkline-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'funnel-chart')) {
+ @include igx-css-vars(igx-funnel-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
+ @if not(index($exclude, 'shape-chart')) {
+ @include igx-css-vars(igx-shape-chart-theme(
+ $palette,
+ $schema,
+ ));
+ }
+
@if not(index($exclude, 'igx-checkbox')) {
@include igx-checkbox(igx-checkbox-theme(
$palette,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss
new file mode 100644
index 00000000000..e752febb7e6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss
@@ -0,0 +1,81 @@
+@import '../light/category-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Silvia Ivanova
+////
+
+/// Generates the base dark category-chart schema.
+/// @type {Map}
+/// @prop {Color} title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the chart title.
+/// @prop {Color} subtitle-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the chart subtitle.
+/// @prop {Color} x-axis-label-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of labels on the X-axis.
+/// @prop {Color} x-axis-tick-stroke [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color to apply to tickmarks along the X-axis.
+/// @prop {Color} x-axis-title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the title on the X-axis.
+/// @prop {Color} y-axis-label-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of labels on the Y-axis.
+/// @prop {Color} y-axis-tick-stroke [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color to apply to tickmarks along the Y-axis.
+/// @prop {Color} y-axis-title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the title on the Y-axis.
+$_base-dark-category-chart: (
+ title-text-color: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ subtitle-text-color: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ x-axis-label-text-color: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ x-axis-title-text-color: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ x-axis-tick-stroke: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ y-axis-label-text-color: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ y-axis-title-text-color: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ ),
+
+ y-axis-tick-stroke: (
+ igx-color: ('grays', 400),
+ hexrgba: #fff
+ )
+);
+
+/// Generates a dark category-chart schema based on a mix of $_light-category-chart and $_base-dark-category-chart
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-category-chart
+/// @requires $_base-dark-category-chart
+/// @see $default-palette
+$_dark-category-chart: extend($_light-category-chart, $_base-dark-category-chart);
+
+/// Generates a dark fluent category-chart schema based on a mix of $_fluent-category-chart and $_base-dark-category-chart
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-category-chart
+/// @requires $_base-dark-category-chart
+$_dark-fluent-category-chart: extend($_fluent-category-chart, $_base-dark-category-chart);
+
+/// Generates a bootstrap category-chart schema based on a mix of $_bootstrap-category-chart and $_base-dark-category-chart
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-category-chart
+/// @requires $_base-dark-category-chart
+$_dark-bootstrap-category-chart: extend($_bootstrap-category-chart, $_base-dark-category-chart);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss
new file mode 100644
index 00000000000..37d775d5e96
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss
@@ -0,0 +1,26 @@
+@import '../light/data-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a dark data chart schema.
+/// @type {Map}
+/// @requires $_light-data-chart
+/// @see $default-palette
+$_dark-data-chart: extend($_light-data-chart);
+
+/// Generates a dark fluent data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-data-chart
+$_dark-fluent-data-chart: extend($_fluent-data-chart);
+
+/// Generates a dark bootstrap data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-data-chart
+$_dark-bootstrap-data-chart: extend($_bootstrap-data-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss
new file mode 100644
index 00000000000..05b0eec2d74
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss
@@ -0,0 +1,26 @@
+@import '../light/doughnut-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a dark doughnut chart schema.
+/// @type {Map}
+/// @requires $_light-doughnut-chart
+/// @see $default-palette
+$_dark-doughnut-chart: extend($_light-doughnut-chart);
+
+/// Generates a dark fluent doughnut-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-doughnut-chart
+$_dark-fluent-doughnut-chart: extend($_fluent-doughnut-chart);
+
+/// Generates a dark bootstrap doughnut-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-doughnut-chart
+$_dark-bootstrap-doughnut-chart: extend($_bootstrap-doughnut-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss
new file mode 100644
index 00000000000..c5081067215
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss
@@ -0,0 +1,25 @@
+@import '../light/financial-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Dilyana Dimova
+////
+
+/// Generates a dark financial chart schema.
+/// @type {Map}
+/// @requires $_light-financial-chart
+/// @see $default-palette
+$_dark-financial-chart: extend($_light-financial-chart);
+
+/// Generates a dark fluent financial-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-financial-chart
+$_dark-fluent-financial-chart: extend($_fluent-financial-chart);
+
+/// Generates a dark bootstrap financial-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-financial-chart
+$_dark-bootstrap-financial-chart: extend($_bootstrap-financial-chart);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss
new file mode 100644
index 00000000000..02a2176235c
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss
@@ -0,0 +1,25 @@
+@import '../light/funnel-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Marin Popov
+////
+
+/// Generates a dark funnel chart schema.
+/// @type {Map}
+/// @requires $_light-funnel-chart
+/// @see $default-palette
+$_dark-funnel-chart: extend($_light-funnel-chart);
+
+/// Generates a dark fluent funnel-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-funnel-chart
+$_dark-fluent-funnel-chart: extend($_fluent-funnel-chart);
+
+/// Generates a dark bootstrap funnel-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-funnel-chart
+$_dark-bootstrap-funnel-chart: extend($_bootstrap-funnel-chart);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss
new file mode 100644
index 00000000000..2ec1b18ac99
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss
@@ -0,0 +1,43 @@
+@import '../light/gauge';
+
+////
+/// @group schemas
+/// @access private
+/// @author Silvia Ivanova
+////
+
+/// Generates dark gauge schemas.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-linear-gauge
+$_dark-linear-gauge: extend($_light-linear-gauge);
+
+/// Generates dark gauge schemas.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-radial-gauge
+$_dark-radial-gauge: extend($_light-radial-gauge);
+
+/// Generates a dark fluent gauge schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-linear-gauge
+$_dark-fluent-linear-gauge: extend($_fluent-linear-gauge);
+
+/// Generates a dark fluent gauge schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-radial-gauge
+$_dark-fluent-radial-gauge: extend($_fluent-radial-gauge);
+
+/// Generates a dark bootstrap gauge schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-linear-gauge
+$_dark-bootstrap-linear-gauge: extend($_bootstrap-linear-gauge);
+
+/// Generates a dark bootstrap gauge schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-radial-gauge
+$_dark-bootstrap-radial-gauge: extend($_bootstrap-radial-gauge);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss
new file mode 100644
index 00000000000..e3ad80228fe
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss
@@ -0,0 +1,28 @@
+@import '../light/geo-map';
+
+////
+/// @group schemas
+/// @access private
+/// @author Dilyana Dimova
+////
+
+/// Generates a dark base geo map schema.
+/// @type {Map}
+/// @requires $_light-geo-map
+/// @see $_light-geo-map
+$_dark-geo-map: extend($_light-geo-map);
+
+/// Generates a dark fluent geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-geo-map
+/// @see $_fluent-geo-map
+$_dark-fluent-geo-map: extend($_fluent-geo-map);
+
+/// Generates a dark bootstrap geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-geo-map
+/// @see $_bootstrap-geo-map
+$_dark-bootstrap-geo-map: extend($_bootstrap-geo-map);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss
new file mode 100644
index 00000000000..a1a0a5bdbe9
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss
@@ -0,0 +1,26 @@
+@import '../light/graph';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a dark graph schema.
+/// @type {Map}
+/// @requires $_light-graph
+/// @see $default-palette
+$_dark-graph: extend($_light-graph);
+
+/// Generates a dark fluent graph schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-graph
+$_dark-fluent-graph: extend($_fluent-graph);
+
+/// Generates a dark bootstrap graph schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-graph
+$_dark-bootstrap-graph: extend($_bootstrap-graph);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
index 55abd101b9b..28a09a2b512 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss
@@ -13,15 +13,22 @@
@import './calendar';
@import './card';
@import './carousel';
+@import './category-chart';
@import './checkbox';
@import './chip';
@import './column-hiding';
@import './combo';
@import './dialog';
+@import './data-chart';
+@import './doughnut-chart';
@import './date-range-picker';
@import './divider';
@import './drop-down';
@import './expansion-panel';
+@import './gauge';
+@import './financial-chart';
+@import './graph';
+@import './funnel-chart';
@import './grid';
@import './grid-filtering';
@import './pagination';
@@ -31,15 +38,19 @@
@import './icon';
@import './input-group';
@import './list';
+@import './geo-map';
@import './navbar';
@import './navdrawer';
@import './overlay';
@import './progress';
+@import './pie-chart';
@import './radio';
@import './ripple';
@import './scrollbar';
+@import './shape-chart';
@import './slider';
@import './snackbar';
+@import './sparkline';
@import './splitter';
@import './switch';
@import './tabs';
@@ -59,34 +70,46 @@
/// @property {Map} igx-calendar [$_dark-calendar]
/// @property {Map} igx-card [$_dark-card]
/// @property {Map} igx-carousel [$_dark-carousel]
+/// @property {Map} category-chart [$_dark-category-chart]
/// @property {Map} igx-checkbox [$_dark-checkbox]
/// @property {Map} igx-chip [$_dark-chip]
/// @property {Map} igx-column-hiding [$_dark-column-hiding]
/// @property {Map} igx-combo [$_dark-combo]
/// @property {Map} igx-dialog [$_dark-dialog]
+/// @property {Map} data-chart [$_dark-data-chart]
+/// @property {Map} doughnut-chart [$_dark-doughnut-chart]
/// @property {Map} igx-date-range-picker [$_dark-date-range-picker]
/// @property {Map} igx-divider [$_dark-divider]
/// @property {Map} igx-drop-down [$_dark-drop-down]
/// @property {Map} igx-expansion-panel [$_dark-expansion-panel]
+/// @property {Map} linear-gauge [$_dark-linear-gauge]
+/// @property {Map} radial-gauge [$_dark-radial-gauge]
+/// @property {Map} financial-chart [$_dark-financial-chart]
+/// @property {Map} bullet-graph [$_dark-graph]
/// @property {Map} igx-grid [$_dark-grid]
/// @property {Map} igx-grid-filtering [$_dark-grid-filtering]
/// @property {Map} igx-paginator [$_dark-pagination]
+/// @property {Map} funnel-chart [$_dark-funnel-chart]
/// @property {Map} igx-grid-summary [$_dark-grid-summary]
/// @property {Map} igx-grid-toolbar [$_dark-grid-toolbar]
/// @property {Map} igx-highlight [$_dark-highlight]
/// @property {Map} igx-icon [$_dark-icon]
/// @property {Map} igx-input-group [$_dark-input-group]
/// @property {Map} igx-list [$_dark-list]
+/// @property {Map} geo-map [$_dark-geo-map]
/// @property {Map} igx-navbar [$_dark-navbar]
/// @property {Map} igx-navdrawer [$_dark-navdrawer]
/// @property {Map} igx-overlay [$_dark-overlay]
/// @property {Map} igx-progress-linear [$_dark-progress-linear]
/// @property {Map} igx-progress-circular [$_dark-progress-circular]
+/// @property {Map} pie-chart [$_dark-pie-chart]
/// @property {Map} igx-radio [$_dark-radio]
/// @property {Map} igx-ripple [$_dark-ripple]
/// @property {Map} igx-scrollbar [$_dark-scrollbar]
+/// @property {Map} shape-chart [$_dark-shape-chart]
/// @property {Map} igx-slider [$_dark-slider]
/// @property {Map} igx-snackbar [$_dark-snackbar]
+/// @property {Map} sparkline [$_dark-sparkline]
/// @property {Map} igx-splitter [$_dark-splitter]
/// @property {Map} igx-switch [$_dark-switch]
/// @property {Map} igx-tabs [$_dark-tabs]
@@ -104,15 +127,23 @@ $dark-schema: (
igx-calendar: $_dark-calendar,
igx-card: $_dark-card,
igx-carousel: $_dark-carousel,
+ category-chart: $_dark-category-chart,
igx-checkbox: $_dark-checkbox,
igx-chip: $_dark-chip,
igx-column-hiding: $_dark-column-hiding,
igx-combo: $_dark-combo,
igx-dialog: $_dark-dialog,
+ data-chart: $_dark-data-chart,
+ doughnut-chart: $_dark-doughnut-chart,
igx-date-range: $_dark-date-range-picker,
igx-divider: $_dark-divider,
igx-drop-down: $_dark-drop-down,
igx-expansion-panel: $_dark-expansion-panel,
+ linear-gauge: $_dark-linear-gauge,
+ radial-gauge: $_dark-radial-gauge,
+ financial-chart: $_dark-financial-chart,
+ bullet-graph: $_dark-graph,
+ funnel-chart: $_dark-funnel-chart,
igx-grid: $_dark-grid,
igx-grid-filtering: $_dark-grid-filtering,
igx-paginator: $_dark-pagination,
@@ -122,16 +153,20 @@ $dark-schema: (
igx-icon: $_dark-icon,
igx-input-group: $_dark-input-group,
igx-list: $_dark-list,
+ geo-map: $_dark-geo-map,
igx-navbar: $_dark-navbar,
igx-navdrawer: $_dark-navdrawer,
igx-overlay: $_dark-overlay,
igx-linear-bar: $_dark-progress-linear,
igx-circular-bar: $_dark-progress-circular,
+ pie-chart: $_dark-pie-chart,
igx-radio: $_dark-radio,
igx-ripple: $_dark-ripple,
igx-scrollbar: $_dark-scrollbar,
+ shape-chart: $_dark-shape-chart,
igx-slider: $_dark-slider,
igx-snackbar: $_dark-snackbar,
+ sparkline: $_dark-sparkline,
igx-splitter: $_dark-splitter,
igx-switch: $_dark-switch,
igx-tabs: $_dark-tabs,
@@ -152,34 +187,46 @@ $dark-schema: (
/// @property {map} igx-calendar [$_dark-fluent-calendar],
/// @property {map} igx-card [$_dark-fluent-card],
/// @property {map} igx-carousel [$_dark-fluent-carousel],
+/// @property {map} category-chart [$_dark-fluent-category-chart]
/// @property {map} igx-checkbox [$_dark-fluent-checkbox],
/// @property {map} igx-chip [$_dark-fluent-chip],
/// @property {map} igx-column-hiding [$_dark-fluent-column-hiding],
/// @property {map} igx-combo [$_dark-fluent-combo],
/// @property {map} igx-dialog [$_dark-fluent-dialog],
+/// @property {Map} data-chart [$_dark-fluent-data-chart]
+/// @property {Map} doughnut-chart [$_dark-fluent-doughnut-chart]
/// @property {map} igx-date-range-picker [$_dark-fluent-date-range-picker],
/// @property {map} igx-divider [$_dark-fluent-divider],
/// @property {map} igx-drop-down [$_dark-fluent-drop-down],
/// @property {map} igx-expansion-panel [$_dark-fluent-expansion-panel],
+/// @property {Map} linear-gauge [$_dark-fluent-linear-gauge]
+/// @property {Map} radial-gauge [$_dark-fluent-radial-gauge]
+/// @property {map} financial-chart [$_dark-fluent-financial-chart]
+/// @property {map} bullet-graph [$_dark-fluent-graph],
/// @property {map} igx-grid [$_dark-fluent-grid],
/// @property {map} igx-grid-filtering [$_dark-fluent-grid-filtering],
/// @property {map} igx-paginator [$_dark-fluent-pagination],
+/// @property {map} funnel-chart [$_dark-fluent-funnel-chart],
/// @property {map} igx-grid-summary [$_dark-fluent-grid-summary],
/// @property {map} igx-grid-toolbar [$_dark-fluent-grid-toolbar],
/// @property {map} igx-highlight [$_dark-fluent-highlight],
/// @property {map} igx-icon [$_dark-fluent-icon],
/// @property {map} igx-input-group [$_dark-fluent-input-group],
/// @property {map} igx-list [$_dark-fluent-list],
+/// @property {Map} geo-map [$_dark-fluent-geo-map]
/// @property {map} igx-navbar [$_dark-fluent-navbar],
/// @property {map} igx-navdrawer [$_dark-fluent-navdrawer],
/// @property {map} igx-overlay [$_dark-fluent-overlay],
/// @property {map} igx-linear-bar [$_dark-fluent-progress-linear],
/// @property {map} igx-circular-bar [$_dark-fluent-progress-circular],
+/// @property {Map} pie-chart [$_dark-fluent-pie-chart],
/// @property {map} igx-radio [$_dark-fluent-radio],
/// @property {map} igx-ripple [$_dark-fluent-ripple],
/// @property {map} igx-scrollbar [$_dark-fluent-scrollbar],
+/// @property {map} shape-chart [$_dark-fluent-shape-chart],
/// @property {map} igx-slider [$_dark-fluent-slider],
/// @property {map} igx-snackbar [$_dark-fluent-snackbar],
+/// @property {map} sparkline [$_dark-fluent-sparkline],
/// @property {map} igx-splitter [$_dark-fluent-splitter],
/// @property {map} igx-switch [$_dark-fluent-switch],
/// @property {map} igx-tabs [$_dark-fluent-tabs],
@@ -197,34 +244,46 @@ $dark-fluent-schema: (
igx-calendar: $_dark-fluent-calendar,
igx-card: $_dark-fluent-card,
igx-carousel: $_dark-fluent-carousel,
+ category-chart: $_dark-fluent-category-chart,
igx-checkbox: $_dark-fluent-checkbox,
igx-chip: $_dark-fluent-chip,
igx-column-hiding: $_dark-fluent-column-hiding,
igx-combo: $_dark-fluent-combo,
igx-dialog: $_dark-fluent-dialog,
+ data-chart: $_dark-fluent-data-chart,
+ doughnut-chart: $_dark-fluent-doughnut-chart,
igx-date-range: $_dark-fluent-date-range-picker,
igx-divider: $_dark-fluent-divider,
igx-drop-down: $_dark-fluent-drop-down,
igx-expansion-panel: $_dark-fluent-expansion-panel,
+ linear-gauge: $_dark-fluent-linear-gauge,
+ radial-gauge: $_dark-fluent-radial-gauge,
+ financial-chart: $_dark-fluent-financial-chart,
+ bullet-graph: $_dark-fluent-graph,
igx-grid: $_dark-fluent-grid,
igx-grid-filtering: $_dark-fluent-grid-filtering,
igx-paginator: $_dark-fluent-pagination,
+ funnel-chart: $_dark-fluent-funnel-chart,
igx-grid-summary: $_dark-fluent-grid-summary,
igx-grid-toolbar: $_dark-fluent-grid-toolbar,
igx-highlight: $_dark-fluent-highlight,
igx-icon: $_dark-fluent-icon,
igx-input-group: $_dark-fluent-input-group,
igx-list: $_dark-fluent-list,
+ geo-map: $_dark-fluent-geo-map,
igx-navbar: $_dark-fluent-navbar,
igx-navdrawer: $_dark-fluent-navdrawer,
igx-overlay: $_dark-fluent-overlay,
igx-linear-bar: $_dark-fluent-progress-linear,
igx-circular-bar: $_dark-fluent-progress-circular,
+ pie-chart: $_dark-fluent-pie-chart,
igx-radio: $_dark-fluent-radio,
igx-ripple: $_dark-fluent-ripple,
igx-scrollbar: $_dark-fluent-scrollbar,
+ shape-chart: $_dark-fluent-shape-chart,
igx-slider: $_dark-fluent-slider,
igx-snackbar: $_dark-fluent-snackbar,
+ sparkline: $_dark-fluent-sparkline,
igx-splitter: $_dark-fluent-splitter,
igx-switch: $_dark-fluent-switch,
igx-tabs: $_dark-fluent-tabs,
@@ -245,34 +304,46 @@ $dark-fluent-schema: (
/// @property {map} igx-calendar [$_dark-bootstrap-calendar],
/// @property {map} igx-card [$_dark-bootstrap-card],
/// @property {map} igx-carousel [$_dark-bootstrap-carousel],
+/// @property {map} category-chart [$_dark-bootstrap-category-chart]
/// @property {map} igx-checkbox [$_dark-bootstrap-checkbox],
/// @property {map} igx-chip [$_dark-bootstrap-chip],
/// @property {map} igx-column-hiding [$_dark-bootstrap-column-hiding],
/// @property {map} igx-combo [$_dark-bootstrap-combo],
/// @property {map} igx-dialog [$_dark-bootstrap-dialog],
+/// @property {Map} data-chart [$_dark-bootstrap-data-chart]
+/// @property {Map} doughnut-chart [$_dark-bootstrap-doughnut-chart]
/// @property {map} igx-date-range-picker [$_dark-bootstrap-date-range-picker],
/// @property {map} igx-divider [$_dark-bootstrap-divider],
/// @property {map} igx-drop-down [$_dark-bootstrap-drop-down],
/// @property {map} igx-expansion-panel [$_dark-bootstrap-expansion-panel],
+/// @property {Map} linear-gauge [$_dark-bootstrap-linear-gauge]
+/// @property {Map} radial-gauge [$_dark-bootstrap-radial-gauge]
+/// @property {map} financial-chart [$_dark-bootstrap-financial-chart]
+/// @property {map} bullet-graph [$_dark-bootstrap-graph],
/// @property {map} igx-grid [$_dark-bootstrap-grid],
/// @property {map} igx-grid-filtering [$_dark-bootstrap-grid-filtering],
/// @property {map} igx-paginator [$_dark-bootstrap-pagination],
+/// @property {map} funnel-chart [$_dark-bootstrap-funnel-chart],
/// @property {map} igx-grid-summary [$_dark-bootstrap-grid-summary],
/// @property {map} igx-grid-toolbar [$_dark-bootstrap-grid-toolbar],
/// @property {map} igx-highlight [$_dark-bootstrap-highlight],
/// @property {map} igx-icon [$_dark-bootstrap-icon],
/// @property {map} igx-input-group [$_dark-bootstrap-input-group],
/// @property {map} igx-list [$_dark-bootstrap-list],
+/// @property {Map} geo-map [$_dark-bootstrap-geo-map]
/// @property {map} igx-navbar [$_dark-bootstrap-navbar],
/// @property {map} igx-navdrawer [$_dark-bootstrap-navdrawer],
/// @property {map} igx-overlay [$_dark-bootstrap-overlay],
/// @property {map} igx-linear-bar [$_dark-bootstrap-progress-linear],
/// @property {map} igx-circular-bar [$_dark-bootstrap-progress-circular],
+/// @property {Map} pie-chart [$_dark-bootstrap-pie-chart],
/// @property {map} igx-radio [$_dark-bootstrap-radio],
/// @property {map} igx-ripple [$_dark-bootstrap-ripple],
/// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar],
+/// @property {map} shape-chart [$_dark-bootstrap-shape-chart],
/// @property {map} igx-slider [$_dark-bootstrap-slider],
/// @property {map} igx-snackbar [$_dark-bootstrap-snackbar],
+/// @property {map} sparkline [$_dark-bootstrap-sparkline],
/// @property {map} igx-splitter [$_dark-bootstrap-splitter],
/// @property {map} igx-switch [$_dark-bootstrap-switch],
/// @property {map} igx-tabs [$_dark-bootstrap-tabs],
@@ -290,34 +361,46 @@ $dark-bootstrap-schema: (
igx-calendar: $_dark-bootstrap-calendar,
igx-card: $_dark-bootstrap-card,
igx-carousel: $_dark-bootstrap-carousel,
+ category-chart: $_dark-bootstrap-category-chart,
igx-checkbox: $_dark-bootstrap-checkbox,
igx-chip: $_dark-bootstrap-chip,
igx-column-hiding: $_dark-bootstrap-column-hiding,
igx-combo: $_dark-bootstrap-combo,
igx-dialog: $_dark-bootstrap-dialog,
+ data-chart: $_dark-bootstrap-data-chart,
+ doughnut-chart: $_dark-bootstrap-doughnut-chart,
igx-date-range: $_dark-bootstrap-date-range-picker,
igx-divider: $_dark-bootstrap-divider,
igx-drop-down: $_dark-bootstrap-drop-down,
igx-expansion-panel: $_dark-bootstrap-expansion-panel,
+ linear-gauge: $_dark-bootstrap-linear-gauge,
+ radial-gauge: $_dark-bootstrap-radial-gauge,
+ financial-chart: $_dark-bootstrap-financial-chart,
+ bullet-graph: $_dark-bootstrap-graph,
igx-grid: $_dark-bootstrap-grid,
igx-grid-filtering: $_dark-bootstrap-grid-filtering,
igx-paginator: $_dark-bootstrap-pagination,
+ funnel-chart: $_dark-bootstrap-funnel-chart,
igx-grid-summary: $_dark-bootstrap-grid-summary,
igx-grid-toolbar: $_dark-bootstrap-grid-toolbar,
igx-highlight: $_dark-bootstrap-highlight,
igx-icon: $_dark-bootstrap-icon,
igx-input-group: $_dark-bootstrap-input-group,
igx-list: $_dark-bootstrap-list,
+ geo-map: $_dark-bootstrap-geo-map,
igx-navbar: $_dark-bootstrap-navbar,
igx-navdrawer: $_dark-bootstrap-navdrawer,
igx-overlay: $_dark-bootstrap-overlay,
igx-linear-bar: $_dark-bootstrap-progress-linear,
igx-circular-bar: $_dark-bootstrap-progress-circular,
+ pie-chart: $_dark-bootstrap-pie-chart,
igx-radio: $_dark-bootstrap-radio,
igx-ripple: $_dark-bootstrap-ripple,
igx-scrollbar: $_dark-bootstrap-scrollbar,
+ shape-chart: $_dark-bootstrap-shape-chart,
igx-slider: $_dark-bootstrap-slider,
igx-snackbar: $_dark-bootstrap-snackbar,
+ sparkline: $_dark-bootstrap-sparkline,
igx-splitter: $_dark-bootstrap-splitter,
igx-switch: $_dark-bootstrap-switch,
igx-tabs: $_dark-bootstrap-tabs,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss
new file mode 100644
index 00000000000..53732a88024
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss
@@ -0,0 +1,29 @@
+@import '../light/pie-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a dark base pie chart schema.
+/// @type {Map}
+/// @requires $_light-pie-chart
+/// @see $_light-pie-chart
+$_dark-pie-chart: extend($_light-pie-chart);
+
+/// Generates a dark fluent pie chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-pie-chart
+/// @see $_fluent-pie-chart
+$_dark-fluent-pie-chart: extend($_fluent-pie-chart);
+
+/// Generates a dark bootstrap pie chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-pie-chart
+/// @see $_bootstrap-pie-chart
+$_dark-fluent-pie-chart: extend($_fluent-pie-chart);
+$_dark-bootstrap-pie-chart: extend($_bootstrap-pie-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss
new file mode 100644
index 00000000000..3d0fae107f7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss
@@ -0,0 +1,26 @@
+@import '../light/shape-chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a dark shape chart schema.
+/// @type {Map}
+/// @requires $_light-shape-chart
+/// @see $default-palette
+$_dark-shape-chart: extend($_light-shape-chart);
+
+/// Generates a dark fluent shape-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-shape-chart
+$_dark-fluent-shape-chart: extend($_fluent-shape-chart);
+
+/// Generates a dark bootstrap shape-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-shape-chart
+$_dark-bootstrap-shape-chart: extend($_bootstrap-shape-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss
new file mode 100644
index 00000000000..65417666b7a
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss
@@ -0,0 +1,26 @@
+@import '../light/sparkline';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a dark sparkline schema.
+/// @type {Map}
+/// @requires $_light-sparkline
+/// @see $default-palette
+$_dark-sparkline: extend($_light-sparkline);
+
+/// Generates a dark fluent sparkline schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_fluent-sparkline
+$_dark-fluent-sparkline: extend($_fluent-sparkline);
+
+/// Generates a dark bootstrap sparkline schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_bootstrap-sparkline
+$_dark-bootstrap-sparkline: extend($_bootstrap-sparkline);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss
new file mode 100644
index 00000000000..3b729f6648d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss
@@ -0,0 +1,232 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Silvia Ivanova
+////
+
+/// Generates a light category chart schema.
+/// @type {Map}
+/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @property {List} brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
+/// @property {List} marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @property {List} negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
+/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @property {List} marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected.
+/// @property {List} negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
+/// @property {String} title-alignment [null] - The horizontal alignment to use for the title.
+/// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @property {Color} title-text-color [null] - Sets the color of the chart title.
+/// @property {String} title-text-style [null] - Sets the CSS font property of the chart title.
+/// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @property {String} subtitle-alignment [null] - The horizontal alignment to use for the subtitle.
+/// @property {Color} subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @property {String} subtitle-text-style [null] - Sets the CSS font property of the chart subtitle.
+/// @property {Number} thickness [null] - Sets the thickness for all series in a chart.
+/// @property {List} trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart.
+/// @property {Number} trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
+/// @property {List} x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis.
+/// @property {Color} x-axis-label-text-color [null] - Sets the color of labels on the X-axis.
+/// @property {String} x-axis-label-text-style [null] - Sets the CSS font property for labels on X-axis.
+/// @property {String} x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
+/// @property {Color} x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @property {Number} x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @property {Color} x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @property {Number} x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @property {Color} x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @property {Color} x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @property {Number} x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @property {Number} x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis.
+/// @property {Color} x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis.
+/// @property {Number} x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis.
+/// @property {String} x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title.
+/// @property {List} x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis.
+/// @property {Color} x-axis-title-text-color [null] - Sets the color of the title on the X-axis.
+/// @property {String} x-axis-title-text-style [null] - Sets the CSS font property for the title on the X-axis.
+/// @property {List} y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis.
+/// @property {Color} y-axis-label-text-color [null] - Sets the color of labels on the Y-axis.
+/// @property {String} y-axis-label-text-style [null] - Sets the CSS font property for labels on Y-axis.
+/// @property {String} y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels.
+/// @property {Color} y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis.
+/// @property {Number} y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @property {Color} y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @property {Number} y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @property {Color} y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @property {Color} y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @property {Number} y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @property {String} y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title.
+/// @property {List} y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis.
+/// @property {Color} y-axis-title-text-color [null] - Sets the color of a title on the Y-axis.
+/// @property {String} y-axis-title-text-style [null] - Sets the CSS font property for the title on the Y-axis.
+/// @property {Number} y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
+/// @property {Color} y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
+/// @property {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
+/// @see $default-palette
+$_light-category-chart: extend(
+ (
+ 'margin': (
+ expand-shorthand: (null)
+ ),
+
+ 'brushes': series,
+
+ 'marker-brushes': series,
+
+ 'negative-brushes': series,
+
+ 'outlines': series,
+
+ 'marker-outlines': series,
+
+ 'negative-outlines': series,
+
+ 'title-alignment': null,
+
+ 'title-margin': (
+ expand-shorthand: (null),
+ map-keys-prefix: 'title'
+ ),
+
+ 'title-text-color': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'title-text-style': null,
+
+ 'subtitle-margin': (
+ expand-shorthand: (null),
+ map-keys-prefix: 'subtitle'
+ ),
+
+ 'subtitle-alignment': null,
+
+ 'subtitle-text-color': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'subtitle-text-style': null,
+
+ 'thickness': null,
+
+ 'trend-line-brushes': series,
+
+ 'trend-line-thickness': null,
+
+ 'x-axis-label-margin': (
+ expand-shorthand: (null),
+ map-keys-prefix: 'x-axis-label'
+ ),
+
+ 'x-axis-label-text-color': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'x-axis-label-text-style': null,
+
+ 'x-axis-label-vertical-alignment': null,
+
+ 'x-axis-major-stroke': null,
+
+ 'x-axis-major-stroke-thickness': null,
+
+ 'x-axis-minor-stroke': null,
+
+ 'x-axis-minor-stroke-thickness': null,
+
+ 'x-axis-strip': null,
+
+ 'x-axis-stroke': null,
+
+ 'x-axis-stroke-thickness': null,
+
+ 'x-axis-tick-length': null,
+
+ 'x-axis-tick-stroke': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'x-axis-tick-stroke-thickness': null,
+
+ 'x-axis-title-alignment': null,
+
+ 'x-axis-title-margin': (
+ expand-shorthand: (null),
+ map-keys-prefix: 'x-axis-title'
+ ),
+
+ 'x-axis-title-text-color': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'x-axis-title-text-style': null,
+
+ 'y-axis-label-margin': (
+ expand-shorthand: (null),
+ map-keys-prefix: 'y-axis-label'
+ ),
+
+ 'y-axis-label-text-color': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'y-axis-label-text-style': null,
+
+ 'y-axis-label-vertical-alignment': null,
+
+ 'y-axis-major-stroke': null,
+
+ 'y-axis-major-stroke-thickness': null,
+
+ 'y-axis-minor-stroke': null,
+
+ 'y-axis-minor-stroke-thickness': null,
+
+ 'y-axis-strip': null,
+
+ 'y-axis-stroke': null,
+
+ 'y-axis-stroke-thickness': null,
+
+ 'y-axis-title-alignment': null,
+
+ 'y-axis-title-margin': (
+ expand-shorthand: (null),
+ map-keys-prefix: 'y-axis-title'
+ ),
+
+ 'y-axis-title-text-color': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'y-axis-title-text-style': null,
+
+ 'y-axis-tick-length': null,
+
+ 'y-axis-tick-stroke': (
+ igx-color: ('grays', 700),
+ hexrgba: #fff
+ ),
+
+ 'y-axis-tick-stroke-thickness': null
+ )
+);
+
+/// Generates a fluent category-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-category-chart
+$_fluent-category-chart: extend($_light-category-chart);
+
+/// Generates a bootstrap category-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-category-chart
+$_bootstrap-category-chart: extend($_light-category-chart);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss
new file mode 100644
index 00000000000..9e7774de3e4
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss
@@ -0,0 +1,69 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light base data chart schema.
+/// @type {Map}
+/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @property {Color} title-text-color [igx-color: ('grays', 900)] - Sets the color of the chart title.
+/// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @property {Color} subtitle-text-color [igx-color: ('grays', 600)] - Sets the color of the chart subtitle.
+/// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @property {List} marker-brushes [series] - Defines the palette from which automatically assigned marker brushes are selected.
+/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @property {List} marker-outlines [series] - Defines the palette from which automatically assigned marker outlines are selected.
+/// @property {Color} plot-area-background [igx-color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area.
+/// @property {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title.
+/// @property {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle.
+/// @see $default-palette
+$_light-data-chart: extend(
+ (
+ 'margin': null,
+
+ 'title-text-color': (
+ igx-color: ('grays', 900)
+ ),
+
+ 'title-margin': null,
+
+ 'subtitle-text-color': (
+ igx-color: ('grays', 600)
+ ),
+
+ 'subtitle-margin': null,
+
+ 'brushes': series,
+
+ 'marker-brushes': series,
+
+ 'outlines': series,
+
+ 'marker-outlines': series,
+
+ 'plot-area-background': (
+ igx-color: ('surface', 500)
+ ),
+
+ 'title-horizontal-alignment': null,
+
+ 'subtitle-horizontal-alignment': null,
+ )
+);
+
+/// Generates a fluent data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-data-chart
+$_fluent-data-chart: extend($_light-data-chart);
+
+/// Generates a bootstrap data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-data-chart
+$_bootstrap-data-chart: extend($_light-data-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss
new file mode 100644
index 00000000000..d537307f2d0
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss
@@ -0,0 +1,49 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light base doughnut chart schema.
+/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @property {Color} others-category-fill [null] - Sets the fill color for others category.
+/// @property {Number} others-category-opacity [null] - Sets the opacity for others category.
+/// @property {Color} others-category-stroke [null] - Sets the others category stroke color.
+/// @property {Number} others-category-stroke-thickness [null] - Sets the others category stroke thickness.
+/// @property {Color} selected-slice-fill [null] - Sets the fill color of the selected slice.
+/// @property {Number} selected-slice-opacity [null] - Sets the opacity of the selected slice.
+/// @property {Color} selected-slice-stroke [null] - Sets the stroke color of the selected slice.
+/// @property {Number} selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
+/// @type {Map}
+/// @see $default-palette
+$_light-doughnut-chart: extend(
+ (
+ 'brushes': series,
+ 'outlines': series,
+ 'others-category-fill': null,
+ 'others-category-opacity': null,
+ 'others-category-stroke': null,
+ 'others-category-stroke-thickness': null,
+ 'selected-slice-fill': null,
+ 'selected-slice-opacity': null,
+ 'selected-slice-stroke': null,
+ 'selected-slice-stroke-thickness': null,
+ )
+);
+
+/// Generates a fluent doughnut-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-doughnut-chart
+$_fluent-doughnut-chart: extend($_light-doughnut-chart);
+
+/// Generates a bootstrap doughnut-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-doughnut-chart
+$_bootstrap-doughnut-chart: extend($_light-doughnut-chart);
+
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss
new file mode 100644
index 00000000000..58aa4e44c8d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss
@@ -0,0 +1,141 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Dilyana Dimova
+////
+
+/// Generates a light base chart schema.
+/// @type {Map}
+/// @prop {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @prop {String} title-alignment [null] - The horizontal alignment to use for the title.
+/// @prop {Color} title-text-color [null] - Sets the color of the chart title.
+/// @prop {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @prop {Color} subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @prop {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @prop {String} subtitle-alignment [null] - Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
+/// @prop {List} brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
+/// @prop {List} marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @prop {List} negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
+/// @prop {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @prop {List} marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected.
+/// @prop {List} negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
+/// @prop {List} indicator-brushes [series] - Defines the brushes used for financial indicators.
+/// @prop {List} indicator-negative-brushes [series] - Defines the brushes used for negative elements in financial indicators.
+/// @prop {Number} indicator-thickness [null]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @prop {Color} plot-area-background [null]- Gets or sets the brush used as the background for the current Chart object's plot area.
+/// @prop {Number} thickness [null] - Sets the thickness for all series in a chart.
+/// @prop {Number} toolbar-height [null] - Sets the height of the tooolbar.
+/// @prop {List} trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart.
+/// @prop {Number} trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
+/// @prop {List} volume-brushes [series]- Defines the brushes to use for filling volume series in the volume pane.
+/// @prop {List} volume-outlines [series] - Defines the brushes to use for outlining volume series in the volume pane.
+/// @prop {Number} volume-thickness [null]- Defines the outline thickness of volume series in the volume pane.
+/// @prop {List} x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis.
+/// @prop {Color} x-axis-label-text-color [null] - Sets the color of labels on the X-axis.
+/// @prop {String} x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
+/// @prop {Color} x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @prop {Number} x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @prop {Color} x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @prop {Number} x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @prop {Color} x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @prop {Color} x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @prop {Number} x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @prop {Number} x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis.
+/// @prop {Color} x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis.
+/// @prop {Number} x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis.
+/// @prop {String} x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title.
+/// @prop {List} x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis.
+/// @prop {Color} x-axis-title-text-color [null] - Sets the color of the title on the X-axis.
+/// @prop {List} y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis.
+/// @prop {Color} y-axis-label-text-color [null] - Sets the color of labels on the Y-axis.
+/// @prop {String} y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels.
+/// @prop {Color} y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis.
+/// @prop {Number} y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @prop {Color} y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @prop {Number} y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @prop {Color} y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @prop {Color} y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @prop {Number} y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @prop {String} y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title.
+/// @prop {List} y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis.
+/// @prop {Color} y-axis-title-text-color [null] - Sets the color of a title on the Y-axis.
+/// @prop {Number} y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
+/// @prop {Color} y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
+/// @prop {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
+/// @prop {String} zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
+/// @prop {Number} zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
+/// @see $default-palette
+$_light-financial-chart: extend(
+ (
+ 'margin': null,
+ 'title-alignment': null,
+ 'title-text-color': null,
+ 'title-margin': null,
+ 'subtitle-text-color': null,
+ 'subtitle-margin': null,
+ 'subtitle-alignment': null,
+ 'brushes': series,
+ 'outlines': series,
+ 'marker-brushes': series,
+ 'marker-outlines': series,
+ 'plot-area-background': null,
+ 'indicator-brushes': series,
+ 'indicator-negative-brushes': series,
+ 'indicator-thickness': null,
+ 'negative-brushes': series,
+ 'negative-outlines': series,
+ 'overlay-brushes': series,
+ 'overlay-outlines': series,
+ 'overlay-thickness': series,
+ 'thickness': null,
+ 'toolbar-height': null,
+ 'trend-line-brushes': series,
+ 'trend-line-thickness': null,
+ 'volume-brushes': series,
+ 'volume-outlines': series,
+ 'volume-thickness': null,
+ 'x-axis-label-margin': null,
+ 'x-axis-label-text-color': null,
+ 'x-axis-label-vertical-alignment': null,
+ 'x-axis-major-stroke': null,
+ 'x-axis-major-stroke-thickness': null,
+ 'x-axis-minor-stroke': null,
+ 'x-axis-minor-stroke-thickness': null,
+ 'x-axis-strip': null,
+ 'x-axis-stroke': null,
+ 'x-axis-stroke-thickness': null,
+ 'x-axis-title-alignment': null,
+ 'x-axis-title-margin': null,
+ 'x-axis-title-text-color': null,
+ 'y-axis-label-margin': null,
+ 'y-axis-label-text-color': null,
+ 'y-axis-label-vertical-alignment': null,
+ 'y-axis-major-stroke': null,
+ 'y-axis-major-stroke-thickness': null,
+ 'y-axis-minor-stroke': null,
+ 'y-axis-minor-stroke-thickness': null,
+ 'y-axis-strip': null,
+ 'y-axis-stroke': null,
+ 'y-axis-stroke-thickness': null,
+ 'y-axis-title-alignment': null,
+ 'y-axis-title-margin': null,
+ 'y-axis-title-text-color': null,
+ 'zoom-slider-x-axis-major-stroke': null,
+ 'zoom-slider-x-axis-major-stroke-thickness': null
+ )
+);
+
+/// Generates a fluent financial-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-financial-chart
+$_fluent-financial-chart: extend($_light-financial-chart);
+
+/// Generates a bootstrap financial-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-financial-chart
+$_bootstrap-financial-chart: extend($_light-financial-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss
new file mode 100644
index 00000000000..0f7d2a239d6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss
@@ -0,0 +1,45 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Marin Popov
+////
+
+/// Generates a light funnel chart schema.
+/// @type {Map}
+/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @property {String} outer-label-alignment [null] - Sets which side of the chart the outer labels should appear.
+/// @property {Color} outer-label-text-color [null] - Sets the Color used for the outer labels.
+/// @property {String} outer-label-text-style [null] - Sets the text style for outer labels.
+/// @property {Color} outer-label-visibility [null] - Sets whether the outer labels are visible.
+/// @property {Number} outline-thickness [null] - Sets the thickness of outline around slices.
+/// @property {Color} text-color [null] - Sets the Color used for the inner labels.
+/// @property {String} text-style [null] - Sets the text style for inner labels.
+/// @see $default-palette
+$_light-funnel-chart: extend(
+ (
+ 'brushes': series,
+ 'outlines': series,
+ 'outer-label-alignment': null,
+ 'outer-label-text-color': null,
+ 'outer-label-text-style': null,
+ 'outer-label-visibility': null,
+ 'outline-thickness': null,
+ 'text-color': null,
+ 'text-style': null,
+ )
+);
+
+/// Generates a fluent funnel-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-funnel-chart
+$_fluent-funnel-chart: extend($_light-funnel-chart);
+
+/// Generates a bootstrap funnel-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-funnel-chart
+$_bootstrap-funnel-chart: extend($_light-funnel-chart);
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss
new file mode 100644
index 00000000000..1812c5c5707
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss
@@ -0,0 +1,155 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Silvia Ivanova
+////
+
+/// Generates a light gauge schema.
+/// @type {Map}
+/// @property {Color} backing-brush [(igx-color: 'surface', darken: 8%)] - Sets the color to use to fill the backing of the linear gauge.
+/// @property {Color} backing-outline [(igx-color: 'surface', darken: 8%)] - Sets the color to use for the outline of the backing.
+/// @property {Number} backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
+/// @property {Color} font-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the label font.
+/// @property {Color} minor-tick-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks.
+/// @property {Number} minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.
+/// @property {Color} needle-brush [(igx-color: 'primary')] - Sets the color to use for the needle element.
+/// @property {Color} needle-outline [(igx-color: 'surface')] - Sets the color to use for the outline of needle element.
+/// @property {Number} needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @property {List} range-brushes [series] - Sets a collection of colors to be used as the palette for linear gauge ranges.
+/// @property {List} range-outlines [series] - Sets a collection of colors to be used as the palette for linear gauge outlines.
+/// @property {Color} scale-brush [(igx-color: 'surface', darken: 8%)] - Sets the color to use to fill the scale of the linear gauge.
+/// @property {Color} tick-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks.
+/// @property {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @see $default-palette
+$_light-gauge: extend(
+ (
+ 'backing-brush': (
+ igx-color: 'surface',
+ darken: 5%
+ ),
+
+ 'backing-outline': (
+ igx-color: 'surface',
+ darken: 8%
+ ),
+
+ 'backing-stroke-thickness': null,
+
+ 'font-brush': (
+ igx-contrast-color: 'surface',
+ rgba: .62
+ ),
+
+ 'minor-tick-brush': (
+ igx-contrast-color: 'surface',
+ rgba: .62
+ ),
+
+ 'minor-tick-stroke-thickness': null,
+
+ 'needle-brush': (
+ igx-color: 'primary',
+ ),
+
+ 'needle-outline': (
+ igx-color: 'surface',
+ ),
+
+ 'needle-stroke-thickness': null,
+
+ 'range-brushes': series,
+
+ 'range-outlines': series,
+
+ 'scale-brush': (
+ igx-color: 'surface',
+ darken: 8%
+ ),
+
+ 'tick-brush': (
+ igx-contrast-color: 'surface',
+ rgba: .62
+ ),
+
+ 'tick-stroke-thickness': null
+ )
+);
+
+/// Generates a light linear gauge schema.
+/// @type {Map}
+/// @property {Number} needle-breadth [null] - Sets the needle breadth.
+/// @property {Number} needle-inner-base-width [null] - Sets the width of the needle's inner base.
+/// @property {Number} needle-inner-point-width [null] - Sets the width of the needle's inner point.
+/// @property {Number} needle-outer-base-width [null] - Sets the width of the needle's outer base.
+/// @property {Number} needle-outer-point-width [null] - Sets the width of the needle's outer point.
+/// @property {Color} scale-outline [(igx-color: 'surface', darken: 8%)] - Sets the color to use for the outline of the scale.
+/// @property {Number} scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.
+/// @requires {function} extend
+/// @requires $_light-gauge
+$_light-linear-gauge: extend(
+ $_light-gauge,
+ (
+ needle-breadth: null,
+
+ needle-inner-base-width: null,
+
+ needle-inner-point-width: null,
+
+ needle-outer-base-width: null,
+
+ needle-outer-point-width: null,
+
+ scale-outline: (
+ igx-color: 'surface',
+ darken: 8%
+ ),
+
+ scale-stroke-thickness: null,
+ )
+);
+
+/// Generates a light radial gauge schema.
+/// @type {Map}
+/// @property {Color} needle-pivot-brush [igx-color: 'primary'] - Sets the color of the needle pivot point.
+/// @property {Color} needle-pivot-outline [igx-color: 'surface'] - Sets the outline color of the needle pivot point.
+/// @requires {function} extend
+/// @requires $_light-gauge
+$_light-radial-gauge: extend(
+ $_light-gauge,
+ (
+ needle-pivot-brush: (
+ igx-color: 'primary',
+ ),
+
+ needle-pivot-outline: (
+ igx-color: 'surface',
+ )
+ )
+);
+
+/// Generates a light fluent gauge schemas.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-linear-gauge
+$_fluent-linear-gauge: extend($_light-linear-gauge);
+
+/// Generates a light fluent gauge schemas.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-radial-gauge
+$_fluent-radial-gauge: extend($_light-radial-gauge);
+
+/// Generates a light bootstrap gauge schemas.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-linear-gauge
+$_bootstrap-linear-gauge: extend($_light-linear-gauge);
+
+/// Generates a light bootstrap gauge schemas.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-radial-gauge
+$_bootstrap-radial-gauge: extend($_light-radial-gauge);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss
new file mode 100644
index 00000000000..093ceb4b367
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss
@@ -0,0 +1,32 @@
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light geo map schema.
+/// @type {Map}
+/// @prop {String} plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area.
+/// @see $default-palette
+$_light-geo-map: extend(
+ (
+ 'plot-area-background': (
+ igx-color: 'surface'
+ )
+ )
+);
+
+/// Generates a fluent geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-geo-map
+/// @see $_light-geo-map
+$_fluent-geo-map: extend($_light-geo-map);
+
+/// Generates a bootstrap geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-geo-map
+/// @see $_light-geo-map
+$_bootstrap-geo-map: extend($_light-geo-map);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss
new file mode 100644
index 00000000000..8ad34df0ddd
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss
@@ -0,0 +1,89 @@
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light graph schema.
+/// @type {Map}
+/// @prop {Color} backing-brush [(igx-color: 'surface', darken: 5%)] - Sets the brush to use to fill the backing of the bullet graph.
+/// @prop {Color} backing-outline [(igx-color: 'surface', darken: 8%)] - Sets the brush to use for the outline of the backing.
+/// @prop {Number} backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
+/// @prop {Color} font-brush [(igx-contrast-color: 'surface', rgba: .62)] - Sets the brush to use for the label font.
+/// @prop {Color} minor-tick-brush [(igx-contrast-color: 'surface', rgba: .62)] - Sets the brush to use for the minor tickmarks.
+/// @prop {Number} minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks.
+/// @prop {List} range-brushes [series] - Sets a collection of brushes to be used as the palette for bullet graph ranges.
+/// @prop {List} range-outlines [series] - Sets a collection of brushes to be used as the palette for bullet graph outlines.
+/// @prop {Color} scale-background-brush [(igx-color: 'primary')] - Sets the background brush for the scale.
+/// @prop {Color} scale-background-outline [(igx-color: 'surface')] - Sets the background outline for the scale.
+/// @prop {Number} scale-background-thickness [null] - Sets the background outline thickness for the scale.
+/// @prop {Number} target-value-breadth [null] - Sets the breadth of the target value element.
+/// @prop {Color} target-value-brush [igx-color('grays', 800)] - Sets the brush to use when rendering the fill of the comparative marker.
+/// @prop {Color} target-value-outline [null] - Sets the brush to use when rendering the outline of the target value.
+/// @prop {Number} target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar.
+/// @prop {Color} tick-brush [(igx-contrast-color: 'surface', rgba: .62)] - Sets the brush to use for the major tickmarks.
+/// @prop {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @prop {Color} value-brush [(igx-color: ('grays', 800))] - Sets the brush to use for the actual value element.
+/// @prop {Color} value-outline [null] - Sets the brush to use for the outline of actual value element.
+/// @prop {Number} value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @see $default-palette
+$_light-graph: extend(
+ (
+ 'backing-brush': (
+ igx-color: 'surface',
+ darken: 5%
+ ),
+ 'backing-outline': (
+ igx-color: 'surface',
+ darken: 8%
+ ),
+ 'backing-stroke-thickness': null,
+ 'font-brush': (
+ igx-contrast-color: 'surface',
+ rgba: .62
+ ),
+ 'minor-tick-brush': (
+ igx-contrast-color: 'surface',
+ rgba: .62
+ ),
+ 'minor-tick-thickness': null,
+ 'range-brushes': series,
+ 'range-outlines': series,
+ 'scale-background-brush': (
+ igx-color: 'primary',
+ ),
+ 'scale-background-outline': (
+ igx-color: 'surface',
+ ),
+ 'scale-background-thickness': null,
+ 'target-value-breadth': null,
+ 'target-value-brush': (
+ igx-color: ('grays', 800),
+ ),
+ 'target-value-outline': null,
+ 'target-value-thickness': null,
+ 'tick-brush': (
+ igx-contrast-color: 'surface',
+ rgba: .62
+ ),
+ 'tick-stroke-thickness': null,
+ 'value-brush': (
+ igx-color: ('grays', 800),
+ ),
+ 'value-outline': null,
+ 'value-stroke-thickness': null,
+ )
+);
+
+/// Generates a fluent graph schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-graph
+$_fluent-graph: extend($_light-graph);
+
+/// Generates a bootstrap graph schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-graph
+$_bootstrap-graph: extend($_light-graph);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
index 89dcd983175..3d854322316 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss
@@ -14,15 +14,22 @@
@import './calendar';
@import './card';
@import './carousel';
+@import './category-chart';
@import './checkbox';
@import './chip';
@import './column-hiding';
@import './combo';
@import './dialog';
+@import './data-chart';
+@import './doughnut-chart';
+@import './funnel-chart';
@import './date-range-picker';
@import './divider';
@import './drop-down';
@import './expansion-panel';
+@import './gauge';
+@import './financial-chart';
+@import './graph';
@import './grid';
@import './grid-filtering';
@import './pagination';
@@ -34,13 +41,17 @@
@import './list';
@import './navbar';
@import './navdrawer';
+@import './geo-map';
@import './overlay';
+@import './pie-chart';
@import './progress';
@import './radio';
@import './ripple';
@import './scrollbar';
+@import './shape-chart';
@import './slider';
@import './snackbar';
+@import './sparkline';
@import './splitter';
@import './switch';
@import './tabs';
@@ -61,6 +72,10 @@
/// @property {Map} igx-calendar [$_light-calendar]
/// @property {Map} igx-card [$_light-card]
/// @property {Map} igx-carousel [$_light-carousel]
+/// @property {Map} category-chart [$_light-category-chart]
+/// @property {Map} data-chart [$_light-data-chart]
+/// @property {Map} doughnut-chart [$_light-dough-chart]
+/// @property {Map} funnel-chart [$_light-funnel-chart]
/// @property {Map} igx-checkbox [$_light-checkbox]
/// @property {Map} igx-chip [$_light-chip]
/// @property {Map} igx-column-hiding [$_light-column-hiding]
@@ -70,6 +85,10 @@
/// @property {Map} igx-divider [$_light-divider]
/// @property {Map} igx-drop-down [$_light-drop-down]
/// @property {Map} igx-expansion-panel [$_light-expansion-panel]
+/// @property {Map} linear-gauge [$_light-linear-gauge]
+/// @property {Map} radial-gauge [$_light-radial-gauge]
+/// @property {Map} financial-chart [$_light-financial-chart]
+/// @property {Map} bullet-graph [$_light-graph]
/// @property {Map} igx-grid [$_light-grid]
/// @property {Map} igx-grid-filtering [$_light-grid-filtering]
/// @property {Map} igx-paginator [$_light-pagination]
@@ -79,16 +98,20 @@
/// @property {Map} igx-icon [$_light-icon]
/// @property {Map} igx-input-group [$_light-input-group]
/// @property {Map} igx-list [$_light-list]
+/// @property {Map} geo-map [$_light-geo-map]
/// @property {Map} igx-navbar [$_light-navbar]
/// @property {Map} igx-navdrawer [$_light-navdrawer]
/// @property {Map} igx-overlay [$_light-overlay]
+/// @property {Map} pie-chart [$_light-pie-chart]
/// @property {Map} igx-progress-linear [$_light-progress-linear]
/// @property {Map} igx-progress-circular [$_light-progress-circular]
/// @property {Map} igx-radio [$_light-radio]
/// @property {Map} igx-ripple [$_light-ripple]
/// @property {Map} igx-scrollbar [$_light-scrollbar]
+/// @property {Map} shape-chart [$_light-shape-chart]
/// @property {Map} igx-slider [$_light-slider]
/// @property {Map} igx-snackbar [$_light-snackbar]
+/// @property {Map} sparkline [$_light-sparkline]
/// @property {Map} igx-splitter [$_light-splitter]
/// @property {Map} igx-switch [$_light-switch]
/// @property {Map} igx-tabs [$_light-tabs]
@@ -106,6 +129,10 @@ $light-schema: (
igx-calendar: $_light-calendar,
igx-card: $_light-card,
igx-carousel: $_light-carousel,
+ category-chart: $_light-category-chart,
+ data-chart: $_light-data-chart,
+ doughnut-chart: $_light-doughnut-chart,
+ funnel-chart: $_light-funnel-chart,
igx-checkbox: $_light-checkbox,
igx-chip: $_light-chip,
igx-column-hiding: $_light-column-hiding,
@@ -115,6 +142,10 @@ $light-schema: (
igx-divider: $_light-divider,
igx-drop-down: $_light-drop-down,
igx-expansion-panel: $_light-expansion-panel,
+ linear-gauge: $_light-linear-gauge,
+ radial-gauge: $_light-radial-gauge,
+ financial-chart: $_light-financial-chart,
+ bullet-graph: $_light-graph,
igx-grid: $_light-grid,
igx-grid-filtering: $_light-grid-filtering,
igx-paginator: $_light-pagination,
@@ -124,16 +155,20 @@ $light-schema: (
igx-icon: $_light-icon,
igx-input-group: $_light-input-group,
igx-list: $_light-list,
+ geo-map: $_light-geo-map,
igx-navbar: $_light-navbar,
igx-navdrawer: $_light-navdrawer,
igx-overlay: $_light-overlay,
igx-linear-bar: $_light-progress-linear,
igx-circular-bar: $_light-progress-circular,
+ pie-chart: $_light-pie-chart,
igx-radio: $_light-radio,
igx-ripple: $_light-ripple,
+ shape-chart: $_light-shape-chart,
igx-scrollbar: $_light-scrollbar,
igx-slider: $_light-slider,
igx-snackbar: $_light-snackbar,
+ sparkline: $_light-sparkline,
igx-splitter: $_light-splitter,
igx-switch: $_light-switch,
igx-tabs: $_light-tabs,
@@ -154,15 +189,23 @@ $light-fluent-schema: (
igx-calendar: $_fluent-calendar,
igx-card: $_fluent-card,
igx-carousel: $_fluent-carousel,
+ category-chart: $_fluent-category-chart,
igx-checkbox: $_fluent-checkbox,
igx-chip: $_fluent-chip,
igx-column-hiding: $_fluent-column-hiding,
igx-combo: $_fluent-combo,
igx-dialog: $_fluent-dialog,
+ data-chart: $_fluent-data-chart,
+ doughnut-chart: $_fluent-doughnut-chart,
+ funnel-chart: $_fluent-funnel-chart,
igx-date-range: $_fluent-date-range-picker,
igx-divider: $_fluent-divider,
igx-drop-down: $_fluent-drop-down,
igx-expansion-panel: $_fluent-expansion-panel,
+ linear-gauge: $_fluent-linear-gauge,
+ radial-gauge: $_fluent-radial-gauge,
+ financial-chart: $_fluent-financial-chart,
+ bullet-graph: $_fluent-graph,
igx-grid: $_fluent-grid,
igx-grid-filtering: $_fluent-grid-filtering,
igx-paginator: $_fluent-pagination,
@@ -172,16 +215,20 @@ $light-fluent-schema: (
igx-icon: $_fluent-icon,
igx-input-group: $_fluent-input-group,
igx-list: $_fluent-list,
+ geo-map: $_fluent-geo-map,
igx-navbar: $_fluent-navbar,
igx-navdrawer: $_fluent-navdrawer,
igx-overlay: $_fluent-overlay,
igx-linear-bar: $_fluent-progress-linear,
igx-circular-bar: $_fluent-progress-circular,
+ pie-chart: $_fluent-pie-chart,
igx-radio: $_fluent-radio,
igx-ripple: $_fluent-ripple,
+ shape-chart: $_fluent-shape-chart,
igx-scrollbar: $_fluent-scrollbar,
igx-slider: $_fluent-slider,
igx-snackbar: $_fluent-snackbar,
+ sparkline: $_fluent-sparkline,
igx-splitter: $_fluent-splitter,
igx-switch: $_fluent-switch,
igx-tabs: $_fluent-tabs,
@@ -202,15 +249,23 @@ $light-bootstrap-schema: (
igx-calendar: $_bootstrap-calendar,
igx-card: $_bootstrap-card,
igx-carousel: $_bootstrap-carousel,
+ category-chart: $_bootstrap-category-chart,
igx-checkbox: $_bootstrap-checkbox,
igx-chip: $_bootstrap-chip,
igx-column-hiding: $_bootstrap-column-hiding,
igx-combo: $_bootstrap-combo,
igx-dialog: $_bootstrap-dialog,
+ data-chart: $_bootstrap-data-chart,
+ doughnut-chart: $_bootstrap-doughnut-chart,
+ funnel-chart: $_bootstrap-funnel-chart,
igx-date-range: $_bootstrap-date-range-picker,
igx-divider: $_bootstrap-divider,
igx-drop-down: $_bootstrap-drop-down,
igx-expansion-panel: $_bootstrap-expansion-panel,
+ linear-gauge: $_bootstrap-linear-gauge,
+ radial-gauge: $_bootstrap-radial-gauge,
+ financial-chart: $_bootstrap-financial-chart,
+ bullet-graph: $_bootstrap-graph,
igx-grid: $_bootstrap-grid,
igx-grid-filtering: $_bootstrap-grid-filtering,
igx-paginator: $_bootstrap-pagination,
@@ -220,16 +275,20 @@ $light-bootstrap-schema: (
igx-icon: $_bootstrap-icon,
igx-input-group: $_bootstrap-input-group,
igx-list: $_bootstrap-list,
+ geo-map: $_bootstrap-geo-map,
igx-navbar: $_bootstrap-navbar,
igx-navdrawer: $_bootstrap-navdrawer,
igx-overlay: $_bootstrap-overlay,
igx-linear-bar: $_bootstrap-progress-linear,
igx-circular-bar: $_bootstrap-progress-circular,
+ pie-chart: $_bootstrap-pie-chart,
igx-radio: $_bootstrap-radio,
igx-ripple: $_bootstrap-ripple,
+ shape-chart: $_bootstrap-shape-chart,
igx-scrollbar: $_bootstrap-scrollbar,
igx-slider: $_bootstrap-slider,
igx-snackbar: $_bootstrap-snackbar,
+ sparkline: $_bootstrap-sparkline,
igx-splitter: $_bootstrap-splitter,
igx-switch: $_bootstrap-switch,
igx-tabs: $_bootstrap-tabs,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss
new file mode 100644
index 00000000000..78ce0fb2d4e
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss
@@ -0,0 +1,50 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light pie chart schema.
+/// @type {Map}
+/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @property {Number} label-extent [null] - Sets the pixel amount by which the labels are offset from the edge of the slices.
+/// @property {Color} label-inner-color [null] - Sets the color for labels rendered inside of the pie chart.
+/// @property {Color} label-outer-color [null] - Sets the color for labels rendered outside of the pie chart.
+/// @property {String} labels-position [null] - Sets the position of chart labels. Valid values are: 'none', 'center', 'insideEnd', 'outsideEnd', and 'bestFit'.
+/// @property {Number} leader-line-margin [null] - Sets the margin between a label and the end of its leader line.
+/// @property {String} leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
+/// @property {String} leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
+/// @property {Number} radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1.
+/// @see $default-palette
+$_light-pie-chart: extend(
+ (
+ 'brushes': series,
+ 'outlines': series,
+ 'label-extent': null,
+ 'label-inner-color': null,
+ 'label-outer-color': null,
+ 'labels-position': null,
+ 'leader-line-margin': null,
+ 'leader-line-type': null,
+ 'leader-line-visibility': null,
+ 'radius-factor': null,
+ )
+);
+
+/// Generates a fluent pie chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-pie-chart
+/// @see $_light-pie-chart
+$_fluent-pie-chart: extend($_light-pie-chart);
+
+/// Generates a bootstrap pie chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-pie-chart
+/// @see $_light-pie-chart
+$_bootstrap-pie-chart: extend($_light-pie-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss
new file mode 100644
index 00000000000..7b625911a2d
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss
@@ -0,0 +1,116 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light base shape chart schema.
+/// @type {Map}
+/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @property {Color} title-alignment [null] - Sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
+/// @property {Color} title-text-color [null] - Sets the color of the chart title.
+/// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @property {String} subtitle-alignment [null] - Sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
+/// @property {Color} subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @property {List} marker-brushes [series] - Sets the palette of brushes used for rendering fill area of data point markers.
+/// @property {List} outlines [series] - Sets the palette of brushes to use for outlines on the chart series.
+/// @property {List} marker-outlines [series] - Sets the palette of brushes used for rendering outlines of data point markers.
+///
+/// @property {Number} thickness [null] - Sets the thickness for all series in this chart.
+/// @property {List} trend-line-brushes [series] - Sets the palette of brushes to used for coloring trend lines in this chart.
+/// @property {Number} trend-line-thickness [null] - Sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble.
+/// @property {List} x-axis-label-margin [null] - Sets the margin of labels on the X-axis.
+/// @property {Color} x-axis-label-text-color [null] - Sets color of labels on the X-axis.
+/// @property {String} x-axis-label-vertical-alignment [null] - Sets Vertical alignment of X-axis labels.
+/// @property {Color} x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @property {Number} x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @property {Color} x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @property {Number} x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @property {Color} x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @property {Color} x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @property {Number} x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @property {String} x-axis-title-alignment [null] - Sets Horizontal alignment of the X-axis title.
+/// @property {Color} x-axis-title-color [null] - Sets color of title on the X-axis.
+/// @property {List} x-axis-title-margin [null] - Sets the margin around the title on the X-axis.
+/// @property {List} y-axis-label-margin [null] - Sets the margin of labels on the Y-axis.
+/// @property {Color} y-axis-label-text-color [null] - Sets color of labels on the Y-axis.
+/// @property {String} y-axis-label-vertical-alignment [null] - Sets Vertical alignment of Y-axis labels.
+/// @property {Color} y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the Y-axis.
+/// @property {Number} y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @property {Color} y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @property {Number} y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @property {Color} y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @property {Color} y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @property {Number} y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @property {String} y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
+/// @property {Color} y-axis-title-color [null] - Sets color of title on the Y-axis.
+/// @property {List} y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
+/// @see $default-palette
+$_light-shape-chart: extend(
+ (
+ 'margin': null,
+ 'title-alignment': null,
+
+ 'title-text-color': (
+ igx-color: ('grays', 900)
+ ),
+ 'title-margin': null,
+ 'subtitle-alignment': null,
+
+ 'subtitle-text-color': (
+ igx-color: ('grays', 600)
+ ),
+
+ 'subtitle-margin': null,
+ 'brushes': series,
+ 'marker-brushes': series,
+ 'outlines': series,
+ 'marker-outlines': series,
+ 'thickness': null,
+ 'trend-line-brushes': series,
+ 'trend-line-thickness': null,
+ 'x-axis-label-margin': null,
+ 'x-axis-label-text-color': null,
+ 'x-axis-label-vertical-alignment': null,
+ 'x-axis-major-stroke': null,
+ 'x-axis-major-stroke-thickness': null,
+ 'x-axis-minor-stroke': null,
+ 'x-axis-minor-stroke-thickness': null,
+ 'x-axis-strip': null,
+ 'x-axis-stroke': null,
+ 'x-axis-stroke-thickness': null,
+ 'x-axis-title-alignment': null,
+ 'x-axis-title-color': null,
+ 'x-axis-title-margin': null,
+ 'y-axis-label-margin': null,
+ 'y-axis-label-text-color': null,
+ 'y-axis-label-vertical-alignment': null,
+ 'y-axis-major-stroke': null,
+ 'y-axis-major-stroke-thickness': null,
+ 'y-axis-minor-stroke': null,
+ 'y-axis-minor-stroke-thickness': null,
+ 'y-axis-strip': null,
+ 'y-axis-stroke': null,
+ 'y-axis-stroke-thickness': null,
+ 'y-axis-title-alignment': null,
+ 'y-axis-title-color': null,
+ 'y-axis-title-margin': null,
+ )
+);
+
+/// Generates a fluent shaep-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-shape-chart
+$_fluent-shape-chart: extend($_light-shape-chart);
+
+/// Generates a bootstrap shape-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-shape-chart
+$_bootstrap-shape-chart: extend($_light-shape-chart);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss
new file mode 100644
index 00000000000..e92cf45e1e7
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss
@@ -0,0 +1,70 @@
+// @import '../shape/chart';
+
+////
+/// @group schemas
+/// @access private
+/// @author Simeon Simeonoff
+////
+
+/// Generates a light base sparkline schema.
+/// @type {Map}
+/// @prop {Color} brush [igx-color: ('primary', 500)] - Sets the sparkline brush.
+/// @prop {Number} line-thickness [null] - Sets the line thickness of the sparkline.
+/// @prop {Color} marker-brush [null] - Sets the marker brush of the sparkline.
+/// @prop {Color} marker-size [null] - Sets the marker size of the sparkline.
+/// @prop {Color} first-marker-brush [null] - Sets the first marker brush of the sparkline.
+/// @prop {Number} first-marker-size [null] - Sets the first marker size of the sparkline.
+/// @prop {Color} last-marker-brush [null] - Sets the last marker brush of the sparkline.
+/// @prop {Number} last-marker-size [null] - Sets the last marker size of the sparkline.
+/// @prop {Color} low-marker-brush [null] - Sets the low marker brush of the sparkline.
+/// @prop {Number} low-marker-size [null] - Sets the low marker size of the sparkline.
+/// @prop {Color} high-marker-brush [null] - Sets the high marker brush of the sparkline.
+/// @prop {Number} high-marker-size [null] - Sets the high marker size of the sparkline.
+/// @prop {Color} negative-brush [null] - Sets the negative brush of the sparkline.
+/// @prop {Color} negative-marker-brush [null] - Sets the negative marker brush of the sparkline.
+/// @prop {Number} negative marker-size [null] - Sets the negative marker size of the sparkline.
+/// @prop {Color} trend-line-brush [null] - Sets the trendline brush of the sparkline.
+/// @prop {Color} trend-line-thickness [null] - Sets the thickness of the sparkline's trendline.
+/// @prop {Color} horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
+/// @prop {Color} vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
+/// @prop {Color} normal-range-fill [null] - Sets the normal range brush of the sparkline.
+/// @see $default-palette
+$_light-sparkline: extend(
+ (
+ 'brush': (
+ igx-color: ('primary', 500)
+ ),
+ 'line-thickness': null,
+ 'marker-brush': null,
+ 'marker-size': null,
+ 'first-marker-brush': null,
+ 'first-marker-size': null,
+ 'last-marker-brush': null,
+ 'last-marker-size': null,
+ 'low-marker-brush': null,
+ 'low-marker-size': null,
+ 'high-marker-brush': null,
+ 'high-marker-size': null,
+ 'negative-brush': null,
+ 'negative-marker-brush': null,
+ 'negative-marker-size': null,
+ 'trend-line-brush': null,
+ 'trend-line-thickness': null,
+ 'horizontal-axis-brush': null,
+ 'vertical-axis-brush': null,
+ 'normal-range-fill': null,
+ )
+);
+
+/// Generates a fluent sparkline schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-sparkline
+$_fluent-sparkline: extend($_light-sparkline);
+
+/// Generates a bootstrap sparkline schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires $_light-sparkline
+$_bootstrap-sparkline: extend($_light-sparkline);
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss
index bf87a32c5ff..5c26a102103 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss
@@ -233,3 +233,29 @@
}
@content;
}
+
+/// Transforms a type style map into a font style rule assigned to a css variable.
+/// @param {String} $name - The custom CSS variable name.
+/// @param {Map} $type-style - A type style map reference as produces by igx-type-style.
+/// @param {String} $prefix [null] - Optional prefix.
+/// @example scss Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.
+/// $h1-style: igx-type-scale-category($type-scale, 'h1');
+/// @include igx-font-var('h1-font', $h1-style);
+@mixin igx-font-var($name, $type-style, $prefix: null) {
+ $fs: map-get($type-style, 'font-style');
+ $fz: map-get($type-style, 'font-size');
+ $fw: map-get($type-style, 'font-weight');
+ $lh: map-get($type-style, 'line-height');
+
+ // unused for now
+ $tt: map-get($type-style, 'text-transform');
+ $ls: map-get($type-style, 'letter-spacing');
+ $mt: map-get($type-style, 'margin-top');
+ $mb: map-get($type-style, 'margin-bottom');
+
+ @include igx-css-vars((
+ 'name': $prefix,
+ #{$name}: #{$fs $fw $fz}/#{$lh} inherit,
+ ));
+}
+
diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
index 624e1cc7353..1288c68c6c5 100644
--- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss
@@ -9,21 +9,27 @@
@import '../components/button/button-theme';
@import '../components/calendar/calendar-theme';
@import '../components/card/card-theme';
+@import '../components/charts/data-chart-theme';
+@import '../components/charts/financial-chart-theme';
+@import '../components/charts/funnel-chart-theme';
+@import '../components/charts/gauge-theme';
+@import '../components/charts/graph-theme';
+@import '../components/charts/shape-chart-theme';
@import '../components/checkbox/checkbox-theme';
@import '../components/chip/chip-theme';
@import '../components/column-hiding/column-hiding-theme';
+@import '../components/date-range-picker/date-range-picker-theme';
@import '../components/dialog/dialog-theme';
@import '../components/drop-down/drop-down-theme';
-@import '../components/date-range-picker/date-range-picker-theme';
@import '../components/expansion-panel/expansion-panel-theme';
@import '../components/grid/excel-filtering-theme';
@import '../components/input/input-group-theme';
+@import '../components/list/list-theme';
@import '../components/navbar/navbar-theme';
@import '../components/navdrawer/navdrawer-theme';
-@import '../components/list/list-theme';
@import '../components/radio/radio-theme';
-@import '../components/snackbar/snackbar-theme';
@import '../components/slider/slider-theme';
+@import '../components/snackbar/snackbar-theme';
@import '../components/switch/switch-theme';
@import '../components/tabs/tabs-theme';
@import '../components/time-picker/time-picker-theme';
@@ -82,27 +88,33 @@
}
// Call the individual component styles with the type scale
- @include igx-button-typography($type-scale);
- @include igx-bottom-nav-typography($type-scale);
+ @include _excel-filtering-typography($type-scale);
@include igx-banner-typography($type-scale);
+ @include igx-bottom-nav-typography($type-scale);
+ @include igx-button-typography($type-scale);
@include igx-calendar-typography($type-scale);
@include igx-card-typography($type-scale);
@include igx-checkbox-typography($type-scale);
@include igx-chip-typography($type-scale);
@include igx-column-hiding-typography($type-scale);
+ @include igx-data-chart-typography($type-scale);
+ @include igx-date-range-typography($type-scale);
@include igx-dialog-typography($type-scale);
@include igx-drop-down-typography($type-scale);
- @include igx-date-range-typography($type-scale);
@include igx-expansion-panel-typography($type-scale);
- @include _excel-filtering-typography($type-scale);
+ @include igx-financial-chart-typography($type-scale);
+ @include igx-funnel-chart-typography($type-scale);
+ @include igx-gauge-typography();
+ @include igx-graph-typography();
@include igx-input-group-typography($type-scale);
+ @include igx-list-typography($type-scale);
@include igx-navbar-typography($type-scale);
@include igx-navdrawer-typography($type-scale);
- @include igx-list-typography($type-scale);
@include igx-radio-typography($type-scale);
+ @include igx-shape-chart-typography($type-scale);
+ @include igx-slider-typography($type-scale);
@include igx-snackbar-typography($type-scale);
@include igx-switch-typography($type-scale);
- @include igx-slider-typography($type-scale);
@include igx-tabs-typography($type-scale);
@include igx-time-picker-typography($type-scale);
@include igx-toast-typography($type-scale);
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
index 6863d243d62..080857217f5 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -5721,8 +5721,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
* ```
*/
public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) {
- if (rowIndex < 0 || rowIndex > this.dataView.length - 1
- || (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
+ const totalItems = (this as any).totalItemCount ?? this.dataView.length - 1;
+ if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1
+ && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) {
return;
}
if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) {
@@ -5820,9 +5821,24 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
private executeCallback(rowIndex, visibleColIndex = -1, cb: Function = null) {
if (!cb) { return; }
+ let row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
+ if (!row) {
+ if ((this as any).totalItemCount) {
+ this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => {
+ this.cdr.detectChanges();
+ row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
+ const cbArgs = this.getNavigationArguments(row, visibleColIndex);
+ cb(cbArgs);
+ });
+ }
+ return;
+ }
+ const args = this.getNavigationArguments(row, visibleColIndex);
+ cb(args);
+ }
+
+ private getNavigationArguments(row, visibleColIndex) {
let targetType, target;
- const row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex);
- if (!row) { return; }
switch (row.nativeElement.tagName.toLowerCase()) {
case 'igx-grid-groupby-row':
targetType = GridKeydownTargetType.groupRow;
@@ -5842,8 +5858,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
target = visibleColIndex !== -1 ? row.cells.find(c => c.visibleColumnIndex === visibleColIndex) : row.cells.first;
break;
}
- const args = { targetType: targetType, target: target };
- cb(args);
+ return { targetType: targetType, target: target };
}
private getNextDataRowIndex(currentRowIndex, previous = false): number {
diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
index bbb73c421c3..d1cc4c263d7 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
@@ -359,6 +359,7 @@ export class IgxGridNavigationService {
}
protected findLastDataRowIndex(): number {
+ if ((this.grid as any).totalItemCount) { return (this.grid as any).totalItemCount - 1; }
let i = this.grid.dataView.length;
while (i--) {
if (this.isDataRow(i)) {
@@ -376,7 +377,8 @@ export class IgxGridNavigationService {
}
protected isValidPosition(rowIndex: number, colIndex: number): boolean {
- if (rowIndex < 0 || colIndex < 0 || this.grid.dataView.length - 1 < rowIndex || this.lastColumnIndex < colIndex) {
+ const length = (this.grid as any).totalItemCount ?? this.grid.dataView.length;
+ if (rowIndex < 0 || colIndex < 0 || length - 1 < rowIndex || this.lastColumnIndex < colIndex) {
return false;
}
return this.activeNode.column !== colIndex && !this.isDataRow(rowIndex, true) ? false : true;
diff --git a/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts b/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts
index 5d649104366..2146bff54d9 100644
--- a/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts
+++ b/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts
@@ -1,7 +1,7 @@
import { Component, ViewChild, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';
import { IgxGridComponent } from 'igniteui-angular';
import { debounceTime } from 'rxjs/operators';
-import { RemoteVirtService } from '../shared/remote.service - Copy';
+import { RemoteVirtService } from '../shared/remoteProductsData.service';
@Component({
selector: 'app-grid-remote-virtualization-scroll',
diff --git a/src/app/shared/remote.service - Copy.ts b/src/app/shared/remoteProductsData.service.ts
similarity index 100%
rename from src/app/shared/remote.service - Copy.ts
rename to src/app/shared/remoteProductsData.service.ts