From 033b9a8bb4c6cde009c499072c8b6f92b796e09c Mon Sep 17 00:00:00 2001 From: NithyasriThirumal Date: Mon, 17 Aug 2026 13:14:02 +0530 Subject: [PATCH] Improved React Charts --- chart-sdk/react/charts/chart-types/area.md | 53 +++++++++++-------- chart-sdk/react/charts/chart-types/bar.md | 43 +++++++-------- .../react/charts/chart-types/box-whisker.md | 25 ++++----- chart-sdk/react/charts/chart-types/bubble.md | 22 ++++---- chart-sdk/react/charts/chart-types/candle.md | 37 +++++++------ chart-sdk/react/charts/chart-types/column.md | 47 ++++++++-------- .../react/charts/chart-types/error-bar.md | 44 ++++++++++----- .../charts/chart-types/high-low-open-close.md | 35 +++++++----- .../react/charts/chart-types/high-low.md | 36 ++++++++----- .../react/charts/chart-types/histogram.md | 30 ++++++++--- 10 files changed, 219 insertions(+), 153 deletions(-) diff --git a/chart-sdk/react/charts/chart-types/area.md b/chart-sdk/react/charts/chart-types/area.md index 3cac65dac..013310566 100644 --- a/chart-sdk/react/charts/chart-types/area.md +++ b/chart-sdk/react/charts/chart-types/area.md @@ -1,8 +1,8 @@ --- 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 @@ -10,15 +10,14 @@ 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 `` 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 ``. This makes the area-series rendering functionality available to the chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -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" %} @@ -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. @@ -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" %} @@ -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" %} @@ -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 + +``` + +where `value` is the breakpoint on the chosen axis and `color` is the segment fill. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -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" %} @@ -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" %} @@ -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" %} @@ -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" %} @@ -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" %} @@ -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) diff --git a/chart-sdk/react/charts/chart-types/bar.md b/chart-sdk/react/charts/chart-types/bar.md index 0c32cb985..4a6789e30 100644 --- a/chart-sdk/react/charts/chart-types/bar.md +++ b/chart-sdk/react/charts/chart-types/bar.md @@ -1,7 +1,7 @@ --- layout: post title: Bar Chart in React Charts | Syncfusion -description: Learn here all about Bar Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Bar series in Syncfusion React Charts for comparing values across categories with adjustable width and spacing. control: Bar Chart platform: chart-sdk documentation: ug @@ -60,7 +60,7 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c The following properties can be used to customize the `bar` series. -**Fill** +**Solid fill** The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property determines the color applied to the series. @@ -81,7 +81,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-cs30" %} -The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property can be used to apply a gradient color to the bar 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 bar series. Define the gradient with a unique ID, and assign it to the `fill` property using the `url(#gradientId)` syntax. The bar fill then transitions between the gradient stops. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -142,11 +144,11 @@ Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/series {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs55" %} -## Bar space and width +## Bar spacing and width -### Bar space +### Bar spacing -Use the [`columnSpacing`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnspacing) property in the series to adjust the space between bars. +Use the [`columnSpacing`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnspacing) property in the series to adjust the space between bars. The value must be between `0` and `1` and represents the spacing between bars as a fraction of the bar width. For example, `columnSpacing=0.5` applies spacing equal to half the bar width. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -167,7 +169,7 @@ Use the [`columnSpacing`](https://ej2.syncfusion.com/react/documentation/api/cha ### Bar width -Use the [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnwidth) property in the series to adjust the width of the bars. +Use the [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnwidth) property in the series to adjust the width of the bars. The value must be between `0` and `1` and determines the relative width of each bar within the space allocated to its category. For example, `columnWidth=0.8` uses 80% of the available category width. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -186,9 +188,9 @@ Use the [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs59" %} -### Bar width in pixel +### Bar width in pixels -Use the [`columnWidthInPixel`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnwidthinpixel) property in the series to define the exact width of the bars in pixels. This property ensures that each bar maintains the specified width, providing a uniform appearance throughout the chart. +Use the [`columnWidthInPixel`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnwidthinpixel) property in the series to define the exact width of the bars in pixels. This property ensures that each bar maintains the specified width, providing a uniform appearance throughout the chart. For example, `columnWidthInPixel={50}` renders each bar 50 pixels wide. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -207,9 +209,9 @@ Use the [`columnWidthInPixel`](https://ej2.syncfusion.com/react/documentation/ap {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs60" %} -## Grouped bar +## Grouped bars -Use the [`groupName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#groupname) property to group the data points in bar type charts. Data points with the same group name will be grouped together in the chart, making it easy to compare different sets of data. +Use the [`groupName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#groupname) property to group the data points in bar type charts. Data points with the same group name will be grouped together in the chart, making it easy to compare different sets of data. For example, two series that both set `groupName='A'` are rendered side-by-side within the same group, while a series with `groupName='B'` is rendered in a separate group. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -230,7 +232,7 @@ Use the [`groupName`](https://ej2.syncfusion.com/react/documentation/api/chart/s ## Cylindrical bar chart -To render a cylindrical bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnfacet) property to `Cylinder` in the chart series. This property transforms the regular bars into cylindrical shapes, enhancing the visual representation of the data. +To render a cylindrical bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnfacet) property to `Cylinder` in the chart series. This property transforms the regular bars into cylindrical shapes. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -249,14 +251,13 @@ To render a cylindrical bar chart, set the [`columnFacet`](https://ej2.syncfusio {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs39" %} - ## 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. Empty data points are not plotted on the chart. **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" %} @@ -277,7 +278,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" %} @@ -298,7 +299,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" %} @@ -319,7 +320,7 @@ Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/accumulati ## Corner radius -The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/series#cornerradius) property in the chart series is used to customize the corner radius for bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the topLeft, topRight, bottomLeft, and bottomRight properties. +The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/series#cornerradius) property in the chart series is used to customize the corner radius for bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the `topLeft`, `topRight`, `bottomLeft`, and `bottomRight` properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -340,7 +341,7 @@ The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/se ### Point corner radius -You can customize the corner radius for individual points in the chart series using the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPointRenderEventArgs) event by setting the [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/iPointRenderEventArgs#cornerradius) property in its event argument. +You can customize the corner radius for individual points in the chart series using the [`pointRender`](https://ej2.syncfusion.com/react/documentation/api/chart/iPointRenderEventArgs) event by setting the `cornerRadius` property on its event argument, for example `args.cornerRadius = { topLeft: 8, topRight: 8, bottomLeft: 0, bottomRight: 0 }`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -363,7 +364,7 @@ You can customize the corner radius for individual points in the chart series us ### 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" %} @@ -384,7 +385,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" %} diff --git a/chart-sdk/react/charts/chart-types/box-whisker.md b/chart-sdk/react/charts/chart-types/box-whisker.md index da2edc821..2a8641109 100644 --- a/chart-sdk/react/charts/chart-types/box-whisker.md +++ b/chart-sdk/react/charts/chart-types/box-whisker.md @@ -1,7 +1,7 @@ --- layout: post title: Box and Whisker Chart in React Charts | Syncfusion -description: Learn here all about Box and Whisker in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render and customize Box and Whisker series in Syncfusion React Chart to visualize statistical distributions with plot modes and mean indicators. control: Box and Whisker platform: chart-sdk documentation: ug @@ -15,9 +15,9 @@ To render a `box and whisker` series in your chart, you need to follow a few ste 1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `BoxAndWhisker` in your chart configuration. This indicates that the data should be represented as a box and whisker chart, which will plot segments to illustrate the statistical distribution of the data. -2. **Inject the BoxAndWhiskerSeries module**: Inject the `BoxAndWhisker` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering box and whisker series are available in your chart. +2. **Inject the BoxAndWhiskerSeries module**: Inject the `BoxAndWhiskerSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering box and whisker series are available in your chart. -3. **Data requirements**: The y field of the Box and Whisker series requires a specific number of data points, with a minimum of five values needed to plot a segment. +3. **Data requirements**: The `y` field of the Box and Whisker series requires a specific number of data points, with a minimum of five values needed to plot a segment (minimum, lower quartile, median, upper quartile, and maximum). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -61,7 +61,7 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c The following properties can be used to customize the `box and whisker` series. -*Fill** +**Solid fill** The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property determines the color applied to the series. @@ -82,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/box-cs4" %} -The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property can be used to apply a gradient color to the box and whisker 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 box and whisker series. Define the gradient with a unique ID, and assign it to the `fill` property using the `url(#gradientId)` syntax. The series fill then transitions between the gradient stops. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -124,7 +126,7 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod **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 box and whisker 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 box and whisker series. Pass it as an object on the series, for example `border={{ width: 2, color: '#962D18', dashArray: '5,5' }}`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -145,8 +147,7 @@ Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/series ## Box plot -You can change the rendering mode of the Box and Whisker series using the `boxPlotMode` property. -The default boxPlotMode is `exclusive`.The other boxPlotMode available are `inclusive` and `normal`. +You can change the rendering mode of the Box and Whisker series using the [`boxPlotMode`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesmodel#boxplotmode) property. The default mode is `exclusive`, which renders a single line for outliers only when they fall outside the whiskers. The other available modes are `inclusive` and `normal`, which use different quartile calculation methods to determine the box and whisker positions. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -167,7 +168,7 @@ The default boxPlotMode is `exclusive`.The other boxPlotMode available are `incl ## Show mean -In the box and whisker series, the [`showMean`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#showmean) property is used to display the average value of the box and whisker. The default value of `showMean` is **false**. +Use the [`showMean`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#showmean) property to display the average value of the distribution. Set `showMean={true}` to render a marker at the mean position of each box. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -190,7 +191,7 @@ In the box and whisker series, the [`showMean`](https://ej2.syncfusion.com/react ### 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" %} @@ -211,7 +212,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" %} @@ -230,7 +231,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/box-cs10" %} -## See Also +## See also * [Data label](../data-labels) * [Tooltip](../tool-tip) diff --git a/chart-sdk/react/charts/chart-types/bubble.md b/chart-sdk/react/charts/chart-types/bubble.md index e478a387d..260ae6cfc 100644 --- a/chart-sdk/react/charts/chart-types/bubble.md +++ b/chart-sdk/react/charts/chart-types/bubble.md @@ -1,8 +1,8 @@ --- layout: post title: Bubble Chart in React Charts | Syncfusion -description: Learn here all about Bubble Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Bubble Chart +description: Learn to render, customize, and bind Bubble series in Syncfusion React Charts to plot three-variable data with size mapping, fill, and opacity. +control: Bubble Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -82,7 +82,7 @@ The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel# **Opacity** -The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#opacity) property controls the transparency of the fill and affects how the series blends with background or overlapping series. +The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#opacity) property controls the transparency of the fill and affects how the series blends with background or overlapping series. For example, `opacity={0.5}` makes each bubble semi-transparent. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -103,7 +103,7 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod ## Size mapping -Use the [`size`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#size) property to map the size of each bubble to the value specified in the data source. +Use the [`size`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#size) property to map the size of each bubble to a numeric field in the data source. For example, `size='size'` maps a numeric field from the data source to the bubble size, allowing relative comparison between data points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -124,11 +124,11 @@ Use the [`size`](https://ej2.syncfusion.com/react/documentation/api/chart/series ## 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. Empty data points are not plotted on the chart. **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" %} @@ -149,7 +149,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" %} @@ -170,7 +170,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, for example `border={{ width: 1.5, color: 'green' }}`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -193,7 +193,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" %} @@ -214,7 +214,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" %} @@ -233,7 +233,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/bubble-cs6" %} -## See Also +## See also * [Data label](../data-labels) * [Tooltip](../tool-tip) diff --git a/chart-sdk/react/charts/chart-types/candle.md b/chart-sdk/react/charts/chart-types/candle.md index 149509f29..9320b3e04 100644 --- a/chart-sdk/react/charts/chart-types/candle.md +++ b/chart-sdk/react/charts/chart-types/candle.md @@ -1,7 +1,7 @@ --- layout: post title: Candle Chart in React Charts | Syncfusion -description: Learn here all about Candle in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Candle series in Syncfusion React Charts to visualize stock price movements with high, low, open, and close values. control: Candle platform: chart-sdk documentation: ug @@ -13,11 +13,11 @@ domainurl: https://help.syncfusion.com/chart-sdk The Candle series, similar to the Hilo Open Close series, is used to represent the low, high, open, and closing prices over time. It is commonly used in financial charts to visualize stock price movements. -To render a [`candle`](https://www.syncfusion.com/react-components/react-charts/chart-types/stock-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: +To render a [`candle`](https://ej2.syncfusion.com/react/demos/#/bootstrap5/chart/candle.html) 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: 1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Candle` in your chart configuration. This indicates that the data should be represented as a candle chart, providing a detailed view of stock price fluctuations by displaying the high, low, open, and close values for each time period. -2. **Inject the CandleSeries module**: Inject `CandleSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering candle series are available in your chart. +2. **Inject the CandleSeries module**: Inject the `CandleSeries` module into the chart's `services` using ``. The samples below also inject `Category` so the x-axis renders month labels correctly. Inject additional modules such as `Tooltip`, `Crosshair`, or `Zoom` if your scenario requires them. 3. **Provide high, low, open, and close values**: The `Candle` series requires five fields (x, high, low, open, and close) to accurately display the stock's high, low, open, and close prices. Ensure that your data source includes these fields to create a detailed representation of stock price movements over time. @@ -61,35 +61,38 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c ## Hollow candles -Hollow candles in candle charts allow you to visually compare the current price with the previous price by coloring them differently. The candles are filled or left hollow based on the following criteria: +Hollow candles in candle charts allow you to visually compare the current price with the previous price by coloring them differently. This is the default rendering mode (when `enableSolidCandles` is **false**). The candles are filled or left hollow based on the following criteria: +
- + - + - +
StatesDescription Description
Filledcandlesticks are filled when the close value is lesser than the open valueCandlesticks are filled when the close value is less than the open value, indicating a price drop.
Unfilledcandlesticks are unfilled when the close value is greater than the open valueCandlesticks are unfilled when the close value is greater than the open value, indicating a price rise.
-The color of the candle will be defined by comparing it with previous values. The bear color will be applied when the current closing value is greater than the previous closing value. The bull color will be applied when the current closing value is less than the previous closing value. +The candle color is determined by comparing the current closing value with the previous closing value. In hollow-candle mode, the candle body is filled or hollow based on the relationship between its own opening and closing values, as described in the table above. By default, the `bullFillColor` is set to **red** and the `bearFillColor` is set to **green**. +To customize the colors, set the [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#bullfillcolor) and [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#bearfillcolor) properties on the series. + ## Solid candles -The [`enableSolidCandles`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#enablesolidcandles) property is used to enable or disable solid candles. By default, it is set to **false**. The fill color of the candle will be determined by its opening and closing values. +The [`enableSolidCandles`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#enablesolidcandles) property is used to enable or disable solid candles. By default, it is set to **false** (hollow candles). When set to **true**, the fill color of each candle is determined by its opening and closing values: -* The [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#bearfillcolor) will be applied when the opening value is less than the closing value. -* The [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#bullfillcolor) will be applied when the opening value is greater than the closing value. +* The [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#bearfillcolor) is applied when the opening value is less than the closing value (price rose during the period). +* The [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#bullfillcolor) is applied when the opening value is greater than the closing value (price fell during the period). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -110,11 +113,11 @@ The [`enableSolidCandles`](https://ej2.syncfusion.com/react/documentation/api/ch ## 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`, `undefined`, or `NaN` values are considered empty. By default (`Gap` mode), empty data points leave a gap and are not plotted on the chart. The behavior can be customized using the [`mode`](https://ej2.syncfusion.com/react/documentation/api/chart/emptyPointSettingsModel#mode) and [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/emptyPointSettingsModel#fill) properties of `emptyPointSettings`. **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 to control handling of empty points. 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" %} @@ -135,7 +138,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 to set the fill color for the empty candle. In the following sample, the empty candle is rendered in **blue** and its `open` value is computed using `Average` mode. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -158,7 +161,7 @@ Use the [`fill`](https://ej2.syncfusion.com/react/documentation/api/accumulation ### 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" %} @@ -179,7 +182,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 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. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -198,7 +201,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/candle-cs6" %} -## See Also +## See also * [Data label](../data-labels) * [Tooltip](../tool-tip) diff --git a/chart-sdk/react/charts/chart-types/column.md b/chart-sdk/react/charts/chart-types/column.md index 13de6f0cb..a554ceff4 100644 --- a/chart-sdk/react/charts/chart-types/column.md +++ b/chart-sdk/react/charts/chart-types/column.md @@ -1,8 +1,8 @@ --- layout: post title: Column Chart in React Charts | Syncfusion -description: Learn here all about Column Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. -control: Column Chart +description: Learn to render, customize, and bind Column series in Syncfusion React Charts to compare category data with vertical bars, fill, and border styling. +control: Column Chart platform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk @@ -14,7 +14,7 @@ domainurl: https://help.syncfusion.com/chart-sdk To render a [column](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/column-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: -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Column` in your chart configuration. This indicates that the data should be represented as a column chart, which is ideal for visualizing for comparing different categories of data or tracking changes over time. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `Column` in your chart configuration. This indicates that the data should be represented as a column chart, which is ideal for comparing different categories of data or tracking changes over time. 2. **Inject the ColumnSeries module**: Inject `ColumnSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering column series are available in your chart. @@ -58,9 +58,9 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c ## Series customization -The following properties can be used to customize the `column` series. +Use the following properties to customize the appearance of a `column` series. -**Fill** +**Solid fill** The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property determines the color applied to the series. @@ -81,7 +81,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-cs25" %} -The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property can be used to apply a gradient color to the column 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/series#fill) property can be used to apply a gradient color to the column 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. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -102,7 +104,7 @@ The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel# **Opacity** -The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#opacity) property controls the transparency of the fill and affects how the series blends with background or overlapping series. +The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/series#opacity) property controls the transparency of the fill and affects how the series blends with background or overlapping series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -123,7 +125,7 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod **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 column series. +Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/series#border) property to configure the width, color, and dasharray of the column borders. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -142,11 +144,11 @@ Use the [border](https://ej2.syncfusion.com/react/documentation/api/chart/series {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs66" %} -## Column space and width +## Column spacing and width -### Column space +### Column spacing -Use the [`columnSpacing`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnspacing) property in the series to adjust the space between columns. +Use the [`columnSpacing`](https://ej2.syncfusion.com/react/documentation/api/chart/series#columnspacing) property in the series to adjust the space between columns. Accepts a value from `0` to `1`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -165,10 +167,9 @@ Use the [`columnSpacing`](https://ej2.syncfusion.com/react/documentation/api/cha {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs38" %} - ### Column width -Use the [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnwidth) property in the series to adjust the width of the columns. +Use the [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/series#columnwidth) property in the series to adjust the width of the columns. Accepts a value from `0` to `1`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -189,7 +190,7 @@ Use the [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart ### Column width in pixel -Use the [`columnWidthInPixel`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnwidthinpixel) property in the series to define the exact width of the columns in pixels. This property ensures that each column maintains the specified width, providing a uniform appearance throughout the chart. +Use the [`columnWidthInPixel`](https://ej2.syncfusion.com/react/documentation/api/chart/series#columnwidthinpixel) property in the series to define the exact width of the columns in pixels. This property ensures that each column maintains the specified width, providing a uniform appearance throughout the chart. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -208,9 +209,9 @@ Use the [`columnWidthInPixel`](https://ej2.syncfusion.com/react/documentation/ap {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/line-cs38B" %} -## Grouped column +## Grouped columns -Use the [`groupName`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#groupname) property to group the data points in column type charts. Data points with the same group name will be grouped together in the chart, making it easy to compare different sets of data. +Use the [`groupName`](https://ej2.syncfusion.com/react/documentation/api/chart/series#groupname) property to group the data points in column type charts. Data points with the same group name will be grouped together in the chart, making it easy to compare different sets of data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -231,7 +232,7 @@ Use the [`groupName`](https://ej2.syncfusion.com/react/documentation/api/chart/s ## Cylindrical column chart -To render a cylindrical column chart, set the [`columnFacet`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#columnfacet) property to `Cylinder` in the chart series. This property transforms the regular columns into cylindrical shapes, enhancing the visual representation of the data. +To render a cylindrical column chart, set the [`columnFacet`](https://ej2.syncfusion.com/react/documentation/api/chart/series#columnfacet) property to `Cylinder` in the chart series. This property transforms the regular columns into cylindrical shapes, enhancing the visual representation of the data. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -252,11 +253,11 @@ To render a cylindrical column chart, set the [`columnFacet`](https://ej2.syncfu ## 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. By default (`Gap` mode) empty data points are skipped and leave a gap on the chart; the `mode` and `fill` properties of `emptyPointSettings` let you override this behavior. **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 to control handling of empty points. 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" %} @@ -277,7 +278,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 to set the fill color for empty points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -298,7 +299,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 to customize the border width and color for empty points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -319,7 +320,7 @@ Use the [`border`](https://ej2.syncfusion.com/react/documentation/api/accumulati ## Corner radius -The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/series#cornerradius) property in the chart series is used to customize the corner radius for bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the topLeft, topRight, bottomLeft, and bottomRight properties. +The [`cornerRadius`](https://ej2.syncfusion.com/react/documentation/api/chart/series#cornerradius) property in the chart series is used to customize the corner radius for column series. This allows you to create columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the columns using the `topLeft`, `topRight`, `bottomLeft`, and `bottomRight` properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -384,7 +385,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 provides a hook to customize each data point (for example, border or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/charts/chart-types/error-bar.md b/chart-sdk/react/charts/chart-types/error-bar.md index 0d0682e67..f285c0687 100644 --- a/chart-sdk/react/charts/chart-types/error-bar.md +++ b/chart-sdk/react/charts/chart-types/error-bar.md @@ -1,7 +1,7 @@ --- layout: post title: Error Bar Chart in React Charts | Syncfusion -description: Learn here all about Error Bar in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn how to render and customize Error Bar series in Syncfusion React Charts to visualize data variability and uncertainty. control: Error Bar platform: chart-sdk documentation: ug @@ -16,9 +16,13 @@ Error bars are graphical representations of the variability of data and are used To render error bars for the 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: -1. **Set visibility**: Set the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#visible) property to **true** for the error bars to be displayed. +1. **Configure error bars on the series**: Add an [`errorBar`](https://ej2.syncfusion.com/react/documentation/api/chart/series#errorbar) property on the `SeriesDirective` and set the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#visible) property to **true** to display the error bars. For example: -2. **Inject the ErrorBar module**: Inject `ErrorBar` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering error bar series are available in your chart. + ```ts + + ``` + +2. **Inject the ErrorBar module**: Import `ErrorBar` from `@syncfusion/ej2-react-charts` and add it to `` so that the error bar functionality is available. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -37,9 +41,9 @@ To render error bars for the series in your chart, you need to follow a few step {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/react/charts/preview-sample/series/errorbar-cs1" %} -## Error Bar Type +## Error bar type -To change the error bar rendering type using [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#type) option of error bar. To change the error bar line length you can use [`verticalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#verticalerror) property. +Use the [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#type) option to change the error bar rendering type. Available values are `Fixed`, `Percentage`, `StandardDeviation`, `StandardError`, and `Custom`. To change the error bar line length, use the [`verticalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalerror) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,7 +64,11 @@ To change the error bar rendering type using [`type`](https://ej2.syncfusion.com ## Customizing error bar type -To customize the error bar type, set the error bar [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#type) to `Custom`, and then change the horizontal or vertical positive and negative error values for the error bar. +Set the error bar [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#type) to `Custom` and then override the per-direction error values using the horizontal/vertical and positive/negative error properties: + +* [`verticalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalerror) / [`horizontalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#horizontalerror) — shorthand that sets both the positive and negative error to the same value. +* [`verticalPositiveError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalpositiveerror) and [`verticalNegativeError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalnegativeerror) — set the positive/negative error independently. +* [`horizontalPositiveError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#horizontalpositiveerror) and [`horizontalNegativeError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#horizontalnegativeerror) — set the horizontal positive/negative error independently. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -81,7 +89,7 @@ To customize the error bar type, set the error bar [`type`](https://ej2.syncfusi ## Error bar mode -The error bar mode is used to define whether the error bar line is drawn horizontally, vertically or on both sides. To change the error bar mode, use the [`mode`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#mode) option. +The error bar mode is used to define whether the error bar line is drawn horizontally, vertically, or on both sides. Use the [`mode`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#mode) option. Available values are `Vertical` (default), `Horizontal`, and `Both`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -102,7 +110,7 @@ The error bar mode is used to define whether the error bar line is drawn horizon ## Error bar direction -To change the direction of the error bars to plus, minus, or both sides, use the [`direction`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#direction) property. +To change the direction of the error bars, use the [`direction`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#direction) property. Available values are `Plus` (positive only), `Minus` (negative only), and `Both` (default). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -123,7 +131,11 @@ To change the direction of the error bars to plus, minus, or both sides, use the ## Customizing error bar cap -To customize the length, width, opacity, and fill color of the error bar caps, you can use the [`errorBarCap`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#errorbarcap) property. +To customize the appearance of the error bar caps, use the [`errorBarCap`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#errorbarcap) property. The cap object accepts `length`, `width`, `opacity`, and `color` properties, for example: + +```ts +errorBarCap: { length: 10, width: 10, opacity: 1, color: 'black' } +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -144,7 +156,13 @@ To customize the length, width, opacity, and fill color of the error bar caps, y ## Customizing error bar color -To customize the error bar color for individual errors, use the [`errorBarColorMapping`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#errorbarcolormapping) property. You can also customize the vertical error, horizontal error, horizontal negative and positive error, and vertical negative and positive error for an individual point using the [`verticalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#verticalerror), [`horizontalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#horizontalerror), [`horizontalNegativeError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#horizontalnegativeerror), [`horizontalPositiveError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#horizontalpositiveerror), [`verticalNegativeError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#verticalnegativeerror), and [`verticalPositiveError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorBarSettings#verticalpositiveerror) properties. +To customize the error bar color for individual points, use the [`errorBarColorMapping`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#errorbarcolormapping) property and point it to a field name in the data source. For example, with a data field named `color`, set `errorBarColorMapping: 'color'` and the chart will apply each point's `color` value as its error bar stroke. + +You can also customize the per-point error values directly on the data record using these properties: + +* [`verticalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalerror) and [`horizontalError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#horizontalerror) — shorthand for both positive and negative. +* [`verticalPositiveError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalpositiveerror) and [`verticalNegativeError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#verticalnegativeerror). +* [`horizontalPositiveError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#horizontalpositiveerror) and [`horizontalNegativeError`](https://ej2.syncfusion.com/react/documentation/api/chart/errorbarsettings#horizontalnegativeerror). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -167,7 +185,7 @@ To customize the error bar color for individual errors, use the [`errorBarColorM ### 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 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. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -188,7 +206,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 provides a hook to customize each data point (for example, border or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -207,7 +225,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/errorbar-cs9" %} -## See Also +## See also * [Data label](../data-labels) * [Tooltip](../tool-tip) diff --git a/chart-sdk/react/charts/chart-types/high-low-open-close.md b/chart-sdk/react/charts/chart-types/high-low-open-close.md index 606c8fe33..ecd9e847d 100644 --- a/chart-sdk/react/charts/chart-types/high-low-open-close.md +++ b/chart-sdk/react/charts/chart-types/high-low-open-close.md @@ -1,7 +1,7 @@ --- layout: post title: High Low Open Close Chart in React Charts | Syncfusion -description: Learn here all about High Low Open Close Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Hilo Open Close series in Syncfusion React Charts to visualize stock price movements with high, low, open, and close values. control: High Low Open Close platform: chart-sdk documentation: ug @@ -12,12 +12,15 @@ domainurl: https://help.syncfusion.com/chart-sdk ## High Low Open Close -To render an [`hiloOpenClose`](https://www.syncfusion.com/react-components/react-charts/chart-types/ohlc-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: +The Hilo Open Close series is used to represent the low, high, open, and closing prices over time. It is commonly used in financial charts to visualize stock price movements. -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `HiloOpenClose` in your chart configuration. This indicates that the data should be represented as a hiloOpenClose chart, which displays the high, low, open, and close values for each data point, providing a comprehensive visualization of stock price movements. -2. **Inject the HiloOpenCloseSeries module**: Inject `HiloOpenCloseSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering hiloOpenClose series are available in your chart. +To render a Hilo Open Close series in your chart, follow these steps: -3. **Provide high, low, open, and close values**: The `HiloOpenClose` series requires five fields (x, high, low, open, and close) to accurately display the stock's high, low, open, and close prices. Ensure that your data source includes these fields to create a detailed representation of stock price movements over time. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `HiloOpenClose` in your chart configuration. This displays the high, low, open, and close values for each data point. + +2. **Inject the HiloOpenCloseSeries module**: Import `HiloOpenCloseSeries` from `@syncfusion/ej2-react-charts` and add it to `` so the Hilo Open Close functionality is available. The sample below also injects `Tooltip`, `Category`, `Crosshair`, and `Zoom`. + +3. **Provide high, low, open, and close values**: The `HiloOpenClose` series requires five fields (`x`, `high`, `low`, `open`, and `close`) in each data record. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,7 +42,9 @@ To render an [`hiloOpenClose`](https://www.syncfusion.com/react-components/react ## 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#datasource), [`high`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#high), [`low`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#low), [`open`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#open) and [`close`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#close) properties. +You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/series#datasource) property on the `SeriesDirective`. The `dataSource` accepts either a plain JSON array or a Syncfusion [`DataManager`](https://ej2.syncfusion.com/react/documentation/api/data/dataManager) instance for remote endpoints. + +Each data record must contain a category field plus the four price fields. Map them to the series using [`xName`](https://ej2.syncfusion.com/react/documentation/api/chart/series#xname), [`high`](https://ej2.syncfusion.com/react/documentation/api/chart/series#high), [`low`](https://ej2.syncfusion.com/react/documentation/api/chart/series#low), [`open`](https://ej2.syncfusion.com/react/documentation/api/chart/series#open), and [`close`](https://ej2.syncfusion.com/react/documentation/api/chart/series#close). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,7 +65,11 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c ## Series customization -In the `hiloOpenClose` series, the `bullFillColor` property is used to fill the segment when the open value is greater than the close value, while the `bearFillColor` property is used to fill the segment when the open value is less than the close value. By default, `bullFillColor` is set to **#e74c3d** and `bearFillColor` is set to **#2ecd71**. +In the Hilo Open Close series, the [`bullFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bullfillcolor) property is used to fill the segment when the open value is greater than the close value, while the [`bearFillColor`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bearfillcolor) property is used to fill the segment when the open value is less than the close value. These properties accept any valid CSS color string and can be set directly on the `SeriesDirective`, for example: + +```tsx + +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -81,11 +90,11 @@ In the `hiloOpenClose` series, the `bullFillColor` property is used to fill the ## Empty points -Data points with `null` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart. +A Hilo Open Close data point is considered empty when any of its `open`, `high`, `low`, or `close` values is `null`, `undefined`, or `NaN`. By default (`Gap` mode) the empty point is skipped and leaves a gap on the chart; the `mode` and `fill` properties of `emptyPointSettings` let you override this behavior. **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 to control handling of empty points. 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). The following sample uses `Average` mode. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -106,7 +115,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 to set the fill color for empty points. The following sample renders the empty point in **blue**. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -129,7 +138,7 @@ Use the [`fill`](https://ej2.syncfusion.com/react/documentation/api/accumulation ### 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 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. For Hilo Open Close, the event handler can also override `bullFillColor` and `bearFillColor` per render via `args.series`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -150,7 +159,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 provides a hook to customize each data point (for example, border or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -169,7 +178,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/hiloOpenClose-cs6" %} -## See Also +## See also * [Data label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/chart-sdk/react/charts/chart-types/high-low.md b/chart-sdk/react/charts/chart-types/high-low.md index 85ef2381e..1ad6c9032 100644 --- a/chart-sdk/react/charts/chart-types/high-low.md +++ b/chart-sdk/react/charts/chart-types/high-low.md @@ -1,7 +1,7 @@ --- layout: post title: High Low Chart in React Charts | Syncfusion -description: Learn here all about Hilo Chart in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render, customize, and bind Hilo series in Syncfusion React Charts to display stock price ranges with high and low values, fill, and border styling. control: High Low Chart platform: chart-sdk documentation: ug @@ -12,13 +12,15 @@ domainurl: https://help.syncfusion.com/chart-sdk ## High Low -To render a `hilo` 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: +The Hilo series is used to visualize the high and low values for each data point, often illustrating price movements. -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Hilo` in your chart configuration. This indicates that the data should be represented as a hilo chart, which shows the high and low values for each data point, illustrating price movements in stocks and providing a clear visualization of price ranges. +To render a Hilo series in your chart, follow these steps: + +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/series#type) as `Hilo` in your chart configuration. This indicates that the data should be represented as a hilo chart, which shows the high and low values for each data point, illustrating price movements in stocks and providing a clear visualization of price ranges. 2. **Inject the HiloSeries module**: Inject `HiloSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering hilo series are available in your chart. -3. **Provide high and low values**: The `Hilo` series requires two y-values for each data point, you need to specify both the high and low values. The high value represents the maximum price, while the low value represents the minimum price of the stock. +3. **Provide high and low values**: The `Hilo` series requires two y-values for each data point. Specify both the `high` and `low` values on the data record — `high` represents the maximum value and `low` represents the minimum value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,7 +41,7 @@ To render a `hilo` series in your chart, you need to follow a few steps to confi ## 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), [`high`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#high), and [`low`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#low) properties. +You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/chart/series#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/series#xname), [`high`](https://ej2.syncfusion.com/react/documentation/api/chart/series#high), and [`low`](https://ej2.syncfusion.com/react/documentation/api/chart/series#low) properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,11 +62,15 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c ## Series customization -The following properties can be used to customize the `hilo` series. +The following properties can be used to customize the Hilo series. -**Fill** +**Solid fill** -The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property determines the color applied to the series. +The [`fill`](https://ej2.syncfusion.com/react/documentation/api/chart/series#fill) property determines the color applied to the series, for example: + +```tsx + +``` {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -83,7 +89,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/hilo-cs2" %} -The [fill](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#fill) property can be used to apply a gradient color to the hilo 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/series#fill) property can also apply a gradient color across the series (e.g., `url(#gradient)` referencing an SVG gradient defined elsewhere in the component). {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -125,11 +133,11 @@ The [opacity](https://ej2.syncfusion.com/react/documentation/api/chart/seriesMod ## Empty points -Data points with `null` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart. +A Hilo data point is considered empty when either its `high` or `low` value is `null`, `undefined`, or `NaN`. By default (`Gap` mode) the empty point is skipped and leaves a gap on the chart; the `mode` and `fill` properties of `emptyPointSettings` let you override this behavior. **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 to control handling of empty points. 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" %} @@ -150,7 +158,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 to set the fill color for empty points. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -194,7 +202,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 provides a hook to customize each data point (for example, border or fill) before it is drawn. Use this to apply per-point styling rules or conditional formatting. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -213,7 +221,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/hilo-cs8" %} -## See Also +## See also * [Data label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/chart-sdk/react/charts/chart-types/histogram.md b/chart-sdk/react/charts/chart-types/histogram.md index 7dc3091f6..305dc0cb2 100644 --- a/chart-sdk/react/charts/chart-types/histogram.md +++ b/chart-sdk/react/charts/chart-types/histogram.md @@ -1,7 +1,7 @@ --- layout: post title: Histogram Chart in React Charts | Syncfusion -description: Learn here all about Histogram in Syncfusion React Charts component of Syncfusion Essential JS 2 and more. +description: Learn to render and customize Histogram series in Syncfusion React Charts to display large data distributions with automatic binning and bin intervals. control: Histogram platform: chart-sdk documentation: ug @@ -12,11 +12,11 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Histogram Series -To render a [histogram](https://www.syncfusion.com/react-components/react-charts/chart-types/histogram-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: +Follow these steps to render a [histogram](https://www.syncfusion.com/react-components/react-charts/chart-types/histogram-chart) series, which displays the distribution of large datasets by automatically grouping values into bins. -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesModel#type) as `Histogram` in your chart configuration. This indicates that the data should be represented as a histogram chart, providing a visual display of large amounts of data that are difficult to understand in a tabular or spreadsheet format. +1. **Set the series type**: Set the series [`type`](https://ej2.syncfusion.com/react/documentation/api/chart/seriesmodel#type) to `Histogram` in the series configuration. -2. **Inject the HistogramSeries module**: Inject `HistogramSeries` module into the `services`. This step is essential, as it ensures that the necessary functionalities for rendering histogram series are available in your chart. +2. **Inject the HistogramSeries module**: Add `HistogramSeries` to the `services` array of the `Inject` component inside `ChartComponent`. This registers the functionality required to render a histogram series. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -39,7 +39,7 @@ To render a [histogram](https://www.syncfusion.com/react-components/react-charts ### 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 and lets you modify series properties such as data, fill, or name. Use it to change a series color or to swap its data source on the fly. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,7 +60,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 before each data point is drawn, letting you customize per-point marker shape, border, or fill. Use it to apply conditional formatting based on the point's value. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -79,7 +79,21 @@ 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/waterfall-cs7" %} -## See Also +## Histogram-specific properties + +The histogram series supports the following properties in addition to the standard series options: + +| Property | Type | Default | Description | +| --- | --- | --- | --- | +| [`binInterval`](https://ej2.syncfusion.com/react/documentation/api/chart/series#bininterval) | number | `null` | Width of each bin along the x-axis. When omitted, the chart calculates an interval automatically based on the data range. | +| [`showNormalDistribution`](https://ej2.syncfusion.com/react/documentation/api/chart/series#shownormaldistribution) | boolean | `false` | When `true`, overlays a normal distribution curve on the bins. | +| [`columnWidth`](https://ej2.syncfusion.com/react/documentation/api/chart/series#columnwidth) | number | `null` (histogram default `1`) | Width of each bin column as a ratio of the bin interval. Use values close to `1` so adjacent bins touch. | + +Provide the data as a flat array of numeric values and map only `yName` (for example, `yName='y'`); do not set `xName`. + +## See also * [Data label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Tooltip](../tool-tip) +* [Axis customization](../axis-customization) +* [Legend](../legend) \ No newline at end of file