0

I use ngx-charts API, in order to show data with a pie chart on my web app. When I tried modifying the chart's legend position, it showed the following error message:

"error TS2322: Type '"below"' is not assignable to type 'LegendPosition'.".

I am using Angular 12, and ngx-charts API to use its nice charts.

DGR
  • 422
  • 1
  • 4
  • 14

1 Answers1

5

I dug couple of hours until I found a solution. The problem was with the string itself. when I wrote on my html file "[legendPosition]="'below'", it just did not recognize it, i.e. the request's content.

on html page (on ngx-charts tag):

[legendPosition]="legendPosition"

in its corresponding ts file, inside the exported class:

public legendPosition: LegendPosition = LegendPosition.Below;

and of course, this won't work unless you import LegendPosition:

import { LegendPosition } from '@swimlane/ngx-charts';

Now, instead of receiving a string, [lgegentPosition] will use a LegendPosition object. By the way, you can see that I have used "LegendPosition.Below". This is not the only way to present the legend, but just an example.

DGR
  • 422
  • 1
  • 4
  • 14