How to use Sunburst Chart in Angular 7+ versions? (with open source library)

Viewed 19

I am trying to implement sunburst chart in angular 7+ version with the reference of following GitHub example :

https://www.npmjs.com/package/sunburst-chart/v/1.7.1

I run following command :

npm i sunburst-chart@1.7.1 and then started with code changes.

  1. Imported sunburst-chart in app.module.ts

import Sunburst from 'sunburst-chart';

My HTML code is as below :

<div id="chart"></div>

My ts file code is as below :

import { Component, OnInit } from '@angular/core';
import Sunburst from 'sunburst-chart';
const data1 = {
  name: 'main',
  color: 'magenta',
  children: [{
    name: 'a',
    color: 'yellow',
    size: 1
  }, {
    name: 'b',
    color: 'red',
    children: [{
      name: 'ba',
      color: 'orange',
      size: 1
    }, {
      name: 'bb',
      color: 'blue',
      children: [{
        name: 'bba',
        color: 'green',
        size: 1
      }, {
        name: 'bbb',
        color: 'pink',
        size: 1
      }]
    }]
  }]
};
@Component({
  selector: 'app-sunburst',
  templateUrl: './sunburst.component.html',
  styleUrls: ['./sunburst.component.scss']
})

export class SunburstComponent implements OnInit {



  constructor() {
  }

  ngOnInit(): void {
  }
  myChart = Sunburst().data(data1).size('size').color('color')
    (document.getElementById('chart'));
}

but I am getting an error:

ERROR in Maximum call stack size exceeded

Any help would be greatly appreciated. Or any suggestions for open-source libraries of sunburst report?

0 Answers
Related