Additional changed on charts to resolve previous UX comments

Mariela Tihova · Mariela Tihova · commit 600dd3121a0c · 2025-08-14T15:09:13.000+03:00
diff --git a/projects/charts/bar-chart/src/app/app.component.scss b/projects/charts/bar-chart/src/app/app.component.scss
@@ -5,7 +5,7 @@
   $font-family: $fluent-typeface,
   $type-scale: $fluent-type-scale
 );
-@include theme($palette: $light-fluent-palette, $schema: $light-fluent-schema);
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {
diff --git a/projects/charts/bar-chart/src/app/bar-chart-sample/bar-chart-sample.component.scss b/projects/charts/bar-chart/src/app/bar-chart-sample/bar-chart-sample.component.scss
@@ -10,3 +10,7 @@
 igx-data-chart {
   height: 100%;
 }
+
+.legend-title {
+  margin-left: 13px;
+}
diff --git a/projects/charts/column-chart/src/app/app.component.scss b/projects/charts/column-chart/src/app/app.component.scss
@@ -2,7 +2,7 @@
 
 @include core();
 @include typography();
-@include theme($light-material-palette);
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {
diff --git a/projects/charts/column-chart/src/app/column-chart-sample/column-chart-sample.component.html b/projects/charts/column-chart/src/app/column-chart-sample/column-chart-sample.component.html
@@ -1,9 +1,14 @@
-@defer {
+<div class="container">
+  <div class="legend-title">Highest Grossing Movie Franchises</div>
+  <div class="legend">
+    <igx-legend name="legend" #legend orientation="Horizontal"> </igx-legend>
+  </div>
   <igx-category-chart
     name="chart"
     #chart
     width="100%"
     height="100%"
+    [legend]="legend"
     [dataSource]="chartData"
     chartType="column"
     yAxisTitle="Temperature in °C"
@@ -16,4 +21,5 @@
     [isVerticalZoomEnabled]="false"
   >
   </igx-category-chart>
-}
+</div>
+
diff --git a/projects/charts/column-chart/src/app/column-chart-sample/column-chart-sample.component.scss b/projects/charts/column-chart/src/app/column-chart-sample/column-chart-sample.component.scss
@@ -1,6 +1,16 @@
 :host {
   display: block;
-  height: 100%;
   width: 100%;
+  height: 100%;
   padding: 35px 16px 75px 16px;
+}
+
+.container,
+.chart-wrapper,
+igx-category-chart {
+  height: 100%;
+}
+
+.legend-title {
+  margin-left: 13px;
 }
diff --git a/projects/charts/column-chart/src/app/column-chart-sample/column-chart-sample.component.ts b/projects/charts/column-chart/src/app/column-chart-sample/column-chart-sample.component.ts
@@ -1,7 +1,7 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { THEME_TOKEN, ThemeToken } from 'igniteui-angular';
-import { IgxCategoryChartModule } from 'igniteui-angular-charts';
+import { IgxCategoryChartModule, IgxLegendModule } from 'igniteui-angular-charts';
 
 @Component({
   selector: 'app-column-chart-sample',
@@ -16,6 +16,7 @@ import { IgxCategoryChartModule } from 'igniteui-angular-charts';
   ],
   imports: [
     CommonModule,
+    IgxLegendModule,
     IgxCategoryChartModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/projects/charts/line-chart/src/app/app.component.scss b/projects/charts/line-chart/src/app/app.component.scss
@@ -5,10 +5,8 @@
   $font-family: $bootstrap-typeface,
   $type-scale: $bootstrap-type-scale
 );
-@include theme(
-  $palette: $light-bootstrap-palette,
-  $schema: $light-bootstrap-schema
-);
+
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {
diff --git a/projects/charts/line-chart/src/app/line-chart-sample/line-chart-sample.component.scss b/projects/charts/line-chart/src/app/line-chart-sample/line-chart-sample.component.scss
@@ -10,3 +10,7 @@
 igx-category-chart {
   height: 100%;
 }
+
+.legend-title {
+  margin-left: 13px;
+}
diff --git a/projects/charts/pie-chart/src/app/app.component.scss b/projects/charts/pie-chart/src/app/app.component.scss
@@ -2,7 +2,7 @@
 
 @include core();
 @include typography($font-family: $indigo-typeface, $type-scale: $indigo-type-scale);
-@include indigo-light-theme($light-indigo-palette);
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {
diff --git a/projects/charts/pie-chart/src/app/pie-chart-sample/pie-chart-sample.component.html b/projects/charts/pie-chart/src/app/pie-chart-sample/pie-chart-sample.component.html
@@ -25,6 +25,11 @@
 
     <div class="chart-wrapper">
       <div class="pie-chart-variant">PIE CHART EXPLOSION</div>
+      <div class="legend-title">Global Electricity Demand by Energy Use</div>
+      <div class="legend">
+        <igx-item-legend name="legend2" #legend2 orientation="Horizontal">
+        </igx-item-legend>
+      </div>
       <div class="chart2">
         <igx-pie-chart
           #chart2
@@ -36,6 +41,7 @@
           labelsPosition="OutsideEnd"
           labelExtent="30"
           explodedSlices="3"
+          [legend]="legend2"
         >
         </igx-pie-chart>
       </div>
diff --git a/projects/charts/polar-chart/src/app/app.component.scss b/projects/charts/polar-chart/src/app/app.component.scss
@@ -5,10 +5,7 @@
   $font-family: $fluent-typeface,
   $type-scale: $fluent-type-scale
 );
-@include theme(
-  $palette: $light-fluent-palette,
-  $schema: $light-fluent-schema
-);
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {
@@ -17,4 +14,8 @@ body {
 
 .outer-wrapper {
   height: 100%;
+}
+
+.legend-title {
+  margin-left: 13px;
 }
diff --git a/projects/charts/polar-chart/src/app/polar-chart-sample/polar-chart-sample.component.html b/projects/charts/polar-chart/src/app/polar-chart-sample/polar-chart-sample.component.html
@@ -44,6 +44,7 @@
             angleMemberPath="direction"
             radiusMemberPath="windSpeed"
             [showDefaultTooltip]="true"
+            areaFillOpacity="0.3"
             thickness="1"
             title="Wind Speed"
             markerType="Circle">
@@ -57,6 +58,7 @@
             angleMemberPath="direction"
             radiusMemberPath="boatSpeed"
             [showDefaultTooltip]="true"
+            areaFillOpacity="0.3"
             thickness="1"
             title="Boat Speed"
             markerType="Circle">
diff --git a/projects/charts/step-chart/src/app/app.component.scss b/projects/charts/step-chart/src/app/app.component.scss
@@ -2,7 +2,7 @@
 
 @include core();
 @include typography();
-@include theme($light-material-palette);
+@include theme($palette: $light-material-palette, $schema: $light-material-schema);
 
 html,
 body {
diff --git a/projects/charts/step-chart/src/app/step-chart-sample/step-chart-sample.component.scss b/projects/charts/step-chart/src/app/step-chart-sample/step-chart-sample.component.scss
@@ -10,4 +10,8 @@
 igx-category-chart {
   height: 100%;
   --y-axis-label-text-color: black;
+}
+
+.legend-title {
+  margin-left: 13px;
 }
diff --git a/src/app/views/home/home.component.ts b/src/app/views/home/home.component.ts
@@ -124,23 +124,23 @@ export class HomeComponent {
     }],
     ['charts/bar-chart', {
       title: "Bar Chart",
-      theme: "Fluent",
+      theme: "Material",
       themeMode: 'Light',
       content: "Quickly compare frequency, count, total, or average of data in different categories",
       moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/bar-chart",
       downloadLink: ""
     }],
     ['charts/line-chart', {
       title: "Line Chart",
-      theme: "Bootstrap",
+      theme: "Material",
       themeMode: 'Light',
       content: "Show trends and perform comparative analysis of one or more quantities over a period of time",
       moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/line-chart",
       downloadLink: ""
     }],
     ['charts/pie-chart', {
       title: "Pie Chart",
-      theme: "Indigo",
+      theme: "Material",
       themeMode: 'Light',
       content: "Part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value.",
       moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/pie-chart",
@@ -156,7 +156,7 @@ export class HomeComponent {
     }],
     ['charts/polar-chart', {
       title: "Polar Chart",
-      theme: "Fluent",
+      theme: "Material",
       themeMode: 'Light',
       content: "Emphasizes the amount of change over a period of time or compares multiple items at once.",
       moreLink: "https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/polar-chart",

Original file line number	Diff line number	Diff line change
`@@ -10,3 +10,7 @@`
`10`	`10`	`igx-data-chart {`
`11`	`11`	`height: 100%;`
`12`	`12`	`}`
	`13`	`+`
	`14`	`+.legend-title {`
	`15`	`+ margin-left: 13px;`
	`16`	`+}`