How to Render Angular Charts Using Nested Object Data?

Description

This article demonstrates how to render Angular Charts using nested object data structures, which are commonly used to represent hierarchical or structured data.

Solution

Nested objects are useful for logically grouping related data. To use them effectively with Angular Charts, especially when using libraries like Syncfusion’s Angular Chart component, you can directly bind these objects to the chart’s dataSource. To access nested values, use dot notation in the yName property.

To ensure the chart can correctly interpret the nested path, set the enableComplexProperty property to true in the e-series tag configuration.

Code Snippet

app.component.html

<e-series [dataSource]='data' [enableComplexProperty]="true" type='Column' xName='x' yName='total.volume.distance' width=2></e-series>

app.component.ts

public data: Object[] = [
   { x: 'Sun', total: { volume: { distance: 15 } } },
   { x: 'Mon', total: { volume: { distance: 22 } } },
   { x: 'Tue', total: { volume: { distance: 32 } } },
   { x: 'Wed', total: { volume: { distance: 31 } } },
   { x: 'Thu', total: { volume: { distance: 29 } } },
   { x: 'Fri', total: { volume: { distance: 24 } } },
   { x: 'Sat', total: { volume: { distance: 18 } } },
 ];

Output Preview

The following image illustrates the output of the above code.

Live Example

View Sample in Stackblitz

Conclusion

We hope you enjoyed learning about How to Render Angular Charts Using Nested Object Data.

You can refer to our Angular Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!