Having difficulty deciphering the legend in the Highcharts library for Angular (angular-highcharts)

Question

Having difficulty deciphering the legend in the Highcharts library for Angular (angular-highcharts)

I have a requirement to display two datasets as dual column charts.

(2) [{…}, {…}]
    0:
    historyDate: "2021-02-10T10:00:000Z"
    documentStatusHistory:
        CANCELLED: 6
        COMPLETED: 52
        IN_PROGRESS: 1
        OPEN: 1
        PHASE_OUT: 1
    1:
    historyDate: "2021-02-17T10:00:000Z"
    documentStatusHistory:
        CANCELLED: 6
        COMPLETED: 52
        IN_PROGRESS: 1
        OPEN: 1
        PHASE_OUT: 1

The chart setup is executed in the ngAfterContentInit method

ngAfterContentInit() {
    const chartOptions: Options = this.createDefaultColumnOptions();
    chartOptions.title.text = this.chartTitle;
    this.resultChart = Highcharts.chart(this.resultChartTarget.nativeElement, chartOptions);
    this.resultChart.addSeries(this.buildColumnSeries(this.uuidService.getNewUuid(), this.chartData));
  }

The data for the columns is populated here

private buildColumnSeries(id: string, chartData: any[]) {
    const options: SeriesOptions = {
      id,
      type: 'column',
      data: [],
    } as SeriesOptions;

    chartData.forEach((item) => {
      const date = new Date(item.historyDate);
      const newDate = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate());

      for (const status in item.documentStatusHistory) {
        this.resultChart.addSeries({
                                     type: 'column',
                                     yAxis: 0,
                                     name: status.replace('_', ' '),
                                     data: [[newDate, item.documentStatusHistory[status]]],
                                     color: DisplayUtil.getStatusColor(status)
                                   });
      }
    });
    return options;
  }

This section handles the configuration of the chart

private createDefaultColumnOptions(): Options {
    return {
      chart: {
        zoomType: 'xy',
        marginLeft: 70,
        marginRight: 70
      },
      title: {
        useHTML: true
      },
      legend: {
        verticalAlign: 'top',
        labelFormat: '<b>{name}</b>',
        enabled: true
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          week: '%e. %b'
        },
        title: {
          text: 'Date'
        }
      },
      yAxis: [
        { // Primary yAxis
          title: {
            text: 'Total ' + this.chartTitle
          }
        }
      ],
      tooltip: {
        shared: true
      },
      plotOptions: {
        column: {
          stacking: 'normal'
        },
        series: {
          cursor: 'pointer'
        }
      },
      credits: {
        enabled: false
      }
    } as Options;
  }
}

The end result should be a chart like https://i.stack.imgur.com/DUFyL.png

There seems to be an issue with duplicate legends appearing on my chart. The columns are correctly structured, but I am unsure why the legend duplicates. Any insights into what might be causing this issue?

typescript highcharts angular-highcharts

Answer 1

Answer №1

Here is the current approach:

private generateColumnSeries(id: string, chartData: any[]) {

    const options: SeriesOptions = {
      id,
      type: 'column',
      data: [],
    } as SeriesOptions;

    console.log(chartData);

    const OPEN = [];
    const COMPLETED = [];
    const IN_PROGRESS = [];
    const PHASE_OUT = [];
    const CANCELLED = [];

    chartData.forEach((item) => {    
      OPEN.push(item.documentStatusHistory.OPEN);
      COMPLETED.push(item.documentStatusHistory.COMPLETED);
      IN_PROGRESS.push(item.documentStatusHistory.IN_PROGRESS);
      PHASE_OUT.push(item.documentStatusHistory.PHASE_OUT);
      CANCELLED.push(item.documentStatusHistory.CANCELLED);
    });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'OPEN',
                                 data: OPEN,
                                 color: DisplayUtil.getStatusColor('OPEN')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'COMPLETED',
                                 data: COMPLETED,
                                 color: DisplayUtil.getStatusColor('COMPLETED')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'IN_PROGRESS',
                                 data: IN_PROGRESS,
                                 color: DisplayUtil.getStatusColor('IN_PROGRESS')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'PHASE_OUT',
                                 data: PHASE_OUT,
                                 color: DisplayUtil.getStatusColor('PHASE_OUT')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'CANCELLED',
                                 data: CANCELLED,
                                 color: DisplayUtil.getStatusColor('CANCELLED')
                               });

    return options;
  }

However, having status names hardcoded is not ideal, as they may change. Here is a solution for dynamic keys:

private generateColumnSeries(id: string, chartData: any[]) {

    const options: SeriesOptions = {
      id,
      type: 'column',
      data: [],
    } as SeriesOptions;

    const data = [];
    const map = new Map();

    chartData.forEach((item) => {

      const keys = Object.keys(item.documentStatusHistory);
      keys.forEach((key) => {

        let found = false;
        data.find(element => {
          if (element.key === key) {
            found = true;
          }
        });

        if (found) {
          const array = map.get(key);
          array.push(item.documentStatusHistory[key]);
          map.set(key, array);
        } else {
          data.push({key, series: [1]});
          map.set(key, [item.documentStatusHistory[key]]);
        }

      });
    });

    map.forEach((value: [], key: string) => {
      this.resultChart.addSeries({
                                   type: 'column',
                                   yAxis: 0,
                                   name: key,
                                   data: value,
                                   color: DisplayUtil.getStatusColor(key)
                                 });
    });
    return options;
  }

Answer 2

Here is the current approach:

private generateColumnSeries(id: string, chartData: any[]) {

    const options: SeriesOptions = {
      id,
      type: 'column',
      data: [],
    } as SeriesOptions;

    console.log(chartData);

    const OPEN = [];
    const COMPLETED = [];
    const IN_PROGRESS = [];
    const PHASE_OUT = [];
    const CANCELLED = [];

    chartData.forEach((item) => {    
      OPEN.push(item.documentStatusHistory.OPEN);
      COMPLETED.push(item.documentStatusHistory.COMPLETED);
      IN_PROGRESS.push(item.documentStatusHistory.IN_PROGRESS);
      PHASE_OUT.push(item.documentStatusHistory.PHASE_OUT);
      CANCELLED.push(item.documentStatusHistory.CANCELLED);
    });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'OPEN',
                                 data: OPEN,
                                 color: DisplayUtil.getStatusColor('OPEN')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'COMPLETED',
                                 data: COMPLETED,
                                 color: DisplayUtil.getStatusColor('COMPLETED')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'IN_PROGRESS',
                                 data: IN_PROGRESS,
                                 color: DisplayUtil.getStatusColor('IN_PROGRESS')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'PHASE_OUT',
                                 data: PHASE_OUT,
                                 color: DisplayUtil.getStatusColor('PHASE_OUT')
                               });

    this.resultChart.addSeries({
                                 type: 'column',
                                 yAxis: 0,
                                 name: 'CANCELLED',
                                 data: CANCELLED,
                                 color: DisplayUtil.getStatusColor('CANCELLED')
                               });

    return options;
  }

However, having status names hardcoded is not ideal, as they may change. Here is a solution for dynamic keys:

private generateColumnSeries(id: string, chartData: any[]) {

    const options: SeriesOptions = {
      id,
      type: 'column',
      data: [],
    } as SeriesOptions;

    const data = [];
    const map = new Map();

    chartData.forEach((item) => {

      const keys = Object.keys(item.documentStatusHistory);
      keys.forEach((key) => {

        let found = false;
        data.find(element => {
          if (element.key === key) {
            found = true;
          }
        });

        if (found) {
          const array = map.get(key);
          array.push(item.documentStatusHistory[key]);
          map.set(key, array);
        } else {
          data.push({key, series: [1]});
          map.set(key, [item.documentStatusHistory[key]]);
        }

      });
    });

    map.forEach((value: [], key: string) => {
      this.resultChart.addSeries({
                                   type: 'column',
                                   yAxis: 0,
                                   name: key,
                                   data: value,
                                   color: DisplayUtil.getStatusColor(key)
                                 });
    });
    return options;
  }

Having difficulty deciphering the legend in the Highcharts library for Angular (angular-highcharts)

Answer №1

Similar questions

Encountering issues with accessing the clientWidth and clientHeight references of the DOM in Vue

The 'import type' declaration cannot be parsed by the Babel parser

Enhancing the aesthetic appeal of Angular2 Google Maps

Issues with sending emails through Nodemailer in a Next.js project using Typescript

Discovering the versatility of Typescript objects

Removing text that was added via the chart renderer in Highcharts can be accomplished by identifying the specific element

Angular 16 routing not loading content

One way to update the value of the current array or object using ngModel in Angular 2 is to directly

What is the best way to determine in component.html whether the column type is equal to 1 to show the label text "Active,"

NG0900: Issue encountered while attempting to compare '[object Object]'. Please note that only arrays and iterable objects are permitted for comparison

Exploring the contrast between string enums and string literal types in TypeScript

determining the properties of a given data type

Using Angular 2, you can pass an object as a parameter to a function

The issue in Angular2 viewmodel where the boolean value fails to update the *ngIf template

Provide the succeeding line from a CSV document whenever a PHP script is executed

Book of Tales displaying Emotion Styling upon initial load only

Using the currency pipe with a dynamic variable in Angular 2

Create an interactive Angular form that dynamically generates groups of form elements based on data pulled from

Angular 13: Issue with Http Interceptor Not Completing Request

The TypeScript factory design pattern is throwing an error stating that the property does not