Next-Level Charting: Explore the New Angular Range Step Area Chart
Tags: angular, chart, webdev, whatsnew
Published: 2023-06-02 05:31:36

---
title: Next-Level Charting: Explore the New Angular Range Step Area Chart
published: true
date: 2023-05-30 11:00:00 UTC
tags: angular, chart, webdev, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/angular-range-step-area-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62854ex8ir3ill4kdlix.png
---
Syncfusion [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts "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](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release, we added one more chart to our collection: the [range step area chart](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/range-step-area "Getting Started with Angular Range Step Area"). 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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Angular-Range-Step-Area-Chart.png" alt="Angular Range Step Area Chart" style="width:100%">

  <figcaption>Angular Range Step Area Chart</figcaption>

</figure>
## 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.
<table style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 33.3333%;">Value</td>
<td style="width: 33.3333%;">Type</td>
<td style="width: 33.3333%;">Description</td>
</tr>
<tr>
<td style="width: 33.3333%;">X</td>
<td style="width: 33.3333%;">Int/ Double/ String/ DateTime</td>
<td style="width: 33.3333%;">X-axis value of the data point.</td>
</tr>
<tr>
<td style="width: 33.3333%;">High</td>
<td style="width: 33.3333%;">Int/ Double</td>
<td style="width: 33.3333%;">Denotes the high value in the data series.</td>
</tr>
<tr>
<td style="width: 33.3333%;">Low</td>
<td style="width: 33.3333%;">Int/ Double</td>
<td style="width: 33.3333%;">Denotes the low value in the data series.</td>
</tr>
</tbody>
</table>
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.

```xml
<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 }
  ];
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Visualizing-Temperature-Variation-in-a-Year-Using-Angular-Range-Step-Area-Chart.png" alt="Visualizing Temperature Variation in a Year Using Angular Range Step Area Chart" style="width:100%">

  <figcaption>Visualizing Temperature Variation in a Year Using Angular Range Step Area Chart</figcaption>

</figure>
## 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.

```xml
<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
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Adding-Markers-to-the-Angular-Range-Step-Area-Chart-1.png" alt="Adding Markers to the Angular Range Step Area Chart" style="width:100%">

  <figcaption>Adding Markers to the Angular Range Step Area Chart</figcaption>

</figure>
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.

```xml
<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
    }
 }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Adding-Data-Labels-to-the-Angular-Range-Step-Area-Chart.png" alt="Adding Data Labels to the Angular Range Step Area Chart" style="width:100%">

  <figcaption>Adding Data Labels to the Angular Range Step Area Chart</figcaption>

</figure>
### 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.

```xml
<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 }
 ];
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Empty-Data-Point-in-Angular-Range-Step-Area-Chart.png" alt="Empty Data Point in Angular Range Step Area Chart" style="width:100%">

  <figcaption>Empty Data Point in Angular Range Step Area Chart</figcaption>

</figure>
### Customization

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

- [Fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel/#fill "Fill property of Angular Range Step Area Chart")—To change the color of the data series.
- [Opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel/#opacity "Opacity property of Angular Range Step Area Chart")—To control the transparency of the fill color.
- [DashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel/#dasharray "DashArray property of Angular Range Step Area Chart")—To alter the pattern of dashes in the data series.
- [Border](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel/#border "Border property of Angular Range Step Area Chart")—To modify the [color](https://helpej2.syncfusion.com/angular/documentation/api/chart/borderModel/#color "Color property of Angular Range Step Area Chart") and [width](https://helpej2.syncfusion.com/angular/documentation/api/chart/borderModel/#width "Width property of Angular Range Step Area Chart") of the chart series border.

Refer to the following code example.

```xml
<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 };

}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Customizing-the-Appearance-of-the-Angular-Range-Step-Area-Chart.png" alt="Customizing the Appearance of the Angular Range Step Area Chart" style="width:100%">

  <figcaption>Customizing the Appearance of the Angular Range Step Area Chart</figcaption>

</figure>
### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Data-Visualization-Features-in-the-Angular-Range-Step-Area-Chart.png)
_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](https://ej2.syncfusion.com/angular/documentation/chart/getting-started "Creating an Angular app with Chart component") application.
2.Then, install the [ej2-angular-charts](https://www.npmjs.com/package/@syncfusion/ej2-angular-charts "@syncfusion/ej2-angular-charts NPM Package") NPM package in your application.
3.Initialize the Angular range step area chart like in the following code example.

```xml
<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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Integrating-a-Range-Step-Area-Chart-in-an-Angular-Application.png" alt="Integrating a Range Step Area Chart in an Angular Application" style="width:100%">

  <figcaption>Integrating a Range Step Area Chart in an Angular Application</figcaption>

</figure>
## References

For more details, refer to the [Angular Range Step Area Chart documentation](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/range-step-area "Getting Started with Angular Range Step Area Chart"), [live demos](https://ej2.syncfusion.com/angular/demos/#/bootstrap5/chart/range-step-area "Angular Range Step Area Chart demos"), and [API documentation](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel/#type "Angular Charts API documentation").

## Conclusion

Thanks for reading! In this blog, we have seen the features of the new [Angular range step area chart](https://ej2.syncfusion.com/angular/documentation/chart/chart-types/range-step-area "Getting started with Angular Range Step Area Chart") rolled out in the [2023 Volume 1](https://www.syncfusion.com/forums/181344/essential-studio-2023-volume-1-main-release-v21-1-35-is-available-for-download "Essential Studio 2023 Volume 1") release. Other features from this release are detailed in our [Release Notes](https://www.syncfusion.com/products/release-history "Essential Studio 2023 Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/angular "Essential Studio 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](https://www.syncfusion.com/account/downloads "Essential Studio license and downloads page"). If you are not a customer, you can try our Syncfusion Angular components by downloading our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products").

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [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!