how to set custom colors to the line chart using Angular

Question

I have created line chart using fushionchart for data visualization. I need to add custom colors to the line and I tried many but I was failed. Here I attached my code with chart properties. getColorCode() is the method where get the customer colors. i need to set to the chart data.

chart.component.ts

 export class ConsumptionSummeryChartComponent implements OnInit {
  @Input() type: string = "msline";
  @Input() dataSource: object = {};

  constructor() { }

  ngOnInit() {
    this.dataSource = {
      chart: {
        baseFont: "Poppins",
        baseFontColor: "#ffffff",
        baseFontSize: 14,
        bgAlpha: 100,
        bgColor: "#293946",
        canvasBgAlpha: 0,
        canvasBgColor: "#ffffff",
        caption: "",
        formatNumberScale: 1,
        loadMessage: "",
        maxColWidth: 64,
        placeholder: "",
        plotToolText: "Day: $label{br}Consumption: $value kWh",
        subCaption: "",
        theme: "carbon",
        xAxisName: "Day",
        xAxisNameFontBold: false,
        xAxisNameFontColor: "#ffffff",
        xAxisNameFontSize: 14,
        yAxisName: "Consumption (kWh)",
        yAxisNameFontBold: false,
        yAxisNameFontColor: "#ffffff",
        yAxisNameFontSize: 14,
        palettecolors: ""
      },
      caption: {
        text: 'Daily Visitors Count of a Website'
      },
      yAxis: [
        {
          plot: {
            value: 'Consumption',
            type: 'area'
          },
          title: 'Daily Visitors (in thousand)'
        }
      ],
      categories: [{ category: [] }],
      dataSet: [],
    };
  }

  reset(): void {
    this.setData([], []);
  }

  setData(labels: string[], data: Object[]): void {
    this.dataSource['categories'][0].category = labels;
    this.dataSource['dataSet'] = data;
  }

}

dashboard.component.ts

    getConsumptionData(chartGroupType: ChartGroupType): void {
    this.typeChart.reset();

    if (this.trendLogTabIndex == 0 || this.trendLogTabIndex == 1) {
      this.tempIntervalid = 2;
    } else if (this.trendLogTabIndex == 2) {
      this.tempIntervalid = 3;
    } else if (this.trendLogTabIndex == 3) {
      this.tempIntervalid = 4;
    }

    this.ltDashboardService
      .getCategoryTrends(
        this.buildingId,
        this.tempIntervalid,
        this.intervalTime.from,
        this.intervalTime.to,
      )
      .subscribe(
        (res: Object[]) => {
          if (res.length) {
            const labels = res[0]["data"].map((x) => x.label);

             
            const values = res
              .filter((x: any) => this.selectedTypes.indexOf(x.itemId) > -1)
              .map((x: any) => {
                return {
                  seriesname: x.name,
                  data: x.data.map((d) => {
                    return {
                      value: d.value,
                    };
                  }),
                };
              });

              if(color !== null) {

              }

            this.typeChart.setData(labels, values);

          }
        },
        (err) => console.log("Err")
      );
  }

this is the function where get the colors. need to set above

private getColorCode(chartGroupType: ChartGroupType, itemId: number) {
    let item;
    let color;
    switch(chartGroupType) {
      case ChartGroupType.METER_TYPES:
        item = find(this.initialService.navigationStore.meterTypes, {meterTypeID: itemId});
        return this.getDefaultColorCode(item);
      case ChartGroupType.HT_LOOPS:
        return '';
    }
  }

  private getDefaultColorCode(item) {
    let color;
    if(item === undefined || item.attributes.length === 0) {
      return this.config.config.defaultColorCode;
    } else {
      color = find(item.attributes, {textId: this.config.config.attributes.COLOR_CODE});
      return color===null || color === undefined?this.config.config.defaultColorCode:color.value;
    }
  }