How to show the amexio-d3-chart-donut?

Question

I implemented the amexio-d3-chart-donut, but the chart not showing. After, I got the correct array value. Herewith, I mentioned my stackblit link "https://stackblitz.com/edit/angular-sjesqn". Anyone help me out!!

Answer 1

There are a lot of problems in your Stackblitz. Starting out: the way you try to load the data from the JSON is not working in Stackblitz. You try to load ../assets/data/snapDonutData.json but the snapDonutData.json is not in the assets folder. For more info on reading data in Stackblitz see this post: Reading data.json with HttpClient on Stackblitz?.

Then, the way you put data in the donutArray is not correct. You should make an array with arrays of key, value. This is what you want:

[
  [
    "Assetclass",
    "Percentage"
  ],
  [
    "Cash and Short Term Fixed Income",
    5.4
  ],
  [
    "Fixed Income",
    20.72
  ],
  [
    "International Equity",
    12.71
  ],
  [
    "US Equity",
    53.58
  ],
  [
    "Alternative Investments",
    7.59
  ]
]

You can do that with the following code:

data.donutDatas.forEach(item => {
   this.data.push([item.assetClass, item.currentPercent]);
});

Then there is one more thing, because you are working with async data, the data is not instantly available when loading the page. Therefor you should wait till the data is loaded before showing the chart. I added a isLoaded property for that in the following working sample: https://stackblitz.com/edit/angular-tdx5ob

Ps. I also removed all the unused variables ;)