Changing the FlexChart Legend Position in Angular

Background:

The default position of Wijmo's FlexChart legend is Right. In Angular apps, you may want to move the legend to better fit your layout.

Steps to Complete:

1. Initialize your FlexChart and bind data to the legend

2. Set the position input of the Angular legend component

Getting Started:

Initialize your FlexChart and bind data to the legend

To customize the legend position in Angular, declare a FlexChart in your template and bind it to data in your component class. Set itemsSource, bindingX, and define your <wj-flex-chart-series> entries. This data drives what appears in the legend.

Packages needed: @mescius/wijmo and @mescius/wijmo.angular2.chart

// File: src/app/app.component.ts
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WjChartModule } from '@mescius/wijmo.angular2.chart';

interface CountryGdp {
  country: string;
  2014: number;
  2015: number;
  2016: number;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, WjChartModule],
  templateUrl: './app.component.html',
})
export class AppComponent {
  readonly data: CountryGdp[] = [
    { country: 'USA', 2014: 17427, 2015: 18036, 2016: 18624 },
    { country: 'China', 2014: 10368, 2015: 11016, 2016: 11227 },
    { country: 'Japan', 2014: 4601, 2015: 4382, 2016: 4937 },
    { country: 'Germany', 2014: 3868, 2015: 3363, 2016: 3466 },
    { country: 'UK', 2014: 2948, 2015: 2851, 2016: 2690 },
  ];

  readonly palette: string[] = [
    'rgba(42,159,214,1)',
    'rgba(119,179,0,1)',
    'rgba(153,51,204,1)',
    'rgba(255,136,0,1)',
    'rgba(204,0,0,1)',
    'rgba(0,204,163,1)',
    'rgba(61,109,204,1)',
    'rgba(82,82,82,1)',
    'rgba(0,0,0,1)',
  ];
}

<!-- File: src/app/app.component.html -->
<wj-flex-chart
  [itemsSource]="data"
  bindingX="country"
  header="Country GDP"
  [palette]="palette"
>
  <wj-flex-chart-series binding="2014" name="2014"></wj-flex-chart-series>
  <wj-flex-chart-series binding="2015" name="2015"></wj-flex-chart-series>
  <wj-flex-chart-series binding="2016" name="2016"></wj-flex-chart-series>

  <!-- Legend with no position set -->
  <wj-flex-chart-legend></wj-flex-chart-legend>
</wj-flex-chart>

Your FlexChart legend should look something like this:

Set the position property of the legend

Wijmo’s FlexChart is highly customizable. In Angular, you control the legend position via the <wj-flex-chart-legend> component’s position input. Set it to where the legend should appear relative to the plot area. Common values include None, Left, Right, Top, and Bottom. Recent versions also include corner options like TopRight and BottomLeft.

<wj-flex-chart-legend [position]="'Bottom'"></wj-flex-chart-legend>

With this property set, your FlexChart will display the legend at the chosen location:

And that’s all you have to do! I hope you find this article helpful. Happy coding!