+ # Appearance
+
+The appearance of the sparkline can be customized using margin, container Area border, and container Area background.
+
+## Sparkline border
+
+The [`containerArea border`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.SparklineContainerArea~Border.html) of the sparkline is used to render border to cover sparkline area.
+
+The following code example shows the sparkline with overall border.
+
+
+
+
+
+## Sparkline padding
+
+Padding is used to specify padding value between container and sparkline. By default, padding value of the sparkline is 5. Sparkline [`padding`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.SparklinePadding.html) values are specified by the left, right, top, and bottom.
+
+The following code example shows the sparkline with overall padding is set to 20.
+
+
+
+
+
+## Sparkline area customization
+
+The background color of the sparkline area can be customized using the [`containerArea background`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.SparklineContainerArea~BackGround.html) color. By default, the sparkline background color is `transparent`.
+
+
+
+
+
+## Sparkline theme
+
+Datalabel and track line colors of the sparkline will be changed based on theme. For example, for dark theme, the color of datalabel and track line should be white; for light theme, their value should be black. The possible values for sparkline theme are [`Material`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~Theme.html), [`Fabric`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~Theme.html), [`Bootstrap`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~Theme.html), and [`Highcontrast`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~Theme.html).
+
+The following code example shows the color for datalabel and track line is set to white for dark theme.
+
+
+
+
+
+
+
+
+ 
+* **Axis Types**: The [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#valuetype) property determines how axis values are interpreted and rendered. For most types (such as `Logarithmic` or `DateTime`), you must inject the matching feature service, for example `LogarithmicService` or `DateTimeService`. For more details see [Category Axis](./axis-types/category-axis), [Numeric Axis](./axis-types/numeric-axis), [DateTime Axis](./axis-types/date-time-axis), [Logarithmic Axis](./axis-types/logarithmic-axis).
+* **Grid Lines**: Grid lines in charts are horizontal and vertical lines that extend from the axis across the plot area. For more details see [Grid Line Customization](./axis-customization#grid-lines-customization).
+* **Tick Lines**: Tick marks are short lines placed along an axis at regular intervals to indicate the scale. For more details see [Tick Line Customization](./axis-customization#tick-lines-customization).
+* **Multiple Axes**: Charts can include multiple axes to display different scales or units, often shown as a primary and secondary axis. For more details see [Multiple Axis](./axis-customization#multiple-axis).
-* **Grid Lines** : Gridlines in charts are horizontal and vertical lines that extend from the axes across the plot area. For more details see [Grid Line Customization](./axis-customization#grid-lines-customization).
-* **Tick Lines** : Tick marks are the lines placed along an axis to show the units of measurement. For more details see [Tick Line Customization](./axis-customization#tick-lines-customization).
+
-* **Secondary Axis**: Charts can have multiple axes to show different scales or units. For more details see [Secondary Axis](./axis-customization#multiple-axis).
+* **Axis Label**: Axis labels are descriptive texts that appear along the axes of a chart and provide context about the data being presented. For more details see [Labels Customization](./axis-labels#labels-customization).
+* **Axis Title**: An axis title is a descriptive label that indicates the purpose of the chart's axis, helping viewers understand what each axis represents. For more details see [Title](./axis-customization#title).
-* **Axis Label**: Axis labels are descriptive texts that appear along the axes of a chart, providing essential context about the data being presented. For more details see [Axis Label](./axis-labels).
+## See Also
-* **Axis Title**: An axis title in a chart is a descriptive label that indicates the purpose of the chart's axis. It helps to quickly understand what each axis represents and provides context to the data points. For more details see [Title](./axis-customization#title).
+For setup and installation, see [Getting Started with Angular Chart](../getting-started).
-* **Axis Types**: The [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#valuetype) (or equivalent) determines how axis values are interpreted and rendered. For more details see [Category Axis](https://ej2.syncfusion.com/angular/documentation/chart/axis/axis-types/category-axis), [Numeric Axis](https://ej2.syncfusion.com/angular/documentation/chart/axis/axis-types/numeric-axis), [DateTime Axis](https://ej2.syncfusion.com/angular/documentation/chart/axis/axis-types/date-time-axis), [Logarithmic Axis](https://ej2.syncfusion.com/angular/documentation/chart/axis/axis-types/logarithmic-axis).
\ No newline at end of file
+* [Axis Customization](./axis-customization)
+* [Multiple Panes](./multiple-panes)
+* [Chart Accessibility](../accessibility)
diff --git a/chart-sdk/angular/charts/axis/axis-types/category-axis.md b/chart-sdk/angular/charts/axis/axis-types/category-axis.md
index 33472c4c4..b0ba496ad 100644
--- a/chart-sdk/angular/charts/axis/axis-types/category-axis.md
+++ b/chart-sdk/angular/charts/axis/axis-types/category-axis.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Category Axis in Angular Chart | Syncfusion
+title: Category axis in Angular Charts | Syncfusion
description: Learn here all about Category axis in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Category axis
@@ -8,12 +8,14 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Category Axis in Angular Chart
+# Category Axis in Angular Charts
The category axis is used to represent string-based values instead of numeric values. It is commonly used for displaying discrete categories such as names, labels, or textual groupings along an axis.
-To know about category axis, you can check on this video:
+The following snippet renders a column chart with a category-based x-axis.
+
+To learn more about the category axis, watch this video:
{% youtube "https://www.youtube.com/watch?v=7U7X1m_fBrA" %}
@@ -33,43 +35,47 @@ To know about category axis, you can check on this video:
-## Label Placement
+## Range
-
+The visible range of the category axis can be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#interval) properties of the axis. These properties control the start value, end value, and spacing between category labels.
-By default, category labels are positioned between the axis tick marks. They can also be aligned directly on the ticks by using the [`labelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelplacement) property.
+> For a category axis, `minimum`, `maximum`, and `interval` operate on index positions of the categories rather than on the category labels themselves.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/axis/category-cs22/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/axis/category-cs23/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/axis/category-cs22/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/axis/category-cs23/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs22" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs23" %}
-## Range
+
-The visible range of the category axis can be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#interval) properties of the axis. These properties control the start value, end value, and spacing between category labels.
+## Label Placement
+
+
+
+By default, category labels are positioned between the axis tick marks (`BetweenTicks`). They can also be aligned directly on the ticks (`OnTicks`) by using the [`labelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#labelplacement) property.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/axis/category-cs23/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/axis/category-cs22/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/axis/category-cs23/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/axis/category-cs22/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs23" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs22" %}
## Indexed category axis
-The category axis can also be rendered based on the index values of the data source. This behavior can be enabled by setting the [`isIndexed`](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#isindexed) property of the axis to **true**, which positions data points according to their index instead of their actual category values.
+The category axis can also be rendered based on the index values of the data source. This behavior can be enabled by setting the [`isIndexed`](https://ej2.syncfusion.com/angular/documentation/api/chart/axis#isindexed) property of the axis to **true**, which positions data points by their index while reusing the shared category label set. This is useful when multiple series need to be aligned at the same x positions.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -81,4 +87,10 @@ The category axis can also be rendered based on the index values of the data sou
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs24" %}
\ No newline at end of file
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs24" %}
+
+## See Also
+
+* [Numeric Axis](./numeric-axis)
+* [DateTime Axis](./date-time-axis)
+* [Logarithmic Axis](./logarithmic-axis)
\ No newline at end of file
diff --git a/chart-sdk/angular/charts/axis/axis-types/date-time-axis.md b/chart-sdk/angular/charts/axis/axis-types/date-time-axis.md
index 4c1e072c2..763951ca9 100644
--- a/chart-sdk/angular/charts/axis/axis-types/date-time-axis.md
+++ b/chart-sdk/angular/charts/axis/axis-types/date-time-axis.md
@@ -1,6 +1,6 @@
---
layout: post
-title: DateTime Axis in Angular Chart | Syncfusion
+title: DateTime Axis in Angular Charts | Syncfusion
description: Learn here all about Date time axis in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Date time axis
@@ -10,11 +10,11 @@ domainurl: https://help.syncfusion.com/chart-sdk
-# DateTime Axis in Angular Chart
+# DateTime Axis in Angular Charts
-## DateTime Axis
+The DateTime axis uses a date-time scale and displays date-time values as axis labels based on the specified format. This axis type is ideal for visualizing time-based data such as trends, timelines, and time-series data. Use `DateTime` for continuous time-series data and `DateTimeCategory` (covered in a later section) when certain time ranges such as weekends or holidays need to be excluded.
-The DateTime axis uses a date-time scale and displays date-time values as axis labels based on the specified format. This axis type is ideal for visualizing time-based data such as trends, timelines, and time-series data.
+## DateTime Axis
To know about the DateTime axis, you can watch this video:
@@ -32,11 +32,11 @@ To know about the DateTime axis, you can watch this video:
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/datetime-cs10" %}
->**Note:** To use the DateTime axis, inject `DateTimeService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) property of the axis to `DateTime`.
+>**Note:** To use the DateTime axis, register `DateTimeService` in the standalone component's `providers` (legacy: inject `DateTimeService` into `@NgModule.providers`) and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) property of the axis to `DateTime`.
## DateTimeCategory Axis
-The DateTimeCategory axis is used to render date-time values with non-linear intervals. This axis type is especially useful when certain time ranges, such as weekends or holidays, need to be excluded. In the following example, only business days are displayed within a week.
+The DateTimeCategory axis is used to render date-time values with irregular intervals. This axis type is especially useful when certain time ranges, such as weekends or holidays, need to be excluded. The following example demonstrates a DateTimeCategory axis rendering only business days.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -50,11 +50,11 @@ The DateTimeCategory axis is used to render date-time values with non-linear int
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/datetime-cs11" %}
->**Note:** To use the DateTimeCategory axis, inject `DateTimeCategoryService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) of axis to `DateTimeCategory`.
+>**Note:** To use the DateTimeCategory axis, register `DateTimeCategoryService` in the standalone component's `providers` (legacy: inject `DateTimeCategoryService` into `@NgModule.providers`) and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) of axis to `DateTimeCategory`.
-### Range
+## Range
-Range for an axis will be calculated automatically based on the provided data, you can also customize the range of the axis using [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#interval) property of the axis.
+The range for an axis is calculated automatically based on the provided data. You can also customize the range of the axis using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#interval) properties of the axis.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -68,12 +68,12 @@ Range for an axis will be calculated automatically based on the provided data, y
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/datetime-cs12" %}
-### Interval Customization
+## Interval Customization
-Date-time intervals can be customized using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#interval) and [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#intervaltype) properties of the axis. For example, when the interval is set to `2` and the interval type is set to `Years`, the axis displays labels at two-year intervals.
+Date-time intervals can be customized using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#interval) and [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#intervaltype) properties of the axis. For example, when `interval` is `2` and `intervalType` is `Years`, the axis displays labels every two years.
The DateTime axis supports the following interval types:
-* Auto
+* Auto - Lets the chart choose the most appropriate interval based on data
* Years
* Months
* Days
@@ -93,7 +93,7 @@ The DateTime axis supports the following interval types:
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/datetime-cs13" %}
-**Applying padding to the range**
+## Range Padding
Padding can be applied to the minimum and maximum values of the axis range using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) property. The DateTime axis supports the following range padding types:
@@ -180,7 +180,7 @@ The following table illustrates the output produced by applying commonly used da
-
-```
-
-```ts
-import { Component, OnInit } from '@angular/core';
-
-@Component({
- selector: 'app-container',
- template:
- `
-
`
-})
-export class AppComponent {
-}
-```
+The Chart renders to the size of its parent container. You can set the container size inline or via CSS as shown below.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -45,18 +23,18 @@ export class AppComponent {
{% include code-snippet/chart-sdk/angular/charts/getting-started/datasource-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/getting-started/datasource-cs1" %}
-## Chart Size
+> **Note:** When using percentage-based sizes for the chart, ensure the parent container has an explicit size; otherwise the chart may not render with the expected dimensions.
-You can also set size for chart directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart#height) properties.
+## Size for Chart
-
-**In Pixel**
-
+You can also set the size of the chart directly through the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/index-default#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart/index-default#height) properties. These accept numeric (in pixels) or string (e.g., `'650'`, `'650px'`, `'50%'`) values.
-You can set the size of chart in pixel as demonstrated below.
+### Pixel
+
+The size of the chart can be set in pixels as demonstrated below.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -67,13 +45,12 @@ You can set the size of chart in pixel as demonstrated below.
{% include code-snippet/chart-sdk/angular/charts/getting-started/datasource-cs2/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/getting-started/datasource-cs2" %}
-**In Percentage**
+### Percentage
-By setting value in percentage, chart gets its dimension with respect to its container. For example,
-when the height is ‘50%’, chart renders to half of the container height.
+By setting a value in percentage, the chart gets its dimensions with respect to its container. For example, when the height is **50%**, the chart renders to half of the container's height. Percentage values require the parent container to have an explicit size.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -84,7 +61,9 @@ when the height is ‘50%’, chart renders to half of the container height.
{% include code-snippet/chart-sdk/angular/charts/getting-started/datasource-cs3/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/getting-started/datasource-cs3" %}
-> **Note:** When you do not specify the size, the chart uses `450px` as the default height and the window size as its width.
\ No newline at end of file
+## Default Size
+
+> If the size is not specified, the Chart will be rendered with a height of **450px** and a width equal to the size of the window. When only one dimension is specified, the other dimension is computed automatically.
diff --git a/chart-sdk/angular/charts/chart-elements/chart-annotations.md b/chart-sdk/angular/charts/chart-elements/chart-annotations.md
index 3c2baf2fb..c5a85097a 100644
--- a/chart-sdk/angular/charts/chart-elements/chart-annotations.md
+++ b/chart-sdk/angular/charts/chart-elements/chart-annotations.md
@@ -1,20 +1,32 @@
---
layout: post
-title: Annotations in Angular Chart | Syncfusion
+title: Annotations in Angular Charts | Syncfusion
description: Learn here all about Chart annotations in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
-control: Chart annotations
+control: Chart annotations
documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Annotations in Angular Chart
+# Annotations in Angular Charts
-Chart annotations allow highlighting specific areas of the chart using text, shapes, images, or custom HTML elements. Annotations can be used to emphasize trends, mark thresholds, show custom notes, or display additional information directly inside the chart area.
+In this guide, you'll learn how to add, position, and customize annotations in the Syncfusion Angular Chart component to highlight trends, thresholds, and other details directly inside the chart area.
-
+Chart annotations allow highlighting specific areas of the chart using text, shapes, images, or custom HTML elements. Annotations can be used to emphasize trends, mark thresholds, show custom notes, or surface extra details inline within the chart area.
-Annotations are added using the [`annotations`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#annotations) option. Set the [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) property to reference the element that should be rendered within the chart.
+
+
+## Prerequisites
+
+Before adding annotations, make sure the package below is installed:
+
+* [`@syncfusion/ej2-angular-charts`](https://www.npmjs.com/package/@syncfusion/ej2-angular-charts) — see the [Syncfusion Angular compatibility matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement) for the supported Angular version range.
+
+For a step-by-step setup, see [Getting Started with Angular Chart](../getting-started).
+
+>**Note**: To use the annotation feature in Chart, add `ChartAnnotationService` to the standalone component's `providers` (or to `@NgModule.providers` for non-standalone apps). See the snippet below for an example.
+
+Annotations are added using the [`annotations`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#annotations) option. Set the [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) property to specify the HTML or template string that should be rendered within the chart.
To know more about annotations, you can check on this video:
@@ -29,14 +41,12 @@ To know more about annotations, you can check on this video:
{% include code-snippet/chart-sdk/angular/charts/series/column-cs7/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/column-cs7" %}
->**Note**: To use annotation feature in chart, we need to inject `ChartAnnotationService` into the `@NgModule.providers`.
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/column-cs7" %}
## Region
-Annotations can be positioned relative to either the overall `Chart` area or a specific `Series` using the [`region`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#region) property. When placed relative to the chart, the annotation uses the chart's coordinate system. When placed relative to a series, the annotation aligns with that series' data points. By default, annotations are placed with respect to the chart.
+Annotations can be positioned relative to either the overall `Chart` area or a specific `Series` using the [`region`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#region) property. When placed relative to the chart, the annotation uses the chart's coordinate system. When placed relative to a series, the annotation aligns with that series' data points, so the annotation's `x` value must match the category/name defined by the series' `xName`. By default, annotations are placed with respect to the `Chart`.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -52,9 +62,11 @@ Annotations can be positioned relative to either the overall `Chart` area or a s
## Coordinate Units
-Use the [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits) property to define how annotation coordinates are interpreted. Choose between:
-- **Pixel** – The annotation is positioned using fixed pixel values within the chart area.
-- **Point** – The annotation is positioned based on chart data points ([`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) values).
+Use the [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits) property to define how annotation coordinates are interpreted. The default value is `Pixel`. Choose between:
+- `Pixel` – The annotation is positioned using fixed pixel values within the chart area.
+- `Point` – The annotation is positioned based on chart data points ([`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) values).
+
+When using `Point`, the `x` value must match a value your x-axis can resolve: a category label (e.g. `'Japan'`) for `valueType: 'Category'`; a `Date` or `DateOffset` value for `valueType: 'DateTime'`; or a numeric value for `valueType: 'Double'`. For `region='Chart'`, `x` must still resolve against the primary x-axis and `y` against the primary y-axis; for `region='Series'`, `x` must match the series' `xName` value.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -70,7 +82,7 @@ Use the [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api
## Alignment
-Annotation provides [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#verticalalignment) and [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#horizontalalignment). The [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#verticalalignment) can be customized via `Top`, `Bottom` or `Middle` and the [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#horizontalalignment) can be customized via `Near`, `Far` or `Center`.
+Annotation provides [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#verticalalignment) and [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#horizontalalignment). The [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#verticalalignment) can be customized via `Top`, `Bottom`, or `Middle` (default: `Middle`); the [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#horizontalalignment) can be customized via `Near`, `Far`, or `Center` (default: `Center`).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -84,9 +96,13 @@ Annotation provides [`verticalAlignment`](https://ej2.syncfusion.com/angular/doc
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/column-cs10" %}
-## Adding y-axis subtitle through annotation
+## Annotation Customization
+
+Use annotations to enrich the chart with custom visuals such as dashed reference lines, watermarks, footers, y-axis subtitles, and stacked-column totals. The samples in this section cover each scenario.
+
+### Y-Axis Subtitle
-By setting text div in the [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) option of annotation object, you can add a subtitle to the chart y-axis. Specify the [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits) value as `Pixel` and customize the [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) location of the text.
+By setting a text `` in the [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) option of an annotation object, you can add a subtitle to the chart y-axis. Set [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits) to `Pixel`, adjust the [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) location of the text (the sample below positions the subtitle near the top-left of the y-axis), and apply `transform: rotate(-90deg)` to a `
` wrapper inside `content` so the subtitle orients vertically alongside the y-axis.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -97,14 +113,12 @@ By setting text div in the [`content`](https://ej2.syncfusion.com/angular/docume
{% include code-snippet/chart-sdk/angular/charts/series/column-cs11/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/column-cs11" %}
-## Annotation customization
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/column-cs11" %}
-### Dotted line
+### Dotted Line
-Set the annotation [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits) to `Point` to place dotted lines at specific data point positions using their [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) values.
+Set the annotation [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits) to `Point` to draw a horizontal dashed line anchored at a specific data point. Although the line is anchored at one `(x, y)` position, the wrapper `
` inside [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) uses `width: 10000px` with `border-top: 3px dashed` so the dashed bar visually spans across the plot area from that data point.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -118,12 +132,12 @@ Set the annotation [`coordinateUnits`](https://ej2.syncfusion.com/angular/docume
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/how-to-cs6" %}
-### Footer
+### Watermark
-Use annotations to add both a watermark and a footer to the chart. Initialize custom elements with the [`annotation`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel) property and provide the HTML to render via the [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) option. For a watermark, supply the text "syncfusion" and position it using the desired [`coordinateUnits`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#coordinateunits).
+Use an annotation to add a watermark to the chart. Initialize the element with the [`annotation`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel) property and provide the HTML for the watermark via the [`content`](https://ej2.syncfusion.com/angular/documentation/api/chart/annotationDirective#content) option. In the example below the watermark text is "syncfusion", positioned with `coordinateUnits='Point'` so it aligns with a category on the x-axis (matching a category label such as `'Wed'`).
-```bash
- # watermark for chart
+```html
+
@@ -131,11 +145,13 @@ Use annotations to add both a watermark and a footer to the chart. Initialize cu
```
-Use the [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) option of the annotation object to create a footer for the chart.
+### Footer
+
+Use the [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#y) options of the annotation object to place a footer at the bottom of the chart. Use `coordinateUnits='Pixel'` with absolute coordinates (the values shown assume a chart of approximately 800 × 480 pixels; adjust `x` and `y` based on your chart's actual size, and note that pixel offsets may shift on responsive resize because Pixel units are tied to the chart's outer dimensions).
-```bash
+```html
+
- # footer for chart
@@ -151,12 +167,12 @@ Use the [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAn
{% include code-snippet/chart-sdk/angular/charts/how-to-cs8/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/how-to-cs8" %}
-### Stacking total
+### Stacking Total
-To show the total at each stacked data point, handle the [`annotationRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#annotationrender) event to compute the series' stacked value and update the annotation content before it renders.
+To show the total at each stacked data point, handle the [`annotationRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#annotationrender) event (the binding `(annotationRender)='annotationRender($event)'` is shown in the snippet below) to compute the series' stacked value (`visibleSeries[lastIndex].stackedValues.endValues[index]` — see [`Series.stackedValues`](https://ej2.syncfusion.com/angular/documentation/api/chart/series#stackedvalues)) and update the annotation content's nested `` (`args.content.children[0].children[0].innerHTML`) before each annotation is rendered.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -167,11 +183,38 @@ To show the total at each stacked data point, handle the [`annotationRender`](ht
{% include code-snippet/chart-sdk/angular/charts/how-to-cs19/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/how-to-cs19" %}
+### Binding to Multiple Axes
+
+When the chart has more than one x-axis or y-axis, target a specific axis by setting the annotation's [`xAxisName`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#xaxisname) and [`yAxisName`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartAnnotationSettingsModel#yaxisname) properties to the corresponding axis names declared on the chart.
+
+```html
+
+
+
+
+```
+
+The full multi-axis chart setup (including `axes` array and axis naming) is documented under [Multi-Panes](../multi-panes).
+
+## Troubleshooting
+
+If the annotation does not render or behaves unexpectedly, check the following:
+
+* **Service not provided** – Console shows `ChartAnnotationService` errors when an annotation is added without registering the service. Confirm `ChartAnnotationService` is listed in the component `providers` (or in `@NgModule.providers` for module-based apps).
+* **Annotation not appearing** – When using `coordinateUnits='Point'`, verify that the `x`/`y` values resolve against the axis. With `region='Series'`, `x` must match the series' `xName` value; with `region='Chart'`, `x` must match the primary x-axis value.
+* **Pixel offset mismatch** – Pixel units depend on the chart's outer width and height. If the chart is rendered inside a responsive container, recompute `x`/`y` after resize or switch to `Point` units.
+* **Empty or broken HTML** – The `content` is parsed as HTML; quotes and entities must be escaped correctly inside the template.
+
## See Also
-* [Dynamically Update X-Axis Annotation Content](https://support.syncfusion.com/kb/article/21478/how-to-dynamically-update-x-axis-annotation-content-on-point-click-in-angular-chart)
-* [Add Clickable Annotation Text](https://support.syncfusion.com/kb/article/21318/how-to-add-clickable-annotation-text-in-angular-accumulation-chart)
\ No newline at end of file
+* [Dynamically Update Annotation Content on Point Click in Angular Charts](https://support.syncfusion.com/kb/article/21478/how-to-dynamically-update-x-axis-annotation-content-on-point-click-in-angular-chart)
+* [Chart Events](../chart-events) — for a list of supported chart events, including `annotationRender`.
\ No newline at end of file
diff --git a/chart-sdk/angular/charts/chart-elements/data-labels.md b/chart-sdk/angular/charts/chart-elements/data-labels.md
index 2de1d90ba..a8a76decc 100644
--- a/chart-sdk/angular/charts/chart-elements/data-labels.md
+++ b/chart-sdk/angular/charts/chart-elements/data-labels.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Data Labels in Angular Chart | Syncfusion
+title: Data Labels in Angular Charts | Syncfusion
description: Learn here all about Data labels in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Data labels
@@ -8,13 +8,13 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Data Labels in Angular Chart
+# Data Labels in Angular Charts
-Data labels display the values of data points directly on the chart, reducing the need to reference axes for exact values. Enable data labels by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#visible) option to `true` in the `dataLabel` configuration. Labels automatically adjust to avoid overlapping and maintain readability.
+Data labels display the values of data points directly on the chart, reducing the need to reference axes for exact values. Labels automatically adjust to avoid overlapping and maintain readability.
-Data labels can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#visible) option in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart/markersettingsmodel#datalabel). By default, the labels will arrange smartly without overlapping.
+Data labels can be added to a chart series by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#visible) option to `true` in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#datalabel) property of the series [`marker`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#marker). By default, the labels arrange smartly without overlapping.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -28,7 +28,7 @@ Data labels can be added to a chart series by enabling the [`visible`](https://e
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/datalabel-cs1" %}
->**Note**: To use datalabel feature, inject `DataLabelService` into the `@NgModule.providers`.
+>**Note**: To use the DataLabel feature, inject `DataLabelService` into the `@NgModule.providers`.
## Position
@@ -52,46 +52,49 @@ Use the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart/
Customize label content using templates. Use placeholders such as `${point.x}` and `${point.y}` to display data point values. The [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel#template) property enables fully customizable and visually rich labels.
-**Change color for the background in the datalabel template**
+**Define a template via a `script` element**
-Initialize the datalabel template div as shown in the following html page,
+Add a `script` element with a unique `id` in the page's `index.html`. In this example, the `color` field from the data source is mapped to the template's background:
-```
+```html
```
+Then reference that `id` from the [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel#template) property in the `dataLabel` configuration:
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/datalabel-cs3" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/datalabel-cs1" %}
+
+**Define a template inline**
-**To show that datalabel template, set the element id to the [template](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel#template) property in datalabel.**
+You can also define the template HTML inline as a string in `app.component.ts`, using the same placeholders:
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/datalabel-cs1" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/datalabel-cs3" %}
## Format
-Apply number or date formatting using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#format) property. Global formatting symbols include:
+Apply number or date formatting using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#format) property. Global formatting symbols include:
- `n` – number format
- `p` – percentage format
- `c` – currency format
@@ -131,7 +134,7 @@ Apply number or date formatting using the [`format`](https://ej2.syncfusion.com
1000
n3
1000.000
- The number is rounded to 3 decimal place.
+ The number is rounded to 3 decimal places.
-Data labels can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#visible) option in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart/markersettingsmodel#datalabel). By default, the labels will arrange smartly without overlapping.
+Data labels can be added to a chart series by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#visible) option to `true` in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#datalabel) property of the series [`marker`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#marker). By default, the labels arrange smartly without overlapping.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -28,7 +28,7 @@ Data labels can be added to a chart series by enabling the [`visible`](https://e
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/datalabel-cs1" %}
->**Note**: To use datalabel feature, inject `DataLabelService` into the `@NgModule.providers`.
+>**Note**: To use the DataLabel feature, inject `DataLabelService` into the `@NgModule.providers`.
## Position
@@ -52,46 +52,49 @@ Use the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart/
Customize label content using templates. Use placeholders such as `${point.x}` and `${point.y}` to display data point values. The [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel#template) property enables fully customizable and visually rich labels.
-**Change color for the background in the datalabel template**
+**Define a template via a `script` element**
-Initialize the datalabel template div as shown in the following html page,
+Add a `script` element with a unique `id` in the page's `index.html`. In this example, the `color` field from the data source is mapped to the template's background:
-```
+```html
```
+Then reference that `id` from the [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel#template) property in the `dataLabel` configuration:
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/datalabel-cs3" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/datalabel-cs1" %}
+
+**Define a template inline**
-**To show that datalabel template, set the element id to the [template](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettingsModel#template) property in datalabel.**
+You can also define the template HTML inline as a string in `app.component.ts`, using the same placeholders:
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/datalabel-cs1/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/data-marker/datalabel-cs3/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/datalabel-cs1" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/datalabel-cs3" %}
## Format
-Apply number or date formatting using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#format) property. Global formatting symbols include:
+Apply number or date formatting using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataLabelSettings#format) property. Global formatting symbols include:
- `n` – number format
- `p` – percentage format
- `c` – currency format
@@ -131,7 +134,7 @@ Apply number or date formatting using the [`format`](https://ej2.syncfusion.com
## Marker
-Enable markers for data points by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#visible) option to `true` in the [`marker`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#marker) property. Each series receives distinct markers by default, improving visual differentiation.
+Enable markers for data points by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#visible) option to `true` in the [`marker`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#marker) property. Each series receives a distinct marker shape by default, improving visual differentiation across series.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -32,7 +32,7 @@ Enable markers for data points by setting the [`visible`](https://ej2.syncfusion
## Shape
-Assign different shapes to markers such as Rectangle, Circle, Diamond, Triangle, and others using the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#shape) property. Shape selection helps distinguish between multiple series and improves visual clarity.
+Assign different shapes to markers — such as Rectangle, Circle, Diamond, Triangle, Pentagon, Star, HorizontalLine, VerticalLine, and Cross — using the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#shape) property. Shape selection helps distinguish between multiple series and improves visual clarity.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -46,11 +46,11 @@ Assign different shapes to markers such as Rectangle, Circle, Diamond, Triangle,
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/marker-cs2" %}
->**Note** : To know more about the marker shape type refer the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettings#shape).
+>**Note** : To know more about the marker shape types, refer to the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#shape) property and its supported values.
## Images
-Apart from the shapes, you can also add custom images to mark the data point using the [`imageUrl`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#imageurl) property.
+In addition to built-in shapes, you can also mark each data point with a custom image using the [`imageUrl`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#imageurl) property. Provide a URL or relative asset path that resolves to a PNG, JPG, or SVG file. For best results, set `width` and `height` on the marker to match the image's natural dimensions.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -66,7 +66,7 @@ Apart from the shapes, you can also add custom images to mark the data point usi
## Customization
-Marker's color and border can be customized using [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#fill) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#border) properties.
+Marker color, size, and border can be customized using the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#fill), [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#width), [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#height), and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#border) properties. The `width` and `height` set the **marker** size (not the series line width). The `border` object accepts `width` and `color` keys.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -80,9 +80,11 @@ Marker's color and border can be customized using [`fill`](https://ej2.syncfusio
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/marker-cs4" %}
-## Customizing specific point
+## Customizing specific markers
-You can also customize the specific marker and label using [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointrender) event. The [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointrender) event allows you to change the shape, color and border for a point.
+You can customize individual markers using the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointrender) event. Inside the event handler, assign values to `args.fill`, `args.shape`, and `args.border` to override defaults for any data point based on its index or value.
+
+The following example changes the fill, shape, and border for the marker at index `3`:
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -96,34 +98,34 @@ You can also customize the specific marker and label using [`pointRender`](https
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/marker-cs5" %}
-## Fill marker with series color
+### Assigning different shapes per point
-Marker can be filled with the series color by setting the [`isFilled`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#isfilled) property to **true**.
+You can also use the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointrender) event to dynamically assign a different `shape` to each data point — useful when you want to vary marker shapes across the series based on the point index or value.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/data-marker/marker-cs6/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/how-to-cs13/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/data-marker/marker-cs6/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/how-to-cs13/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/marker-cs6" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/how-to-cs13" %}
-## Customize marker shape using events
+## Fill marker with series color
-Use the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#pointrender) event to customize marker shapes. In the handler, set the `shape` for each data point as needed.
+The marker can be filled with the series color by setting the [`isFilled`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#isfilled) property to **true**. When `isFilled` is enabled, any explicitly set `fill` is overridden by the series color.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/how-to-cs13/src/app.component.ts %}
+{% include code-snippet/chart-sdk/angular/charts/data-marker/marker-cs6/src/app.component.ts %}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
-{% include code-snippet/chart-sdk/angular/charts/how-to-cs13/src/main.ts %}
+{% include code-snippet/chart-sdk/angular/charts/data-marker/marker-cs6/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/how-to-cs13" %}
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/data-marker/marker-cs6" %}
diff --git a/chart-sdk/angular/charts/chart-elements/gradient.md b/chart-sdk/angular/charts/chart-elements/gradient.md
index 1c6039d57..b69e7ea11 100644
--- a/chart-sdk/angular/charts/chart-elements/gradient.md
+++ b/chart-sdk/angular/charts/chart-elements/gradient.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Gradient in Angular Chart | Syncfusion
+title: Gradient in Angular Charts | Syncfusion
description: Learn here all about Gradient in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Gradient
@@ -9,9 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk
---
-# Gradient in Angular Chart
-
-
+# Gradient in Angular Charts
Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types:
- Linear gradient
@@ -24,7 +22,7 @@ Gradients can be applied to:
## Linear gradient
-A linear gradient blends color along side a straight path from a defined start point to an end point. Configure it by adding `linearGradient` inside the target element (Series, Trendlines or Indicators) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `x1`, `y1`, `x2` and `y2` properties. The gradient color stop values such as `offset`, `color`, `opacity`, `lighten` and `brighten` are set using the `gradientColorStop` property.
+A linear gradient blends color alongside a straight path from a defined start point to an end point. Configure it by adding `linearGradient` inside the target element (Series, Trendlines or Indicators). The gradient properties control the start and end positions, while `gradientColorStop` defines one or more color stops that determine how colors transition across the gradient.
In the `linearGradient`:
- `x1` - Sets the horizontal start position of the gradient (0 to 1).
@@ -32,12 +30,16 @@ In the `linearGradient`:
- `x2` - Sets the horizontal end position of the gradient (0 to 1).
- `y2` - Sets the vertical end position of the gradient (0 to 1).
+## Gradient color stops
+
+The `gradientColorStop` property defines the color transitions along both linear and radial gradients. Configure one or more color stops within the `gradientColorStop` collection.
+
In the `gradientColorStop`:
- `offset` - Specifies the position of the color stop along the gradient (0 to 100).
-- `color` - Sets the color at the stop.
+- `color` - Sets the color at the stop. Accepts any valid CSS color value (hex, RGB, RGBA, or named color).
- `opacity` - Defines the transparency of the stop (0 to 1).
- `lighten` - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1.
-- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.
+- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Range: -1 to 1.
### Series
@@ -89,7 +91,7 @@ Apply a linear gradient to a technical indicator by adding `linearGradient` insi
## Radial gradient
-A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding `radialGradient` inside the target element (Series, Trendline, or Indicator) and define one or more color stops to control how colors transition from the center to the outer edge. Set the gradient’s center, optional focal point, and radius using `radialGradient` properties. The color stop values such as `offset`, `color`, `opacity`, `lighten`, and `brighten` are set using the `gradientColorStop` property.
+A radial gradient blends colors outward from a central point, creating a circular or elliptical color progression. Configure it by adding `radialGradient` inside the target element (Series, Trendline, or Indicator). The gradient properties control the center, focal point, and radius, while `gradientColorStop` defines one or more color stops to control how colors transition from the center to the outer edge.
In the `radialGradient`:
@@ -99,13 +101,7 @@ In the `radialGradient`:
- `fy` - Sets the normalized vertical focal point (0 to 1).
- `r` - Sets the normalized radius of the gradient circle (0 to 1).
-In the `gradientColorStop`:
-
-- `offset` - Specifies the position of the color stop along the gradient (0 to 100).
-- `color` - Sets the color at the stop.
-- `opacity` - Defines the transparency of the stop (0 to 1).
-- `lighten` - Adjusts lightness at the stop. Positive values lighten the color. Range: 0 to 1.
-- `brighten` - Adjusts brightness at the stop. Positive values increase brightness; negative values decrease it. Ranges: -1 to 1.
+> Color stop properties (`offset`, `color`, `opacity`, `lighten`, and `brighten`) are shared with the linear gradient and are documented in the [Gradient color stops](#gradient-color-stops) section.
### Series
@@ -125,7 +121,7 @@ Apply a radial gradient to a series by adding `radialGradient` inside the target
### Trendlines
-Apply a linear gradient to a trendline by adding `linearGradient` inside the target Trendline.
+Apply a radial gradient to a trendline by adding `radialGradient` inside the target Trendline.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -136,12 +132,12 @@ Apply a linear gradient to a trendline by adding `linearGradient` inside the tar
{% include code-snippet/chart-sdk/angular/charts/gradient/chart-gradient-cs9/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/gradient/chart-gradient-cs9" %}
### Technical Indicators
-Apply a linear gradient to a technical indicator by adding `linearGradient` inside the target Indicator.
+Apply a radial gradient to a technical indicator by adding `radialGradient` inside the target Indicator.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -152,5 +148,17 @@ Apply a linear gradient to a technical indicator by adding `linearGradient` insi
{% include code-snippet/chart-sdk/angular/charts/gradient/chart-gradient-cs10/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/gradient/chart-gradient-cs10" %}
+
+## Troubleshooting
+
+- **Gradient not visible on markers or legend**: Ensure the gradient is applied directly on the series (and not only via a parent theme); the marker/legend/tooltip colors are inherited from the series gradient.
+- **Colors transition abruptly**: Verify that `offset` values on `gradientColorStop` are monotonically increasing and span 0 to 100.
+- **Radial gradient off-center**: Adjust `cx`, `cy`, and `r` (normalized 0 to 1) to fit the series shape.
+
+## See also
+
+- [Series](https://ej2.syncfusion.com/angular/documentation/api/chart/series)
+- [Trendline API](https://ej2.syncfusion.com/angular/documentation/api/chart/trendline)
+- [Getting Started with Angular Chart](./getting-started)
diff --git a/chart-sdk/angular/charts/chart-elements/legend.md b/chart-sdk/angular/charts/chart-elements/legend.md
index 14c560c30..9d44fabbe 100644
--- a/chart-sdk/angular/charts/chart-elements/legend.md
+++ b/chart-sdk/angular/charts/chart-elements/legend.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Legend in Angular Chart | Syncfusion
+title: Legend in Angular Charts | Syncfusion
description: Learn here all about Legend in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Legend
@@ -8,7 +8,7 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Legend in Angular Chart
+# Legend in Angular Charts
The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style.
@@ -18,6 +18,8 @@ To get started quickly with legends in Angular Charts, refer to the following vi
{% youtube "https://www.youtube.com/watch?v=jfQ-7ftHodI" %}
+>**Note**: To use the legend feature, inject `LegendService` into the `providers` array of your `@NgModule`.
+
## Position and alignment
By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#position) property, the legend can be positioned at the left, right, top, or bottom of the chart. By default, the legend is positioned at the bottom of the chart.
@@ -34,7 +36,7 @@ By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/c
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs38" %}
-Custom positioning allows the legend to be placed anywhere in the chart using [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/location#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/location#y) coordinates.
+Custom positioning allows the legend to be placed anywhere in the chart using [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart/location#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart/location#y) coordinates. The values are in pixels, measured from the top-left of the chart area.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -54,7 +56,7 @@ Custom positioning allows the legend to be placed anywhere in the chart using [`
-Use the [`reverse`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#reverse) property to reverse the order of legend items. By default, the legend item for the first series is placed first.
+Use the [`reverse`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#reverse) property to reverse the order of legend items. By default, the first series appears first in the legend.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -104,7 +106,7 @@ To change the legend icon shape, use the [`legendShape`](https://ej2.syncfusion.
### Legend size
-By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Change the default size using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#height) properties of [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#legendsettings).
+By default, the legend occupies approximately 20%–25% of the chart height when positioned at the top or bottom, and 20%–25% of the chart width when positioned at the left or right. Change the default size, in pixels, using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#height) properties of [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chartModel#legendsettings).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -120,7 +122,7 @@ By default, the legend occupies approximately 20%–25% of the chart height when
### Legend item size
-Customize the size of legend items using the [`shapeHeight`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#shapewidth) properties.
+Customize the size of legend items, in pixels, using the [`shapeHeight`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#shapewidth) properties.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -152,7 +154,7 @@ Paging is enabled automatically when legend items exceed the legend bounds. Navi
### Legend text wrap
-When legend text exceeds the container, enable wrapping using the [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#textwrap) property. Wrapping can also be controlled using the [`maximumLabelWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#maximumlabelwidth) property.
+When legend text exceeds the container, enable wrapping using the [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#textwrap) property. Wrapping can also be controlled using the [`maximumLabelWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#maximumlabelwidth) property; the default value is `61` pixels.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -200,7 +202,7 @@ By default, clicking a legend item toggles the visibility of its series. To sele
## Enable animation
-You can customize the animation while clicking legend by setting [`enableAnimation`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#enableanimation) as true or false using the [`enableAnimation`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#enableanimation) property in chart.
+Show or hide the series with animation when clicking a legend item by setting the [`enableAnimation`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#enableanimation) property to `true` or `false`. This property only applies when [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#togglevisibility) is enabled. The default value is `true`.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -216,7 +218,7 @@ You can customize the animation while clicking legend by setting [`enableAnimati
## Collapse legend item
-By default, series name will be displayed as legend. To skip the legend for a particular series, you can give empty string to the series name.
+By default, the series name is displayed as its legend text. To hide the legend entry for a particular series while the series itself remains visible in the chart, set that series' `name` to an empty string.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -248,7 +250,7 @@ You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/
## Arrow page navigation
-By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set `false` value to [`enablePages`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#enablepages) to get this support.
+By default, page numbers are visible during legend paging. Set [`enablePages`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#enablepages) to `false` to hide the page numbers and display left and right arrow navigation instead.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -280,7 +282,7 @@ The [`itemPadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/l
## Legend layout
-The [`layout`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#layout) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart#legendsettings) defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart#legendsettings) ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
+The [`layout`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#layout) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart#legendsettings) allows you to display the legend either horizontally or vertically. Available values are `"Auto"`, `"Horizontal"`, and `"Vertical"`; the default is **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#maximumcolumns) property defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#fixedwidth) property ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -296,9 +298,9 @@ The [`layout`](https://ej2.syncfusion.com/angular/documentation/api/chart/legend
## Legend template
-Legend templates allow you to replace default legend icons and text with custom HTML for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
+Legend templates allow you to replace the default legend icons and text with custom HTML for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
-You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel) property of [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel). Legend interactions (click to toggle series) remain unless [`ToggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendsettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging.
+You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel#template) property of [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettingsModel). Legend interactions (click to toggle series) remain unless [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart/legendSettings#togglevisibility) is set to `false`. Templates work with all legend positions, alignments, and paging.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -311,8 +313,6 @@ You can customize the legend items by using the [`template`](https://ej2.syncfus
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs55" %}
->**Note**: To use legend feature, inject `LegendService` into the `@NgModule.Providers`.
-
## Customize each shape in legend
Use the [`legendRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#legendrender) event to customize legend item shapes. In the handler, set `args.shape` to the desired shape for each item.
diff --git a/chart-sdk/angular/charts/chart-elements/series-label.md b/chart-sdk/angular/charts/chart-elements/series-label.md
index 607863b26..70ed144c1 100644
--- a/chart-sdk/angular/charts/chart-elements/series-label.md
+++ b/chart-sdk/angular/charts/chart-elements/series-label.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Series Labels in Angular Chart | Syncfusion
+title: Series Labels in Angular Charts | Syncfusion
description: Learn here all about Series label in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Series label
@@ -8,13 +8,15 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Series Labels in Angular Chart
+# Series Labels in Angular Charts
Series labels display the name of each series directly on the chart, positioned near the end of the series path or at the last visible data point. This helps identify series without relying on the legend.
## Overview
-Enable series labels using the [`labelSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#datalabel) property within the series configuration. Set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#visible) property to **true** to display the label.
+Enable series labels using the [`labelSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#labelsettings) property within the series configuration. Set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#visible) property to **true** to display the label.
+
+> **Note**: To use the series label feature, inject the `SeriesLabelService` into the `providers`. Markers must also be enabled (`marker.visible: true`) for the series label to render. Series labels render best on line, area, and spline series; other series types may not display the label.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -32,17 +34,15 @@ Enable series labels using the [`labelSettings`](https://ej2.syncfusion.com/angu
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/series-label" %}
-> **Note**: To use the series label feature, inject the `DataLabelService` into the `providers`.
-
## Customization
-You can customize the appearance and behavior of series labels using the following properties:
-- [`text`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#text) – Custom text for the series label. If not specified, the series name is used by default.
-- [`font`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#font) – Font customization options including color, size, family, and weight.
-- [`background`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#background) – Background color of the label.
-- [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#border) – Border width and color.
-- [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#opacity) – Label transparency (default: 1).
-- [`showOverlapLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart/datalabelSettingsModel#showOverlapLabel) – When **false**, overlapping labels are hidden.
+Apply these options through each series' [`labelSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#labelsettings) property to customize the appearance and behavior of series labels:
+- [`text`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#text) – Custom text shown as the label (for example, `"Sales"`). If not specified, the series `name` is used by default.
+- [`font`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#font) – Font customization options including color, size, family, and weight.
+- [`background`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#background) – Background color of the label.
+- [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#border) – Border width and color.
+- [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#opacity) – Label transparency (default: 1).
+- [`showOverlapText`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesLabelSettingsModel#showOverlapText) – When **false**, overlapping labels are hidden.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
diff --git a/chart-sdk/angular/charts/chart-elements/strip-line.md b/chart-sdk/angular/charts/chart-elements/strip-line.md
index 355299919..5a8919a81 100644
--- a/chart-sdk/angular/charts/chart-elements/strip-line.md
+++ b/chart-sdk/angular/charts/chart-elements/strip-line.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Stripline in Angular Chart | Syncfusion
+title: Stripline in Angular Charts | Syncfusion
description: Learn here all about strip line in Syncfusion Essential Angular Chart component, it's elements and more.
platform: chart-sdk
control: Strip line
@@ -8,19 +8,15 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-
+# Stripline in Angular Charts
-# Stripline in Angular Chart
-
-
-
-The Angular Chart component supports both horizontal and vertical strip lines, which act as visual guides to highlight specific ranges within the chart area. Strip lines can be added to both axes and fully customized based on visual and functional requirements. To use strip line features, inject `StriplineService` into the `@NgModule.providers`.
+The Angular Chart component supports both horizontal and vertical strip lines, which act as visual guides to highlight specific ranges within the chart area. Strip lines can be added to either axis and customized to suit your visualization needs.
## Horizontal striplines
-Horizontal strip lines are created by adding the [`stripline`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#striplines) configuration to the vertical axis and setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#visible) property to `true`. They highlight horizontal ranges in the chart, and multiple strip lines can be added to the same axis.
+Horizontal strip lines are created by adding the [`stripLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#striplines) configuration to the primary value (Y) axis and setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#visible) property to `true`. They highlight horizontal ranges in the chart, and multiple strip lines can be added to the same axis.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -34,9 +30,9 @@ Horizontal strip lines are created by adding the [`stripline`](https://ej2.syncf
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/strip-line-cs5" %}
-## Vertical Striplines
+## Vertical striplines
-Vertical strip lines are created by adding the [`stripline`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#striplines) configuration to the horizontal axis and enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#visible) property. They highlight vertical regions in the chart and support multiple entries for an axis.
+Vertical strip lines are created by adding the [`stripLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#striplines) configuration to the primary category (X) axis and enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#visible) property. They highlight vertical regions in the chart and support multiple entries for an axis.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -52,7 +48,7 @@ Vertical strip lines are created by adding the [`stripline`](https://ej2.syncfus
## Stripline as band and line
-You can utilize the stripline to visualize both the frequency band and transmission line characteristics by specifying its [`start`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#start) and [`end`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#end) properties in [`StripLineSettingsModel`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel).
+A stripline can render as either a filled **band** (a region spanning from `start` to `end`) or a thin **line** (when `start` and `end` are very close). Specify the [`start`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#start) and [`end`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#end) values, along with any desired styling properties, within the [`StripLineSettingsModel`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel) to switch between these visual forms.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -71,8 +67,11 @@ You can utilize the stripline to visualize both the frequency band and transmiss
Strip lines can be customized to highlight specific regions more effectively:
- Use [`start`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#start) to set the beginning value of the strip line.
- Use [`end`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#end) to define the ending value.
-- Use [`startFromOrigin`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#startfromorigin) to begin the strip line from the axis origin.
+- Use [`startFromOrigin`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#startfromorigin) to begin the strip line from the axis origin. When `startFromOrigin` is enabled, the start position defaults to the axis minimum and `size` defines the strip line's length.
- Use [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#size) to specify the strip line height or width (based on orientation).
+- Use [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#color) to set the fill or stroke color of the strip line.
+- Use [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#opacity) to control the transparency of the strip line (values between 0 and 1).
+- Use [`text`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#text) to display a label inside the strip line.
- Use [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#border) to customize border appearance.
- Use [`zIndex`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#zindex) to control whether the strip line appears behind or above chart series.
@@ -91,7 +90,8 @@ Strip lines can be customized to highlight specific regions more effectively:
## Customize the stripline text
Strip line text labels can be customized for readability and visual presentation:
-- Use [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#textstyle) to set text appearance.
+- Use [`text`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#text) to define the label content.
+- Use [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#textstyle) to set text appearance (size, color, font).
- Use [`rotation`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#rotation) to rotate the strip line text.
- Use [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#verticalalignment) to adjust label placement.
@@ -107,9 +107,9 @@ Strip line text labels can be customized for readability and visual presentation
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/strip-line-cs8" %}
-## Dash Array
+## Dash array
-Dashed strip lines can be rendered using the [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#dasharray) property. The dash pattern is defined using a series of numbers representing dash and gap lengths.
+Dashed strip lines can be rendered using the [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#dasharray) property. The value is a comma-separated list of numbers, where odd entries define the dash length and even entries define the gap length (in pixels). For example, `"5,5"` produces a 5-pixel dash followed by a 5-pixel gap.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -123,13 +123,13 @@ Dashed strip lines can be rendered using the [`dashArray`](https://ej2.syncfusio
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/strip-line-cs9" %}
-## Recurrence Stripline
+## Recurrence stripline
-Strip lines can be drawn repeatedly at regular intervals – this will be useful when you want to mark an event that occurs recursively along the timeline of the chart. Following properties are used to configure this feature.
+Strip lines can be drawn repeatedly at regular intervals — useful when you want to mark an event that occurs recursively along the timeline of the chart. The following properties configure this feature.
-* [`isRepeat`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#isrepeat) - It is used to enable / disable the recurrence strip line.
-* [`repeatEvery`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#repeatevery) - It is used to mention the stripline interval.
-* [`repeatUntil`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#repeatuntil) - It specifies the end value at which point strip line has to stop repeating.
+* [`isRepeat`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#isrepeat) - Enables or disables the recurrence strip line.
+* [`repeatEvery`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#repeatevery) - Specifies the stripline interval. The units must match the associated axis value type (for example, use years with a `DateTime` axis).
+* [`repeatUntil`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#repeatuntil) - Specifies the end value at which the strip line stops repeating. If omitted, the strip line repeats until the axis maximum.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -143,9 +143,11 @@ Strip lines can be drawn repeatedly at regular intervals – this will be useful
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/strip-line-cs10" %}
-## Size Type
+## Size type
-The [`sizeType`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#sizetype) property determines how strip line size is interpreted. Supported units include:
+The [`sizeType`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#sizetype) property determines how the strip line `size` value is interpreted. Use `Pixel` for a fixed pixel width, or use `Years`, `Months`, `Days`, `Hours`, `Minutes`, or `Seconds` when the associated axis is a `DateTime` axis and the size should be measured in those units. `Auto` lets the chart choose based on the axis context.
+
+Supported units include:
* `Auto`
* `Pixel`
@@ -156,6 +158,8 @@ The [`sizeType`](https://ej2.syncfusion.com/angular/documentation/api/chart/stri
* `Minutes`
* `Seconds`
+For more details on working with date-time axes, see [DateTime Axis](../axis/axis-types/date-time-axis).
+
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
{% include code-snippet/chart-sdk/angular/charts/axis/datetime-cs18/src/app.component.ts %}
@@ -170,12 +174,12 @@ The [`sizeType`](https://ej2.syncfusion.com/angular/documentation/api/chart/stri
## Segment stripline
-You can create stripline in a particular region with respect to segment. You can enable the segment stripline using [`isSegmented`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#issegmented) property. The start and end value of this type of stripline can be defined using [`segmentStart`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentstart) and [`segmentEnd`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentend) properties.
+You can restrict a stripline to a particular region of the chart with respect to a segment defined on a different axis. Use [`isSegmented`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#issegmented) to enable this feature, and [`segmentStart`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentstart) and [`segmentEnd`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentend) to define the range.
-* [`isSegmented`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#issegmented) - It is used to enable the segment stripline.
-* [`segmentStart`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentstart) - Used to change the segment start value. Value correspond to associated axis.
-* [`segmentEnd`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentend) - Used to change the segment end value. Value correspond to associated axis.
-* [`segmentAxisName`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentaxisname) - Used to specify the name of the associated axis.
+* [`isSegmented`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#issegmented) - Enables the segment stripline.
+* [`segmentStart`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentstart) - Sets the segment start value. The value corresponds to the associated axis.
+* [`segmentEnd`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentend) - Sets the segment end value. The value corresponds to the associated axis.
+* [`segmentAxisName`](https://ej2.syncfusion.com/angular/documentation/api/chart/stripLineSettingsModel#segmentaxisname) - Specifies the name of the associated axis. Required when the chart contains multiple axes and the default axis cannot be unambiguously resolved.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -191,4 +195,14 @@ You can create stripline in a particular region with respect to segment. You can
## See Also
-* [Mark the threshold in chart](../how-to/threshold#mark-a-threshold-in-chart)
\ No newline at end of file
+* [Mark the threshold in chart](../how-to/threshold)
+
+## Troubleshooting
+
+If your strip lines do not appear in the chart:
+
+* Ensure `StriplineService` is registered in the component's `providers` array.
+* Confirm you use the property name `stripLines` (plural) on the axis, not `stripline` (singular).
+* Ensure the host workspace's `package.json` includes `@syncfusion/ej2-angular-charts`.
+
+For compatibility information and version-specific notes, refer to the Syncfusion Angular Charts release notes.
\ No newline at end of file
diff --git a/chart-sdk/angular/charts/chart-elements/technical-indicators.md b/chart-sdk/angular/charts/chart-elements/technical-indicators.md
index ac7f6c835..13e9daabf 100644
--- a/chart-sdk/angular/charts/chart-elements/technical-indicators.md
+++ b/chart-sdk/angular/charts/chart-elements/technical-indicators.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Technical Indicators in Angular Chart | Syncfusion
+title: Technical Indicators in Angular Charts | Syncfusion
description: Learn here all about Technical indicators in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Technical indicators
@@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk
-# Technical Indicators in Angular Chart
+# Technical Indicators in Angular Charts
A [technical indicator](https://www.syncfusion.com/angular-components/angular-charts) is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction.
@@ -18,12 +18,45 @@ A [technical indicator](https://www.syncfusion.com/angular-components/angular-ch
The chart component supports 10 different types of technical indicators.
+## Indicator Reference
+
+| Indicator | `type` value | Default `period` | Required series service |
+|---|---|---|---|
+| Accumulation Distribution | `AccumulationDistribution` | n/a | `LineSeriesService` + `volume` data |
+| Average True Range (ATR) | `Atr` | 14 | `LineSeriesService` |
+| BollingerBand | `BollingerBand` | 14 | `RangeAreaSeriesService` |
+| Exponential Moving Average (EMA) | `Ema` | 14 | `LineSeriesService` |
+| Momentum | `Momentum` | 14 | `LineSeriesService` |
+| MACD | `MACD` | 9 (signal); fastPeriod 12, slowPeriod 26 | `LineSeriesService`, `ColumnSeriesService` |
+| Relative Strength Index (RSI) | `Rsi` | 14 | `LineSeriesService` |
+| Simple Moving Average (SMA) | `Sma` | 14 | `LineSeriesService` |
+| Stochastic | `Stochastic` | 14 (kPeriod); dPeriod 3 | `LineSeriesService` |
+| Triangular Moving Average (TMA) | `TMA` | 14 | `LineSeriesService` |
+
+## Getting Started
+
+The example below renders a stock chart with a Simple Moving Average (SMA) indicator. Use it as a template for the other indicators by swapping the `type` and the corresponding service.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/technical-indicators/sma-cs1/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/technical-indicators/sma-cs1/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/technical-indicators/sma-cs1" %}
+
## Accumulation Distribution
The Accumulation Distribution combines price and volume to show how money may be flowing into or out of a stock.
To render an Accumulation Distribution Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `AccumulationDistribution` and inject `AccumulationDistributionIndicatorService` into the `@NgModule.providers`.
To calculate the signal line, the [`volume`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#volume) field is additionally added with [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#datasource).
+Required data fields: `high`, `low`, `close`, and `volume`.
+
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
{% include code-snippet/chart-sdk/angular/charts/technical-indicators/ad-cs1/src/app.component.ts %}
@@ -38,7 +71,7 @@ To calculate the signal line, the [`volume`](https://ej2.syncfusion.com/angular/
## Average True Range (ATR)
-ATR measures the stock volatility by comparing the current value with the previous value. To render an Average True Range (ATR) Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Atr` and inject `AtrIndicatorService` into the `@NgModule.providers`.
+ATR measures the stock volatility by comparing the current value with the previous value. To render an Average True Range (ATR) Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Atr` and inject `AtrIndicatorService` into the `@NgModule.providers`. Default `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -56,7 +89,7 @@ ATR measures the stock volatility by comparing the current value with the previo
A chart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices.
To render a BollingerBand, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `BollingerBand` and inject `BollingerBandsService` into the `@NgModule.providers`.
-The BollingerBand indicator is represented by three lines: upperLine, lowerLine, and signalLine. Bollinger Band default values of the [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#period) is 14 and [`standardDeviations`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#standarddeviation) is 2.
+The BollingerBand indicator is represented by three lines: upperLine, lowerLine, and signalLine. Bollinger Band default values of the [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#period) is 14 and [`standardDeviation`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#standarddeviation) is 2.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -88,7 +121,7 @@ The BollingerBand indicator is represented by three lines: upperLine, lowerLine,
## Exponential Moving Average (EMA)
-Moving average indicators are used to define the direction of the trend. To render an EMA Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Ema` and inject `EMAIndicatorService` into the `@NgModule.providers`.
+Moving averages smooth price data to define the direction of the trend. To render an EMA Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Ema` and inject `EMAIndicatorService` into the `@NgModule.providers`. Default `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -104,7 +137,7 @@ Moving average indicators are used to define the direction of the trend. To rend
## Momentum
-Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Momentum` and inject `MomentumIndicatorService` into the `@NgModule.providers`. Momentum indicator will be represented by two lines (upperLine, signalLine). In the Momentum indicator, the upper band is always rendered at the value 100.
+Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Momentum` and inject `MomentumIndicatorService` into the `@NgModule.providers`. Momentum will be represented by two lines (upperLine, signalLine). In the Momentum indicator, the upperLine is always rendered at the value 100. Default `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -118,7 +151,7 @@ Momentum shows the speed at which the price of the stock is changing. To render
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/technical-indicators/momentum-cs1" %}
-**Customization of MomentumIndicator**
+**Customization of Momentum**
`stroke`, `stroke-width`, and `color` of upperLine can be customized by using [`upperLine`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#upperline) property of indicator.
@@ -136,7 +169,7 @@ Momentum shows the speed at which the price of the stock is changing. To render
## Moving Average Convergence Divergence (MACD)
-MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `MACD` and inject `MACDIndicatorService` into the `@NgModule.providers`. MACD indicator will be represented by MACD line, signal line, and MACD histogram. MACD histogram is used to differentiate MACD line and signal line.
+MACD is based on the difference between two EMAs. To render a MACD Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `MACD` and inject `MACDIndicatorService` into the `@NgModule.providers`. MACD indicator will be represented by MACD line, signal line, and MACD histogram. MACD histogram is used to differentiate MACD line and signal line. Default values: `fastPeriod` is 12, `slowPeriod` is 26, and `period` is 9.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -152,7 +185,7 @@ MACD is based on the difference between two EMA's. To render a MACD Indicator, u
**Customization of MACD**
-`stroke`, `stroke-width`, and `color` of macdLine can be customized by using [`macdLine`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdline) property of indicator. The positive and negative changes of histogram can be customized by [`macdPositiveColor`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdpositivecolor) and [`macdNegativeColor`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdnegativecolor) properties. The [`macdType`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdtype) is used to define the type of MACD indicator. To customize the MACD period using [`slowPeriod`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#slowperiod) and [`fastPeriod`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#fastperiod) properties.
+`stroke`, `stroke-width`, and `color` of macdLine can be customized by using [`macdLine`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdline) property of indicator. The positive and negative changes of histogram can be customized by [`macdPositiveColor`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdpositivecolor) and [`macdNegativeColor`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdnegativecolor) properties. The [`macdType`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#macdtype) is used to define the type of MACD indicator. Accepted values are `Line`, `Histogram`, and `Both`. To customize the MACD period using [`slowPeriod`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#slowperiod), [`fastPeriod`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#fastperiod), and [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#period) properties.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -168,7 +201,7 @@ MACD is based on the difference between two EMA's. To render a MACD Indicator, u
## Relative Strength Index (RSI)
-RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Rsi` and inject `RsiIndicatorService` into the `@NgModule.providers`. RSI indicator will be represented by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [`overBought`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#oversold) properties of indicator and the signalLine is calculated by RSI formula.
+RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Rsi` and inject `RsiIndicatorService` into the `@NgModule.providers`. RSI indicator will be represented by three lines (upperLine, lowerLine, signalLine). The upperLine and lowerLine values are customized by [`overBought`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#oversold) properties of indicator and the signalLine is calculated by RSI formula. Default `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -184,7 +217,7 @@ RSI shows how strongly a stock is moving in its current direction. To render a R
## Simple Moving Average (SMA)
-Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Sma` and inject `SmaIndicatorService` module using `@NgModule.providers`.
+Moving averages smooth price data to define the direction of the trend. To render a SMA Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Sma` and inject `SmaIndicatorService` module using `@NgModule.providers`. Default `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -202,7 +235,7 @@ Moving average Indicators are used to define the direction of the trend. To rend
It shows how a stock is performing when compared to its previous state. To render a Stochastic indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `Stochastic` and inject `StochasticIndicatorService` module using `@NgModule.providers` method.
Stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine).
-In stochastic indicator the upperBand value and lowerBand value are customized by [`overBought`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#oversold) properties of indicators and the periodLine and signalLine are rendered based on stochastic formula.
+In stochastic indicator the upperLine and lowerLine values are customized by [`overBought`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#overbought) and [`overSold`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#oversold) properties of indicators. The periodLine and signalLine are rendered based on stochastic formula. Default values: `kPeriod` is 14, `dPeriod` is 3, and `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -216,7 +249,7 @@ In stochastic indicator the upperBand value and lowerBand value are customized b
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/technical-indicators/stochastic-cs1" %}
-**Customization of StochasticIndicator**
+**Customization of Stochastic**
`stroke`, `stroke-width`, and `color` of upperLine can be customized by using [`upperLine`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#upperline), the lowerLine can be customized by using [`lowerLine`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#lowerline) and the periodLine can be customized by using [`periodLine`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#periodline) properties of indicator. To customize the period to find the average price using [`kPeriod`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#kperiod) and [`dPeriod`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#dperiod) properties.
@@ -234,7 +267,7 @@ In stochastic indicator the upperBand value and lowerBand value are customized b
## Triangular Moving Average (TMA)
-Moving average indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `TMA` and inject `TmaIndicatorService` module using `@NgModule.providers`.
+Triangular moving averages smooth price data twice to reduce noise and better define the direction of the trend. To render a TMA Indicator, use indicator [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#type) as `TMA` and inject `TmaIndicatorService` module using `@NgModule.providers`. Default `period` is 14.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -250,7 +283,7 @@ Moving average indicators are used to define the direction of the trend. To rend
**Customization of Technical Indicators**
-`stroke`, `stroke-width`, and `color` of signalLine can be customized by using [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#fill), [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#width) and [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#dasharray) properties. The [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#period) property is used to predict the data forecast calculations. The [`field`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#field) value is used to compare the current price with previous price. It is applicable to BollingerBands and moving averages. The [`showZones`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#showzones) property is used to show/hide the overBought and overSold regions. It is applicable for RSI and stochastic indicators.
+`stroke`, `stroke-width`, and `color` of signalLine can be customized by using [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#fill), [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#width) and [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#dasharray) properties. The [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#period) property is used to predict the data forecast calculations. The [`field`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#field) value is used to compare the current price with previous price. Accepted values are `Close` (default), `Open`, `High`, and `Low`. It is applicable to Bollingerbands and moving averages. The [`showZones`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#showzones) property is used to show/hide the overBought and overSold regions. It is applicable for RSI and stochastic indicators.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -264,11 +297,16 @@ Moving average indicators are used to define the direction of the trend. To rend
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/technical-indicators/sma-cs2" %}
+**Module Dependencies**
+
+To render an Indicator, it is mandatory to inject `LineSeriesService` module.
+In addition to that, MACD Indicator requires `ColumnSeriesService` and BollingerBands requires `RangeAreaSeriesService`.
+
**Data Source**
Technical indicators are usually associated with a financial series. The [`seriesName`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#seriesname) represents the series, the data of which has to be analyzed through indicators.
-Technical indicators can also be added without series using [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#datasource) property of indicator.
+Technical indicators can also be added without series using [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel#datasource) property of indicator. When supplying data without a series, the data records must include the price fields expected by the indicator (e.g., `date`, `open`, `high`, `low`, `close`, and `volume` for Accumulation Distribution).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -282,8 +320,19 @@ Technical indicators can also be added without series using [`dataSource`](https
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/technical-indicators/sma-cs3" %}
-**Module Dependencies**
+## Troubleshooting
-To render an Indicator, it is mandatory to inject `LineSeriesService` module.
-In addition to that, MACD Indicator requires `ColumnSeriesService` and BollingerBands requires `RangeAreaSeriesService`.
+The issues below are the most common problems encountered when working with technical indicators.
+
+| Symptom | Likely cause | Fix |
+|---|---|---|
+| Indicator line is not rendered | The matching `*IndicatorService` (for example, `MomentumIndicatorService`) is not registered | Add the service to your `NgModule.providers` (or to the standalone component's `providers` array) |
+| MACD histogram is missing | `ColumnSeriesService` is not registered | Inject `ColumnSeriesService` into `NgModule.providers` |
+| BollingerBand shows only the signal line | `RangeAreaSeriesService` is not registered | Inject `RangeAreaSeriesService` into `NgModule.providers` |
+| Accumulation Distribution renders empty | The `volume` field is missing from the series or `dataSource` | Include `volume` in every data record mapped via `volume` in the indicator |
+| `macdType` change has no effect | An invalid value is supplied | Use one of `Line`, `Histogram`, or `Both` |
+| Indicator "flickers" or re-renders inconsistently | `period` is larger than the available data length | Reduce `period` or supply more historical data points |
+| No data on the X axis | `primaryXAxis.valueType` is not set to `DateTime` | Set the X axis `valueType` to `DateTime` and use date values in the data |
+
+For additional help, see the Syncfusion Angular Charts [documentation](https://ej2.syncfusion.com/angular/documentation/chart/getting-started) and [API reference](https://ej2.syncfusion.com/angular/documentation/api/chart/technicalIndicatorModel).
diff --git a/chart-sdk/angular/charts/chart-elements/trend-lines.md b/chart-sdk/angular/charts/chart-elements/trend-lines.md
index 6e2377128..3930a1ae2 100644
--- a/chart-sdk/angular/charts/chart-elements/trend-lines.md
+++ b/chart-sdk/angular/charts/chart-elements/trend-lines.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Trendlines in Angular Chart | Syncfusion
+title: Trendlines in Angular Charts | Syncfusion
description: Learn here all about Trend lines in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Trend lines
@@ -10,18 +10,19 @@ domainurl: https://help.syncfusion.com/chart-sdk
-# Trendlines in Angular Chart
+# Trendlines in Angular Charts
Trendlines help identify patterns, direction, and overall trends in numerical data. They project the general movement of data values and are widely used in analytics, forecasting, and financial charts. Trendlines can be added to Cartesian series types such as Line, Column, Scatter, Area, Candle, and Hilo (excluding bar series). Multiple trendlines can be added to a single series based on the analysis needs.
-
-Charts support six types of trendlines: **Linear**, **Exponential**, **Logarithmic**, **Polynomial**, **Power**, and **Moving Average**.
+Import `ChartModule` and add `TrendlinesService` (with the required series services such as `LineSeriesService`) to the component's `providers` array (Angular standalone components) or to `@NgModule.providers` for module-based components.
+
+Charts support the following six types of trendlines: **Linear**, **Exponential**, **Logarithmic**, **Polynomial**, **Power**, and **Moving Average**.
## Linear
-A linear trendline is a straight, best‑fit line used to describe data with a constant rate of increase or decrease. Set the trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Linear` and inject the `TrendlinesService` into the `@NgModule.providers`.
+A linear trendline is a straight, best‑fit line used to describe data with a constant rate of increase or decrease. Set the trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Linear` and add the `TrendlinesService` to the component's `providers` array.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -37,9 +38,9 @@ A linear trendline is a straight, best‑fit line used to describe data with a c
## Exponential
-An exponential trendline displays a curved pattern useful when data rises or falls at increasing rates. Exponential trendlines cannot be generated if the dataset includes zero or negative values.
+An exponential trendline displays a curved pattern useful when data rises, or falls, at increasing rates. Exponential trendlines cannot be generated if the dataset includes zero or negative values.
-Set the trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Exponential` and inject the `TrendlinesService` into the `@NgModule.providers`.
+Set the trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Exponential` and add the `TrendlinesService` to the component's `providers` array.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -55,9 +56,9 @@ Set the trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/
## Logarithmic
-A logarithmic trendline is a best‑fit curved line suitable when the data increases or decreases quickly and then stabilizes. It supports both positive and negative values.
+A logarithmic trendline is a best‑fit curved line suitable when the data increases or decreases quickly and then stabilizes. It supports both positive and negative y-values.
-Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Logarithmic` and inject the `TrendlinesService` into the `@NgModule.providers`.
+Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Logarithmic` and add the `TrendlinesService` to the component's `providers` array.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -75,7 +76,7 @@ Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlin
A polynomial trendline is useful when data fluctuates. It uses a curved line that can model more complex datasets.
-Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Polynomial` and inject the `TrendlinesService` into the `@NgModule.providers`. Use [`polynomialOrder`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#polynomialorder) to define the degree of the polynomial.
+Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Polynomial` and add the `TrendlinesService` to the component's `providers` array. Use [`polynomialOrder`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#polynomialorder) to define the degree of the polynomial. Valid `polynomialOrder` values are between 2 and 6; the default is 2.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -91,9 +92,9 @@ Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlin
## Power
-A power trendline is ideal for datasets where measurements increase at a constant rate. It displays a curved line that best fits exponential growth or decay patterns.
+A power trendline is ideal for datasets where measurements increase at a constant rate. It displays a curved line that best fits growth or decay patterns. Power trendlines cannot be generated if the dataset contains zero or negative x-values.
-Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Power` and inject the `TrendlinesService` into the `@NgModule.providers`.
+Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `Power` and add the `TrendlinesService` to the component's `providers` array.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -109,9 +110,9 @@ Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlin
## Moving Average
-A moving average trendline smooths fluctuations to reveal overall trends more clearly. The [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#period) property specifies the number of data points used to calculate each average.
+A moving average trendline smooths fluctuations to reveal overall trends more clearly. The [`period`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#period) property specifies the number of data points used to calculate each average (default `2`).
-Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `MovingAverage` and inject the `TrendlinesService` into the `@NgModule.providers`.
+Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#type) to `MovingAverage` and add the `TrendlinesService` to the component's `providers` array.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -125,7 +126,7 @@ Set [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlin
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/trendlines/movingaverage-cs1" %}
-**Customization of Trendlines**
+## Customization of Trendlines
Customize trendline appearance using the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#fill) property for color and the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#width) property for line thickness.
@@ -142,7 +143,7 @@ Customize trendline appearance using the [`fill`](https://ej2.syncfusion.com/ang
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/trendlines/movingaverage-cs2" %}
-## Forecasting
+**Forecasting**
Trendline forecasting extends the existing trendline to estimate future and past values.
@@ -164,7 +165,7 @@ Use the [`forwardForecast`](https://ej2.syncfusion.com/angular/documentation/api
**Backward Forecasting**
-Use the [`backwardForecast`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#backwardforecast) property to extend the trendline into past data points.
+Use the [`backwardForecast`](https://ej2.syncfusion.com/angular/documentation/api/chart/trendlineModel#backwardforecast) property to extend the trendline backward in time.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
diff --git a/chart-sdk/angular/charts/chart-events.md b/chart-sdk/angular/charts/chart-events.md
index 600810400..79451677e 100644
--- a/chart-sdk/angular/charts/chart-events.md
+++ b/chart-sdk/angular/charts/chart-events.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Chart Events in Angular Chart | Syncfusion
+title: Chart events in Angular Charts | Syncfusion
description: Learn here all about Chart events in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Chart events
@@ -8,15 +8,33 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Chart Events in Angular Chart
+# Chart Event in Angular Charts Component
-Chart events are callback functions that the Syncfusion EJ2 Chart component triggers at different stages of its life cycle. They allow developers to respond to user interactions, customize rendering, control behavior, and extend chart functionality without modifying the core control. These events enable developers to implement custom logic, enhance interactivity, and tailor the chart's behavior to specific requirements, thereby providing a more dynamic and responsive user experience.
+Chart events are callback functions that the Syncfusion EJ2 Chart component triggers at different stages of its life cycle. They allow developers to respond to user interactions, customize rendering, control behavior, and extend chart functionality without modifying the core component. These events enable developers to implement custom logic, enhance interactivity, and tailor the chart's behavior to specific requirements, thereby providing a more dynamic and responsive user experience.
+
+For a full list of supported Angular and Syncfusion package versions, see the [Getting Started](./getting-started) page. Every event documented here requires the relevant service to be added to the component's `providers` array (for example, `CategoryService`, `LineSeriesService`, `TooltipService`, `SelectionService`, `DataEditingService`, `ZoomService`, `ScrollBarService`, `ExportService`).
+
+**Available events**
+
+| Group | Events |
+| --- | --- |
+| Animation | `animationComplete` |
+| Labels and Axes | `axisLabelRender`, `axisLabelClick`, `axisRangeCalculated`, `axisMultiLabelRender`, `multiLevelLabelClick` |
+| Series and Points | `seriesRender`, `pointClick`, `pointDoubleClick`, `pointMove`, `pointRender`, `textRender` |
+| Data Editing (Drag) | `dragStart`, `drag`, `dragEnd` |
+| Tooltip | `tooltipRender`, `sharedTooltipRender` |
+| Legend | `legendRender`, `legendClick` |
+| Annotations | `annotationRender` |
+| Zooming and Scrolling | `zooming`, `zoomComplete`, `scrollChanged`, `scrollStart`, `scrollEnd` |
+| Selection and Drag | `dragComplete`, `selectionComplete` |
+| Mouse Events | `chartMouseDown`, `chartMouseMove`, `chartMouseUp`, `chartMouseLeave`, `chartMouseClick`, `chartDoubleClick` |
+| Life cycle and Layout | `load`, `loaded`, `beforeResize`, `resized`, `beforePrint`, `beforeExport`, `afterExport` |
## Animation
### animationComplete
-After a series animation has completed, the animationComplete event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ianimationcompleteeventargs).
+Triggered after a series animation completes. Use this event to chain additional UI work, run custom transitions, or release a loading indicator. The series must have `animation.enable = true` for this event to fire. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ianimationcompleteeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -34,7 +52,7 @@ After a series animation has completed, the animationComplete event will be trig
## Labels and Axes
### axisLabelRender
-Before an axis label is rendered, the axisLabelRender event will be triggered to customize label text and style. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxislabelrendereventargs).
+Triggered before an axis label is rendered so you can customize its text and style. Set `args.cancel = true` to hide an individual label. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxislabelrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -49,7 +67,7 @@ Before an axis label is rendered, the axisLabelRender event will be triggered to
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/axisLabelRender" %}
### axisLabelClick
-The axisLabelClick event will be triggered when an axis label is clicked. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxislabelclickeventargs).
+Triggered when an axis label is clicked. Use it to drill into a category, toggle an axis-level filter, or open a side panel for the clicked label. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxislabelclickeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -64,7 +82,7 @@ The axisLabelClick event will be triggered when an axis label is clicked. To kno
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/axisLabelClick" %}
### axisRangeCalculated
-After an axis range (minimum, maximum, interval) is calculated, the axisRangeCalculated event will be triggered, allowing you to override the values. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxisrangecalculatedeventargs).
+Triggered after the axis range (minimum, maximum, and interval) is calculated, allowing you to override the values. For category axes, `minimum` and `maximum` apply to category index positions rather than labels. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxisrangecalculatedeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -79,7 +97,7 @@ After an axis range (minimum, maximum, interval) is calculated, the axisRangeCal
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/axisRangeCalculated" %}
### axisMultiLabelRender
-Before multi-level axis labels are rendered, the axisMultiLabelRender event will be triggered to customize label text and style. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxismultilabelrendereventargs).
+Triggered before multi-level axis labels are rendered so you can customize their text and style. Multi-level labels must be configured on the axis via the `multiLevelLabels` property; the `MultiLevelLabelService` provider is also required. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iaxismultilabelrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -94,7 +112,7 @@ Before multi-level axis labels are rendered, the axisMultiLabelRender event will
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/axisMultiLabelRender" %}
### multiLevelLabelClick
-The multiLevelLabelClick event will be triggered when a multi-level axis label segment is clicked. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imultilevellabelclickeventargs).
+Triggered when a multi-level axis label segment is clicked. Requires the `MultiLevelLabelService` provider and `multiLevelLabels` to be configured on the axis. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imultilevellabelclickeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -111,7 +129,7 @@ The multiLevelLabelClick event will be triggered when a multi-level axis label s
## Series and Points
### seriesRender
-Before a series is rendered, the seriesRender event will be triggered to customize series appearance and properties. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iseriesrendereventargs).
+Triggered before a series is rendered so you can customize its appearance and properties (for example, fill, opacity, border, width, or `columnWidth`). To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iseriesrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -126,7 +144,7 @@ Before a series is rendered, the seriesRender event will be triggered to customi
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/seriesRender" %}
### pointClick
-The pointClick event will be triggered when a data point or its symbol is clicked. Use this event to perform actions such as highlighting, drilling down, or showing custom details for the selected point. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointeventargs).
+Triggered when a data point or its symbol is clicked. Use this event to perform actions such as highlighting, drilling down, or showing custom details for the selected point. Inspect `args.point`, `args.series`, `args.pointIndex`, and `args.seriesIndex` for details. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -141,7 +159,7 @@ The pointClick event will be triggered when a data point or its symbol is clicke
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/pointClick" %}
### pointDoubleClick
-The pointDoubleClick event will be triggered when a data point or its symbol is double-clicked. Use this event for quick-edit workflows, navigation, or toggling detailed views for the target point. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointeventargs).
+Triggered when a data point or its symbol is double-clicked. Use this event for quick-edit workflows, navigation, or toggling detailed views for the target point. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -156,7 +174,7 @@ The pointDoubleClick event will be triggered when a data point or its symbol is
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/pointDoubleClick" %}
### pointMove
-The pointMove event will be triggered when the pointer moves over a data point. Use this event to show contextual UI, update external indicators, or track the hovered point dynamically. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointeventargs).
+Triggered when the pointer moves over a data point. Use this event to show contextual UI, update external indicators, or track the hovered point dynamically. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -171,7 +189,7 @@ The pointMove event will be triggered when the pointer moves over a data point.
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/pointMove" %}
### pointRender
-Before an individual data point is rendered, the pointRender event will be triggered to customize its visual (color, border, shape, size, corner radius). To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointrendereventargs).
+Triggered before an individual data point is rendered so you can customize its visual properties such as `fill`, `border`, `shape`, size, and corner radius. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ipointrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -186,7 +204,7 @@ Before an individual data point is rendered, the pointRender event will be trigg
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/pointRender" %}
### textRender (Data Labels)
-Before a data label is rendered, the textRender event will be triggered to customize label text, style, template, or position. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/itextrendereventargs).
+Triggered before a data label is rendered so you can customize label text, style, template, or position. You can also set `args.font` and `args.color` to format the label. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/itextrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -200,9 +218,11 @@ Before a data label is rendered, the textRender event will be triggered to custo
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/textRender" %}
+## Data Editing (Drag)
+
### dragStart
-Triggered when a data point drag operation begins on a series with dragging enabled (via dragSettings). Use this event to validate the drag action, apply constraints, or cancel the drag before it proceeds. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idataeditingeventargs).
+Triggered when a data point drag operation begins on a series with dragging enabled (via `dragSettings`). Requires the `DataEditingService` provider and the series to have `dragSettings.enable = true`. Use this event to validate the drag action, apply constraints, or cancel the drag before it proceeds. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idataeditingeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -218,7 +238,7 @@ Triggered when a data point drag operation begins on a series with dragging enab
### drag
-Triggered continuously while a data point is being dragged. Use this event to provide live feedback, enforce boundaries, or update UI as the point’s position changes. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idataeditingeventargs).
+Triggered continuously while a data point is being dragged. Use this event to provide live feedback, enforce boundaries, or update the UI as the point’s position changes. Requires the `DataEditingService` provider. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idataeditingeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -234,7 +254,7 @@ Triggered continuously while a data point is being dragged. Use this event to pr
### dragEnd
-Triggered when a data point drag operation is completed (pointer released) and the new value is committed. Use this event to persist changes, refresh related UI, or perform post-edit actions. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idataeditingeventargs).
+Triggered when a data point drag operation completes (pointer released) and the new value is committed. Use this event to persist changes, refresh related UI, or perform post-edit actions. Requires the `DataEditingService` provider. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idataeditingeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -251,7 +271,7 @@ Triggered when a data point drag operation is completed (pointer released) and t
## Tooltip
### tooltipRender
-Before a tooltip for a single series point is shown, the tooltipRender event will be triggered to customize content and style. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/itooltiprendereventargs).
+Triggered before a tooltip for a point in a single-series tooltip is shown so you can customize content and style. Requires the `TooltipService` provider and `tooltip.enable = true`. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/itooltiprendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -266,7 +286,7 @@ Before a tooltip for a single series point is shown, the tooltipRender event wil
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/tooltipRender" %}
### sharedTooltipRender
-Before a shared tooltip is shown (multiple series at the same x-value), the sharedTooltipRender event will be triggered to customize aggregated content. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/isharedtooltiprendereventargs).
+Triggered before a shared tooltip is shown (aggregating multiple series at the same x-value) so you can customize the aggregated content. Requires the `TooltipService` provider and `tooltip.shared = true`. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/isharedtooltiprendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -283,7 +303,7 @@ Before a shared tooltip is shown (multiple series at the same x-value), the shar
## Legend
### legendRender
-Before a legend item is rendered, the legendRender event will be triggered to customize the legend text, shape, and fill. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ilegendrendereventargs).
+Triggered before a legend item is rendered so you can customize the legend text, shape, and fill. The `shape` value must be a valid `LegendShape` enum value (for example, `Circle`, `Rectangle`, `Diamond`). To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ilegendrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -298,7 +318,7 @@ Before a legend item is rendered, the legendRender event will be triggered to cu
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/legendRender" %}
### legendClick
-The legendClick event will be triggered when a legend item is clicked. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ilegendclickeventargs).
+Triggered when a legend item is clicked. Use this event to filter, isolate, or highlight related data in response to the selection. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ilegendclickeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -315,7 +335,7 @@ The legendClick event will be triggered when a legend item is clicked. To know m
## Annotations
### annotationRender
-Before the chart annotation is rendered, the annotationRender event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iannotationrendereventargs).
+Triggered before each chart annotation is rendered so you can customize or cancel it. Requires the `ChartAnnotationService` provider and an `annotations` configuration on the chart. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iannotationrendereventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -332,7 +352,7 @@ Before the chart annotation is rendered, the annotationRender event will be trig
## Zooming and Scrolling
### zooming
-During zoom or pan interactions, the zooming event will be triggered, providing per-axis zoom information that can be modified or canceled. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/izoomingeventargs).
+Triggered during zoom or pan interactions, providing per-axis zoom information that can be modified or canceled. Requires the `ZoomService` provider and `zoomSettings` to be configured on the chart. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/izoomingeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -347,7 +367,7 @@ During zoom or pan interactions, the zooming event will be triggered, providing
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/zooming" %}
### zoomComplete
-After a zoom or pan action completes for an axis, the zoomComplete event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/izoomcompleteeventargs).
+Triggered after a zoom or pan action completes for an axis. Requires the `ZoomService` provider and `zoomSettings` to be configured on the chart. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/izoomcompleteeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -362,7 +382,7 @@ After a zoom or pan action completes for an axis, the zoomComplete event will be
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/zoomComplete" %}
### scrollChanged
-During scrollbar interactions, the scrollChanged event will be triggered to indicate visible range or zoom changes. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iscrolleventargs).
+Triggered during scrollbar interactions to indicate visible range or zoom changes. Requires the `ScrollBarService` provider and `scrollbarSettings.enable = true` on the axis. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iscrolleventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -376,10 +396,40 @@ During scrollbar interactions, the scrollChanged event will be triggered to indi
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/scrollChanged" %}
+### scrollStart
+Triggered when a scrollbar interaction begins. Use this event to capture the previous range before the user changes the viewport, or to apply initial constraints when scrolling starts. Requires the `ScrollBarService` provider and `scrollbarSettings.enable = true` on the axis. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iscrolleventargs).
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/chart-events/scrollStart/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/chart-events/scrollStart/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/scrollStart" %}
+
+### scrollEnd
+Triggered when a scrollbar interaction ends and the new viewport range is committed. Use this event to persist the visible range or to refresh related UI. Requires the `ScrollBarService` provider and `scrollbarSettings.enable = true` on the axis. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iscrolleventargs).
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/chart-events/scrollEnd/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/chart-events/scrollEnd/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/scrollEnd" %}
+
## Selection and Drag
### dragComplete
-After a drag-selection area or zoom region is completed, the dragComplete event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idragcompleteeventargs).
+Triggered after a drag-selection area or zoom region is completed. Requires the `SelectionService` provider and `selectionMode` to be set to a drag-based value (for example, `DragXY`, `DragX`, or `DragY`). To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/idragcompleteeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -394,7 +444,7 @@ After a drag-selection area or zoom region is completed, the dragComplete event
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/dragComplete" %}
### selectionComplete
-After a selection action (by click or drag) completes, the selectionComplete event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iselectioncompleteeventargs).
+Triggered after a selection action (by click or drag) completes. Requires the `SelectionService` provider and `selectionMode` to be set to a value that enables selection (for example, `Point`, `Series`, `Cluster`, `DragXY`). To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iselectioncompleteeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -411,7 +461,7 @@ After a selection action (by click or drag) completes, the selectionComplete eve
## Mouse Events
### chartMouseDown
-The chartMouseDown event will be triggered when a mouse down action occurs over the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
+Triggered when a mouse down action occurs over the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -426,7 +476,7 @@ The chartMouseDown event will be triggered when a mouse down action occurs over
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/chartMouseDown" %}
### chartMouseMove
-The chartMouseMove event will be triggered when the mouse moves over the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
+Triggered when the mouse moves over the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -441,7 +491,7 @@ The chartMouseMove event will be triggered when the mouse moves over the chart a
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/chartMouseMove" %}
### chartMouseUp
-The chartMouseUp event will be triggered when a mouse up action occurs over the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
+Triggered when a mouse up action occurs over the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -456,7 +506,7 @@ The chartMouseUp event will be triggered when a mouse up action occurs over the
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/chartMouseUp" %}
### chartMouseLeave
-The chartMouseLeave event will be triggered when the mouse leaves the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
+Triggered when the mouse leaves the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -471,7 +521,7 @@ The chartMouseLeave event will be triggered when the mouse leaves the chart area
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/chartMouseLeave" %}
### chartMouseClick
-The chartMouseClick event will be triggered when a mouse click occurs within the chart area. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
+Triggered when a mouse click occurs within the chart area (axes, series, legend, tooltip, etc.). To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -486,7 +536,7 @@ The chartMouseClick event will be triggered when a mouse click occurs within the
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/chartMouseClick" %}
### chartDoubleClick
-The chartDoubleClick event will be triggered when a double-click occurs within the chart area. Use this event to reset zoom, toggle modes, or open detailed panels based on the double-click location. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
+Triggered when a double-click occurs within the chart area. Use this event to reset zoom, toggle modes, or open detailed panels based on the double-click location. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/imouseeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -503,7 +553,7 @@ The chartDoubleClick event will be triggered when a double-click occurs within t
## Life cycle and Layout
### load
-Before the chart starts initial rendering, the load event will be triggered. Use this event to set themes, localization, palettes, or modify chart/series properties programmatically prior to rendering. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iloadedeventargs).
+Triggered before the chart starts initial rendering. Use this event to set themes, localization, palettes, or modify chart/series properties programmatically prior to rendering. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iloadedeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -518,7 +568,7 @@ Before the chart starts initial rendering, the load event will be triggered. Use
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/load" %}
### loaded
-After the chart is fully loaded and initial rendering is completed, the loaded event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iloadedeventargs).
+Triggered after the chart is fully loaded and initial rendering is complete. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iloadedeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -533,7 +583,7 @@ After the chart is fully loaded and initial rendering is completed, the loaded e
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/loaded" %}
### beforeResize
-Before a resize is performed, the beforeResize event will be triggered, and you can cancel the subsequent resizing. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ibeforeresizeeventargs).
+Triggered before a resize is performed; you can cancel the subsequent resize by setting `args.cancel = true`. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/ibeforeresizeeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -548,7 +598,7 @@ Before a resize is performed, the beforeResize event will be triggered, and you
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/beforeResize" %}
### resized
-After the chart has been resized, the resized event will be triggered. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iresizeeventargs).
+Triggered after the chart has been resized. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iresizeeventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -563,7 +613,7 @@ After the chart has been resized, the resized event will be triggered. To know m
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/resized" %}
### beforePrint
-The beforePrint event will be triggered before the chart is printed, providing access to the HTML content being printed. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iprinteventargs).
+Triggered before the chart is printed, providing access to the HTML content being printed via `args.htmlContent`. Use this to add watermarks, headers/footers, or to modify the cloned chart element before printing. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iprinteventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -578,7 +628,7 @@ The beforePrint event will be triggered before the chart is printed, providing a
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/beforePrint" %}
### beforeExport
-Before a chart export operation begins (such as exporting to PNG, JPEG, SVG, or PDF), the beforeExport event will be triggered, allowing you to customize file name, export type, page settings, or cancel the export. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iexporteventargs).
+Triggered before a chart export operation begins (such as exporting to PNG, JPEG, SVG, or PDF), allowing you to customize `fileName`, export type, page settings, theme, or cancel the export. Requires the `ExportService` provider. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/iexporteventargs).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -593,7 +643,7 @@ Before a chart export operation begins (such as exporting to PNG, JPEG, SVG, or
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/beforeExport" %}
### afterExport
-After a chart export operation completes, the afterExport event will be triggered. Use this event to perform post-export actions such as notifications, logging, or initiating downloads in custom flows. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart/index-default).
+Triggered after a chart export operation completes. Use this event to perform post-export actions such as notifications, logging, or initiating downloads in custom flows. Requires the `ExportService` provider. To know more about the arguments of this event, refer [`here`](https://ej2.syncfusion.com/angular/documentation/api/chart#afterexport).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -607,3 +657,29 @@ After a chart export operation completes, the afterExport event will be triggere
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/chart-events/afterExport" %}
+## Common event arguments
+
+Most event argument objects share a common shape. The table below lists the properties you are most likely to use.
+
+| Property | Type | Description |
+| --- | --- | --- |
+| `args.chart` | `Chart` | The chart instance that raised the event. |
+| `args.series` | `Series` | The series associated with the event (point, render, and selection events). |
+| `args.point` | `Points` | The data point associated with the event (point, text render, and tooltip events). |
+| `args.pointIndex` | `number` | Index of the data point in its series. |
+| `args.seriesIndex` | `number` | Index of the series in the series collection. |
+| `args.cancel` | `boolean` | Set to `true` to cancel the default action of the event. |
+| `args.x`, `args.y` | `number` | Mouse coordinates in the chart's local coordinate system (mouse events). |
+| `args.target` | `HTMLElement` | The DOM element under the pointer (mouse events). |
+
+For complete properties of a specific event, follow the API link in each section above.
+
+## Troubleshooting
+
+- **Event does not fire** — Make sure the relevant service is registered in the component's `providers` array (for example, `TooltipService` for tooltip events, `ZoomService` for zoom events, `SelectionService` for selection events, `DataEditingService` for drag-to-edit events).
+- **`args.cancel` has no effect** — Only events that explicitly mention cancellation in the API reference support `args.cancel`. For example, `beforeResize` supports cancellation, but `loaded` does not.
+- **`tooltipRender` does not fire** — Tooltip events only fire when `tooltip.enable = true`. `sharedTooltipRender` additionally requires `tooltip.shared = true`.
+- **`zooming` / `zoomComplete` do not fire** — Configure `zoomSettings` and ensure `enableSelectionZooming`, `enableMouseWheelZooming`, or `enablePinchZooming` is set to `true`.
+- **`selectionComplete` / `dragComplete` do not fire** — Set `selectionMode` to a value other than `None` (for example, `Point`, `Series`, `Cluster`, `DragXY`).
+- **`dragStart` / `drag` / `dragEnd` do not fire** — The series must have `dragSettings.enable = true` and the `DataEditingService` provider must be registered.
+- **`scrollChanged` / `scrollStart` / `scrollEnd` do not fire** — Enable the scrollbar on the axis (`scrollbarSettings.enable = true`) and register the `ScrollBarService` provider.
diff --git a/chart-sdk/angular/charts/chart-interactive/cross-hair-and-track-ball.md b/chart-sdk/angular/charts/chart-interactive/cross-hair-and-track-ball.md
index 85527c8a5..d519158cc 100644
--- a/chart-sdk/angular/charts/chart-interactive/cross-hair-and-track-ball.md
+++ b/chart-sdk/angular/charts/chart-interactive/cross-hair-and-track-ball.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Crosshair and Trackball in Angular Chart | Syncfusion
+title: Crosshair and Trackball in Angular Charts | Syncfusion
description: Learn here all about Crosshair and trackball in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Crosshair and trackball
@@ -8,64 +8,75 @@ documentation: ug
domainurl: https://help.syncfusion.com/chart-sdk
---
-# Crosshair and Trackball in Angular Chart
+# Crosshair and Trackball in Angular Charts
-Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position.
+The crosshair displays a vertical and/or horizontal line that shows the axis value at the mouse or touch position.
-Crosshair lines can be enabled by using [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#enable) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair).
+>**Note**: To use the crosshair feature, inject `CrosshairService` into the component's `providers` array (or `@NgModule.providers` for module-based apps).
+
+Crosshair lines can be enabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#enable) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs1/src/app.component.ts %}
{% endhighlight %}
+{% highlight ts tabtitle="chartdata.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs1/src/chartdata.ts %}
+{% endhighlight %}
+
{% highlight ts tabtitle="main.ts" %}
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/crosshair-cs1" %}
## Axis tooltip
-Tooltip label for an axis can be enabled by using [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltipModel#enable)
-property of [`crosshairTooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#crosshairtooltip) in the corresponding axis.
+Tooltip label for an axis can be enabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltipModel#enable) property of the [`crosshairTooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#crosshairtooltip) in the corresponding axis.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs2/src/app.component.ts %}
{% endhighlight %}
+{% highlight ts tabtitle="chartdata.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs2/src/chartdata.ts %}
+{% endhighlight %}
+
{% highlight ts tabtitle="main.ts" %}
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs2/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/crosshair-cs2" %}
## Customization
-The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltip#fill) and [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltip#textstyle) property of the [`crosshairTooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#crosshairtooltip) is used to customize the background color and font style of the crosshair label respectively. Color and width of the crosshair line can be customized by using the [`line`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#line) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair).
+The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltip#fill) and [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel) properties of the [`crosshairTooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#crosshairtooltip) are used to customize the background color and font style of the crosshair label, respectively. The color and width of the crosshair line can be customized by using the [`line`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#line) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair).
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs3/src/app.component.ts %}
{% endhighlight %}
+{% highlight ts tabtitle="chartdata.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs3/src/chartdata.ts %}
+{% endhighlight %}
+
{% highlight ts tabtitle="main.ts" %}
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs3/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
-{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/crosshair-cs3" %}
->**Note**: To use crosshair feature, inject `CrosshairService` into the `@NgModule.providers`.
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/crosshair-cs3" %}
## Snap to data
-Enabling the [`snapToData`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettingsModel#snaptodata) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) aligns it with the nearest data point instead of following the exact mouse position.
+Enabling the [`snapToData`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#snaptodata) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) aligns the line with the nearest data point on both axes instead of following the exact mouse position.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -76,14 +87,18 @@ Enabling the [`snapToData`](https://ej2.syncfusion.com/angular/documentation/api
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs9/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/crosshair-cs9" %}
## Trackball
-Trackball is used to track a data point closest to the mouse or touch position. Trackball marker indicates the closest point and trackball tooltip displays the information about the point. To use trackball feature, inject `CrosshairService` and `TooltipService` into the `@NgModule.providers`.
+Trackball is used to track the data point closest to the mouse or touch position. The trackball marker indicates the closest point and the trackball tooltip displays the information about that point. To use the trackball feature, inject `CrosshairService` and `TooltipService` into the component's `providers` array (or `@NgModule.providers` for module-based apps).
-Trackball can be enabled by setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#enable) property of the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) to true and [`shared`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel#shared) property in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#tooltip) to true in chart.
+The trackball can be enabled by:
+
+* Setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#enable) property of the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) to **true**.
+* Setting the [`lineType`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#linetype) property of the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) to **Vertical** (recommended so the line snaps to a single x-coordinate across all series).
+* Setting the [`shared`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettings#shared) property in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#tooltip) to **true**.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -94,7 +109,7 @@ Trackball can be enabled by setting the [`enable`](https://ej2.syncfusion.com/an
{% include code-snippet/chart-sdk/angular/charts/user-interaction/trackball-cs1/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/trackball-cs1" %}
To know more about Crosshair and Trackball, you can check on this video:
@@ -103,7 +118,7 @@ To know more about Crosshair and Trackball, you can check on this video:
## Crosshair highlight
-The [`highlightCategory`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#highlightcategory) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) highlights the background of the entire category when hovered over. The crosshair color can be customized using the [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel#color) property within the [`line`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#line) configuration.
+The [`highlightCategory`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#highlightcategory) property in the [`crosshair`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshair) highlights the background of the entire category when the user hovers over the chart. The crosshair color can be customized using the [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart/borderModel#color) property within the [`line`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#line) configuration.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -114,21 +129,20 @@ The [`highlightCategory`](https://ej2.syncfusion.com/angular/documentation/api/c
{% include code-snippet/chart-sdk/angular/charts/user-interaction/crosshair-cs10/src/main.ts %}
{% endhighlight %}
{% endtabs %}
-
+
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/crosshair-cs10" %}
## Crosshair Label Customization
-The [`crosshairLabelRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshairlabelrender) event fires before each crosshair axis label is rendered, allowing you to customize the label's appearance or content, or to prevent it from being displayed.
+The [`crosshairLabelRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#crosshairlabelrender) event fires before each crosshair axis label is rendered, allowing you to customize the label's appearance or content, or to prevent it from being displayed. The event handler argument is typed as [`ICrosshairLabelRenderEventArgs`](https://ej2.syncfusion.com/angular/documentation/api/chart/iCrosshairLabelRenderEventArgs) and exposes the following properties:
-Event arguments:
-- `text` – The label text that can be modified.
-- `value` – The data value at the crosshair position.
-- `axisName` – The axis identifier (e.g., `primaryXAxis`).
-- `axisOrientation` – Either `Horizontal` or `Vertical`.
-- `textStyle` – Font properties for customization.
-- `fill` – Background color of the label.
-- `cancel` – Set to **true** to skip rendering the label.
+- `text` - The label text that can be modified.
+- `value` - The data value at the crosshair position.
+- `axisName` - The axis identifier (for example, `primaryXAxis` or `primaryYAxis`).
+- `axisOrientation` - Either `Horizontal` or `Vertical` (see [`AxisOrientation`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisOrientation)).
+- `textStyle` - A nested [`FontModel`](https://ej2.syncfusion.com/angular/documentation/api/chart/fontModel) object whose properties (such as `color`, `size`, `fontWeight`) can be modified to customize the label font.
+- `fill` - Background color of the label.
+- `cancel` - Set to **true** to skip rendering the label.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
diff --git a/chart-sdk/angular/charts/chart-interactive/data-editing.md b/chart-sdk/angular/charts/chart-interactive/data-editing.md
index e70f1e512..17d7d2533 100644
--- a/chart-sdk/angular/charts/chart-interactive/data-editing.md
+++ b/chart-sdk/angular/charts/chart-interactive/data-editing.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Data Editing in Angular Chart | Syncfusion
+title: Data Editing in Angular Charts | Syncfusion
description: Learn here all about Data editing in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more.
platform: chart-sdk
control: Data editing
@@ -10,21 +10,17 @@ domainurl: https://help.syncfusion.com/chart-sdk
-# Data Editing in Angular Chart
+# Data Editing in Angular Charts
-Data editing allows users to modify chart data points interactively by dragging and dropping the rendered points. This functionality is enabled by injecting the [`DataEditing`](https://ej2.syncfusion.com/angular/documentation/api/chart/dataEditing) module into the chart provider, which adds drag-and-drop support for data points.
+>**Note**: To use the data editing feature, inject `DataEditingService` from `@syncfusion/ej2-angular-charts` into the component's `providers` (for standalone components) or `@NgModule.providers` (for module-based components).
-
+Data editing allows users to modify chart data points interactively by dragging the rendered points to new positions. This functionality adds drag-and-drop support for data points.
-## Enable data editing
-
-To activate data editing, set the [enable](https://ej2.syncfusion.com/angular/documentation/api/chart/dragsettingsmodel#enable) property to **true** in the [dragSettings](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#dragsettings) of the corresponding series.
+
-Additionally, the following properties can be used to customize the data editing behavior and appearance:
-- Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/dragsettingsmodel#fill) property to set the color of the editable data points.
-- Use the [`minY`](https://ej2.syncfusion.com/angular/documentation/api/chart/dragsettingsmodel#miny) and [`maxY`](https://ej2.syncfusion.com/angular/documentation/api/chart/dragsettingsmodel#maxy) properties to define the minimum and maximum allowable range for editing the data points.
+## Enable data editing
-These options help control both the visual feedback and the valid value range while editing data directly on the chart.
+To activate data editing, set the `enable` property of `dragSettings` to **true** on the corresponding series.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -38,4 +34,50 @@ These options help control both the visual feedback and the valid value range wh
{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/data-editing-cs1" %}
->**Note**: To use data editing feature, inject `DataEditingService` into the `@NgModule.providers`.
\ No newline at end of file
+## Customization
+
+The following `dragSettings` properties can be used to customize the data editing behavior and appearance:
+
+- `fill` — Sets the color of the editable data points.
+- `minY` and `maxY` — Define the minimum and maximum allowable range for editing the data points on the Y axis.
+
+These options control both the visual feedback and the valid value range when editing data directly on the chart.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/user-interaction/data-editing-cs2/src/app.component.ts %}
+{% endhighlight %}
+
+{% highlight ts tabtitle="main.ts" %}
+{% include code-snippet/chart-sdk/angular/charts/user-interaction/data-editing-cs2/src/main.ts %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/user-interaction/data-editing-cs2" %}
+
+## Events
+
+The data editing feature raises the `dragComplete` event after the user drops a data point. Use this event to persist changes, validate the new value, or update related UI.
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+```ts
+public dragComplete(args: any): void {
+ // args.currentValue contains the new Y value
+ // args.point.index and args.series.index identify the edited point
+ console.log(`Series ${args.series.index}, Point ${args.point.index} moved to ${args.currentValue}`);
+}
+```
+
+Bind it on the `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ×
+
+
+ ![]()
+
+
+
+
+
+
+