Adding legends to charts

Author: MarielaTihova

projects/charts/bar-chart/src/bar-chart.ts

@@ -40,6 +40,12 @@ export class BarChartSample extends LitElement {
     { franchise: "James Bond", totalRevenue: 7.12, highestGrossing: 1.11 },
   ];
 
+  firstUpdated() {
+    const legendEl = this.renderRoot.querySelector('#legend') as any;
+    const chartEl = this.renderRoot.querySelector('igc-data-chart') as any;
+    chartEl.legend = legendEl;
+  }
+  
   render() {
     configureTheme("fluent");
 
@@ -53,11 +59,11 @@ export class BarChartSample extends LitElement {
         <div class="legend-title">Highest Grossing Movie Franchises</div>
 
         <div class="legend">
-          <igc-legend orientation="Horizontal" id="legend"></igc-legend>
+          <igc-legend orientation="Horizontal" id="legend" name="legend"></igc-legend>
         </div>
 
         <div class="chart-wrapper">
-          <igc-data-chart width="100%" height="100%" legend="legend">
+          <igc-data-chart width="100%" height="100%">
             <igc-category-y-axis
               name="yAxis"
               label="franchise"

projects/charts/line-chart/src/line-chart.ts

@@ -27,6 +27,12 @@ export class LineChart extends LitElement {
     { year: "2019", europe: 80, china: 96, america: 38 },
   ];
 
+  firstUpdated() {
+    const legendEl = this.renderRoot.querySelector('#legend') as any;
+    const chartEl = this.renderRoot.querySelector('igc-category-chart') as any;
+    chartEl.legend = legendEl;
+  }
+
   render() {
     configureTheme("bootstrap");
 
@@ -58,7 +64,6 @@ export class LineChart extends LitElement {
             yAxisTitleRightMargin="5"
             yAxisLabelLeftMargin="0"
             computedPlotAreaMarginMode="Series"
-            legend="legend"
           >
           </igc-category-chart>
         </div>

projects/charts/pie-chart/src/pie-chart.ts

@@ -41,6 +41,11 @@ export class PieChartSample extends LitElement {
     ) => {
       args.isExploded = !args.isExploded;
     };
+
+    // Adding legend to the first pie chart
+    const legendEl = this.renderRoot.querySelector('#legend') as any;
+    const chartEl = this.renderRoot.querySelector('#chart') as any;
+    chartEl.legend = legendEl;
   }
 
   render() {
@@ -59,11 +64,13 @@ export class PieChartSample extends LitElement {
             Global Electricity Demand by Energy Use
           </div>
 
-          <igc-item-legend
-            id="legend"
-            name="legend"
-            orientation="Horizontal"
-          ></igc-item-legend>
+          <div class="legend">
+            <igc-item-legend
+              id="legend"
+              name="legend"
+              orientation="Horizontal"
+            ></igc-item-legend>
+          </div>
 
           <div class="pie-chart">
             <igc-pie-chart

projects/charts/polar-chart/src/polar-chart.ts

@@ -37,6 +37,12 @@ export class PolarChart extends LitElement {
     { direction: 360, boatSpeed: 70, windSpeed: 90 },
   ];
 
+  firstUpdated() {
+    const legendEl = this.renderRoot.querySelector('#legend') as any;
+    const chartEl = this.renderRoot.querySelector('igc-data-chart') as any;
+    chartEl.legend = legendEl;
+  }
+
   render() {
     configureTheme("fluent");
 
@@ -59,7 +65,6 @@ export class PolarChart extends LitElement {
             height="100%"
             name="chart"
             id="chart"
-            legend="legend"
             .dataSource=${this.boatSailingData}
             is-horizontal-zoom-enabled="false"
             is-vertical-zoom-enabled="false"

projects/charts/step-chart/src/step-chart.ts

@@ -28,6 +28,12 @@ export class StepChart extends LitElement {
     { year: "2019", europe: 80, china: 96, america: 38 },
   ];
 
+  firstUpdated() {
+    const legendEl = this.renderRoot.querySelector('#legend') as any;
+    const chartEl = this.renderRoot.querySelector('igc-category-chart') as any;
+    chartEl.legend = legendEl;
+  }
+
   render() {
     configureTheme("material");
 
@@ -47,7 +53,6 @@ export class StepChart extends LitElement {
           <igc-category-chart
             id="chart"
             .dataSource=${this.countryRenewableElectricity}
-            legend="legend"
             chart-type="StepArea"
             title-alignment="Left"
             title-left-margin="25"

src/views/home/home-view.scss

@@ -115,7 +115,7 @@
 
   .sample-actions {
     display: flex;
-    gap: 8px;
+    gap: 16px;
     align-items: center;
     line-height: 100%;
     font-size: 14px;
@@ -127,7 +127,7 @@
       font-weight: 600;
       letter-spacing: 0.15px;
       height: 40px;
-      padding-right: 8px;
+      padding-right: 16px;
       border-right: 1px solid #D6D6D6;
     }