Skip to content

Documentation(1045652): Improved React Charts Documentation #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Nithyasri-Thirumal04 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Documentation(1045652): Improved React Charts Documentation #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 32 additions & 21 deletions chart-sdk/react/charts/chart-types/area.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,23 @@
---
layout: post
title: Area Chart in React Charts | Syncfusion
description: Learn here all about Area Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more.
control: Area Chart
description: Learn to render, customize, and bind Area series in Syncfusion React Charts to visualize trends with filled regions, gradient fills, and border styling.
control: Area Chart
platform: chart-sdk
documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---

# Area Chart in React Charts

## Area

To render a area series, use series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `Area` and inject `AreaSeries` module into the `services`.
An [area](https://www.syncfusion.com/react-components/react-charts/chart-types/area-chart) chart is ideal for showing trends over time or across categories, with filled regions beneath the lines representing data points. The Area series is available in the Syncfusion EJ2 React Charts package.

To render an [area](https://www.syncfusion.com/react-components/react-charts/chart-types/area-chart) series in your chart, you need to follow a few steps to configure it correctly. Here's a concise guide on how to do this:
## Area

1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Area` in your chart configuration. This indicates that the data should be represented as an area chart, which is ideal for showing trends over time or across categories, with filled areas beneath the lines representing data points.
To render an area series, define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Area` and inject the `AreaSeries` module using `<Inject services={[AreaSeries]}/>` inside the `ChartComponent`. The basic configuration steps are:

2. **Inject the AreaSeries module**: Inject the `AreaSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering area series are available in your chart.
1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Area` in your chart configuration.
2. **Inject the AreaSeries module**: Inject the `AreaSeries` module using `<Inject services={[AreaSeries]}/>`. This makes the area-series rendering functionality available to the chart.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -39,7 +38,7 @@ To render an [area](https://www.syncfusion.com/react-components/react-charts/cha

## Binding data with series

You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#yname) properties.
Bind data to the chart by using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#datasource) property on the series. Map the data fields to the chart series [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#xname) and [`yName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#yname) properties so each point is plotted correctly.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -58,11 +57,11 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c

{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/area-cs1" %}

## Series customization
## Series customization

The following properties can be used to customize the `area` series.

**Fill**
**Solid fill**

The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property determines the color applied to the series.

Expand All @@ -83,7 +82,9 @@ The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#

{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs20" %}

The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property can be used to apply a gradient color to the area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another.
**Gradient fill**

The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property accepts an SVG gradient reference, allowing you to apply a smooth color transition to the area series. Define the gradient with a unique ID, and assign it to the `fill` property using the `url(#gradientId)` syntax. The area fill then transitions between the gradient stops.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand Down Expand Up @@ -125,7 +126,11 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod

## Area border

Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#border) property to configure the border width, color, and dasharray of the area series.
Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#border) property to configure the border width, color, and `dashArray` of the area series. Pass it as an object on the series, for example:

```javascript
const border = { width: 2, color: '#962D18', dashArray: '5,5' };
```

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -146,7 +151,13 @@ Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/seri

## Multicolored area

To render a multicolored area series, use the series type as `MultiColoredArea`, and inject the `MultiColoredAreaSeries` module into the `services`. The required `segments` of the series can be customized using the `value`, `color`, and `dashArray`.
Use a multicolored area when you want each segment of the area to use a different color—for example, to highlight threshold crossings or category changes. Set the series type to `MultiColoredArea`, inject the `MultiColoredAreaSeries` module, and configure the `segments` array on the series using `value`, `color`, and optional `dashArray` to mark the breakpoints. Set `segmentAxis='X'` to evaluate segment breakpoints along the X axis (use `'Y'` for the Y axis). Each `SegmentDirective` entry has the shape:

```javascript
<SegmentDirective value={2007} color='blue' />
```

where `value` is the breakpoint on the chosen axis and `color` is the segment fill.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -167,11 +178,11 @@ To render a multicolored area series, use the series type as `MultiColoredArea`,

## Empty points

Data points with `null` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart.
Data points with `null` or `undefined` values are considered empty. Use the `emptyPointSettings` property to control how empty points are handled; the default mode is `Gap`, which leaves a break in the line at the empty point.

**Mode**

Use the [`mode`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/emptyPointSettingsModel#mode) property to control handling of empty points. Available modes: `Gap`, `Drop`, `Zero`, `Average`. The default mode is `Gap`.
Use the [`mode`](https://ej2.syncfusion.com/react/documentation/api/chart/emptyPointSettingsModel#mode) property of `emptyPointSettings` to control how empty points are rendered. Available modes are `Gap` (leave a break, the default), `Drop` (Ignores the empty point during rendering), `Zero` (plot as zero), and `Average` (plot as the average of neighboring points).

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -192,7 +203,7 @@ Use the [`mode`](https://ej2.syncfusion.com/react/documentation/api/accumulation

**Fill**

Use the [`fill`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/emptyPointSettingsModel#fill) property to set the fill color for empty points.
Use the [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/emptyPointSettingsModel#fill) property of `emptyPointSettings` to set the fill color for empty points.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -213,7 +224,7 @@ Use the [`fill`](https://ej2.syncfusion.com/react/documentation/api/accumulation

**Border**

Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/emptyPointSettingsModel#border) property to customize the border width and color for empty points.
Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/chart/emptyPointSettingsModel#border) property of `emptyPointSettings` to customize the border width and color for empty points.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -236,7 +247,7 @@ Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/accumulati

### Series render

The [`seriesRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iSeriesRenderEventArgs) event enables modification of series properties (for example, data, fill, or name) immediately before rendering. Use this event to adjust series appearance or to dynamically swap data sources.
The [`seriesRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iseriesrendereventargs) event fires before each series is rendered. Use its event arguments to modify the series data, fill, or name dynamically before rendering.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -257,7 +268,7 @@ The [`seriesRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iS

### Point render

The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPointRenderEventArgs) event provides a hook to customize each data point (for example, marker shape, border, or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting.
The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/ipointrendereventargs) event fires for each data point before it is drawn. Use its event arguments to customize the appearance of individual points before they are rendered.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -276,7 +287,7 @@ The [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPo

{% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs50" %}

## See Also
## See also

* [Data label](../data-labels)
* [Tooltip](../tool-tip)
Expand Down
Loading