Thanks for the above. I have put in a request for grouping categories (as adding another x-axis looks ugly; it's putting the year for every data point) and see how adding a label before the igx-legend object accomplishes what I wanted.

Unfortunately, I'm not actually getting anything in my implementation. I believe it's because of how I'm using the igx-tab object and a conditional with it.

A data-grid will be created, regardless of what parameter is selected. There are parameters that should generate the chart we've been discussing, some that will generate another chart (yet to be built), and some which will only generate the data-grid.

If the data changes, it should revert back to the data-grid tab, which already updates dynamically as intended, but so far, nothing happens when I click the "charts" tab.

Here is my code:

HTML:

<div *ngIf="parameterData !== undefined && gridReady && !needCharts">
    <igx-grid #compareGrid displayDensity="compact" [data]="parameterData" height="{{height - 362}}px" width="100%" [allowFiltering]="true">
        <igx-column *ngFor="let col of columns" [resizable]="true" [field]="col.field" [dataType]="col.type" [formatter]="col.formatter" [pinned]="col.pinned" [width]="col.width"></igx-column>
    </igx-grid>
</div>

<igx-tabs #compNav (selectedIndexChange)="itemSelected($event)" *ngIf="needCharts">
    <igx-tab-item>
        <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Data</span></igx-tab-header>
        <igx-tab-content>
            <igx-grid #compareGrid displayDensity="compact" [data]="parameterData" height="{{height - 403}}px" width="100%" [allowFiltering]="true">
                <igx-column *ngFor="let col of columns" [resizable]="true" [field]="col.field" [dataType]="col.type" [formatter]="col.formatter" [pinned]="col.pinned" [width]="col.width"></igx-column>
            </igx-grid>
        </igx-tab-content>
    </igx-tab-item>
    <igx-tab-item *ngIf="needOutChart">
        <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Volume Output Chart</span></igx-tab-header>
        <label>{{scenario1.name}}</label>
        <igx-legend #outLegend1 orientation="horizontal" title="{{scenario1.name}}"></igx-legend>
        <label>{{scenario2.name}}</label>
        <igx-legend #outLegend2 orientation="horizontal" title="{{scenario2.name}}"></igx-legend>
        <igx-data-chart #outChart height="{{height - 403}}px" width="100%" [dataSource]="outData1" (refreshCompleted)="onChartRefreshComplete()">
            <igx-category-x-axis #outXAxis label="Period" title="Time Periods ({{rollup}})"></igx-category-x-axis>
            <igx-numeric-y-axis #outYAxis label="Production Values" title="Quantities Produced ({{uomParam}})"></igx-numeric-y-axis>
            <igx-stacked-area-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData1" [legend]="outLegend1"></igx-stacked-area-series>
            <igx-stacked-line-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData2" [legend]="outLegend2"></igx-stacked-line-series>
        </igx-data-chart>
    </igx-tab-item>
</igx-tabs>

Pertinent TS code:

  onChartRefreshComplete() {
    if (this.dataChanged && this.activeTab === 'chart') { this.populateChart(); }
  }

  populateChart() {
    if (this.needOutChart) {
      this.buildOutData();
      let areaSeries:IgxStackedAreaSeriesComponent = this.outChart.actualSeries[0] as IgxStackedAreaSeriesComponent,
        lineSeries:IgxStackedLineSeriesComponent = this.outChart.actualSeries[1] as IgxStackedLineSeriesComponent;
      this.designs.forEach(d => {
        let areaFrag:IgxStackedFragmentSeriesComponent = new IgxStackedFragmentSeriesComponent(),
          lineFrag:IgxStackedFragmentSeriesComponent = new IgxStackedFragmentSeriesComponent();
        areaFrag.valueMemberPath = d;
        areaFrag.title = d;
        areaSeries.series.add(areaFrag);
        lineFrag.valueMemberPath = d;
        lineFrag.title = d;
        lineSeries.series.add(lineFrag);
      });
    }
    this.dataChanged = false;
  }

  itemSelected(e:any) {
    this.activeTab = e.index === 0 ? 'data' : 'chart';
    this.activeTab === 'data' && this.populateChart();
    console.log(`Changed to ${this.activeTab} tab`);
  }

  calculateUom(param:string) {
    if (this.scenario1 !== undefined && this.scenario2 !== undefined) {
      this.gridReady = false, this.uomParam = param, CompareComponent.uomParam = param,
      this.needOutChart = ['Wafer Outs', 'DIE', 'GB', 'GB_SH', 'PB', 'PB_SH', 'EB', 'EB_SH'].indexOf(param) > -1 && this.scenario1 !== this.scenario2 ? true : false,
      // this.needYieldChart = ['Ship Yield (%)', 'Line Yield (%)', 'Cycle Time (days)'].indexOf(param) > -1 && this.scenario1 !== this.scenario2 && this.startWw.name < this.currentWorkweek.name ? true : false,
      this.needCharts = this.needOutChart || this.needYieldChart ? true : false;
...
      this.dataChanged = true;
...
    }
  };

For 1, I meant can I put a label on the legend box, similar to how it's possible to affix a label to a dropdown which gives a meaningful title to it. What you have suggested is overriding the default labels for each of the series, which you have already given good examples of.

For 2, I meant adding another layer of label to the Y axis which would group the time periods by the year in which they appear. I need to keep the WW/Month/Quarter label and add a larger Year label to a group of appropriate time periods.

Hello Chris,

Regarding the error you are seeing in your code, it appears that you have closed off your igx-stacked-line-series with a </igx-stacked-area-series> tag. If you change this to </igx-stacked-line-series> tag, I see nothing wrong with the code you are using.

Regarding your additional questions, I will answer them in the order they were asked:

1. It is completely possible to change your Legend labels to be whatever you wish. These labels are pulled from the “title” attribute on the series – in this case, the igx-stacked-fragment-series. You can see in the sample project I sent you that each of the IgxStackedFragmentSeriesComponents that are created in the populateChart() method that the “title” is set. If you modify this, it will be reflected in the IgxLegend.

2. You can modify the way that your labels are shown in the IgxCategoryXAxis by using the formatLabel property of the axis. You can hook that into a function that returns a string by doing the following:

**In HTML:
<igx-category-x-axis [formatLabel]=”formatXAxisLabel”></igx-category-x-axis>

**In Typescript:
public formatXAxisLabel(item: any) : string{
      return "new Label!";
}

The “item” in the event arguments will be the underlying data item making up a particular category on the axis, allowing you to examine it and return an appropriate label.

I hope this helps! Please let me know if you have any other questions or concerns on this matter.

During attempt at implementation, I'm getting errors on closing tags and I'm not sure what the issue is:

HTML:

    <igx-tab-item *ngIf="needOutChart">
        <igx-tab-header class="bg-primary text-white"><span igxTabHeaderLabel>Volume Output Chart</span></igx-tab-header>
        <igx-legend #outLegend1 orientation="horizontal"></igx-legend>
        <igx-legend #outLegend2 orientation="horizontal"></igx-legend>
        <igx-data-chart #outChart height="{{height - 403}}px" width="100%" [dataSource]="outData1" (refreshCompleted)="onChartRefreshComplete()">
            <igx-category-x-axis #outXAxis label="Period" title="Time Periods ({{rollup}})"></igx-category-x-axis>
            <igx-numeric-y-axis #outYAxis label="Production Values" title="Quantities Produced ({{uomParam}})"></igx-numeric-y-axis>
            <igx-stacked-area-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData1" [legend]="outLegend1"></igx-stacked-area-series>
            <igx-stacked-line-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData2" [legend]="outLegend2"></igx-stacked-area-series>
        </igx-data-chart>
    </igx-tab-item>

package.json dependencies (Azure hosted Angular UI):

    "dependencies": {
        "@angular-devkit/build-optimizer": "^0.1200.0",
        "@angular/animations": "~12.2.9",
        "@angular/cdk": "^12.2.9",
        "@angular/common": "~12.2.9",
        "@angular/compiler": "~12.2.9",
        "@angular/core": "~12.2.9",
        "@angular/forms": "~12.2.9",
        "@angular/material": "^12.2.9",
        "@angular/platform-browser": "~12.2.9",
        "@angular/platform-browser-dynamic": "~12.2.9",
        "@angular/router": "~12.2.9",
        "@azure/msal-angular": "^2.0.5",
        "@azure/msal-browser": "^2.19.0",
        "@igniteui/material-icons-extended": "^2.4.0",
        "@infragistics/igniteui-angular": "~12.3.0",
        "@microsoft/microsoft-graph-client": "^2.2.1",
        "@microsoft/microsoft-graph-types": "^2.1.0",
        "bootstrap": "^4.6.0",
        "classlist.js": "1.1.20150312",
        "file-saver": "^2.0.5",
        "guid-typescript": "^1.0.9",
        "igniteui-angular-charts": "^13.1.0",
        "igniteui-angular-core": "^13.1.0",
        "igniteui-angular-excel": "^12.1.1",
        "igniteui-angular-spreadsheet": "^12.1.1",
        "jquery": "^3.6.0",
        "jszip": "^3.5.0",
        "minireset.css": "~0.0.4",
        "msal": "^1.4.15",
        "resize-observer-polyfill": "^1.5.1",
        "rxjs": "~6.6.0",
        "tslib": "^2.0.0",
        "web-animations-js": "^2.3.2",
        "zone.js": "~0.11.4"
    }

The Errors:

error NG5002: Unexpected closing tag "igx-stacked-area-series". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

168             <igx-stacked-line-series [xAxis]="outXAxis" [yAxis]="outYAxis" [dataSource]="outData2" [legend]="outLegend2"></igx-stacked-area-series>

error NG5002: Unexpected closing tag "igx-data-chart". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags

169         </igx-data-chart>

I'm also wondering if there is a separate repo for the Charts, Excel, and Spreadsheets components that I should be using instead of the open-source ones.