angulartypescriptngx-charts

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

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.

Solution

  • 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.