CODEWITHSUNDEEP
javascriptangularapexchartsng-apexcharts
AkANO Toluwani
AkANO Toluwani

Reputation: 21

Apex Chart not rendering completely in angular

I have apex chart in angular that is receiving input from a parent component. See code below `

 @Input() labels: string[] = [];

  @Input() series: number[] = [];

  constructor() {}

  ngOnInit(): void {
    this.chartOptions = {
      series: this.series,
      chart: {
        type: 'donut',
        width: 200,
      },

      dataLabels: {
        enabled: false,
      },
      colors: ['#197254', '#62DAB3', '#E2F96F'],
      legend: {
        show: false,
      },
      labels: this.labels,
      tooltip: {
        enabled: false,
      },
      //dont show data label
      plotOptions: {
        pie: {
          donut: {
            size: '80%',
            labels: {
              show: false,
            },
          },
        },
      },
    };
  }

The series is gotten from the parent after it makes network request. `

<app-piechart id="pie" [labels]="['Monthly', 'Quaterly', 'Anually']" [series]="[stats.activeSubscriber.subscriptionTypeAggregate.monthly.count, stats.activeSubscriber.subscriptionTypeAggregate.quarterly.count, stats.activeSubscriber.subscriptionTypeAggregate.annually.count]"></app-piechart>

`If i pass random value to the component directly, the pie chart renders well but if i pass in variable into the arrays, it shows like the image below

enter image description here

Please assit

If i pass random value to the component directly, the pie chart renders well but if i pass in variable into the arrays, it shows like the image below

enter image description here

And i confirmed the variables is in the pie chart component using the angular extension on chrome.

Upvotes: 0

Views: 692

Answers (1)

AkANO Toluwani
AkANO Toluwani

Reputation: 21

I have fixed the issue. Apparently i was passing string into the series array like ['1', '2',...] instead of [1, 2, ..]

Upvotes: 0

Related Questions