Next-Level Charting: Explore the New Angular Range Step Area Chart
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (181).NET Core  (28).NET MAUI  (227)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (42)Black Friday Deal  (1)Blazor  (236)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (200)File Formats  (74)Flutter  (137)JavaScript  (226)Microsoft  (122)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (967)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (163)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (11)Business intelligence  (55)Button  (4)C#  (164)Chart  (148)Chart of the week  (58)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (681)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (21)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (522)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (112)UI  (406)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (628)What's new  (343)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Next-Level Charting: Explore the New Angular Range Step Area Chart

Next-Level Charting: Explore the New Angular Range Step Area Chart

Syncfusion Angular Charts is a well-crafted charting component for data visualization. It contains a rich UI gallery of 50+ charts and graphs, ranging from line to financial, that cater to all charting scenarios.

In our 2023 Volume 1 release, we added one more chart to our collection: the range step area chart. In this blog, we’ll explore its stunning, user-friendly features and the steps to integrate it into your application.

Overview

The new Angular range step area chart is designed to display continuous data points as steps that fluctuate between high and low values over time intervals and across different categories.

Unlike the traditional area charts, the areas between the high and low values in the range step area chart are filled with color, and a step line connects the data points.

Angular Range Step Area Chart
Angular Range Step Area Chart

Why use a range step area chart?

The Angular range step area chart is particularly useful when you need to showcase the variation between minimum and maximum values in a data set, such as temperature and price fluctuations. You can use it to plot data, emphasizing steps and gradual changes.

To utilize the range step area chart effectively, you need to provide the following values as input.

ValueTypeDescription
XInt/ Double/ String/ DateTimeX-axis value of the data point.
HighInt/ DoubleDenotes the high value in the data series.
LowInt/ DoubleDenotes the low value in the data series.

Refer to the following code example. In it, we have used the Angular range step area chart to visualize the temperature variation in a year.

<e-series-collection>
  <e-series [dataSource]='data' 
            [border]='border' 
            [marker]='marker' 
            [opacity]='opacity' 
            type='RangeStepArea' 
            xName='x' 
            high='high' 
            low='low'>
 </e-series>
</e-series-collection>

export class AppComponent {

  public data: Object[] = [
    { x: 'Jan', high: 29, low: 22 },
    { x: 'Feb', high: 32, low: 22 },
    { x: 'Mar', high: 35, low: 25 },
    { x: 'Apr', high: 37, low: 27 },
    { x: 'May', high: 35, low: 25 },
    { x: 'Jun', high: 32, low: 22 },
    { x: 'Jul', high: 30, low: 20 },
    { x: 'Aug', high: 32, low: 22 },
    { x: 'Sep', high: 35, low: 25 },
    { x: 'Oct', high: 37, low: 27 },
    { x: 'Nov', high: 35, low: 25 },
    { x: 'Dec', high: 32, low: 22 }
  ];
}
Visualizing Temperature Variation in a Year Using Angular Range Step Area Chart
Visualizing Temperature Variation in a Year Using Angular Range Step Area Chart

Key features

The Angular range step area chart supports the following key features.

Markers and data labels

You can mark the data points in the chart with various built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. You can also use images to make the data points more visually appealing.

Refer to the following code example to enable markers for a data series.

<e-series-collection>
   <e-series
       [dataSource]='data' 
       [border]='border'
       [marker]='marker' 
       [opacity]='opacity' 
       type='RangeStepArea' 
       xName='x' 
       high='high' 
       low='low'>
  </e-series>
</e-series-collection>

export class AppComponent {

 public marker: Object = {
    visible: true,
    height: 10,
    width: 10
 }
}
Adding Markers to the Angular Range Step Area Chart
Adding Markers to the Angular Range Step Area Chart

Data labels help us to display information about the data points within a chart. You can also add a template to display data labels with HTML elements such as images, divs, and spans. Additionally, the data labels can be rotated to any desired angle.

Refer to the following code example to enable data labels in the chart.

<e-series-collection>
   <e-series
       [dataSource]='data' 
       [border]='border'
       [marker]='marker' 
       [opacity]='opacity' 
       type='RangeStepArea' 
       xName='x' 
       high='high' 
       low='low'>
   </e-series>
</e-series-collection>

export class AppComponent {

 public marker: Object = {
    visible: true,
    dataLabel: {
      visible: true
    }
 }
}
Adding Data Labels to the Angular Range Step Area Chart
Adding Data Labels to the Angular Range Step Area Chart

Empty points

When no data is available for a specific date or category, you can elegantly handle that in the chart using an empty data point.

Refer to the following code example.

<e-series-collection>
    <e-series 
          [dataSource]='data'
          [emptyPointSettings]="emptyPointSettings" 
          [border]='border'
          [marker]='marker'
          [opacity]='opacity'
          type='RangeStepArea'
          xName='x'
          high='high'
          low='low'>
    </e-series>
</e-series-collection>

export class AppComponent {

 public data: Object[] = [
    { x: 'Jan', high: 29, low: 22 },
    { x: 'Feb', high: 32, low: 22 },
    { x: 'Mar', high: 35, low: 25 },
    { x: 'Apr', high: 37, low: 27 },
    { x: 'May', high: null, low: null },
    { x: 'Jun', high: 32, low: 22 },
    { x: 'Jul', high: 30, low: 20 },
    { x: 'Aug', high: 32, low: 22 },
    { x: 'Sep', high: 35, low: 25 },
    { x: 'Oct', high: 37, low: 27 },
    { x: 'Nov', high: 35, low: 25 },
    { x: 'Dec', high: 32, low: 22 }
 ];
}
Empty Data Point in Angular Range Step Area Chart
Empty Data Point in Angular Range Step Area Chart

Customization

You can easily customize the appearance of the range step area chart using the following built-in APIs:

  • Fill—To change the color of the data series.
  • Opacity—To control the transparency of the fill color.
  • DashArray—To alter the pattern of dashes in the data series.
  • Border—To modify the color and width of the chart series border.

Refer to the following code example.

<e-series-collection>
     <e-series 
           [dataSource]='data' 
           dashArray="2,3" [border]='border' 
           [marker]='marker'
          [opacity]='opacity' 
          type='RangeStepArea' 
          xName='x' 
          high='high' 
          low='low'>
    </e-series>
</e-series-collection>

export class AppComponent {

 public border: Object = { width: 2 };

}
Customizing the Appearance of the Angular Range Step Area Chart
Customizing the Appearance of the Angular Range Step Area Chart

Other supported features

The range step area chart also supports other data visualization capabilities, including animation, multiple series, tooltips, legends, zooming, and panning.

Data Visualization Features in the Angular Range Step Area Chart
Data Visualization Features in the Angular Range Step Area Chart

Getting started with the Angular range step area chart

We have explored the remarkable features of the Angular range step area chart. Let’s see the steps to integrate it into your Angular application:

  1. First, create a new Angular application.
  2. Then, install the ej2-angular-charts NPM package in your application.
  3. Initialize the Angular range step area chart like in the following code example.
<ejs-chart id='range_container' [width]='width' [title]='title' [primaryXAxis]='primaryXAxis' [primaryYAxis] = 'primaryYAxis' [tooltip] = 'tooltip' [legendSettings]='legend'>
  <e-series-collection>
     <e-series [dataSource]='data' name="2021" [border]='border' type='RangeStepArea' xName='x' high='high' low='low'>
     </e-series>                
  </e-series-collection>
</ejs-chart>

export class AppComponent {
  public primaryXAxis: Object = {
    valueType: 'Category',
  };
  public primaryYAxis: Object = {
    labelFormat: '{value}˚C',
  };
  public marker: Object = {
    visible: true,
  }
  public legend: Object = {
    visible: true,
  }
  public title: string = 'Temperature Variation by Month';
  public tooltip: Object = {
    enable: true,
    format:'Temperature : <b>${point.low} - ${point.high}</b>',
    header: '<b>${point.x}</b>',
  };
  public data: Object[] = [
    { x: 'Jan', high: 29, low: 22 },
    { x: 'Feb', high: 32, low: 22 },
    { x: 'Mar', high: 35, low: 25 },
    { x: 'Apr', high: 37, low: 27 },
    { x: 'May', high: 35, low: 25 },
    { x: 'Jun', high: 32, low: 22 },
    { x: 'Jul', high: 30, low: 20 },
    { x: 'Aug', high: 32, low: 22 },
    { x: 'Sep', high: 35, low: 25 },
    { x: 'Oct', high: 37, low: 27 },
    { x: 'Nov', high: 35, low: 25 },
    { x: 'Dec', high: 32, low: 22 }
  ];
  constructor() {
    //code
  };
}

In the this code example, we have bound the data for monthly temperature variation to the chart and mapped the high and low values to the High and Low properties.

Refer to the following output image.

Integrating a Range Step Area Chart in an Angular Application
Integrating a Range Step Area Chart in an Angular Application

References

For more details, refer to the Angular Range Step Area Chart documentation, live demos, and API documentation.

Conclusion

Thanks for reading! In this blog, we have seen the features of the new Angular range step area chart rolled out in the 2023 Volume 1 release. Other features from this release are detailed in our Release Notes and What’s New pages. Try them out to elegantly visualize your data and leave your feedback in the comments below!

If you are already our customer, you can access the latest version of Essential Studio on the license and downloads page. If you are not a customer, you can try our Syncfusion Angular components by downloading our 30-day free trial.

For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed