showLegend in charts

Legacy Contributor

Does someone know why even if I set showLegend property as true both in the chartOption and in the sohochartcomponent it still doesn't shows it?

 this is my main.ts

import { CommonModule } from "@angular/common";
import { Component, Input, NgModule, OnInit, ViewChild } from "@angular/core";
import { SohoChartComponent, SohoChartModule, SohoToastService } from "@infor/sohoxi-angular";
import { IWidgetComponent, IWidgetContext2, IWidgetInstance2, Log } from "lime";

class SettingKeys {
    static primaryChartType = "primaryChartType";
}

@Component({
    template: `
    <div class="wrapper">
      <div class="primary chart-container">
        <div soho-chart #primaryChart></div>
      </div>
    </div>`,
    styles: [
        `
	.wrapper{height:100%;width:100%;display:flex;}

	.primary.chart-container{flex:2;}

	.chart-pie{height:100%;}
	`
    ]
})
export class WidgetComponent implements IWidgetComponent, OnInit {
    @Input()
    widgetContext: IWidgetContext2;
    @Input()
    widgetInstance: IWidgetInstance2;

    @ViewChild("primaryChart")
    primaryChart: SohoChartComponent;

    primaryChartType: ChartTypes;
    chartData: SohoDataSet = [
        {
            data: [
                { name: &#39;Jan&#39;, value: 12 },
                { name: &#39;Feb&#39;, value: 11 },
                { name: &#39;Mar&#39;, value: 14 },
                { name: &#39;Apr&#39;, value: 10 },
                { name: &#39;May&#39;, value: 14 },
                { name: &#39;Jun&#39;, value: 8 }
            ],
        },
    ];

    private logPrefix = "[mg.daniso.test] ";

    constructor(private toastService: SohoToastService) { }

    ngOnInit(): void {
        if (this.widgetContext.isBanner()) {
            this.showInitialBannerColorToast();
            this.widgetInstance.bannerBackgroundChanged = (newColor: string) => {
                this.showBackgroundColorChangedToast(newColor);
            };
        }
        this.updateCharts();
        this.widgetInstance.settingsSaved = () => this.updateCharts();
    }

    private showInitialBannerColorToast(): void {
        const bannerColor = this.widgetContext.getBannerBackgroundColor();
        this.toastService.show({
            title: "Banner added",
            message: `The banner widget container is using background color ${bannerColor}`,
            timeout: 5000,
            position: SohoToastService.BOTTOM_RIGHT
        });
    }

    private showBackgroundColorChangedToast(newColor: string): void {
        this.toastService.show({
            title: "Banner container changed",
            message: `The banner container is now using background color ${newColor}`,
            timeout: 5000,
            position: SohoToastService.BOTTOM_RIGHT
        });
    }

    private updateCharts(): void {
        Log.debug(this.logPrefix + "updating charts");
        const commonOptions: SohoChartOptions = {
            labels: { hideLabels: true },
            dataset: this.chartData,
            showLegend: true,
        };

        this.primaryChart.showLegend = true;

        this.primaryChart.chartOptions = {
            ...commonOptions,
            type: this.getChartTypeFromSetting(SettingKeys.primaryChartType),
        };
    }

    private getChartTypeFromSetting(setting: string): ChartTypes {
        return this.widgetContext.getSettings().get(setting, "bar");
    }
}

@NgModule({
    imports: [
        CommonModule,
        SohoChartModule
    ],
    declarations: [
        WidgetComponent
    ],
    entryComponents: [
        WidgetComponent
    ]
})
export class WidgetModule {
}