4 Best Angular Charts for Revealing Trends Over Time
Tags: angular, chart, webdev, data
Published: 2023-03-14 15:51:44

---
title: 4 Best Angular Charts for Revealing Trends Over Time
published: true
date: 2023-03-14 11:48:22 UTC
tags: angular, chart, webdev, data
canonical_url: https://www.syncfusion.com/blogs/post/angular-charts-revealing-trends.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wrlcshd0joe4k5pp3ij.png
---
Trend analysis is used to predict future outcomes based on recorded data. Charts play a vital role in analyzing trends over time. Their graphical representations make complex facts easier to understand quickly. However, you must choose the appropriate chart type to convey your data story accurately and effectively.

In this blog, we explore various [Syncfusion Angular Charts](https://www.syncfusion.com/angular-components/angular-charts "Syncfusion Angular Charts") to find the best chart types to identify trends in your time-series data.

## Line chart

A line graph reveals trends over time and can display a wide range of data. We can use a line chart when plotting a continuous data set. It is the most common chart type used to show trends with large amounts of data.

In the following example, I use line series to show the trend of crude steel production for different countries. In this case, the x-axis shows the time value, and the y-axis shows the amount of crude steel produced. In the first year, most of the production was less than 8 million metric tons, but over time production trended higher, with most countries producing above 8 million metric tons annually.

Refer to the following code example.

**app.component.html**

```xml
<ejs-chart id='chartcontainer' [title]='title' >
    <e-series-collection>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Viet_Growth' name='Vietnam' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Can_Growth' name='Canada' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Mal_Growth' name='Malaysia' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Egy_Growth' name='Egypt' width=2 opacity=1> </e-series>
      <e-series [dataSource]='data' type='Line' xName='Period' yName='Ind_Growth' name='Indonesia' width=2 opacity=1> </e-series>
    </e-series-collection>
</ejs-chart>
```

**app.component.ts**

```js
export class AppComponent {
    public data: Object[] = [
        { Period : 2012, Can_Growth : 13.5, Viet_Growth : 5.3, Mal_Growth : 5.6, Egy_Growth : 6.6, Ind_Growth : 2.3 },
        { Period : 2013, Can_Growth : 12.4, Viet_Growth : 5.6, Mal_Growth : 4.7, Egy_Growth : 6.8, Ind_Growth : 2.6 },
        { Period : 2014, Can_Growth : 12.7, Viet_Growth : 5.9, Mal_Growth : 4.3, Egy_Growth : 6.5, Ind_Growth : 4.4 },
        { Period : 2015, Can_Growth : 12.5, Viet_Growth : 5.7, Mal_Growth : 3.8, Egy_Growth : 5.5, Ind_Growth : 4.9 },
        { Period : 2016, Can_Growth : 12.7, Viet_Growth : 7.8, Mal_Growth : 2.8, Egy_Growth : 5.0, Ind_Growth : 4.8 },
        { Period : 2017, Can_Growth : 13.7, Viet_Growth : 10.3, Mal_Growth : 2.8, Egy_Growth : 6.8, Ind_Growth : 5.3 },
        { Period : 2018, Can_Growth : 13.4, Viet_Growth : 15.5, Mal_Growth : 4.1, Egy_Growth : 7.8, Ind_Growth : 6.2 },
        { Period : 2019, Can_Growth : 12.9, Viet_Growth : 17.5, Mal_Growth : 6.8, Egy_Growth : 7.3, Ind_Growth : 7.8 },
        { Period : 2020, Can_Growth : 11.0, Viet_Growth : 19.5, Mal_Growth : 7.1, Egy_Growth : 8.2, Ind_Growth : 9.3 }
    ];
    public title: string = 'Crude Steel Production';
}

```

![Angular Line Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Angular-Line-Chart-2.png)

### Line chart resources

- [Learn more about the chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/line-chart "Angular Line Chart").
- [Try the online demo](https://ej2.syncfusion.com/angular/demos/#/material/chart/line "Angular Line Chart live demo").
- [Read the documentation](https://helpej2.syncfusion.com/angular/documentation/chart/chart-types#line-charts "Getting Started with Angular Line Chart").

## Column chart

Column charts plot data in several vertical bars that are useful for showing trends over time. Each bar’s length reflects the variable’s value. Column charts are helpful when the data set is small.

In this example, the column chart depicts two countries’ GDP annual growth rates from 2015 to 2021. US GDP trended downward until a massive increase in 2021, and India’s GDP contracted and expanded slightly over the years until a surge in 2021 similar to the US’s.

Refer to the following code example.

**app.component.html**

```xml
<ejs-chart [title]='title'>
    <e-series-collection>
        <e-series [dataSource]='data' type='Column' xName='Period' yName='Ind_Growth' name='India'> </e-series>
        <e-series [dataSource]='data' type='Column' xName='Period' yName='US_Growth' name='US'> </e-series>
    </e-series-collection>
</ejs-chart>

```

**app.component.ts**

```js
export class AppComponent {    
    public data: Object[] = [
        { Period : 2015, Ind_Growth : 8, US_Growth : 2.7, },
        { Period : 2016, Ind_Growth : 8.3, US_Growth : 1.7, },
        { Period : 2017, Ind_Growth : 6.8, US_Growth : 2.3, },
        { Period : 2018, Ind_Growth : 6.5, US_Growth : 2.9, },
        { Period : 2019, Ind_Growth : 3.7, US_Growth : 2.3, },
        { Period : 2021, Ind_Growth : 8.3, US_Growth : 5.7, }
    ];
    
    public title: string = 'GDP growth (annual %)';
}

```

![Angular Column Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Angular-Column-Chart-2.png)

### Column chart resources

- [Learn more about the column chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/column-chart "Angular Column Chart").
- [Try the online demo](https://ej2.syncfusion.com/angular/demos/#/material/chart/column "Syncfusion Angular Column Chart live demo").
- [Read the documentation](https://helpej2.syncfusion.com/angular/documentation/chart/chart-types#column-charts "Getting Started with Angular Column Chart").

## Bubble chart

Data with three dimensions can be represented using bubble charts. Three inputs are required: an x-value, a y-value, and the bubble’s size value. These charts can be used when you need to give users more information along with the data trend.

In this illustration, the number of sales of two products from 2000 to 2020 is plotted together with the revenue those sales generated. In 2012, Product A outsold Product B, but Product B generated much more revenue, as indicated by its bubble size.

Refer to the following code example.

**app.component.html**

```xml
<ejs-chart [title]='title'>
    <e-series-collection>
        <e-series [dataSource]='data' pointColorMapping="color" type='Bubble' size="TotalRevenue" xName='Period' yName='Sale' name='Product A'> </e-series>
        <e-series [dataSource]='data2' pointColorMapping="color" type='Bubble' size="TotalRevenue" xName='Period' yName='Sale' name='Product B'> </e-series>
    </e-series-collection>
</ejs-chart>
```

**app.component.ts**

```js
export class AppComponent {
    public data: Object[] = [
        { Period : 2000, TotalRevenue: 23, color: '#f5ccff', Sale : 37, },
        { Period : 2004, TotalRevenue: 101, color: '#e580ff', Sale : 36, },
        { Period : 2008, TotalRevenue: 142, color: '#db4dff', Sale : 36, },
        { Period : 2012, TotalRevenue: 204, color: '#d633ff', Sale : 47, },
        { Period : 2016, TotalRevenue: 541, color: '#d11aff', Sale : 46, },
        { Period : 2020, TotalRevenue: 110, color: '#cc00ff', Sale : 39, }
    ];
    public data2: Object[] = [
        { Period : 2000, TotalRevenue: 13, color: '#ffe0cc', Sale : 28, },
        { Period : 2004, TotalRevenue: 63, color: '#ffb380', Sale : 32, },
        { Period : 2008, TotalRevenue: 100, color: '#ff6600', Sale : 48, },
        { Period : 2012, TotalRevenue: 92, color: '#ff751a', Sale : 39, },
        { Period : 2016, TotalRevenue: 70, color: '#ff944d', Sale : 26, },
        { Period : 2020, TotalRevenue: 39, color: '#ffd1b3', Sale : 38, }
    ];
     
    public title: string = 'Product Sales';
}

```

![Angular Bubble Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Angular-Bubble-Chart-2.png)

### **Bubble chart resources**

- [Learn more about the bubble chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/bubble-chart "Angular Bubble Chart").
- [Try the online demo](https://ej2.syncfusion.com/angular/demos/#/material/chart/bubble "Syncfusion Angular Bubble Chart live demo").

## Stacked area chart

A stacked area chart assists you in detecting and comparing trends across various factors. A single chart can show how several series’ values have changed over time. You can use a stacked area chart when you want to track not only a total value, but also how that total value is broken down by contributors to it.

In the following example, I’ve illustrated the amount of revenue generated by various payment methods over the year. Each payment type—cash, credit card, debit card, and bank transfer—is plotted on top of one another to compose the total.

Refer to the following code example.

### **App.component.html**

```xml
<ejs-chart >
    <e-series-collection>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’OrganicSales’ name=’Bank Transfer’ [border]=’border’> </e-series>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’FairTradeSales’ name=’Credit Card’ [border]=’border’> </e-series>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’VegAlternativesSales’ name=’Debit Card’ [border]=’border’> </e-series>
        <e-series [dataSource]=’data’ type=’StackingArea’ xName=’Period’ yName=’OtherSales’ name=’Cash’ [border]=’border’> </e-series>
    </e-series-collection>
</ejs-chart>
```

**app.component.ts**

```js
export class AppComponent {public chartArea: Object = {
    border: {
        width: 0
    }
};
public width: string = ‘75%’;
public data: Object[] = [
    { Period : new Date(2000, 1, 1), OrganicSales : 0.61, FairTradeSales : 0.03, VegAlternativesSales : 0.48, OtherSales : 0.23 },
    { Period : new Date(2002, 1, 1), OrganicSales : 0.91, FairTradeSales : 0.06, VegAlternativesSales : 0.57, OtherSales : 0.17 },
    { Period : new Date(2004, 1, 1), OrganicSales : 1.19, FairTradeSales : 0.14, VegAlternativesSales : 0.63, OtherSales : 0.23 },        
    { Period : new Date(2006, 1, 1), OrganicSales : 1.74, FairTradeSales : 0.29, VegAlternativesSales : 0.66, OtherSales : 0.43 },        
    { Period : new Date(2008, 1, 1), OrganicSales : 1.99, FairTradeSales : 0.64, VegAlternativesSales : 0.77, OtherSales : 0.72 },        
    { Period : new Date(2010, 1, 1), OrganicSales : 1.48, FairTradeSales : 1.06, VegAlternativesSales : 0.54, OtherSales : 1.38 },        
    { Period : new Date(2012, 1, 1), OrganicSales : 1.66, FairTradeSales : 1.55, VegAlternativesSales : 0.61, OtherSales : 2.16 },        
    { Period : new Date(2014, 1, 1), OrganicSales : 1.67, FairTradeSales : 1.65, VegAlternativesSales : 0.67, OtherSales : 2.61 }
];
 
public title: string = ‘Amount of Sales by Payment Method’;
}
```

![Angular Stacked Area Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Angular-Stacked-Area-Chart-2.png)

### Stacked area chart resources

- [Learn more about the stacked area chart](https://www.syncfusion.com/angular-components/angular-charts/chart-types/stacked-area-chart "Angular Stack Area Chart").
- [Try the online demo](https://ej2.syncfusion.com/angular/demos/#/material/chart/stacked-area "Syncfusion Angular Stacked Chart live demo").

## Conclusion

In this blog, we’ve discussed four different Angular charts that are perfect for showing trends over time. Try out [Syncfusion Angular Charts](https://www.syncfusion.com/angular-components/angular-charts "Syncfusion Angular Charts") and let us know what you think in the comments section below. If you’re not an Angular developer, please check out our Charts component for other platforms, including:

- [Blazor](https://www.syncfusion.com/blazor-components/blazor-charts "Syncfusion Blazor Charts")
- [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-charts "Syncfusion JavaScript Charts")
- [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts "Syncfusion Xamarin Charts")
- [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-charts "Syncfusion Flutter Charts")
- [WinForms](https://www.syncfusion.com/winforms-ui-controls/chart "Syncfusion WinForms Chart")
- [WPF](https://www.syncfusion.com/wpf-ui-controls/charts "Syncfusion WPF Charts")
- [UWP](https://www.syncfusion.com/uwp-ui-controls/charts "Syncfusion UWP Charts")

Browse our [documentation](https://ej2.syncfusion.com/angular/documentation/chart/getting-started/ "Getting started with Angular Chart component") to learn more about our other Angular widgets.

You can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forums"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [A Complete Guide to Creating A Mind Map Using Angular Diagram Component](https://www.syncfusion.com/blogs/post/mind-map-using-angular-diagram.aspx "Blog: A Complete Guide to Creating A Mind Map Using Angular Diagram Component")
- [Debug Angular Apps Easily Using Angular Devtools](https://www.syncfusion.com/blogs/post/debug-angular-apps-easily-using-angular-devtools.aspx "Blog: Debug Angular Apps Easily Using Angular Devtools")
- [Easy Steps to Create A Read-Only Angular PDF Viewer](https://www.syncfusion.com/blogs/post/easy-steps-to-create-a-read-only-angular-pdf-viewer.aspx "Blog: Easy Steps to Create A Read-Only Angular PDF Viewer")
- [Easily Generate Bulk Reports Using Mail Merge in Angular](https://www.syncfusion.com/blogs/post/easily-generate-bulk-reports-using-mail-merge-in-angular.aspx "Blog: Easily Generate Bulk Reports Using Mail Merge in Angular")