diff --git a/chart-sdk/angular/3d-charts/accessibility.md b/chart-sdk/angular/3d-charts/accessibility.md index 894294404..6422d2449 100644 --- a/chart-sdk/angular/3d-charts/accessibility.md +++ b/chart-sdk/angular/3d-charts/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular 3D Chart control | Syncfusion +title: Accessibility in Angular 3D Chart | Syncfusion description: Learn here all about accessibility in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular 3D Chart control +# Accessibility in Angular 3D Chart Accessibility is achieved in the 3D chart control through WAI-ARIA standard and keyboard navigation. The 3D chart features can be effectively accessed through assistive technologies such as screen readers. diff --git a/chart-sdk/angular/3d-charts/appearance.md b/chart-sdk/angular/3d-charts/appearance.md index 0c83f7971..01c562e6c 100644 --- a/chart-sdk/angular/3d-charts/appearance.md +++ b/chart-sdk/angular/3d-charts/appearance.md @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular 3D Chart control +# Appearance in Angular 3D Chart ## Custom color palette -The default color of series or points can be customized by providing a custom color palette of your choice by using the [`palettes`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#palettes) property. +The default color of series or points can be customized by providing a custom color palette of your choice by using the [`palettes`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#palettes) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -32,7 +32,7 @@ The color of an individual data point can be customized using the below options. ### Point color mapping -The color for the points can be bound from the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#datasource) for the series by utilizing the [`pointColorMapping`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#pointcolormapping) property. +The color for the points can be bound from the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#datasource) for the series by utilizing the [`pointColorMapping`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#pointcolormapping) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -48,7 +48,7 @@ The color for the points can be bound from the [`dataSource`](https://ej2.syncfu ## Point level customization -The data label and fill color of each data point can be customized using the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/i3DPointRenderEventArgs/) and [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/i3DTextRenderEventArgs/) events. +The data label and fill color of each data point can be customized using the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/i3DPointRenderEventArgs) and [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/i3DTextRenderEventArgs) events. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -70,7 +70,7 @@ The data label and fill color of each data point can be customized using the [`p **Customize the chart background** -The background color and border of the 3D chart can be customized using the [`background`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#background) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#border) properties. +The background color and border of the 3D chart can be customized using the [`background`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#background) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#border) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -86,7 +86,7 @@ The background color and border of the 3D chart can be customized using the [`ba **Chart margin** -The 3D chart's margin can be set from its container using the [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#margin) property. +The 3D chart's margin can be set from its container using the [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#margin) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -102,7 +102,7 @@ The 3D chart's margin can be set from its container using the [`margin`](https:/ ## Animation -To customize the animation for a particular series, the [`animation`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#animation) property can be used. It can be enabled or disabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/animationModel/#enable) property. The [`duration`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/animationModel/#duration) property specifies the duration of an animation and the [`delay`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/animationModel/#delay) property allows us to start the animation at desire time. +To customize the animation for a particular series, the [`animation`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#animation) property can be used. It can be enabled or disabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/animationModel#enable) property. The [`duration`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/animationModel#duration) property specifies the duration of an animation and the [`delay`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/animationModel#delay) property allows us to start the animation at desire time. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -118,7 +118,7 @@ To customize the animation for a particular series, the [`animation`](https://ej ## Chart rotation -The 3D chart can be rotated by using the [`enableRotation`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#enablerotation) property. +The 3D chart can be rotated by using the [`enableRotation`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#enablerotation) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -134,7 +134,7 @@ The 3D chart can be rotated by using the [`enableRotation`](https://ej2.syncfusi ## Title -The 3D chart can be given a title by using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#title) property, to show the information about the data plotted. +The 3D chart can be given a title by using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#title) property, to show the information about the data plotted. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -150,7 +150,7 @@ The 3D chart can be given a title by using [`title`](https://ej2.syncfusion.com/ ### Title position -By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#position) property in [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#titlestyle), the [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#title) can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default. +By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#position) property in [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#titlestyle), the [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#title) can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -164,7 +164,7 @@ By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/ {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/appearance/appearance-cs8" %} -The custom option is used to position the title anywhere in the 3D chart using [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#y) coordinates. +The custom option is used to position the title anywhere in the 3D chart using [`x`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#y) coordinates. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -180,7 +180,7 @@ The custom option is used to position the title anywhere in the 3D chart using [ ### Title alignment -The title can be aligned to the near, far, or center of the 3D chart by using the [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textalignment) property. +The title can be aligned to the near, far, or center of the 3D chart by using the [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textalignment) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -196,16 +196,16 @@ The title can be aligned to the near, far, or center of the 3D chart by using th ### Title customization -The [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#titlestyle) property of the 3D chart provides options to customize the title by using the following properties. +The [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#titlestyle) property of the 3D chart provides options to customize the title by using the following properties. -* [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#size) - Specifies the size of the title. -* [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#color) - Specifies the color for the title. -* [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontfamily) - Specifies the font family for the title. -* [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontweight) - Specifies the font weight of the title. -* [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontstyle) - Specifies the font style for the title. -* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#opacity) - Specifies the opacity for the color of the title. -* [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textalignment) - Specifies the alignment of the title. -* [`textOverflow`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textoverflow) - Specifies the overflow of the title. +* [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#size) - Specifies the size of the title. +* [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#color) - Specifies the color for the title. +* [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontfamily) - Specifies the font family for the title. +* [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontweight) - Specifies the font weight of the title. +* [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontstyle) - Specifies the font style for the title. +* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#opacity) - Specifies the opacity for the color of the title. +* [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textalignment) - Specifies the alignment of the title. +* [`textOverflow`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textoverflow) - Specifies the overflow of the title. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/axis-customization.md b/chart-sdk/angular/3d-charts/axis-customization.md index 0abd48397..3b34b0810 100644 --- a/chart-sdk/angular/3d-charts/axis-customization.md +++ b/chart-sdk/angular/3d-charts/axis-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis customization in Angular 3D Chart control | Syncfusion +title: Axis Customization in Angular 3D Chart | Syncfusion description: Learn here all about axis customization in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in Angular 3D Chart control +# Axis Customization in Angular 3D Chart control ## Title -The title for the axis can be added by using the [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#title) property. It helps to provide quick information to the user about the data plotted in the axis. Title style can be customized using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#titlestyle) property of the axis. +The title for the axis can be added by using the [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#title) property. It helps to provide quick information to the user about the data plotted in the axis. Title style can be customized using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#titlestyle) property of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ The title for the axis can be added by using the [`title`](https://ej2.syncfusio ## Title rotation -The title can be rotated from 0 to 360 degree by using the [`titleRotation`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#titlerotation) property. +The title can be rotated from 0 to 360 degree by using the [`titleRotation`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#titlerotation) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The title can be rotated from 0 to 360 degree by using the [`titleRotation`](htt ## Tick lines customization -The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minorTickModel/#width), [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minorTickModel/#color) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minorTickModel/#height) of the minor and major tick lines can be customized by using the [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#majorticklines) and [`minorTickLines`](../api/chart3d/axis3D/#https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minorticklines) properties in the axis. +The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minorTickModel#width), [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minorTickModel#color) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minorTickModel#height) of the minor and major tick lines can be customized by using the [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#majorticklines) and [`minorTickLines`](../api/chart3d/axis3D#https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minorticklines) properties in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/minor ## Grid lines customization -The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/majorGridModel/#width) and [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/majorGridModel/#color) of the minor and major grid lines can be customized by using the [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minorgridlines) properties in the axis. +The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/majorGridModel#width) and [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/majorGridModel#color) of the minor and major grid lines can be customized by using the [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minorgridlines) properties in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -94,7 +94,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. -When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner, set the [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#isinversed) property to **true**. +When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner, set the [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#isinversed) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -110,7 +110,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v ## Opposed position -To place an axis opposite from its original position, set the [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#opposedposition) property to **true**. +To place an axis opposite from its original position, set the [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#opposedposition) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/axis-labels.md b/chart-sdk/angular/3d-charts/axis-labels.md index bbf4b3b1b..c58b44f28 100644 --- a/chart-sdk/angular/3d-charts/axis-labels.md +++ b/chart-sdk/angular/3d-charts/axis-labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis labels in Angular 3D Chart control | Syncfusion +title: Axis Labels in Angular 3D Chart | Syncfusion description: Learn here all about axis labels in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis labels in Angular 3D Chart control +# Axis Labels in Angular 3D Chart Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis. ## Smart axis labels -When the axis labels overlap with each other, [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#labelintersectaction) property in the axis can be used to place them smartly. +When the axis labels overlap with each other, [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#labelintersectaction) property in the axis can be used to place them smartly. **Case 1:** When setting `labelIntersectAction` as `Hide`. @@ -61,7 +61,7 @@ When the axis labels overlap with each other, [`labelIntersectAction`](https:// ## Edge label placement Labels with long text at the edges of an axis may appear partially in the 3D chart. To avoid this, -use the [`edgeLabelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. +use the [`edgeLabelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -77,7 +77,7 @@ use the [`edgeLabelPlacement`](https://ej2.syncfusion.com/angular/documentation ## Maximum labels -The labels will be rendered based on the count in the [`maximumLabels`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#maximumlabels) property per 100 pixel. If the range (minimum, maximum, interval) and `maximumLabels` are set, then the priority goes to range. If the range is not set, then the priority goes to `maximumLabels` property. +The labels will be rendered based on the count in the [`maximumLabels`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#maximumlabels) property per 100 pixel. If the range (minimum, maximum, interval) and `maximumLabels` are set, then the priority goes to range. If the range is not set, then the priority goes to `maximumLabels` property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/category-axis.md b/chart-sdk/angular/3d-charts/category-axis.md index 00f27e569..a3e3e23c0 100644 --- a/chart-sdk/angular/3d-charts/category-axis.md +++ b/chart-sdk/angular/3d-charts/category-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Category axis in Angular 3D Chart control | Syncfusion +title: Category Axis in Angular 3D Chart control | Syncfusion description: Learn here all about category axis in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Category axis in Angular 3D Chart control +# Category Axis in Angular 3D Chart control The category axis is the horizontal axis of a 3D chart that shows text values rather than numerical values. Compared to the vertical axis, this axis has fewer labels. The following sample shows to render the 3D chart using category axis. @@ -24,11 +24,11 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/category-axis/category-axis-cs1" %} ->Note: To use category axis, we need to inject `Category3DService` module into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#valuetype) of axis to **Category**. +>Note: To use category axis, we need to inject `Category3DService` module into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#valuetype) of axis to **Category**. ## Range -The range of the category axis can be customized using [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) properties of the axis. +The range of the category axis can be customized using [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) properties of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The range of the category axis can be customized using [`minimum`](https://ej2.s ## Indexed category axis -The category axis can also be rendered based on the index values of the data source. This can be achieved by defining the [`isIndexed`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#isindexed) property to **true** in the axis. +The category axis can also be rendered based on the index values of the data source. This can be achieved by defining the [`isIndexed`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#isindexed) property to **true** in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/chart-types/bar.md b/chart-sdk/angular/3d-charts/chart-types/bar.md index 6da19a537..b98d9384f 100644 --- a/chart-sdk/angular/3d-charts/chart-types/bar.md +++ b/chart-sdk/angular/3d-charts/chart-types/bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Bar Chart in Angular 3D Chart control | Syncfusion +title: Bar Chart in Angular 3D Chart | Syncfusion description: Learn here all about bar chart in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bar Chart in Angular 3D Chart control +# Bar Chart in Angular 3D Chart ## Bar chart -To render a bar series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#type) as `Bar` and inject `BarSeries3DService` module into the `@NgModule.providers`. +To render a bar series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#type) as `Bar` and inject `BarSeries3DService` module into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ To render a bar series, use series [`type`](https://ej2.syncfusion.com/angular/d ## Bar space and width -The [`columnSpacing`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnspacing) and [`columnWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnwidth) properties are used to customize the space between bars. +The [`columnSpacing`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnspacing) and [`columnWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnwidth) properties are used to customize the space between bars. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The [`columnSpacing`](https://ej2.syncfusion.com/angular/documentation/api/chart ## Grouped bar -The data points can be grouped in the bar type charts by using the [`groupName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#groupname) property. Data points with same group name are grouped together. +The data points can be grouped in the bar type charts by using the [`groupName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#groupname) property. Data points with same group name are grouped together. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ The data points can be grouped in the bar type charts by using the [`groupName`] ## Cylindrical bar chart -To render a cylindrical bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -78,8 +78,8 @@ To render a cylindrical bar chart, set the [`columnFacet`](https://ej2.syncfusio The following properties can be used to customize the `bar` series. -* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) color. +* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/chart-types/column.md b/chart-sdk/angular/3d-charts/chart-types/column.md index 3e6cab7f6..f6c9fec52 100644 --- a/chart-sdk/angular/3d-charts/chart-types/column.md +++ b/chart-sdk/angular/3d-charts/chart-types/column.md @@ -1,6 +1,6 @@ --- layout: post -title: Column Chart in Angular 3D Chart control | Syncfusion +title: Column Chart in Angular 3D Chart | Syncfusion description: Learn here all about column chart in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Column Chart in Angular 3D Chart control +# Column Chart in Angular 3D Chart ## Column chart -To render a column series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#type) as `Column` and inject `ColumnSeries3DService` module into the `@NgModule.providers`. +To render a column series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#type) as `Column` and inject `ColumnSeries3DService` module into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ To render a column series, use series [`type`](https://ej2.syncfusion.com/angula ## Column space and width -The [`columnSpacing`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnspacing) and [`columnWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnwidth) properties are used to customize the space between columns. +The [`columnSpacing`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnspacing) and [`columnWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnwidth) properties are used to customize the space between columns. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The [`columnSpacing`](https://ej2.syncfusion.com/angular/documentation/api/chart ## Grouped column -The data points can be grouped in the column type charts by using the [`groupName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#groupname) property. Data points with same group name are grouped together. +The data points can be grouped in the column type charts by using the [`groupName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#groupname) property. Data points with same group name are grouped together. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ The data points can be grouped in the column type charts by using the [`groupNam ## Cylindrical column chart -To render a cylindrical column chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical column chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -78,8 +78,8 @@ To render a cylindrical column chart, set the [`columnFacet`](https://ej2.syncfu The following properties can be used to customize the `column` series. -* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) color. +* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/chart-types/stack-bar.md b/chart-sdk/angular/3d-charts/chart-types/stack-bar.md index d40919433..d4032a2ac 100644 --- a/chart-sdk/angular/3d-charts/chart-types/stack-bar.md +++ b/chart-sdk/angular/3d-charts/chart-types/stack-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Stacked Bar Chart in Angular 3D Chart control | Syncfusion +title: Stacked Bar Chart in Angular 3D Chart | Syncfusion description: Learn here all about stacked bar chart in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked bar chart in Angular 3D Chart control +# Stacked Bar Chart in Angular 3D Chart ## Stacked bar chart -To render a stacked bar series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#type) as `StackingBar` and inject `StackingBarSeries3DService` module into the `@NgModule.providers`. +To render a stacked bar series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#type) as `StackingBar` and inject `StackingBarSeries3DService` module into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ To render a stacked bar series, use series [`type`](https://ej2.syncfusion.com/a ## Stacking group -To group the stacked bar, the [`stackingGroup`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. +To group the stacked bar, the [`stackingGroup`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ To group the stacked bar, the [`stackingGroup`](https://ej2.syncfusion.com/angul ## Cylindrical stacked bar chart -To render a cylindrical stacked bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical stacked bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -62,8 +62,8 @@ To render a cylindrical stacked bar chart, set the [`columnFacet`](https://ej2.s The following properties can be used to customize the `stacked bar` series. -* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) color. +* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/chart-types/stack-column.md b/chart-sdk/angular/3d-charts/chart-types/stack-column.md index 6445a9d28..c649ffa1e 100644 --- a/chart-sdk/angular/3d-charts/chart-types/stack-column.md +++ b/chart-sdk/angular/3d-charts/chart-types/stack-column.md @@ -1,6 +1,6 @@ --- layout: post -title: Stacked Column Chart in Angular 3D Chart control | Syncfusion +title: Stacked Column Chart in Angular 3D Chart | Syncfusion description: Learn here all about stacked column chart in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked column chart in Angular 3D Chart control +# Stacked Column Chart in Angular 3D Chart ## Stacked column chart -To render a stacked column series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#type) as `StackingColumn` and inject `StackingColumnSeries3DService` module into the `@NgModule.providers`. +To render a stacked column series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#type) as `StackingColumn` and inject `StackingColumnSeries3DService` module into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ To render a stacked column series, use series [`type`](https://ej2.syncfusion.co ## Stacking group -To group the stacked column, the [`stackingGroup`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. +To group the stacked column, the [`stackingGroup`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ To group the stacked column, the [`stackingGroup`](https://ej2.syncfusion.com/an ## Cylindrical stacked column chart -To render a cylindrical stacked column chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical stacked column chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -62,8 +62,8 @@ To render a cylindrical stacked column chart, set the [`columnFacet`](https://ej The following properties can be used to customize the `stacked column` series. -* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) color. +* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/chart-types/stacked-bar.md b/chart-sdk/angular/3d-charts/chart-types/stacked-bar.md index 1ea715791..56cde84ac 100644 --- a/chart-sdk/angular/3d-charts/chart-types/stacked-bar.md +++ b/chart-sdk/angular/3d-charts/chart-types/stacked-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: 100% Stacked Bar Chart in Angular 3D Chart control | Syncfusion +title: 100% Stacked Bar Chart in Angular 3D Chart | Syncfusion description: Learn here all about 100% stacked bar chart in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# 100% Stacked bar chart in Angular 3D Chart control +# 100% Stacked Bar Chart in Angular 3D Chart ## 100% Stacked bar chart -To render a 100% stacked bar series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#type) as `StackingBar100` and inject `StackingBarSeries3DService` module into the `@NgModule.providers`. +To render a 100% stacked bar series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#type) as `StackingBar100` and inject `StackingBarSeries3DService` module into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ To render a 100% stacked bar series, use series [`type`](https://ej2.syncfusion. ## 100% Cylindrical stacked bar chart -To render a cylindrical 100% stacked bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical 100% stacked bar chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -46,8 +46,8 @@ To render a cylindrical 100% stacked bar chart, set the [`columnFacet`](https:// The following properties can be used to customize the `100% stacked bar` series. -* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) color. +* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/chart-types/stacked-column.md b/chart-sdk/angular/3d-charts/chart-types/stacked-column.md index 699df0a6f..00f9316c8 100644 --- a/chart-sdk/angular/3d-charts/chart-types/stacked-column.md +++ b/chart-sdk/angular/3d-charts/chart-types/stacked-column.md @@ -1,6 +1,6 @@ --- layout: post -title: 100% Stacked Column Chart in Angular 3D Chart control | Syncfusion +title: 100% Stacked Column Chart in Angular 3D Chart | Syncfusion description: Learn here all about 100% stacked column chart in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# 100% Stacked column chart in Angular 3D Chart control +# 100% Stacked column chart in Angular 3D Chart -## 100% Stacked column chart +## 100% Stacked Column Chart -To render a 100% stacked column series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#type) as `StackingColumn100` and inject `StackingColumnSeries3DService` module into the `@NgModule.providers`. +To render a 100% stacked column series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#type) as `StackingColumn100` and inject `StackingColumnSeries3DService` module into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ To render a 100% stacked column series, use series [`type`](https://ej2.syncfusi ## 100% Cylindrical stacked column chart -To render a 100% cylindrical stacked column chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a 100% cylindrical stacked column chart, set the [`columnFacet`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -46,8 +46,8 @@ To render a 100% cylindrical stacked column chart, set the [`columnFacet`](https The following properties can be used to customize the `100% stacked column` series. -* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#fill) color. +* [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/data-labels.md b/chart-sdk/angular/3d-charts/data-labels.md index 46d3c8c4c..9b0c422d0 100644 --- a/chart-sdk/angular/3d-charts/data-labels.md +++ b/chart-sdk/angular/3d-charts/data-labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Data labels in Angular 3D Chart control | Syncfusion +title: Data Labels in Angular 3D Chart | Syncfusion description: Learn here all about data labels in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in Angular 3D Chart control +# Data labels in Angular 3D Chart -Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#visible) property in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#datalabel). By default, the labels will arrange smartly without overlapping. +Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#visible) property in the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#datalabel). By default, the labels will arrange smartly without overlapping. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ Data labels are fields that includes information about the sample point connecte ## Position -The [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#position) property is used to place the label either on `Top`, `Middle`, or `Bottom`. +The [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#position) property is used to place the label either on `Top`, `Middle`, or `Bottom`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/da ## Template -Label content can be formatted by using the template option. Inside the template, the placeholder text `${point.x}` and `${point.y}` can be added to display corresponding data points x & y value. Using [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#template) property, the data label template can be set. +Label content can be formatted by using the template option. Inside the template, the placeholder text `${point.x}` and `${point.y}` can be added to display corresponding data points x & y value. Using [`template`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#template) property, the data label template can be set. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ Label content can be formatted by using the template option. Inside the template ## Text mapping -Text from the data source can be mapped using the [`name`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#name) property. +Text from the data source can be mapped using the [`name`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#name) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -76,7 +76,7 @@ Text from the data source can be mapped using the [`name`](https://ej2.syncfusio ## Format -Data label for the chart can be formatted using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#format) property. The global formatting options can be used as 'n', 'p', and 'c'. +Data label for the chart can be formatted using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#format) property. The global formatting options can be used as 'n', 'p', and 'c'. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -149,7 +149,7 @@ Data label for the chart can be formatted using the [`format`](https://ej2.syncf ## Margin -The [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#margin) for data label can be applied by using [`left`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel/#left), [`right`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel/#right), [`bottom`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel/#bottom) and [`top`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel/#top) properties. +The [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#margin) for data label can be applied by using [`left`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel#left), [`right`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel#right), [`bottom`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel#bottom) and [`top`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/marginModel#top) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -165,7 +165,7 @@ The [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/data ## Customization -The `stroke` and `border` of data label can be customized using [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#fill) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel/#border) properties. +The `stroke` and `border` of data label can be customized using [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#fill) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/dataLabelStyleModel#border) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -181,7 +181,7 @@ The `stroke` and `border` of data label can be customized using [`fill`](https:/ ## Customizing specific label -A specific label can be customized by using the [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/i3DTextRenderEventArgs/) event. The `textRender` event allows you to change the label text for the point. +A specific label can be customized by using the [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/i3DTextRenderEventArgs) event. The `textRender` event allows you to change the label text for the point. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/datetime-axis.md b/chart-sdk/angular/3d-charts/datetime-axis.md index 6a84196ff..1a931afac 100644 --- a/chart-sdk/angular/3d-charts/datetime-axis.md +++ b/chart-sdk/angular/3d-charts/datetime-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: DateTime axis in Angular 3D Chart control | Syncfusion +title: DateTime Axis in Angular 3D Chart | Syncfusion description: Learn here all about DateTime axis in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# DateTime axis in Angular 3D Chart control +# DateTime axis in Angular 3D Chart ## DateTime axis @@ -27,7 +27,7 @@ DateTime axis uses date time scale and displays the date time values as axis lab {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/date-time-axis/date-time-cs1" %} ->Note: To use datetime axis, we need to inject `DateTime3DService` module into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#valuetype) of axis to **DateTime**. +>Note: To use datetime axis, we need to inject `DateTime3DService` module into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#valuetype) of axis to **DateTime**. ## DateTime category axis @@ -45,11 +45,11 @@ DateTime category axis is used to display the date time values with non-linear i {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/date-time-axis/date-time-cs2" %} ->Note: To use datetime category axis, we need to inject `DateTimeCategory3DService` module into the `@NgModule.providers` and set the [`valueType`](../api/chart3d/axis3D/#valuetype) of axis to **DateTimeCategory**. +>Note: To use datetime category axis, we need to inject `DateTimeCategory3DService` module into the `@NgModule.providers` and set the [`valueType`](../api/chart3d/axis3D#valuetype) of axis to **DateTimeCategory**. ### Range -Range of an axis will be calculated automatically based on the provided data. You can also customize the range of an axis using [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) properties. +Range of an axis will be calculated automatically based on the provided data. You can also customize the range of an axis using [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -65,7 +65,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo ### Interval customization -Date time intervals can be customized by using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) and [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#intervaltype) properties of the axis. For example, when you set `interval` as **2** and `intervalType` as **Years**, it considers 2 years as interval. DateTime axis supports following interval types, +Date time intervals can be customized by using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) and [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#intervaltype) properties of the axis. For example, when you set `interval` as **2** and `intervalType` as **Years**, it considers 2 years as interval. DateTime axis supports following interval types, * Auto * Years @@ -89,7 +89,7 @@ Date time intervals can be customized by using the [`interval`](https://ej2.sync **Applying padding to the range** -Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) property. DateTime axis supports the following types of padding, +Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) property. DateTime axis supports the following types of padding, * None * Round @@ -97,7 +97,7 @@ Padding can be applied to the minimum and maximum extremes of the range by using **DateTime - None** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -113,7 +113,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **DateTime - Round** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is **15th Jan**, interval is **1** and interval type is **Month**, then the axis minimum will be **Jan 1st**. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is **15th Jan**, interval is **1** and interval type is **Month**, then the axis minimum will be **Jan 1st**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -129,7 +129,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **DateTime - Additional** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -145,7 +145,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c ## Label format -The date can be formatted and parsed to all globalize format using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#labelformat) property in an axis. +The date can be formatted and parsed to all globalize format using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#labelformat) property in an axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/dimensions.md b/chart-sdk/angular/3d-charts/dimensions.md index a68c25ea8..7e2991e3f 100644 --- a/chart-sdk/angular/3d-charts/dimensions.md +++ b/chart-sdk/angular/3d-charts/dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Dimensions in Angular 3D Chart control | Syncfusion +title: Dimensions in Angular 3D Chart | Syncfusion description: Learn here all about dimensions in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in Angular 3D Chart control +# Dimensions in Angular 3D Chart ## Size for container @@ -38,7 +38,7 @@ The 3D chart can be rendered to its container size and it can be set via inline -The size of the 3D chart can be set directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#height) properties. +The size of the 3D chart can be set directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#height) properties. **In Pixel** diff --git a/chart-sdk/angular/3d-charts/getting-started.md b/chart-sdk/angular/3d-charts/getting-started.md index cc793f3e3..bd7517afd 100644 --- a/chart-sdk/angular/3d-charts/getting-started.md +++ b/chart-sdk/angular/3d-charts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular 3D Chart component | Syncfusion +title: Getting Started with Angular 3D Chart | Syncfusion description: Check out and learn about Getting Started with Angular 3D Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular 3D Chart Component +# Getting Started with Angular 3D Chart This section explains the steps required to create a simple [Angular 3D Chart](https://www.syncfusion.com/angular-components/angular-3d-chart) and demonstrates the basic usage of the Angular 3D Chart component. diff --git a/chart-sdk/angular/3d-charts/legend.md b/chart-sdk/angular/3d-charts/legend.md index 4635d117a..dfc2522c4 100644 --- a/chart-sdk/angular/3d-charts/legend.md +++ b/chart-sdk/angular/3d-charts/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular 3D Chart control | Syncfusion +title: Legend in Angular 3D Chart | Syncfusion description: Learn here all about legend in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Legend in Angular 3D Chart control +# Legend in Angular 3D Chart @@ -35,7 +35,7 @@ You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncf ## Position and alignment -By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default. +By using the [`position`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -65,7 +65,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us ### Legend reverse -The order of the legend items can be reversed by using the [`reverse`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#reverse) property. By default, legend for the first series in the collection will be placed first. +The order of the legend items can be reversed by using the [`reverse`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#reverse) property. By default, legend for the first series in the collection will be placed first. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -81,7 +81,7 @@ The order of the legend items can be reversed by using the [`reverse`](https://e ### Legend alignment -The legend can be aligned at near, far or center to the 3D chart using the [`alignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#alignment) property. +The legend can be aligned at near, far or center to the 3D chart using the [`alignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#alignment) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -97,7 +97,7 @@ The legend can be aligned at near, far or center to the 3D chart using the [`ali ## Legend customization -To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#legendshape) property in the [`series`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel) can be used. By default, the legend icon shape is `seriesType`. +To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#legendshape) property in the [`series`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel) can be used. By default, the legend icon shape is `seriesType`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -113,7 +113,7 @@ To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/angu ### Legend size -By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#height) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#width) properties of the `legendSettings`. +By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#height) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#width) properties of the `legendSettings`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -129,7 +129,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i ### Legend item size -The size of the legend items can be customised by using the [`shapeHeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#shapewidth) properties.\ +The size of the legend items can be customised by using the [`shapeHeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#shapewidth) properties.\ {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -161,7 +161,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun ### Legend text wrap -When the legend text exceeds the container, the text can be wrapped by using the [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#textwrap) property. End user can also wrap the legend text based on the [`maximumLabelWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#maximumlabelwidth) property. +When the legend text exceeds the container, the text can be wrapped by using the [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#textwrap) property. End user can also wrap the legend text based on the [`maximumLabelWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#maximumlabelwidth) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -177,7 +177,7 @@ When the legend text exceeds the container, the text can be wrapped by using the ## Series selection through legend -By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#togglevisibility) property if you must use a legend click to choose a series. +By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#togglevisibility) property if you must use a legend click to choose a series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -209,7 +209,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa ## Legend title -You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#title) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#legendsettings). The [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#size), [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#opacity),[`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontstyle), [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontweight), [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#fontfamily), [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textalignment), and [`textOverflow`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel/#textoverflow) of legend title can be customized by using the [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#titlestyle) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#legendsettings). The [`titlePosition`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. The [`maximumTitleWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#maximumlabelwidth) is used to set the width of the legend title. By default, it will be `100px`. +You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#title) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#legendsettings). The [`size`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#size), [`color`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#opacity),[`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontstyle), [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontweight), [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#fontfamily), [`textAlignment`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textalignment), and [`textOverflow`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/titleSettingsModel#textoverflow) of legend title can be customized by using the [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#titlestyle) property in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#legendsettings). The [`titlePosition`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. The [`maximumTitleWidth`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#maximumlabelwidth) is used to set the width of the legend title. By default, it will be `100px`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -225,7 +225,7 @@ You can set title for legend using [`title`](https://ej2.syncfusion.com/angular/ ## Arrow page navigation -The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The [`enablePages`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#enablepages) property needs to be set to **false** in order to render the arrow page navigation. +The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The [`enablePages`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#enablepages) property needs to be set to **false** in order to render the arrow page navigation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -241,7 +241,7 @@ The page number will always be visible while using legend paging. It is now poss ## Legend item padding -The [`itemPadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#itempadding) property can be used to adjust the space between the legend items. +The [`itemPadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#itempadding) property can be used to adjust the space between the legend items. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/logarithmic-axis.md b/chart-sdk/angular/3d-charts/logarithmic-axis.md index e269602d2..2f0eb5826 100644 --- a/chart-sdk/angular/3d-charts/logarithmic-axis.md +++ b/chart-sdk/angular/3d-charts/logarithmic-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Logarithmic axis in Angular 3D Chart control | Syncfusion +title: Logarithmic Axis in Angular 3D Chart | Syncfusion description: Learn here all about logarithmic axis in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Logarithmic axis in Angular 3D Chart control +# Logarithmic axis in Angular 3D Chart Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106). @@ -24,11 +24,11 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/logarithmic-axis/logatithmic-axis-cs1" %} ->Note: To use logarithmic axis, we need to inject `Logarithmic3DService` module into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#valuetype) of the axis to **Logarithmic**. +>Note: To use logarithmic axis, we need to inject `Logarithmic3DService` module into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#valuetype) of the axis to **Logarithmic**. ## Range -The range of an axis will be calculated automatically based on the provided data and it can also be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) properties of the axis. +The range of an axis will be calculated automatically based on the provided data and it can also be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) properties of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The range of an axis will be calculated automatically based on the provided data ## Logarithmic base -Logarithmic base can be customized by using the [`logBase`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#logbase) property of the axis. For example when the `logBase` is **5**, the axis values follows 5-2, 5-1, 50, 51, 52 etc. +Logarithmic base can be customized by using the [`logBase`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#logbase) property of the axis. For example when the `logBase` is **5**, the axis values follows 5-2, 5-1, 50, 51, 52 etc. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ Logarithmic base can be customized by using the [`logBase`](https://ej2.syncfus ## Logarithmic interval -The interval of the logarithmic axis can be customized by using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) property in the axis. When the logarithmic base is 10 and logarithmic **interval** is 2, then the axis labels are placed at an interval of 102. The default value of the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) is **1**. +The interval of the logarithmic axis can be customized by using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) property in the axis. When the logarithmic base is 10 and logarithmic **interval** is 2, then the axis labels are placed at an interval of 102. The default value of the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) is **1**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/multi-panes.md b/chart-sdk/angular/3d-charts/multi-panes.md index ae1d01a4f..6f8ceb850 100644 --- a/chart-sdk/angular/3d-charts/multi-panes.md +++ b/chart-sdk/angular/3d-charts/multi-panes.md @@ -1,6 +1,6 @@ --- layout: post -title: Multiple panes in Angular 3D Chart control | Syncfusion +title: Multiple Panes in Angular 3D Chart | Syncfusion description: Learn here all about multiple panes in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,16 +8,16 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Multiple panes in Angular 3D Chart control +# Multiple panes in Angular 3D Chart -The chart area can be divided into multiple panes using [`rows`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#rows) and [`columns`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#columns). +The chart area can be divided into multiple panes using [`rows`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#rows) and [`columns`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#columns). ## Rows -To split the chart area vertically into number of rows, use [`rows`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#rows) property of the 3D chart. +To split the chart area vertically into number of rows, use [`rows`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#rows) property of the 3D chart. -* The space for each row can be allocated by using the [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionRowModel/#height) property. The value can be either in percentage or in pixel. -* To associate a vertical axis to a particular row, specify its index to [`rowIndex`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rowindex) property of the axis. +* The space for each row can be allocated by using the [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionRowModel#height) property. The value can be either in percentage or in pixel. +* To associate a vertical axis to a particular row, specify its index to [`rowIndex`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rowindex) property of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,7 +31,7 @@ To split the chart area vertically into number of rows, use [`rows`](https://ej2 {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/multi-pane/multi-pane-cs1" %} -For spanning the vertical axis along multiple rows, use [`span`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#span) property of an axis. +For spanning the vertical axis along multiple rows, use [`span`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#span) property of an axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -47,10 +47,10 @@ For spanning the vertical axis along multiple rows, use [`span`](https://ej2.sy ## Columns -To split the chart area horizontally into number of columns, use [`columns`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#columns) property of the 3D chart. +To split the chart area horizontally into number of columns, use [`columns`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#columns) property of the 3D chart. -* The space for each column can be allocated by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionColumnModel/#width) property. The given width can be either in percentage or in pixel. -* To associate a horizontal axis to a particular column, specify its index to [`columnIndex`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#columnindex) property of the axis. +* The space for each column can be allocated by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionColumnModel#width) property. The given width can be either in percentage or in pixel. +* To associate a horizontal axis to a particular column, specify its index to [`columnIndex`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#columnindex) property of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -64,7 +64,7 @@ To split the chart area horizontally into number of columns, use [`columns`](htt {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-charts/multi-pane/multi-pane-cs3" %} -For spanning the vertical axis along multiple column, you can use [`span`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#span) property of an axis. +For spanning the vertical axis along multiple column, you can use [`span`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#span) property of an axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/numeric-axis.md b/chart-sdk/angular/3d-charts/numeric-axis.md index 4fb10bc43..1edc90cfd 100644 --- a/chart-sdk/angular/3d-charts/numeric-axis.md +++ b/chart-sdk/angular/3d-charts/numeric-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Numeric axis in Angular 3D Chart control | Syncfusion +title: Numeric Axis in Angular 3D Chart | Syncfusion description: Learn here all about numeric axis in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Numeric axis in Angular 3D Chart control +# Numeric Axis in Angular 3D Chart The numeric axis can be used to represent the numeric values of data in 3D chart. By default, the `valueType` of an axis is **Double**. @@ -28,7 +28,7 @@ The numeric axis can be used to represent the numeric values of data in 3D chart ## Range -The range of an axis will be calculated automatically based on the provided data, and it can also be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) properties of the axis. +The range of an axis will be calculated automatically based on the provided data, and it can also be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#maximum) and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) properties of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The range of an axis will be calculated automatically based on the provided data ## Range padding -Padding can be applied to the minimum and maximum extremes of an axis range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) property. Numeric axis supports the following types of padding. +Padding can be applied to the minimum and maximum extremes of an axis range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) property. Numeric axis supports the following types of padding. * None * Round @@ -54,7 +54,7 @@ Padding can be applied to the minimum and maximum extremes of an axis range by u **Numeric - None** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -70,7 +70,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **Numeric - Round** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to **Round**, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#minimum) is **3.5** and the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#interval) is **1**, then the minimum will be rounded to **3**. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to **Round**, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#minimum) is **3.5** and the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#interval) is **1**, then the minimum will be rounded to **3**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -86,7 +86,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **Numeric - Additional** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to **Additional**, interval of an axis will be added to the minimum and maximum of the axis. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to **Additional**, interval of an axis will be added to the minimum and maximum of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -102,7 +102,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **Numeric - Normal** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to **Normal**, padding is applied to the axis based on default range calculation. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to **Normal**, padding is applied to the axis based on default range calculation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -118,7 +118,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **Numeric - Auto** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#rangepadding) is set to **Auto**, horizontal numeric axis takes **None** as padding calculation, while the vertical numeric axis takes **Normal** as padding calculation. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#rangepadding) is set to **Auto**, horizontal numeric axis takes **None** as padding calculation, while the vertical numeric axis takes **Normal** as padding calculation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -136,7 +136,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/c **Numeric label format** -Numeric labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel/#labelformat) property. Also, it supports all globalize format. +Numeric labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/axis3DModel#labelformat) property. Also, it supports all globalize format. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -212,7 +212,7 @@ The following table describes the result of applying some commonly used label fo ## Grouping separator -To separate the y-axis labels to groups of thousands, set the [`useGroupingSeparator`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#usegroupingseparator) property to **true** in the 3D chart. +To separate the y-axis labels to groups of thousands, set the [`useGroupingSeparator`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#usegroupingseparator) property to **true** in the 3D chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/print-export.md b/chart-sdk/angular/3d-charts/print-export.md index 83e570572..365ecc763 100644 --- a/chart-sdk/angular/3d-charts/print-export.md +++ b/chart-sdk/angular/3d-charts/print-export.md @@ -1,6 +1,6 @@ --- layout: post -title: Print and Export in Angular 3D Chart control | Syncfusion +title: Print and Export in Angular 3D Chart | Syncfusion description: Learn here all about print and export in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in Angular 3D Chart control +# Print and Export in Angular 3D Chart ## Print -The rendered 3D chart can be printed directly from the browser by calling the public method [`print`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/printUtils/#print). The ID of the 3D chart's div element must be passed as the input parameter to that method. +The rendered 3D chart can be printed directly from the browser by calling the public method [`print`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/printUtils#print). The ID of the 3D chart's div element must be passed as the input parameter to that method. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ The rendered 3D chart can be printed directly from the browser by calling the pu ## Export -The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/exportUtils/#export) method. The input parameters for this method are: `type` for format and `fileName` for result. +The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/exportUtils#export) method. The input parameters for this method are: `type` for format and `fileName` for result. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/selection.md b/chart-sdk/angular/3d-charts/selection.md index 4b5e7ce87..cb5dcaffc 100644 --- a/chart-sdk/angular/3d-charts/selection.md +++ b/chart-sdk/angular/3d-charts/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection in Angular 3D Chart control | Syncfusion +title: Selection in Angular 3D Chart | Syncfusion description: Learn here all about selection in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Selection in Angular 3D Chart control +# Selection in Angular 3D Chart The 3D chart provides selection support for the series and its data points on mouse click. @@ -25,7 +25,7 @@ We have different types of selection mode for selecting a data. ## Point -To select a point, set the [`selectionMode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#selectionmode) property to **Point**. +To select a point, set the [`selectionMode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#selectionmode) property to **Point**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -41,7 +41,7 @@ To select a point, set the [`selectionMode`](https://ej2.syncfusion.com/angular/ ## Series -To select a series, set the [`selectionMode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#selectionmode) property to **Series**. +To select a series, set the [`selectionMode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#selectionmode) property to **Series**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -57,7 +57,7 @@ To select a series, set the [`selectionMode`](https://ej2.syncfusion.com/angular ## Cluster -To select the points that corresponds to the same index in all the series, set the [`selectionMode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#selectionmode) property to **Cluster**. +To select the points that corresponds to the same index in all the series, set the [`selectionMode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#selectionmode) property to **Cluster**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -73,7 +73,7 @@ To select the points that corresponds to the same index in all the series, set t ## Selection type -To select multiple points or series, enable the [`isMultiSelect`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#ismultiselect) property. +To select multiple points or series, enable the [`isMultiSelect`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#ismultiselect) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -89,7 +89,7 @@ To select multiple points or series, enable the [`isMultiSelect`](https://ej2.sy ## Selection during initial loading -In a 3D chart, selecting a point or series during initial loading can only be done programmatically. The [`selectedDataIndexes`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel/#selecteddataindexes) property can be used for this. +In a 3D chart, selecting a point or series during initial loading can only be done programmatically. The [`selectedDataIndexes`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/chart3DModel#selecteddataindexes) property can be used for this. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -105,7 +105,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do ## Selection through legend -To select a point or series through legend use the [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#togglevisibility) property. Also, use [`enableHighlight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel/#enablehighlight) property for highlighting the series through legend. +To select a point or series through legend use the [`toggleVisibility`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#togglevisibility) property. Also, use [`enableHighlight`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalLegendSettingsModel#enablehighlight) property for highlighting the series through legend. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-charts/tool-tip.md b/chart-sdk/angular/3d-charts/tool-tip.md index bae70b834..e135af382 100644 --- a/chart-sdk/angular/3d-charts/tool-tip.md +++ b/chart-sdk/angular/3d-charts/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in Angular 3D Chart control | Syncfusion +title: Tooltip in Angular 3D Chart | Syncfusion description: Learn here all about tooltip in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in Angular 3D Chart control +# Tooltip in Angular 3D Chart diff --git a/chart-sdk/angular/3d-charts/working-with-data.md b/chart-sdk/angular/3d-charts/working-with-data.md index 2ff819ba2..6655f6150 100644 --- a/chart-sdk/angular/3d-charts/working-with-data.md +++ b/chart-sdk/angular/3d-charts/working-with-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Working with data source in Angular 3D Chart control | Syncfusion +title: Working with Data in Angular 3D Chart | Syncfusion description: Learn here all about working with data source in Syncfusion Angular 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart @@ -9,11 +9,11 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in Angular 3D Chart control +# Working with Data in Angular 3D Chart ## Local data -A simple JSON data can be bound to the 3D chart using [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#datasource) property in series. Now map the fields in JSON to [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#yname) properties. +A simple JSON data can be bound to the 3D chart using [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#datasource) property in series. Now map the fields in JSON to [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#yname) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -29,7 +29,7 @@ A simple JSON data can be bound to the 3D chart using [`dataSource`](https://ej2 ## Remote data -The remote data can be bound to the 3D chart using the [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/dataManager/). The `DataManager` requires minimal information like web service URL, adaptor and cross domain to interact with service endpoint properly. Assign the instance of the `DataManager` to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#datasource) property in series and map the fields of data to [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#yname) properties. You can also use the [`query`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#query) property of the series to filter the data. +The remote data can be bound to the 3D chart using the [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/dataManager). The `DataManager` requires minimal information like web service URL, adaptor and cross domain to interact with service endpoint properly. Assign the instance of the `DataManager` to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#datasource) property in series and map the fields of data to [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#yname) properties. You can also use the [`query`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#query) property of the series to filter the data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -61,7 +61,7 @@ The remote data can be bound to the 3D chart using the [`DataManager`](https://e ## Empty points -The data points that uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and is not plotted in the chart. When the data is provided by using the points property, by using [`emptyPointSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#emptypointsettings) property in series, the empty can be customized. The default [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalEmptyPointSettingsModel/#mode) of the empty point is **Gap**. +The data points that uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and is not plotted in the chart. When the data is provided by using the points property, by using [`emptyPointSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#emptypointsettings) property in series, the empty can be customized. The default [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalEmptyPointSettingsModel#mode) of the empty point is **Gap**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -77,7 +77,7 @@ The data points that uses the `null` or `undefined` as value are considered as e **Customizing empty point** -The specific color for empty point can be set by the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalEmptyPointSettingsModel/#fill) property in [`emptyPointSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel/#emptypointsettings). +The specific color for empty point can be set by the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/threeDimensionalEmptyPointSettingsModel#fill) property in [`emptyPointSettings`](https://ej2.syncfusion.com/angular/documentation/api/chart3d/series3DModel#emptypointsettings). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/3d-circular-charts/data-label.md b/chart-sdk/angular/3d-circular-charts/data-label.md index 8bf0339a8..b0e4506ba 100644 --- a/chart-sdk/angular/3d-circular-charts/data-label.md +++ b/chart-sdk/angular/3d-circular-charts/data-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Data Label in Angular 3D Circular Chart component | Syncfusion +title: Data Label in Angular 3D Circular Chart | Syncfusion description: Learn here all about data label in Syncfusion Angular 3D Circular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Label @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data Label in Angular 3D Circular Chart component +# Data Label in Angular 3D Circular Chart A data label refers to a label associated with specific data points. It can be added to a 3D Circular Chart series by enabling the `visible` option in the `dataLabel` property. By default, the labels will arrange themselves smartly to avoid overlapping. diff --git a/chart-sdk/angular/3d-circular-charts/empty-points.md b/chart-sdk/angular/3d-circular-charts/empty-points.md index 12f449b25..b454aa7f4 100644 --- a/chart-sdk/angular/3d-circular-charts/empty-points.md +++ b/chart-sdk/angular/3d-circular-charts/empty-points.md @@ -1,6 +1,6 @@ --- layout: post -title: Empty points in Angular 3D Circular Chart component | Syncfusion +title: Empty Points in Angular 3D Circular Chart | Syncfusion description: Learn here all about empty points in Syncfusion Angular 3D Circular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Empty points @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Empty points in Angular 3D Circular Chart component +# Empty Points in Angular 3D Circular Chart Data points containing `null` or `undefined` values are considered empty points. These empty data points are ignored and not plotted in the 3D Circular Chart. You can customize the handling of empty points using the `emptyPointSettings` property in the series. The default mode for empty points is `Gap`. Other supported modes include `Average`, `Drop`, and `Zero`. @@ -38,4 +38,4 @@ A specific color for an empty point can be set by using the `fill` property in ` {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/pie-donut/empty-point-custom" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/pie-donut/empty-point-custom" %} diff --git a/chart-sdk/angular/3d-circular-charts/getting-started.md b/chart-sdk/angular/3d-circular-charts/getting-started.md index d1e0e5c3e..43ffa7d12 100644 --- a/chart-sdk/angular/3d-circular-charts/getting-started.md +++ b/chart-sdk/angular/3d-circular-charts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular 3D Circular Chart component | Syncfusion +title: Getting Started with Angular 3D Circular Chart | Syncfusion description: Check out and learn about Getting Started with Angular 3D Circular Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular 3D Circular Chart Component +# Getting Started with Angular 3D Circular Chart This section explains the steps required to create a simple [Angular 3D Circular Chart](https://www.syncfusion.com/angular-components/angular-3d-circular-chart) and demonstrates the basic usage of the Angular 3D Circular Chart component. diff --git a/chart-sdk/angular/3d-circular-charts/legend.md b/chart-sdk/angular/3d-circular-charts/legend.md index 6ef09c6fd..038b150a9 100644 --- a/chart-sdk/angular/3d-circular-charts/legend.md +++ b/chart-sdk/angular/3d-circular-charts/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular 3D Circular Chart component | Syncfusion +title: Legend in Angular 3D Circular Chart | Syncfusion description: Learn here all about legend in Syncfusion Angular 3D Circular 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 3D Circular Chart component +# Legend in Angular 3D Circular Chart The legend provides information about the data points rendered in the 3D Circular Chart. It can be added by enabling the `visible` option in the `legendSettings` property. @@ -184,4 +184,4 @@ The `itemPadding` property can be used to adjust the space between the legend it {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/item-padding" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/item-padding" %} diff --git a/chart-sdk/angular/3d-circular-charts/pie-donut-chart.md b/chart-sdk/angular/3d-circular-charts/pie-donut-chart.md index 472f51f22..f14093def 100644 --- a/chart-sdk/angular/3d-circular-charts/pie-donut-chart.md +++ b/chart-sdk/angular/3d-circular-charts/pie-donut-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Pie and donut in Angular 3D Circular Chart component | Syncfusion +title: Pie and Donut in Angular 3D Circular Chart | Syncfusion description: Learn here all about Pie and donut in Syncfusion Angular 3D Circular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Pie and donut @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie and donut in Angular 3D Circular Chart component +# Pie and Donut in Angular 3D Circular Chart ## Pie chart diff --git a/chart-sdk/angular/3d-circular-charts/print-and-export.md b/chart-sdk/angular/3d-circular-charts/print-and-export.md index 63247bfbe..66b912a55 100644 --- a/chart-sdk/angular/3d-circular-charts/print-and-export.md +++ b/chart-sdk/angular/3d-circular-charts/print-and-export.md @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in Angular 3D Circular Chart component +# Print and Export in Angular 3D Circular Chart ## Print @@ -41,4 +41,4 @@ Input parameters for this method are `Export` Type for `format` and `fileName {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/export" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/export" %} diff --git a/chart-sdk/angular/3d-circular-charts/title-and-subtitle.md b/chart-sdk/angular/3d-circular-charts/title-and-subtitle.md index 5c1ccbc58..e6d1711ce 100644 --- a/chart-sdk/angular/3d-circular-charts/title-and-subtitle.md +++ b/chart-sdk/angular/3d-circular-charts/title-and-subtitle.md @@ -1,6 +1,6 @@ --- layout: post -title: Title and subtitle in Angular 3D Circular Chart | Syncfusion +title: Title and Subtitle in Angular 3D Circular Chart | Syncfusion description: Learn here all about title and subtitle in Syncfusion Angular 3D Circular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title and subtitle @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and subtitle in Angular 3D Circular Chart component +# Title and Subtitle in Angular 3D Circular Chart ## Title @@ -72,4 +72,4 @@ The subtitle of the 3D Circular Chart can be customized using the `subTitleStyle {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/subtitle-custom" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/subtitle-custom" %} diff --git a/chart-sdk/angular/3d-circular-charts/tooltip.md b/chart-sdk/angular/3d-circular-charts/tooltip.md index 3d0ee3c05..a93b2ee05 100644 --- a/chart-sdk/angular/3d-circular-charts/tooltip.md +++ b/chart-sdk/angular/3d-circular-charts/tooltip.md @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in Angular 3D Circular Chart component +# Tooltip in Angular 3D Circular Chart The 3D Circular Chart will display details about the points through a tooltip, when the mouse is moved over a specific point. By default, the tooltip is not visible. It can be enabled by using the `enable` property in `tooltip` to **true**. @@ -177,4 +177,4 @@ Using the `tooltipRender` event, you can customize tooltip values for a particul {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/tooltip-event" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/3d-circular-charts/user-interaction/tooltip-event" %} diff --git a/chart-sdk/angular/accumulation-charts/accessibility.md b/chart-sdk/angular/accumulation-charts/accessibility.md index ff425c3de..359dd4f4e 100644 --- a/chart-sdk/angular/accumulation-charts/accessibility.md +++ b/chart-sdk/angular/accumulation-charts/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Accumulation chart component | Syncfusion +title: Accessibility in Angular Accumulation Chart | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Accumulation chart component +# Accessibility in Angular Accumulation Chart The Accumulation chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/angular/accumulation-charts/advanced-accessibility-configuration.md b/chart-sdk/angular/accumulation-charts/advanced-accessibility-configuration.md index ce624204e..d6503e9f3 100644 --- a/chart-sdk/angular/accumulation-charts/advanced-accessibility-configuration.md +++ b/chart-sdk/angular/accumulation-charts/advanced-accessibility-configuration.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility customization | Syncfusion +title: Advanced Accessibility in Angular Accumulation Chart | Syncfusion description: Learn here all about Accessibility customization in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility customization @@ -8,19 +8,19 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility customization +# Advanced Accessibility Configuration in Angular Accumulation Chart The Syncfusion® Angular Accumulation Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Angular Accumulation Chart component's accessibility customization are briefly explained in this section. The accumulation chart component has a number of characteristics that enable accessibility features to be customized, including: -* [`accessibilityDescription`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers. -* [`accessibilityRole`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately. -* [`focusable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation. +* [`accessibilityDescription`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation. * [`focusBorderColor`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused. * [`focusBorderMargin`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#focusbordermargin) - Defines the margin around the focus border. * [`focusBorderWidth`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#focusborderwidth) - Specifies the width of the focus border. -* [`tabIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -38,10 +38,10 @@ The accumulation chart component has a number of characteristics that enable acc The [`series`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as: -* [`accessibilityDescription`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. -* [`accessibilityRole`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. -* [`focusable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. -* [`tabIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. +* [`accessibilityRole`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. +* [`focusable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -57,12 +57,12 @@ The [`series`](https://ej2.syncfusion.com/angular/documentation/api/accumulation ## Legend -The [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#legendsettings) can be used to alter the accessibility of the accumulation chart's legend: +The [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/legendSettingsModel#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#legendsettings) can be used to alter the accessibility of the accumulation chart's legend: -* [`accessibilityDescription`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers.. -* [`accessibilityRole`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. -* [`focusable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation. -* [`tabIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers.. +* [`accessibilityRole`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. +* [`focusable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#focusable) - Specifies whether legend items are focusable via keyboard navigation. +* [`tabIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accessibilityModel#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -74,4 +74,4 @@ The [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/accu {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/accumulation-chart/series/pie-cs43" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/accumulation-chart/series/pie-cs43" %} diff --git a/chart-sdk/angular/accumulation-charts/annotation.md b/chart-sdk/angular/accumulation-charts/annotation.md index e0e521b7d..3c6c27fc8 100644 --- a/chart-sdk/angular/accumulation-charts/annotation.md +++ b/chart-sdk/angular/accumulation-charts/annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: Annotation in Angular Accumulation chart component | Syncfusion +title: Annotation in Angular Accumulation Chart | Syncfusion description: Learn here all about Annotation in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Annotation @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotation in Angular Accumulation chart component +# Annotation in Angular Accumulation Chart The annotations are used to mark the specific area of interest in the chart area with texts, shapes or images. diff --git a/chart-sdk/angular/accumulation-charts/appearance.md b/chart-sdk/angular/accumulation-charts/appearance.md index f94d864bd..ee1228f16 100644 --- a/chart-sdk/angular/accumulation-charts/appearance.md +++ b/chart-sdk/angular/accumulation-charts/appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in Angular Accumulation chart component | Syncfusion +title: Appearance in Angular Accumulation Chart | Syncfusion description: Learn here all about Appearance in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular Accumulation chart component +# Appearance in Angular Accumulation Chart ## Custom Color Palette -You can customize the default color of series or points by providing a custom color palette of your choice by using the [`palettes`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#palettes) property. +You can customize the default color of series or points by providing a custom color palette of your choice by using the [`palettes`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#palettes) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/accumulation-charts/center-label.md b/chart-sdk/angular/accumulation-charts/center-label.md index 8aebb6c9d..14009ab30 100644 --- a/chart-sdk/angular/accumulation-charts/center-label.md +++ b/chart-sdk/angular/accumulation-charts/center-label.md @@ -1,16 +1,16 @@ --- layout: post -title: Center label in Angular Accumulation chart component | Syncfusion -description: The center label displays the important orhighlighted text to inform users about what it is. +title: Center Label in Angular Accumulation Chart | Syncfusion +description: Learn here all about configuring and customizing the center label in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Center label documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Centerlabel +# Center Label in Angular Accumulation Chart -Using [`centerLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel) it is now possible to place a label at the center of a pie or donut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the [`text`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel/#text) property in the [`centerLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel). +Using [`centerLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel) it is now possible to place a label at the center of a pie or donut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the [`text`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel#text) property in the [`centerLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -26,7 +26,7 @@ Using [`centerLabel`](https://ej2.syncfusion.com/angular/documentation/api/accum ## Hover text -The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the [`hoverTextFormat`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel/#hovertextformat) property. +The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the [`hoverTextFormat`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel#hovertextformat) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -42,7 +42,7 @@ The default text in the center label can be changed when the mouse pointer hover ## Customization -Customize the center label text using the [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel/#textstyle) property. +Customize the center label text using the [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/centerLabel#textstyle) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/accumulation-charts/chart-print.md b/chart-sdk/angular/accumulation-charts/chart-print.md index 368f1a727..1e3bfb9ec 100644 --- a/chart-sdk/angular/accumulation-charts/chart-print.md +++ b/chart-sdk/angular/accumulation-charts/chart-print.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart print in Angular Accumulation chart component | Syncfusion +title: Print and Export in Angular Accumulation Chart | Syncfusion description: Learn here all about Chart print in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart print @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart print in Angular Accumulation chart component +# Print and Export in Angular Accumulation Chart ## Print diff --git a/chart-sdk/angular/accumulation-charts/customization.md b/chart-sdk/angular/accumulation-charts/customization.md index 3f494753e..0a5816400 100644 --- a/chart-sdk/angular/accumulation-charts/customization.md +++ b/chart-sdk/angular/accumulation-charts/customization.md @@ -15,7 +15,7 @@ domainurl: https://help.syncfusion.com/chart-sdk **Radius customization** By default, radius of the pie series will be 80 % of the size (minimum of height and width of the chart). -You can customize this, by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#radius) property of the series. +You can customize this, by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#radius) property of the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,7 +31,7 @@ You can customize this, by using [`radius`](https://ej2.syncfusion.com/angular/d **Doughnut Series** -In order, to achieve a doughnut in pie, you need to customize the [`innerRadius`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#innerradius) property of the series. By default, the value is 0%. By setting value greater than 0%, a doughnut will appear. `innerRadius` property takes value from 0% to 100% of the pie radius. +In order, to achieve a doughnut in pie, you need to customize the [`innerRadius`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#innerradius) property of the series. By default, the value is 0%. By setting value greater than 0%, a doughnut will appear. `innerRadius` property takes value from 0% to 100% of the pie radius. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -47,8 +47,8 @@ In order, to achieve a doughnut in pie, you need to customize the [`innerRadius` **Smart Labels** -As like in chart, you can also enable labels for the points in accumulation chart using [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#datalabel) property in series. This label will arrange smartly -without overlapping with each other. You can enable or disable this feature using [`enableSmartLabels`]../api/accumulation-chart/accumulationChartModel/#enablesmartlabels)property. +As like in chart, you can also enable labels for the points in accumulation chart using [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#datalabel) property in series. This label will arrange smartly +without overlapping with each other. You can enable or disable this feature using [`enableSmartLabels`]../api/accumulation-chart/accumulationChartModel#enablesmartlabels)property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -64,7 +64,7 @@ without overlapping with each other. You can enable or disable this feature usin ## Datalabel template -As like in chart, you can use datalabel template for the points in accumulation chart using [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#datalabel) property in series. +As like in chart, you can use datalabel template for the points in accumulation chart using [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#datalabel) property in series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -80,7 +80,7 @@ As like in chart, you can use datalabel template for the points in accumulation ## Grouping -You can club/group few points of the series based on [`groupTo`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#groupto) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. You can customize the label for that point using [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel/#textrender) event. The property also takes value in percentage (percentage of total data points value). +You can club/group few points of the series based on [`groupTo`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#groupto) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. You can customize the label for that point using [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel#textrender) event. The property also takes value in percentage (percentage of total data points value). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -96,7 +96,7 @@ You can club/group few points of the series based on [`groupTo`](https://ej2.syn **Start and End angles** -You can customize the start and end angle of the pie series using [`startAngle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#startangle) and [`endAngle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#endangle) properties. By default, `startAngle` is 0 degree and `endAngle` is 360 degree. By customizing this, we can achieve a semi pie series. +You can customize the start and end angle of the pie series using [`startAngle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#startangle) and [`endAngle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#endangle) properties. By default, `startAngle` is 0 degree and `endAngle` is 360 degree. By customizing this, we can achieve a semi pie series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -112,8 +112,8 @@ You can customize the start and end angle of the pie series using [`startAngle`] **Explode** -By setting [`explode`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#explode) property to true, you can explode a point in series on mouse click. -Points can also be exploded on load, by using [`explodeIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#explodeindex),[`explodeOffset`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#explodeoffset) and [`explodeAll`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#explodeall) property. +By setting [`explode`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#explode) property to true, you can explode a point in series on mouse click. +Points can also be exploded on load, by using [`explodeIndex`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#explodeindex),[`explodeOffset`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#explodeoffset) and [`explodeAll`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#explodeall) property. `explodeIndex` takes the value of the point index to be exploded, while `explodeAll` property takes the value in boolean, when it’s true, all the points will be exploded on initial render itself. `explodeOffset` property specifies the distance about which the slice has to be moved, when it is exploded. {% tabs %} diff --git a/chart-sdk/angular/accumulation-charts/data-label.md b/chart-sdk/angular/accumulation-charts/data-label.md index 710f4597b..b08ec4045 100644 --- a/chart-sdk/angular/accumulation-charts/data-label.md +++ b/chart-sdk/angular/accumulation-charts/data-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Data label in Angular Accumulation chart component | Syncfusion +title: Data Label in Angular Accumulation Chart | Syncfusion description: Learn here all about Data label in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data label @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in Angular Accumulation chart component +# Data Label in Angular Accumulation Chart -Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings/#visible) option in the dataLabel property. +Data label can be added to a chart series by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings#visible) option in the dataLabel property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -62,7 +62,7 @@ Using `angle` property, you can rotate the data label by its given angle. ## Smart labels -Data labels will be arranged smartly without overlapping with each other. You can enable or disable this feature using the [`enableSmartLabels`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel/#enablesmartlabels) property. +Data labels will be arranged smartly without overlapping with each other. You can enable or disable this feature using the [`enableSmartLabels`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel#enablesmartlabels) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -78,7 +78,7 @@ Data labels will be arranged smartly without overlapping with each other. You ca ## Format -Data label for the accumulation chart can be formatted using [`format`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel/#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. +Data label for the accumulation chart can be formatted using [`format`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -151,7 +151,7 @@ Data label for the accumulation chart can be formatted using [`format`](https:// ## DataLabel template Label content can be formatted by using the template option. Inside the template, you can add the placeholder text `${point.x}` and `${point.y}` to display corresponding data points x & y value. Using -[`template`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings/#template)property, you can set data label template in chart. +[`template`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings#template)property, you can set data label template in chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -216,7 +216,7 @@ Individual text can be customized using the `textRender` event. ## Text wrap -When the data label text exceeds the container, the text can be wrapped by using [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings/#textwrap) property. End user can also wrap the data label text based on [`maxWidth`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings/#maxwidth) property. +When the data label text exceeds the container, the text can be wrapped by using [`textWrap`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings#textwrap) property. End user can also wrap the data label text based on [`maxWidth`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationDataLabelSettings#maxwidth) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -236,7 +236,7 @@ You can show the percentages in data labels of pie chart using `textRender` even ### Using textRender event -You can customize the data label of pie chart using [textRender](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/#textrender) event as follows to show percentage. +You can customize the data label of pie chart using [textRender](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#textrender) event as follows to show percentage. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/accumulation-charts/dynamic-data-update.md b/chart-sdk/angular/accumulation-charts/dynamic-data-update.md index 2e3de5427..5555857f3 100644 --- a/chart-sdk/angular/accumulation-charts/dynamic-data-update.md +++ b/chart-sdk/angular/accumulation-charts/dynamic-data-update.md @@ -1,6 +1,6 @@ --- layout: post -title: Dynamic data update in Accumulation Chart component | Syncfusion +title: Dynamic Data Update in Angular Accumulation Chart | Syncfusion description: Learn here all about dynamic data update in Syncfusion Accumulation Chart component in Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dynamic Data Update @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic data update in Angular Accumulation Chart component +# Dynamic Data Update in Angular Accumulation Chart ## Adding a new data point -The [`addPoint`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel/#addpoint) method is used to dynamically add a new data point to the accumulation chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire accumulation chart. This method takes two parameters: +The [`addPoint`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel#addpoint) method is used to dynamically add a new data point to the accumulation chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire accumulation chart. This method takes two parameters: * The first parameter is the new data point to add to your existing data source. * The optional second parameter specifies the animation duration for adding the new data point. @@ -31,7 +31,7 @@ The [`addPoint`](https://ej2.syncfusion.com/angular/documentation/api/accumulati ## Removing an existing data point -The [`removePoint`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel/#removepoint) method is used to dynamically remove a data point from the accumulation chart series. This method is particularly useful when you want to update the accumulation chart by removing an existing data point without having to refresh the entire accumulation chart. This method takes two parameters: +The [`removePoint`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel#removepoint) method is used to dynamically remove a data point from the accumulation chart series. This method is particularly useful when you want to update the accumulation chart by removing an existing data point without having to refresh the entire accumulation chart. This method takes two parameters: * The first parameter is the index of the data point that needs to be removed from the existing data source. * The optional second parameter specifies the animation duration for removing the data point. @@ -50,7 +50,7 @@ The [`removePoint`](https://ej2.syncfusion.com/angular/documentation/api/accumul ## Replacing entire data points -To replace the existing data source in the accumulation chart with a new data source, you can simply use the [`setData`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel/#setdata) method. This method allows you to replace the existing data points in the accumulation chart series with a new set of data points, enabling you to easily update the accumulation chart with new information. This method takes two parameters: +To replace the existing data source in the accumulation chart with a new data source, you can simply use the [`setData`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel#setdata) method. This method allows you to replace the existing data points in the accumulation chart series with a new set of data points, enabling you to easily update the accumulation chart with new information. This method takes two parameters: * The first parameter is the new set of data points to be updated. * The optional second parameter specifies the animation duration for updating the new data source. diff --git a/chart-sdk/angular/accumulation-charts/ej1-api-migration.md b/chart-sdk/angular/accumulation-charts/ej1-api-migration.md index dc2d0ef89..4c675be57 100644 --- a/chart-sdk/angular/accumulation-charts/ej1-api-migration.md +++ b/chart-sdk/angular/accumulation-charts/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Accumulation chart component | Syncfusion +title: Migration from Essential JS 1 in Angular Accumulation Chart | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Ej1 api migration in Angular Accumulation chart component +# Migration from Essential JS 1 in Angular Accumulation Chart This article describes the API migration process of {Component Name} component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/accumulation-charts/empty-points.md b/chart-sdk/angular/accumulation-charts/empty-points.md index a5603a211..9b707b8e5 100644 --- a/chart-sdk/angular/accumulation-charts/empty-points.md +++ b/chart-sdk/angular/accumulation-charts/empty-points.md @@ -1,6 +1,6 @@ --- layout: post -title: Empty points in Angular Accumulation chart component | Syncfusion +title: Empty Points in Angular Accumulation Chart | Syncfusion description: Learn here all about Empty points in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Empty points @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Empty points in Angular Accumulation chart component +# Empty Points in Angular Accumulation Chart The data points those uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the `emptyPointSettings` property in series. The default mode of the empty point is `Gap`. Other supported modes are `Average` and `Zero`. diff --git a/chart-sdk/angular/accumulation-charts/funnel.md b/chart-sdk/angular/accumulation-charts/funnel.md index afecdaad5..fed08fc91 100644 --- a/chart-sdk/angular/accumulation-charts/funnel.md +++ b/chart-sdk/angular/accumulation-charts/funnel.md @@ -1,6 +1,6 @@ --- layout: post -title: Funnel in Angular Accumulation chart component | Syncfusion +title: Funnel in Angular Accumulation Chart | Syncfusion description: Learn here all about Funnel in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Funnel @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Funnel in Angular Accumulation chart component +# Funnel in Angular Accumulation Chart -To render a funnel series, use the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#type) as `Funnel` and inject, the `FunnelSeries` module into the `@NgModule.providers`. +To render a funnel series, use the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#type) as `Funnel` and inject, the `FunnelSeries` module into the `@NgModule.providers`. To known about funnel charts, you can check on this video: @@ -126,7 +126,7 @@ Individual points can be customized using the `pointRender` event. ## Modes -The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`funnelMode`](https://helpej2.syncfusion.com/angular/documentation/api/accumulation-chart/funnelModes/) is `Standard`. +The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`funnelMode`](https://helpej2.syncfusion.com/angular/documentation/api/accumulation-chart/funnelModes) is `Standard`. ### Standard @@ -162,5 +162,5 @@ The `Trapezoidal` mode is a modified funnel shape where the width narrows, but f ## See Also -* [Data label](./data-label/) -* [Grouping](./grouping/) \ No newline at end of file +* [Data label](./data-label) +* [Grouping](./grouping) \ No newline at end of file diff --git a/chart-sdk/angular/accumulation-charts/getting-started.md b/chart-sdk/angular/accumulation-charts/getting-started.md index e4ea6884d..404dc41d3 100644 --- a/chart-sdk/angular/accumulation-charts/getting-started.md +++ b/chart-sdk/angular/accumulation-charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting Started with Angular Accumulation Chart component | Syncfusion -description: Check out and learn about Getting Started with Angular Accumulation Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with Angular Accumulation Chart | Syncfusion +description: Check out and learn about Getting Started with Angular Accumulation Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Accumulation Chart Component +# Getting Started with Angular Accumulation Chart This section explains the steps required to create a simple accumulation chart and demonstrates the basic usage of the [Angular Accumulation Chart](https://www.syncfusion.com/angular-components/angular-charts) component. diff --git a/chart-sdk/angular/accumulation-charts/gradient.md b/chart-sdk/angular/accumulation-charts/gradient.md index 63a7611c3..03ac28060 100644 --- a/chart-sdk/angular/accumulation-charts/gradient.md +++ b/chart-sdk/angular/accumulation-charts/gradient.md @@ -1,14 +1,14 @@ --- layout: post -title: Gradient in Angular Accumulation chart component | Syncfusion -description: Learn here all abount Gradient in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Gradient in Angular Accumulation Chart | Syncfusion +description: Learn here all about Gradient in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gradient +control: Gradient documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gradient in Angular Accumulation chart component +# Gradient in Angular Accumulation Chart Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types: diff --git a/chart-sdk/angular/accumulation-charts/grouping.md b/chart-sdk/angular/accumulation-charts/grouping.md index 41da24906..9e6e50338 100644 --- a/chart-sdk/angular/accumulation-charts/grouping.md +++ b/chart-sdk/angular/accumulation-charts/grouping.md @@ -1,6 +1,6 @@ --- layout: post -title: Grouping in Angular Accumulation chart component | Syncfusion +title: Grouping in Angular Accumulation Chart | Syncfusion description: Learn here all about Grouping in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Grouping @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grouping in Angular Accumulation chart component +# Grouping in Angular Accumulation Chart -You can club/group few points of the series based on [`groupTo`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#groupto) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. The property also takes value in percentage (percentage of total data points value). +You can club/group few points of the series based on [`groupTo`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#groupto) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. The property also takes value in percentage (percentage of total data points value). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/accumulation-charts/legend.md b/chart-sdk/angular/accumulation-charts/legend.md index c259535f3..3612884af 100644 --- a/chart-sdk/angular/accumulation-charts/legend.md +++ b/chart-sdk/angular/accumulation-charts/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular Accumulation chart component | Syncfusion +title: Legend in Angular Accumulation Chart | Syncfusion description: Learn here all about Legend in Syncfusion Angular Accumulation 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 Accumulation chart component +# Legend in Angular Accumulation Chart As like a chart, the legend is also available for accumulation charts, which gives information about the points. By default, the legend will be placed on the right, if the width of the chart is high or will be placed on the bottom, if the height of the chart is high. Other customization features regarding the legend element are same as the [`chart legend`](http://ej2.syncfusion.com/documentation/chart/legend.html#position-and-alignment). diff --git a/chart-sdk/angular/accumulation-charts/pie-dough-nut.md b/chart-sdk/angular/accumulation-charts/pie-dough-nut.md index 267fa4359..401f7d8bf 100644 --- a/chart-sdk/angular/accumulation-charts/pie-dough-nut.md +++ b/chart-sdk/angular/accumulation-charts/pie-dough-nut.md @@ -1,14 +1,14 @@ --- layout: post -title: Pie dough nut in Angular Accumulation chart component | Syncfusion -description: Learn here all about Pie dough nut in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. +title: Pie and Doughnut in Angular Accumulation Chart | Syncfusion +description: Learn here all about Pie and Doughnut in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Pie dough nut +control: Pie and Doughnut documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie dough nut in Angular Accumulation chart component +# Pie and Doughnut in Angular Accumulation Chart ## Pie Chart diff --git a/chart-sdk/angular/accumulation-charts/pyramid.md b/chart-sdk/angular/accumulation-charts/pyramid.md index 49c0bb1aa..ba9d42b87 100644 --- a/chart-sdk/angular/accumulation-charts/pyramid.md +++ b/chart-sdk/angular/accumulation-charts/pyramid.md @@ -1,6 +1,6 @@ --- layout: post -title: Pyramid in Angular Accumulation chart component | Syncfusion +title: Pyramid in Angular Accumulation Chart | Syncfusion description: Learn here all about Pyramid in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Pyramid @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pyramid in Angular Accumulation chart component +# Pyramid in Angular Accumulation Chart -To render a pyramid series, use the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel/#type) as `Pyramid` and inject `PyramidSeries` module into the `@NgModule.providers`. +To render a pyramid series, use the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeriesModel#type) as `Pyramid` and inject `PyramidSeries` module into the `@NgModule.providers`. To known about pyramid, you can check on this video: diff --git a/chart-sdk/angular/accumulation-charts/series-types.md b/chart-sdk/angular/accumulation-charts/series-types.md index ede64b884..e4d9e4dc6 100644 --- a/chart-sdk/angular/accumulation-charts/series-types.md +++ b/chart-sdk/angular/accumulation-charts/series-types.md @@ -1,6 +1,6 @@ --- layout: post -title: Series types in Angular Accumulation chart component | Syncfusion +title: Series Types in Angular Accumulation Chart | Syncfusion description: Learn here all about Series types in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series types @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series types in Angular Accumulation chart component +# Series Types in Angular Accumulation Chart ## Pyramid Chart -To render a pyramid series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#type) as `Pyramid`. +To render a pyramid series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#type) as `Pyramid`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -30,7 +30,7 @@ To render a pyramid series, use series [`type`](https://ej2.syncfusion.com/angul ## Funnel Chart -To render a funnel series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries/#type) as `Funnel`. +To render a funnel series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationSeries#type) as `Funnel`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/accumulation-charts/title-and-sub-title.md b/chart-sdk/angular/accumulation-charts/title-and-sub-title.md index 6012f1080..129b7d38f 100644 --- a/chart-sdk/angular/accumulation-charts/title-and-sub-title.md +++ b/chart-sdk/angular/accumulation-charts/title-and-sub-title.md @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and sub title in Angular Accumulation chart component +# Title and Subtitle in Angular Accumulation Chart -Accumulation Chart can be given a title using [`title`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/#title) property, to show the information about the data plotted. +Accumulation Chart can be given a title using [`title`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart#title) property, to show the information about the data plotted. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -26,7 +26,7 @@ Accumulation Chart can be given a title using [`title`](https://ej2.syncfusion.c ## Title customization -Accumulation Chart can be customizing a title using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel/#titlestyle) property. +Accumulation Chart can be customizing a title using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel#titlestyle) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -42,7 +42,7 @@ Accumulation Chart can be customizing a title using [`titleStyle`](https://ej2.s ### Position -The [`position`](https://helpej2.syncfusion.com/angular/documentation/api/accumulation-chart/titlePosition/) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements. +The [`position`](https://helpej2.syncfusion.com/angular/documentation/api/accumulation-chart/titlePosition) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -58,7 +58,7 @@ The [`position`](https://helpej2.syncfusion.com/angular/documentation/api/accumu ## SubTitle -Accumulation Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel/#subtitle) property, to show the information +Accumulation Chart can be given a subtitle using [`subTitle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel#subtitle) property, to show the information about the data plotted. {% tabs %} @@ -75,7 +75,7 @@ about the data plotted. ## SubTitle customization -Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel/#subtitlestyle) property. +Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/accumulationChartModel#subtitlestyle) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -91,7 +91,7 @@ Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](https:/ ### Position -The [`position`](https://helpej2.syncfusion.com/angular/documentation/api/accumulation-chart/titlePosition/) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements. +The [`position`](https://helpej2.syncfusion.com/angular/documentation/api/accumulation-chart/titlePosition) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/accumulation-charts/tool-tip.md b/chart-sdk/angular/accumulation-charts/tool-tip.md index ca4150960..e301a0cbd 100644 --- a/chart-sdk/angular/accumulation-charts/tool-tip.md +++ b/chart-sdk/angular/accumulation-charts/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in Angular Accumulation chart component | Syncfusion +title: Tooltip in Angular Accumulation Chart | Syncfusion description: Learn here all about Tooltip in Syncfusion Angular Accumulation chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in Angular Accumulation chart component +# Tooltip in Angular Accumulation Chart Tooltip for the accumulation chart can be enabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/accumulation-chart/tooltipSettings#enable) property. diff --git a/chart-sdk/angular/bullet-chart/accessibility.md b/chart-sdk/angular/bullet-chart/accessibility.md index 5a4f2130f..884283928 100644 --- a/chart-sdk/angular/bullet-chart/accessibility.md +++ b/chart-sdk/angular/bullet-chart/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Bullet chart component | Syncfusion +title: Accessibility in Angular Bullet Chart | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility diff --git a/chart-sdk/angular/bullet-chart/axis-customization.md b/chart-sdk/angular/bullet-chart/axis-customization.md index a443478f0..769279636 100644 --- a/chart-sdk/angular/bullet-chart/axis-customization.md +++ b/chart-sdk/angular/bullet-chart/axis-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis customization in Angular Bullet chart component | Syncfusion +title: Axis Customization in Angular Bullet Chart | Syncfusion description: Learn here all about Axis customization in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in Angular Bullet chart component +# Axis Customization in Angular Bullet Chart ## MajorTickLines and MinorTickLines Customization -The following properties can be used to customize [`majorTicklines`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#majorticklines) and [`minorTicklines`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#minorticklines). +The following properties can be used to customize [`majorTicklines`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#majorticklines) and [`minorTicklines`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#minorticklines). * **width** - Specifies the width of ticklines. * **height** - Specifies the height of ticklines. @@ -33,7 +33,7 @@ The following properties can be used to customize [`majorTicklines`](https://ej2 ## Tick Placement -The major and the minor ticks can be placed **inside** or **outside** the ranges using the [`tickPosition`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#tickposition) property. +The major and the minor ticks can be placed **inside** or **outside** the ranges using the [`tickPosition`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#tickposition) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -49,7 +49,7 @@ The major and the minor ticks can be placed **inside** or **outside** the ranges ## Label Format -Axis numeric labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#labelformat) property. Axis labels support all globalize formats. +Axis numeric labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#labelformat) property. Axis labels support all globalize formats. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -125,7 +125,7 @@ The following table describes the result of applying some commonly used formats ## GroupingSeparator -To separate the groups of thousands, set the [`enableGroupSeparator`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#enablegroupseparator) property to **true**. +To separate the groups of thousands, set the [`enableGroupSeparator`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#enablegroupseparator) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -141,7 +141,7 @@ To separate the groups of thousands, set the [`enableGroupSeparator`](https://ej ## Custom Label Format -Using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#labelformat) property, axis labels can be specified with a custom defined format in addition to the axis value. The label format uses a placeholder such as **${value}K**, which represents the axis label. +Using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#labelformat) property, axis labels can be specified with a custom defined format in addition to the axis value. The label format uses a placeholder such as **${value}K**, which represents the axis label. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -157,7 +157,7 @@ Using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/b ## Label Placement -Label can be placed **Inside** or **Outside** of the ranges using the [`labelPosition`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#labelposition) property. +Label can be placed **Inside** or **Outside** of the ranges using the [`labelPosition`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#labelposition) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -173,7 +173,7 @@ Label can be placed **Inside** or **Outside** of the ranges using the [`labelPos ## Opposed Position -To place an axis opposite to its original position, set the [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#opposedposition) property to **true**. +To place an axis opposite to its original position, set the [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#opposedposition) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -189,7 +189,7 @@ To place an axis opposite to its original position, set the [`opposedPosition`]( ## Category Label -The Bullet Chart supports X-axis label by specifying the property from the data source to the [`categoryField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#categoryfield). It helps to understand the input data in a more efficient way. +The Bullet Chart supports X-axis label by specifying the property from the data source to the [`categoryField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#categoryfield). It helps to understand the input data in a more efficient way. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -205,7 +205,7 @@ The Bullet Chart supports X-axis label by specifying the property from the data ## Category Label Customization -The label color, opacity, font size, font family, font weight, and font style can be customized by using the [`categoryLabelStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#categorylabelstyle) setting for category and the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#labelstyle) setting for axis label. The [`useRangeColor`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletLabelStyleModel/#userangecolor) property specifies the color of the axis label and represents the color from the corresponding range colors. +The label color, opacity, font size, font family, font weight, and font style can be customized by using the [`categoryLabelStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#categorylabelstyle) setting for category and the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#labelstyle) setting for axis label. The [`useRangeColor`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletLabelStyleModel#userangecolor) property specifies the color of the axis label and represents the color from the corresponding range colors. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/angular/bullet-chart/bullet-chart-dimensions.md index a7dd2b10e..38bc79f51 100644 --- a/chart-sdk/angular/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/angular/bullet-chart/bullet-chart-dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Bullet chart dimensions in Angular Bullet chart component | Syncfusion +title: Dimensions in Angular Bullet Chart | Syncfusion description: Learn here all about Bullet chart dimensions in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bullet chart dimensions @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bullet chart dimensions in Angular Bullet chart component +# Dimensions in Angular Bullet Chart ## Size for Container @@ -55,7 +55,7 @@ export class AppComponent { -The [`width`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#height) properties are used to adjust the size of the Bullet Chart. +The [`width`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#height) properties are used to adjust the size of the Bullet Chart. ### Pixel diff --git a/chart-sdk/angular/bullet-chart/comparative-bar.md b/chart-sdk/angular/bullet-chart/comparative-bar.md index ec0bfae04..100338a47 100644 --- a/chart-sdk/angular/bullet-chart/comparative-bar.md +++ b/chart-sdk/angular/bullet-chart/comparative-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Comparative bar in Angular Bullet chart component | Syncfusion +title: Target Bar in Angular Bullet Chart | Syncfusion description: Learn here all about Comparative bar in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Comparative bar @@ -9,9 +9,9 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Comparative bar in Angular Bullet chart component +# Target Bar in Angular Bullet Chart -The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [`targetField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#targetfield) should be mapped to the appropriate field from the datasource. +The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [`targetField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#targetfield) should be mapped to the appropriate field from the datasource. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -27,7 +27,7 @@ The line marker that runs perpendicular to the orientation of the graph is known ## Types of target bar -The shape of the target bar can be customized using the [`targetTypes`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#targettypes) property and it supports **Circle**, **Cross**, and **Rect** shapes. The default type of the target bar is **Rect**. +The shape of the target bar can be customized using the [`targetTypes`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#targettypes) property and it supports **Circle**, **Cross**, and **Rect** shapes. The default type of the target bar is **Rect**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -43,10 +43,10 @@ The shape of the target bar can be customized using the [`targetTypes`](https:// ## Target bar customization -The following properties can be used to customize the target bar. Also, you can bind the color for the target bar from [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#datasource) for the bullet chart. +The following properties can be used to customize the target bar. Also, you can bind the color for the target bar from [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#datasource) for the bullet chart. -* [`targetColor`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#targetcolor) - Specifies the fill color of Target Bar. -* [`targetWidth`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#targetwidth) - Specifies the width of Target Bar. +* [`targetColor`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#targetcolor) - Specifies the fill color of Target Bar. +* [`targetWidth`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#targetwidth) - Specifies the width of Target Bar. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/customization.md b/chart-sdk/angular/bullet-chart/customization.md index 40ecf7d7d..e1d1e8297 100644 --- a/chart-sdk/angular/bullet-chart/customization.md +++ b/chart-sdk/angular/bullet-chart/customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Customization in Angular Bullet chart component | Syncfusion +title: Customization in Angular Bullet Chart | Syncfusion description: Learn here all about Customization in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customization @@ -9,11 +9,11 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in Angular Bullet chart component +# Customization in Angular Bullet Chart ## Orientation -The Bullet Chart can be rendered in different orientations such as **Horizontal** or **Vertical** via the [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#orientation) property. By default, the Bullet Chart is rendered in the **Horizontal** orientation. +The Bullet Chart can be rendered in different orientations such as **Horizontal** or **Vertical** via the [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#orientation) property. By default, the Bullet Chart is rendered in the **Horizontal** orientation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -29,7 +29,7 @@ The Bullet Chart can be rendered in different orientations such as **Horizontal* ## Right-to-left (RTL) -The Bullet Chart supports the right-to-left rendering that can be enabled by setting the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#enablertl) property to **true**. +The Bullet Chart supports the right-to-left rendering that can be enabled by setting the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#enablertl) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -45,7 +45,7 @@ The Bullet Chart supports the right-to-left rendering that can be enabled by set ## Animation -The actual and the target bar supports the linear animation via the [`animation`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#animation) setting. The speed and the delay are controlled using the `duration` and `delay` properties respectively. +The actual and the target bar supports the linear animation via the [`animation`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#animation) setting. The speed and the delay are controlled using the `duration` and `delay` properties respectively. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -61,7 +61,7 @@ The actual and the target bar supports the linear animation via the [`animation` ## Theme -The Bullet Chart supports different type of themes via the [`theme`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#theme) property. +The Bullet Chart supports different type of themes via the [`theme`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#theme) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/data-binding.md b/chart-sdk/angular/bullet-chart/data-binding.md index b0c74f8d0..fc0d4cc1e 100644 --- a/chart-sdk/angular/bullet-chart/data-binding.md +++ b/chart-sdk/angular/bullet-chart/data-binding.md @@ -1,6 +1,6 @@ --- layout: post -title: Data binding in Angular Bullet chart component | Syncfusion +title: Working with Data in Angular Bullet Chart | Syncfusion description: Learn here all about Data binding in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data binding @@ -9,13 +9,13 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Data binding in Angular Bullet chart component +# Working with Data in Angular Bullet Chart Bullet Chart can visualise data bound from local or remote data. ## Local Data -The [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#datasource) property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the [`valueField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#valuefield) and [`targetField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#targetfield) respectively. +The [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#datasource) property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the [`valueField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valuefield) and [`targetField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#targetfield) respectively. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/data-label.md b/chart-sdk/angular/bullet-chart/data-label.md index c6f6d247c..4ca5ce248 100644 --- a/chart-sdk/angular/bullet-chart/data-label.md +++ b/chart-sdk/angular/bullet-chart/data-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Data label in Angular Bullet chart component | Syncfusion +title: Data Labels in Angular Bullet Chart | Syncfusion description: Learn here all about Data label in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data label @@ -9,9 +9,9 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in Angular Bullet chart component +# Data Labels in Angular Bullet Chart -Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#datalabel) setting's [`enable`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletDataLabelModel/#enable) property to **true**. +Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the [`dataLabel`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#datalabel) setting's [`enable`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletDataLabelModel#enable) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -27,7 +27,7 @@ Data Labels are used to identify the value of actual bar in the Bullet Chart com ## Data Label Customization -Data Labels color, opacity, font size, font family, font weight, and font style can be customized using the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletDataLabelModel/#labelstyle). +Data Labels color, opacity, font size, font family, font weight, and font style can be customized using the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletDataLabelModel#labelstyle). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/getting-started.md b/chart-sdk/angular/bullet-chart/getting-started.md index 7850da5e7..d35c5e685 100644 --- a/chart-sdk/angular/bullet-chart/getting-started.md +++ b/chart-sdk/angular/bullet-chart/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular Bullet Chart component | Syncfusion +title: Getting Started with Angular Bullet Chart | Syncfusion description: Check out and learn about Getting Started with Angular Bullet Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Bullet Chart Component +# Getting Started with Angular Bullet Chart This section explains the steps required to create a simple [Angular Bullet Chart](https://www.syncfusion.com/angular-components/angular-bullet-chart) and demonstrates the basic usage of the Angular Bullet Chart component. diff --git a/chart-sdk/angular/bullet-chart/ranges.md b/chart-sdk/angular/bullet-chart/ranges.md index 00a9b96fc..ae436a036 100644 --- a/chart-sdk/angular/bullet-chart/ranges.md +++ b/chart-sdk/angular/bullet-chart/ranges.md @@ -1,6 +1,6 @@ --- layout: post -title: Ranges in Angular Bullet chart component | Syncfusion +title: Ranges in Angular Bullet Chart | Syncfusion description: Learn here all about Ranges in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ranges @@ -9,9 +9,9 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Ranges in Angular Bullet chart component +# Ranges in Angular Bullet Chart -Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the [`end`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel/#end) property in [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#ranges). The [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#minimum) value of a quantitative scale is considered the starting point of the first range or the previous range end point. +Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the [`end`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel#end) property in [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#ranges). The [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#minimum) value of a quantitative scale is considered the starting point of the first range or the previous range end point. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -27,7 +27,7 @@ Ranges represent the quality of a specific range such as **Good**, **Bad** and * ## Color Customization -Enhance the readability of ranges with color and opacity. It can be applied using the [`color`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel/#color) and [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel/#opacity) properties in [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#ranges). +Enhance the readability of ranges with color and opacity. It can be applied using the [`color`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel#color) and [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/rangeModel#opacity) properties in [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#ranges). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/title.md b/chart-sdk/angular/bullet-chart/title.md index e53bd30a0..8d046bf90 100644 --- a/chart-sdk/angular/bullet-chart/title.md +++ b/chart-sdk/angular/bullet-chart/title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title in Angular Bullet chart component | Syncfusion +title: Title and Subtitle in Angular Bullet Chart | Syncfusion description: Learn here all about Title in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Title in Angular Bullet chart component +# Title and Subtitle in Angular Bullet Chart ## Title diff --git a/chart-sdk/angular/bullet-chart/tool-tip.md b/chart-sdk/angular/bullet-chart/tool-tip.md index 7d00a934a..9088c3920 100644 --- a/chart-sdk/angular/bullet-chart/tool-tip.md +++ b/chart-sdk/angular/bullet-chart/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tool tip in Angular Bullet chart component | Syncfusion +title: Tooltip in Angular Bullet Chart | Syncfusion description: Learn here all about Tool tip in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool tip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in Angular Bullet chart component +# Tooltip in Angular Bullet Chart When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values. @@ -30,7 +30,7 @@ You can enable the tooltip for the Bullet Chart by setting the [`enable`](https: ## Tooltip Template -Any HTML elements can be displayed in the tooltip by using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel/#template) property of the [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#tooltip). You can use the **${target}** and **${value}** as place holders in the HTML element to display the value and target values from the data source of corresponding data point. +Any HTML elements can be displayed in the tooltip by using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel#template) property of the [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#tooltip). You can use the **${target}** and **${value}** as place holders in the HTML element to display the value and target values from the data source of corresponding data point. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -48,9 +48,9 @@ Any HTML elements can be displayed in the tooltip by using the [`template`](http The following properties can be used to customize the Bullet Chart tooltip. -* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel/#fill) - Specifies the color of tooltip. -* [`border`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel/#border) - Specifies the tooltip border color and width. -* [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel/#textstyle) - Specifies the tooltip font family, font style, font weight, color and size. +* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel#fill) - Specifies the color of tooltip. +* [`border`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel#border) - Specifies the tooltip border color and width. +* [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/bulletTooltipSettingsModel#textstyle) - Specifies the tooltip font family, font style, font weight, color and size. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/bullet-chart/value-bar.md b/chart-sdk/angular/bullet-chart/value-bar.md index ea7abe077..3cbc1a03a 100644 --- a/chart-sdk/angular/bullet-chart/value-bar.md +++ b/chart-sdk/angular/bullet-chart/value-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Value bar in Angular Bullet chart component | Syncfusion +title: Actual Bar in Angular Bullet Chart | Syncfusion description: Learn here all about Value bar in Syncfusion Angular Bullet chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Value bar @@ -9,9 +9,9 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Value bar in Angular Bullet chart component +# Actual Bar in Angular Bullet Chart -To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [`valueField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#valuefield) should be mapped to the appropriate field from the data source. +To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [`valueField`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valuefield) should be mapped to the appropriate field from the data source. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -27,7 +27,7 @@ To display the primary data or the current value of the data being measured know ## Types of actual bar -The shape of the actual bar can be customized using the [`type`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#type) property of the Bullet Chart. The actual bar contains **Rect** and **Dot** shapes. By default, the actual bar shape is Rect. +The shape of the actual bar can be customized using the [`type`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#type) property of the Bullet Chart. The actual bar contains **Rect** and **Dot** shapes. By default, the actual bar shape is Rect. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -45,7 +45,7 @@ The shape of the actual bar can be customized using the [`type`](https://ej2.syn ### Border customization -Using the [`valueBorder`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#valueborder) property of the bullet chart, you can customize the border [`color`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/border/#color) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/border/#width) of the actual bar. +Using the [`valueBorder`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valueborder) property of the bullet chart, you can customize the border [`color`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/border#color) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/border#width) of the actual bar. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -61,7 +61,7 @@ Using the [`valueBorder`](https://ej2.syncfusion.com/angular/documentation/api/b ### Fill color and height Customization -Customize the fill color and height of the actual bar using the [`valueFill`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#valuefill) and [`valueHeight`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart/#valueheight) properties of the bullet chart. Also, you can bind the color for the actual bar from [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#datasource) for the bullet chart using [`valueFill`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valuefill) property. +Customize the fill color and height of the actual bar using the [`valueFill`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valuefill) and [`valueHeight`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valueheight) properties of the bullet chart. Also, you can bind the color for the actual bar from [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#datasource) for the bullet chart using [`valueFill`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#valuefill) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/accessibility.md b/chart-sdk/angular/charts/accessibility.md index 73236a0ef..8e81e31c4 100644 --- a/chart-sdk/angular/charts/accessibility.md +++ b/chart-sdk/angular/charts/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Chart component | Syncfusion +title: Accessibility in Angular Chart | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Chart component +# Accessibility in Angular Chart The Chart component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22), and relevant [WAI-ARIA](https://www.w3.org/TR/wai-aria/#roles) roles. diff --git a/chart-sdk/angular/charts/advanced-accessibility-configuration.md b/chart-sdk/angular/charts/advanced-accessibility-configuration.md index 1d3a319da..7d6c136ea 100644 --- a/chart-sdk/angular/charts/advanced-accessibility-configuration.md +++ b/chart-sdk/angular/charts/advanced-accessibility-configuration.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility customization in Angular Chart component | Syncfusion +title: Advanced Accessibility Configuration in Angular Chart | Syncfusion description: Learn here all about Accessibility customization in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility customization in Angular Chart component +# Advanced Accessibility Configuration in Angular Chart The [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts) component visualizes data graphically and provides accessibility customization options to improve usability for people with disabilities. The primary accessibility attributes are described in this section. diff --git a/chart-sdk/angular/charts/appearance.md b/chart-sdk/angular/charts/appearance.md index 627d233fe..136e0c48d 100644 --- a/chart-sdk/angular/charts/appearance.md +++ b/chart-sdk/angular/charts/appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in Angular Chart component | Syncfusion +title: Appearance in Angular Chart | Syncfusion description: Learn here all about Appearance in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular Chart component +# Appearance in Angular Chart ## Custom Color Palette diff --git a/chart-sdk/angular/charts/axis/axis-customization.md b/chart-sdk/angular/charts/axis/axis-customization.md index 557f6434d..c6d0c4fdd 100644 --- a/chart-sdk/angular/charts/axis/axis-customization.md +++ b/chart-sdk/angular/charts/axis/axis-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis customization in Angular Chart component | Syncfusion +title: Axis Customization in Angular Chart | Syncfusion description: Learn here all about Axis customization in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in Angular Chart component +# Axis Customization in Angular Chart To know about axis customization, you can check on this video: diff --git a/chart-sdk/angular/charts/axis/axis-labels.md b/chart-sdk/angular/charts/axis/axis-labels.md index 1c2554cba..4bc3a8eb3 100644 --- a/chart-sdk/angular/charts/axis/axis-labels.md +++ b/chart-sdk/angular/charts/axis/axis-labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis labels in Angular Chart component | Syncfusion +title: Axis Labels in Angular Chart | Syncfusion description: Learn here all about Axis labels in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis labels @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis labels in Angular Chart component +# Axis Labels in Angular Chart ## Smart axis labels diff --git a/chart-sdk/angular/charts/axis/axis-overview.md b/chart-sdk/angular/charts/axis/axis-overview.md index 57cf10b5f..8870333be 100644 --- a/chart-sdk/angular/charts/axis/axis-overview.md +++ b/chart-sdk/angular/charts/axis/axis-overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis in Angular Chart component | Syncfusion +title: Axis Overview in Angular Chart | Syncfusion description: Learn about chart axes, axis elements, types of axes, and customization options in the Syncfusion Angular Chart component. platform: chart-sdk control: Axis Overview @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# What is an Axis in a Chart? +# Axis Overview in Angular Chart In a chart, an axis refers to the lines that define the boundaries of the chart and provide a scale for measuring data. Charts have two axes: the horizontal axis (x-axis) and the vertical axis (y-axis). Here is the quick overview of axis elements. 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 ab391c9ed..33472c4c4 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 component | Syncfusion +title: Category Axis in Angular Chart | 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,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Category axis in Angular Chart component +# Category Axis in Angular Chart 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. 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 2f73017d0..4c1e072c2 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 component | Syncfusion +title: DateTime Axis in Angular Chart | 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,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Date time axis in Angular Chart component +# DateTime Axis in Angular Chart ## DateTime Axis diff --git a/chart-sdk/angular/charts/axis/axis-types/logarithmic-axis.md b/chart-sdk/angular/charts/axis/axis-types/logarithmic-axis.md index 8f134290e..0f60da918 100644 --- a/chart-sdk/angular/charts/axis/axis-types/logarithmic-axis.md +++ b/chart-sdk/angular/charts/axis/axis-types/logarithmic-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Logarithmic axis in Angular Chart component | Syncfusion +title: Logarithmic Axis in Angular Chart | Syncfusion description: Learn here all about Logarithmic axis in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Logarithmic axis @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Logarithmic axis in Angular Chart component +# Logarithmic Axis in Angular Chart diff --git a/chart-sdk/angular/charts/axis/axis-types/numeric-axis.md b/chart-sdk/angular/charts/axis/axis-types/numeric-axis.md index 73f54d578..eb8742385 100644 --- a/chart-sdk/angular/charts/axis/axis-types/numeric-axis.md +++ b/chart-sdk/angular/charts/axis/axis-types/numeric-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Numeric axis in Angular Chart component | Syncfusion +title: Numeric Axis in Angular Chart | Syncfusion description: Learn here all about Numeric axis in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Numeric axis @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Numeric axis in Angular Chart component +# Numeric Axis in Angular Chart The numeric axis displays numerical values along the chart's x-axis or y-axis. By default, the `valueType` of an axis is set to `Double`, which is suitable for displaying continuous numerical data such as temperatures, measurements, sales figures, or any decimal values. diff --git a/chart-sdk/angular/charts/axis/multiple-panes.md b/chart-sdk/angular/charts/axis/multiple-panes.md index e20b79488..b11bf9fc4 100644 --- a/chart-sdk/angular/charts/axis/multiple-panes.md +++ b/chart-sdk/angular/charts/axis/multiple-panes.md @@ -1,6 +1,6 @@ --- layout: post -title: Multiple panes in Angular Chart component | Syncfusion +title: Multiple Panes in Angular Chart | Syncfusion description: Learn here all about Multiple panes in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Multiple panes @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Multiple panes in Angular Chart component +# Multiple Panes in Angular Chart The chart area can be divided into multiple panes by defining rows and columns using the [`rows`](https://ej2.syncfusion.com/angular/documentation/api/chart/row) and [`columns`](https://ej2.syncfusion.com/angular/documentation/api/chart/column) collections. This feature is useful for displaying multiple related datasets within the same chart container while maintaining clear visual separation. diff --git a/chart-sdk/angular/charts/chart-axis.md b/chart-sdk/angular/charts/chart-axis.md index 14074618d..362027213 100644 --- a/chart-sdk/angular/charts/chart-axis.md +++ b/chart-sdk/angular/charts/chart-axis.md @@ -43,7 +43,7 @@ Category axis are used to represent, the string values instead of numbers. By default, category labels are placed between the ticks in an axis, this can also be placed on ticks -using [`labelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#labelplacement) property. +using [`labelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#labelplacement) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -57,7 +57,7 @@ using [`labelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/c {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/category-cs29" %} ->Note: To use category axis, we need to inject `CategoryService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#valuetype) of axis to `Category`. +>Note: To use category axis, we need to inject `CategoryService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) of axis to `Category`. @@ -81,7 +81,7 @@ You can use the numeric axis to represent numeric values of data in chart. By de **Customize Numeric 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. +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. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -97,7 +97,7 @@ Range for an axis, will be calculated automatically based on the provided data, **Apply Padding to the Range** -Padding can be applied to the minimum and maximum extremes of the axis range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) property. Numeric axis supports following types of padding. +Padding can be applied to the minimum and maximum extremes of the axis range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) property. Numeric axis supports following types of padding. * None * Round @@ -107,7 +107,7 @@ Padding can be applied to the minimum and maximum extremes of the axis range by **Numeric - None** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -123,7 +123,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **Numeric - Round** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -139,7 +139,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **Numeric - Additional** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -155,7 +155,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **Numeric - Normal** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `Normal`, padding is applied to the axis based on default range calculation. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `Normal`, padding is applied to the axis based on default range calculation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -171,7 +171,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **Numeric - Auto** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `Auto`,horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `Auto`,horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -203,7 +203,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **Customizing Date Time 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. +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. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -219,7 +219,7 @@ Range for an axis, will be calculated automatically based on the provided data, **Date Time Intervals** -Date time intervals can be customized by 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. +Date time intervals can be customized by 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 you set interval as 2 and intervalType as years, it considers 2 years as interval. DateTime axis supports following interval types, @@ -245,7 +245,7 @@ DateTime axis supports following interval types, **Applying Padding to the Range** -Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) property. Date time axis supports the following types of padding, +Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) property. Date time axis supports the following types of padding, * None * Round @@ -253,7 +253,7 @@ Padding can be applied to the minimum and maximum extremes of the range by using **DateTime - None** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -269,7 +269,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **DateTime - Round** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 15th Jan, interval is 1 and the interval type is ‘month’, then the axis minimum will be Jan 1st. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 15th Jan, interval is 1 and the interval type is ‘month’, then the axis minimum will be Jan 1st. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -285,7 +285,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ **DateTime - Additional** -When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. +When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -299,7 +299,7 @@ When the [`rangePadding`](https://ej2.syncfusion.com/angular/documentation/api/ {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/datetime-cs7" %} ->Note: To use datetime axis, we need to inject `DateTimeService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#valuetype) of axis to `DateTime`. +>Note: To use datetime axis, we need to inject `DateTimeService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) of axis to `DateTime`. @@ -322,7 +322,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat **Customize Logarithmic Range** -Range of 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. +Range of 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. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -338,7 +338,7 @@ Range of an axis, will be calculated automatically based on the provided data, y **Logarithmic Base** -Logarithmic base can be customized by using the [`logBase`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#logbase) property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc. +Logarithmic base can be customized by using the [`logBase`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#logbase) property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -354,7 +354,7 @@ Logarithmic base can be customized by using the [`logBase`](https://ej2.syncfus **Logarithmic Interval** -Logarithmic axis interval can be customized by using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#interval) property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval is 1. +Logarithmic axis interval can be customized by using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#interval) property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval is 1. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -368,13 +368,13 @@ Logarithmic axis interval can be customized by using the [`interval`](https://ej {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/axis/log-cs4" %} ->Note: To use log axis, we need to inject `LogarithmicService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#valuetype) of axis to `Logarithmic`. +>Note: To use log axis, we need to inject `LogarithmicService` into the `@NgModule.providers` and set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#valuetype) of axis to `Logarithmic`. ## Inversed Axis -When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#isInversed) to true. +When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#isInversed) to true. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -392,7 +392,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v **Numeric Label Format** -Numeric labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#labelformat) property. Numeric labels supports all globalize format. +Numeric labels can be formatted by using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#labelformat) property. Numeric labels supports all globalize format. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -467,7 +467,7 @@ The following table describes the result of applying some commonly used label fo **Datetime Label Format** -You can format and parse the date to all globalize format using [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#labelformat) property in an axis. +You can format and parse the date to all globalize format using [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#labelformat) property in an axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -546,7 +546,7 @@ Axis also supports custom label format using placeholder like {value}°C, in w **Axis Title** -You can add a title to the axis using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#title) property to provide quick information to the user about the data plotted in the axis. +You can add a title to the axis using [`title`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#title) property to provide quick information to the user about the data plotted in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -562,7 +562,7 @@ You can add a title to the axis using [`title`](https://ej2.syncfusion.com/angul **Label Customization** -The [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#labelstyle) property of an axis provides options to customize the `color`, `font-family`, `font-size` and `font-weight` of the axis labels. +The [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#labelstyle) property of an axis provides options to customize the `color`, `font-family`, `font-size` and `font-weight` of the axis labels. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -578,7 +578,7 @@ The [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/a **Edge Label Placement** -Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. +Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -594,7 +594,7 @@ Labels with long text at the edges of an axis may appear partially in the chart. **Grid Lines Customization** -You can customize the `width`, `color` and `dashArray` of the minor and major grid lines, using [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#minorgridlines) properties in the axis. +You can customize the `width`, `color` and `dashArray` of the minor and major grid lines, using [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#minorgridlines) properties in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -610,7 +610,7 @@ You can customize the `width`, `color` and `dashArray` of the minor and maj **Tick Lines Customization** -You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#majorgridlines) and [`minorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#minorgridlines) properties in the axis. +You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#majorgridlines) and [`minorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#minorgridlines) properties in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -627,7 +627,7 @@ You can customize the  `width`, `color` and `size` of the minor and major **Place Axes at the Opposite Side** -To place an axis opposite from its original position, set [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#opposedposition) property of the axis to true. +To place an axis opposite from its original position, set [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#opposedposition) property of the axis to true. {% tabs %} @@ -660,7 +660,7 @@ In addition to primary X and Y axis, we can add n number of axis to the chart. S ## Smart Axis Labels -When the axis labels overlap with each other, you can use [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective/#labelintersectaction) property in the axis, to place them smartly. +When the axis labels overlap with each other, you can use [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisDirective#labelintersectaction) property in the axis, to place them smartly. When setting `labelIntersectAction` as `Hide` diff --git a/chart-sdk/angular/charts/chart-dimensions.md b/chart-sdk/angular/charts/chart-dimensions.md index aa3fe847c..86b8e7020 100644 --- a/chart-sdk/angular/charts/chart-dimensions.md +++ b/chart-sdk/angular/charts/chart-dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart Dimensions in Angular Chart Component | Syncfusion +title: Chart Dimensions in Angular Chart | Syncfusion description: Learn here all about Chart dimensions in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart dimensions @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart Dimensions in Angular Chart Component +# Chart Dimensions in Angular Chart ## Container Size diff --git a/chart-sdk/angular/charts/chart-elements/chart-annotations.md b/chart-sdk/angular/charts/chart-elements/chart-annotations.md index f36301451..e024a3cb7 100644 --- a/chart-sdk/angular/charts/chart-elements/chart-annotations.md +++ b/chart-sdk/angular/charts/chart-elements/chart-annotations.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart annotations in Angular Chart component | Syncfusion +title: Annotations in Angular Chart | 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 @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart annotations in Angular Chart component +# Annotations in Angular Chart 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. diff --git a/chart-sdk/angular/charts/chart-elements/data-labels.md b/chart-sdk/angular/charts/chart-elements/data-labels.md index c263642fe..2de1d90ba 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 component | Syncfusion +title: Data Labels in Angular Chart | 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,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in Angular Chart component +# Data Labels in Angular Chart 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. diff --git a/chart-sdk/angular/charts/chart-elements/data-markers.md b/chart-sdk/angular/charts/chart-elements/data-markers.md index da9ac328c..ab6f6d722 100644 --- a/chart-sdk/angular/charts/chart-elements/data-markers.md +++ b/chart-sdk/angular/charts/chart-elements/data-markers.md @@ -1,6 +1,6 @@ --- layout: post -title: Data markers in Angular Chart component | Syncfusion +title: Markers in Angular Chart | Syncfusion description: Learn here all about Data markers in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data markers @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data markers in Angular Chart component +# Markers in Angular Chart Data markers are visual indicators placed at each data point on a series, helping to clearly identify and highlight individual values in your chart. Markers improve readability and accessibility, especially in line and area charts where data points may otherwise be unclear. Customize marker shape, color, size, and appearance to match your design requirements. diff --git a/chart-sdk/angular/charts/chart-elements/gradient.md b/chart-sdk/angular/charts/chart-elements/gradient.md index afc476aa5..1c6039d57 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 component | Syncfusion +title: Gradient in Angular Chart | 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,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Gradient in Angular Chart component +# Gradient in Angular Chart diff --git a/chart-sdk/angular/charts/chart-elements/legend.md b/chart-sdk/angular/charts/chart-elements/legend.md index 66b9dd031..14c560c30 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 component | Syncfusion +title: Legend in Angular Chart | 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 component +# Legend in Angular Chart The legend provides information about the series rendered in the chart and helps users identify each series by its color, shape, or style. diff --git a/chart-sdk/angular/charts/chart-elements/series-label.md b/chart-sdk/angular/charts/chart-elements/series-label.md index 5aebeabb4..607863b26 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 Component | Syncfusion +title: Series Labels in Angular Chart | 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,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series Labels in Angular Chart Component +# Series Labels in Angular Chart 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. diff --git a/chart-sdk/angular/charts/chart-elements/strip-line.md b/chart-sdk/angular/charts/chart-elements/strip-line.md index 260f5cace..355299919 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: Strip Line in Angular Chart Component | Syncfusion +title: Stripline in Angular Chart | 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 @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Strip Line in Angular Chart Component +# Stripline in Angular Chart diff --git a/chart-sdk/angular/charts/chart-elements/technical-indicators.md b/chart-sdk/angular/charts/chart-elements/technical-indicators.md index d89caa3a2..77a70ec04 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 component | Syncfusion +title: Technical Indicators in Angular Chart | 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 component +# Technical Indicators in Angular Chart 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. diff --git a/chart-sdk/angular/charts/chart-elements/trend-lines.md b/chart-sdk/angular/charts/chart-elements/trend-lines.md index d0cd9bed8..6e2377128 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: Trend lines in Angular Chart component | Syncfusion +title: Trendlines in Angular Chart | 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,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Trend lines in Angular Chart component +# Trendlines in Angular Chart 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. diff --git a/chart-sdk/angular/charts/chart-events.md b/chart-sdk/angular/charts/chart-events.md index f4c54ae3e..600810400 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 component | Syncfusion +title: Chart Events in Angular Chart | 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,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart Event in Angular Chart Component +# Chart Events in Angular Chart 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. 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 a7ebdd885..85527c8a5 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 component | Syncfusion +title: Crosshair and Trackball in Angular Chart | 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,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Crosshair and trackball in Angular Chart component +# Crosshair and Trackball in Angular Chart Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position. diff --git a/chart-sdk/angular/charts/chart-interactive/data-editing.md b/chart-sdk/angular/charts/chart-interactive/data-editing.md index 7036139af..e70f1e512 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 component | Syncfusion +title: Data Editing in Angular Chart | 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,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Data editing in Angular Chart component +# Data Editing in Angular Chart 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. diff --git a/chart-sdk/angular/charts/chart-interactive/selection.md b/chart-sdk/angular/charts/chart-interactive/selection.md index f9895fb48..e0d0b1240 100644 --- a/chart-sdk/angular/charts/chart-interactive/selection.md +++ b/chart-sdk/angular/charts/chart-interactive/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection in Angular Chart component | Syncfusion +title: Selection in Angular Chart | Syncfusion description: Learn here all about Selection in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selection @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Selection in Angular Chart component +# Selection in Angular Chart The chart provides selection support for both series and individual data points when users interact with the chart using mouse clicks. diff --git a/chart-sdk/angular/charts/chart-interactive/synchronized-chart.md b/chart-sdk/angular/charts/chart-interactive/synchronized-chart.md index 1ab1a337a..c387a894b 100644 --- a/chart-sdk/angular/charts/chart-interactive/synchronized-chart.md +++ b/chart-sdk/angular/charts/chart-interactive/synchronized-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Synchronized Charts in Angular Chart component | Syncfusion +title: Synchronized Charts in Angular Chart | Syncfusion description: Learn here all about Synchronized Charts in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Synchronized charts @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Synchronized Charts in Angular Chart component +# Synchronized Charts in Angular Chart Synchronized charts allow multiple chart instances to share common interactions so that actions performed on one chart are reflected across the others. This approach is useful for comparing related datasets and analyzing trends consistently across multiple visualizations. diff --git a/chart-sdk/angular/charts/chart-interactive/tool-tip.md b/chart-sdk/angular/charts/chart-interactive/tool-tip.md index 27e36236a..a181fc0d8 100644 --- a/chart-sdk/angular/charts/chart-interactive/tool-tip.md +++ b/chart-sdk/angular/charts/chart-interactive/tool-tip.md @@ -1,14 +1,15 @@ --- layout: post -title: Tooltip in Angular Chart component | Syncfusion +title: Tooltip in Angular Chart | Syncfusion description: Learn here all about Tooltip in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip documentation: ug domainurl: https://help.syncfusion.com/chart-sdk + --- -# Tooltip in Angular Chart component +# Tooltip in Angular Chart diff --git a/chart-sdk/angular/charts/chart-interactive/zooming.md b/chart-sdk/angular/charts/chart-interactive/zooming.md index d3be5c6b5..997ddee39 100644 --- a/chart-sdk/angular/charts/chart-interactive/zooming.md +++ b/chart-sdk/angular/charts/chart-interactive/zooming.md @@ -1,6 +1,6 @@ --- layout: post -title: Zooming in Angular Chart component | Syncfusion +title: Zooming in Angular Chart | Syncfusion description: Learn here all about Zooming in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Zooming @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Zooming in Angular Chart component +# Zooming in Angular Chart Zooming in a chart refers to the process of magnifying a portion of the chart to focus on specific segments of data that matter most. diff --git a/chart-sdk/angular/charts/chart-overview.md b/chart-sdk/angular/charts/chart-overview.md index 0ee3ef714..7790b11c5 100644 --- a/chart-sdk/angular/charts/chart-overview.md +++ b/chart-sdk/angular/charts/chart-overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart in Angular Chart component | Syncfusion +title: About Syncfusion Angular Chart Component | Syncfusion description: Learn here all about the Chart component in Syncfusion Angular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Angular Chart Component Overview +# About Syncfusion Angular Chart Component. The EJ2 Chart component is a high-performance, interactive visualization library for presenting data across a broad set of chart types. It supports line, bar, area, column, pie, financial, spline and other series formats, and is optimized for responsive rendering, smooth interactions, and large datasets. Typical use cases include trend analysis, comparisons, distributions, and time-series exploration. diff --git a/chart-sdk/angular/charts/chart-print.md b/chart-sdk/angular/charts/chart-print.md index 6fc19f8fc..4414399c5 100644 --- a/chart-sdk/angular/charts/chart-print.md +++ b/chart-sdk/angular/charts/chart-print.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart print in Angular Chart component | Syncfusion +title: Print and Export in Angular Chart | Syncfusion description: Learn here all about Chart print in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart print @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart print in Angular Chart component +# Print and Export in Angular Chart ## Print diff --git a/chart-sdk/angular/charts/cross-hair-track-ball.md b/chart-sdk/angular/charts/cross-hair-track-ball.md index 7f0d5d50b..0d663f34d 100644 --- a/chart-sdk/angular/charts/cross-hair-track-ball.md +++ b/chart-sdk/angular/charts/cross-hair-track-ball.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position. -Crosshair lines can be enabled by using [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltip/#enable) property in the `crosshair`. +Crosshair lines can be enabled by using [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltip#enable) property in the `crosshair`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ Crosshair lines can be enabled by using [`enable`](https://ej2.syncfusion.com/a ## Tooltip for axis -Tooltip label for an axis can be enabled by using [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltipModel/#enable) +Tooltip label for an axis can be enabled by using [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairTooltipModel#enable) property of `crosshairTooltip` in the corresponding axis. {% tabs %} @@ -45,7 +45,7 @@ property of `crosshairTooltip` in the corresponding axis. ## 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` 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/crosshairSettingsModel/#line) property in the crosshair. +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` 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/crosshairSettingsModel#line) property in the crosshair. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -65,7 +65,7 @@ The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshai 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, we need to inject `CrosshairService` and `TooltipService` into the `NgModule.providers`. -Trackball can be enabled by setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings/#enable) property of the crosshair to true and [`shared`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettings/#shared) property in `tooltip` to true in chart. +Trackball can be enabled by setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/crosshairSettings#enable) property of the crosshair to true and [`shared`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettings#shared) property in `tooltip` to true in chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/data-binding/dynamic-data-update.md b/chart-sdk/angular/charts/data-binding/dynamic-data-update.md index 878b1c263..bcba66066 100644 --- a/chart-sdk/angular/charts/data-binding/dynamic-data-update.md +++ b/chart-sdk/angular/charts/data-binding/dynamic-data-update.md @@ -1,6 +1,6 @@ --- layout: post -title: Dynamic data update in Angular Chart component | Syncfusion +title: Dynamic Data Update in Angular Chart | Syncfusion description: Learn here all about dynamic data update in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dynamic Data Update @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic data update in Angular Chart component +# Dynamic Data Update in Angular Chart ## Adding a new data point diff --git a/chart-sdk/angular/charts/data-binding/working-with-data.md b/chart-sdk/angular/charts/data-binding/working-with-data.md index 5e1d1a6df..a9755fa04 100644 --- a/chart-sdk/angular/charts/data-binding/working-with-data.md +++ b/chart-sdk/angular/charts/data-binding/working-with-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Working with data in Angular Chart component | Syncfusion +title: Working with Data in Angular Chart | Syncfusion description: Learn here all about Working with data in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Working with data in Angular Chart component +# Working with Data in Angular Chart The Angular Chart component supports multiple data binding approaches to suit different application scenarios. Data can be bound from local JSON arrays, dynamically loaded on demand with lazy loading, or fetched from remote services using various adaptor patterns. This guide covers all available data binding methods, helping you choose the right approach for your use case based on data size, performance requirements, and backend architecture. diff --git a/chart-sdk/angular/charts/ej1-api-migration.md b/chart-sdk/angular/charts/ej1-api-migration.md index 05ec1de1a..402fb99e8 100644 --- a/chart-sdk/angular/charts/ej1-api-migration.md +++ b/chart-sdk/angular/charts/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Chart component | Syncfusion +title: Migration from Essential JS 1 in Angular Chart | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -11,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Ej1 api migration in Angular Chart component +# Migration from Essential JS 1 in Angular Chart This article describes the API migration process of the Chart component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/charts/feature-modules.md b/chart-sdk/angular/charts/feature-modules.md index 0335f435e..b1061014a 100644 --- a/chart-sdk/angular/charts/feature-modules.md +++ b/chart-sdk/angular/charts/feature-modules.md @@ -1,6 +1,6 @@ --- layout: post -title: Module in Angular Chart component | Syncfusion +title: Feature Modules in Angular Chart | Syncfusion description: Learn here all about Module in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Module @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Module in Angular Chart component +# Feature Modules in Angular Chart The following available modules should be injected to extend the Chart's functionality. diff --git a/chart-sdk/angular/charts/getting-started.md b/chart-sdk/angular/charts/getting-started.md index cda046ee5..a69c5d192 100644 --- a/chart-sdk/angular/charts/getting-started.md +++ b/chart-sdk/angular/charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting Started with Angular Chart component | Syncfusion -description: Check out and learn about Getting Started with Angular Chart component of Syncfusion Essential JS 2 and more details. +title: Getting Started with Angular Chart | Syncfusion +description: Check out and learn about the Getting Started with Angular Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Chart Component +# Getting Started with Angular Chart This section explains the steps required to create a simple chart and demonstrates the basic usage of the [Angular Chart](https://www.syncfusion.com/angular-components/angular-charts) component. diff --git a/chart-sdk/angular/charts/how-to/add-series.md b/chart-sdk/angular/charts/how-to/add-series.md index 3c2b95aa6..e6dacf5f4 100644 --- a/chart-sdk/angular/charts/how-to/add-series.md +++ b/chart-sdk/angular/charts/how-to/add-series.md @@ -1,6 +1,6 @@ --- layout: post -title: Add series in Angular Chart component | Syncfusion +title: How to Add or Remove Series in Angular Chart | Syncfusion description: Learn here all about Add series in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Add series @@ -8,19 +8,19 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Add series in Angular Chart component +# How to Add or Remove Series in Angular Chart -You can add or remove the chart series dynamically by using the [`addSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart/#addseries) or [`removeSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart/#removeseries) method. +You can add or remove the chart series dynamically by using the [`addSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart#addseries) or [`removeSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart#removeseries) method. To add or remove the series dynamically, follow the given steps: **Step 1**: Add a new series -To add a new series to the chart dynamically, pass the series value to the [`addSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart/#addseries) method. +To add a new series to the chart dynamically, pass the series value to the [`addSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart#addseries) method. **Step 2**: Remove a series -To remove a series from the chart dynamically, pass the series index to the [`removeSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart/#removeseries) method. +To remove a series from the chart dynamically, pass the series index to the [`removeSeries`](https://ej2.syncfusion.com/angular/documentation/api/chart#removeseries) method. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/how-to/click-data.md b/chart-sdk/angular/charts/how-to/click-data.md index 7670d82e7..af358932e 100644 --- a/chart-sdk/angular/charts/how-to/click-data.md +++ b/chart-sdk/angular/charts/how-to/click-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Click data in Angular Chart component | Syncfusion +title: How to Show Pie Clicked Data in Angular Chart | Syncfusion description: Learn here all about Click data in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Click data @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Click data in Angular Chart component +# How to Show Pie Clicked Data in Angular Chart By using the [`pointClick`](https://ej2.syncfusion.com/angular/documentation/api/chart#pointclick) event, you can get the chart data of the clicked area. diff --git a/chart-sdk/angular/charts/how-to/column-width.md b/chart-sdk/angular/charts/how-to/column-width.md index 2edd5c8ea..01fb7fc5c 100644 --- a/chart-sdk/angular/charts/how-to/column-width.md +++ b/chart-sdk/angular/charts/how-to/column-width.md @@ -1,6 +1,6 @@ --- layout: post -title: Column width in Angular Chart component | Syncfusion +title: How to Customize Column Width in Angular Chart | Syncfusion description: Learn here all about Column width in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Column width @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Column width in Angular Chart component +# How to Customize Column Width in Angular Chart -By using the [`columnWidth`](https://ej2.syncfusion.com/documentation/api/chart/series/#columnwidth) and [`columnSpacing`](https://ej2.syncfusion.com/documentation/api/chart/series/#columnspacing) properties in the series of the chart, you can customize the column width and column spacing values for all points of the column series. +By using the [`columnWidth`](https://ej2.syncfusion.com/documentation/api/chart/series#columnwidth) and [`columnSpacing`](https://ej2.syncfusion.com/documentation/api/chart/series#columnspacing) properties in the series of the chart, you can customize the column width and column spacing values for all points of the column series. -You can customize the column width by setting the [`columnWidth`](https://ej2.syncfusion.com/documentation/api/chart/series/#columnwidth) value from 0 to 1 for every point in the column series. Similarly, you can use the [`columnSpacing`](https://ej2.syncfusion.com/documentation/api/chart/series/#columnspacing) property to adjust the spacing between columns. +You can customize the column width by setting the [`columnWidth`](https://ej2.syncfusion.com/documentation/api/chart/series#columnwidth) value from 0 to 1 for every point in the column series. Similarly, you can use the [`columnSpacing`](https://ej2.syncfusion.com/documentation/api/chart/series#columnspacing) property to adjust the spacing between columns. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/how-to/customize-scatter-chart.md b/chart-sdk/angular/charts/how-to/customize-scatter-chart.md index 040ea27ed..46bd8c4bf 100644 --- a/chart-sdk/angular/charts/how-to/customize-scatter-chart.md +++ b/chart-sdk/angular/charts/how-to/customize-scatter-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Customize scatter chart in Angular Chart component | Syncfusion +title: How to Customize Scatter Chart in Angular Chart | Syncfusion description: Learn here all about Customize scatter chart in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customize scatter chart @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customize scatter chart in Angular Chart component +# How to Customize Scatter Chart in Angular Chart -By using the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel/#shape) property in the [`marker`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel), you can customize the shape of the scatter series points such as `Circle`, `Rectangle`, `Triangle`, `Diamond`, `Cross`, `HorizontalLine`, `VerticalLine`, `Pentagon`, `InvertedTriangle`, and `Image`. +By using the [`shape`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#shape) property in the [`marker`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel), you can customize the shape of the scatter series points such as `Circle`, `Rectangle`, `Triangle`, `Diamond`, `Cross`, `HorizontalLine`, `VerticalLine`, `Pentagon`, `InvertedTriangle`, and `Image`. -You can customize the width and height of the shapes by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel/#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel/#height) properties of the marker. +You can customize the width and height of the shapes by using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/chart/markerSettingsModel#height) properties of the marker. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,9 +28,9 @@ You can customize the width and height of the shapes by using the [`width`](http ## Customizing point color and data label value -You can customize the point color by using the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/#pointrender) event in the chart. In which we check the condition based on `yValue` to change the fill color of the point. +You can customize the point color by using the [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart#pointrender) event in the chart. In which we check the condition based on `yValue` to change the fill color of the point. -By default, data label values show y values of the data source. You can customize the data label value by using the [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/#textrender) event in the chart. +By default, data label values show y values of the data source. You can customize the data label value by using the [`textRender`](https://ej2.syncfusion.com/angular/documentation/api/chart#textrender) event in the chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/how-to/database-data.md b/chart-sdk/angular/charts/how-to/database-data.md index afaef346e..f17ff12ee 100644 --- a/chart-sdk/angular/charts/how-to/database-data.md +++ b/chart-sdk/angular/charts/how-to/database-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Database data in Angular Chart component | Syncfusion +title: How to Bind Chart Data from SQL Server in Angular Chart | Syncfusion description: Learn here all about Database data in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Database data @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Database data in Angular Chart component +# How to Bind Chart Data from SQL Server in Angular Chart * Create the chart data table using a database. You can find the database table below. diff --git a/chart-sdk/angular/charts/how-to/dialog-chart.md b/chart-sdk/angular/charts/how-to/dialog-chart.md index ca49b186a..cc97fb156 100644 --- a/chart-sdk/angular/charts/how-to/dialog-chart.md +++ b/chart-sdk/angular/charts/how-to/dialog-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Dialog chart in Angular Chart component | Syncfusion +title: How to Show a Chart in a Dialog in Angular Chart | Syncfusion description: Learn here all about Dialog chart in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dialog chart @@ -8,17 +8,17 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dialog chart in Angular Chart component +# How to Show a Chart in a Dialog in Angular Chart -Using the [`content`](https://ej2.syncfusion.com/angular/documentation/api/dialog/#content) property of the Dialog component, you can show the chart in a dialog pop-up. +Using the [`content`](https://ej2.syncfusion.com/angular/documentation/api/dialog#content) property of the Dialog component, you can show the chart in a dialog pop-up. To show the chart in the Dialog component, follow the given steps: **Step 1**: -Initialize the Dialog and Button components, and then create a basic chart and set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/dialog/#visible) property of the Dialog to `false` when initialized. +Initialize the Dialog and Button components, and then create a basic chart and set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/dialog#visible) property of the Dialog to `false` when initialized. -By setting the chart inside the [`content`](https://ej2.syncfusion.com/angular/documentation/api/dialog/#content) template of the Dialog component, you can show the chart when clicking the Button component. +By setting the chart inside the [`content`](https://ej2.syncfusion.com/angular/documentation/api/dialog#content) template of the Dialog component, you can show the chart when clicking the Button component. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/how-to/dynamic-chart.md b/chart-sdk/angular/charts/how-to/dynamic-chart.md index f028ea696..0a6e6279d 100644 --- a/chart-sdk/angular/charts/how-to/dynamic-chart.md +++ b/chart-sdk/angular/charts/how-to/dynamic-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Dynamic chart in Angular Chart component | Syncfusion +title: How to Render Dynamic Chart in Angular Chart | Syncfusion description: Learn here all about Dynamic chart in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dynamic chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic chart in Angular Chart component +# How to Render Dynamic Chart in Angular Chart By using an HTML button, you can add the chart dynamically when the button is clicked. diff --git a/chart-sdk/angular/charts/how-to/grid-data-chart.md b/chart-sdk/angular/charts/how-to/grid-data-chart.md index 2c93023bc..a7c897a3e 100644 --- a/chart-sdk/angular/charts/how-to/grid-data-chart.md +++ b/chart-sdk/angular/charts/how-to/grid-data-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Grid data chart in Angular Chart component | Syncfusion +title: How to Use Grid Data in Angular Chart | Syncfusion description: Learn here all about Grid data chart in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Grid data chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grid data chart in Angular Chart component +# How to Use Grid Data in Angular Chart You can visualize the data that is returned by the grid in the chart. diff --git a/chart-sdk/angular/charts/how-to/live-chart.md b/chart-sdk/angular/charts/how-to/live-chart.md index ad4c85759..4a72abb45 100644 --- a/chart-sdk/angular/charts/how-to/live-chart.md +++ b/chart-sdk/angular/charts/how-to/live-chart.md @@ -1,6 +1,6 @@ --- layout: post -title: Live chart in Angular Chart component | Syncfusion +title: How to Live Chart in Angular Chart | Syncfusion description: Learn here all about Live chart in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Live chart @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Live chart in Angular Chart component +# How to Live Chart in Angular Chart You can update a chart with live data by using the `setInterval` method. diff --git a/chart-sdk/angular/charts/how-to/overlap-area.md b/chart-sdk/angular/charts/how-to/overlap-area.md index 659454d03..56aa690cb 100644 --- a/chart-sdk/angular/charts/how-to/overlap-area.md +++ b/chart-sdk/angular/charts/how-to/overlap-area.md @@ -1,6 +1,6 @@ --- layout: post -title: Overlap area in Angular Chart component | Syncfusion +title: How to Color the Overlapped Area in Angular Chart | Syncfusion description: Learn here all about Overlap area in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Overlap area @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Overlap area in Angular Chart component +# How to Color the Overlapped Area in Angular Chart You can add a new range area series to show the overlapped area in different color. diff --git a/chart-sdk/angular/charts/how-to/percentage-tool-tip.md b/chart-sdk/angular/charts/how-to/percentage-tool-tip.md index ccdc469ef..a5c913813 100644 --- a/chart-sdk/angular/charts/how-to/percentage-tool-tip.md +++ b/chart-sdk/angular/charts/how-to/percentage-tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Percentage tooltip in Angular Chart component | Syncfusion +title: How to Show Pie Percentage in Tooltip in Angular Chart | Syncfusion description: Learn here all about Percentage tooltip in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Percentage tooltip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Percentage tooltip in Angular Chart component +# How to Show Pie Percentage in Tooltip in Angular Chart By using the [`tooltipRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#tooltiprender) event, you can show the percentage value for each point of pie series in tooltip. diff --git a/chart-sdk/angular/charts/how-to/points-customization.md b/chart-sdk/angular/charts/how-to/points-customization.md index c2cbb4597..e55f9f59e 100644 --- a/chart-sdk/angular/charts/how-to/points-customization.md +++ b/chart-sdk/angular/charts/how-to/points-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Points customization in Angular Chart component | Syncfusion +title: How to Customize Points in Angular Chart | Syncfusion description: Learn here all about Points customization in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Points customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Points customization in Angular Chart component +# How to Customize Points in Angular Chart You can customize the color of individual series points by using the [`pointColorMapping`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#pointcolormapping) property. This property allows you to map a field from your data source that contains color values, which will be applied to each corresponding point in the series. diff --git a/chart-sdk/angular/charts/how-to/selected-data-grid.md b/chart-sdk/angular/charts/how-to/selected-data-grid.md index d5e721034..f0212d2cf 100644 --- a/chart-sdk/angular/charts/how-to/selected-data-grid.md +++ b/chart-sdk/angular/charts/how-to/selected-data-grid.md @@ -1,6 +1,6 @@ --- layout: post -title: Selected data grid in Angular Chart component | Syncfusion +title: How to Display Selected Data in Angular Chart | Syncfusion description: Learn here all about Selected data grid in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selected data grid @@ -8,15 +8,15 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selected data grid in Angular Chart component +# How to Display Selected Data in Angular Chart -By using the [`dragComplete`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel/#dragcomplete) event, you can get the selected data values for range selection. +By using the [`dragComplete`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#dragcomplete) event, you can get the selected data values for range selection. To display the selected data values, follow the given steps: **Step 1**: -Get the selected data point values and display the values through the [grid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started) component by using the [`dragComplete`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel/#dragcomplete) event. +Get the selected data point values and display the values through the [grid](https://ej2.syncfusion.com/angular/documentation/grid/getting-started) component by using the [`dragComplete`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartModel#dragcomplete) event. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/how-to/series-visible.md b/chart-sdk/angular/charts/how-to/series-visible.md index af192afd0..b68a259fd 100644 --- a/chart-sdk/angular/charts/how-to/series-visible.md +++ b/chart-sdk/angular/charts/how-to/series-visible.md @@ -1,6 +1,6 @@ --- layout: post -title: Show or hide series in Angular Chart component | Syncfusion +title: How to Show or Hide Series in Angular Chart | Syncfusion description: Learn how to dynamically show or hide chart series by handling legend click events in the Syncfusion Angular Chart component. platform: chart-sdk control: Series visible @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Show or hide series in Angular Chart component +# How to Show or Hide Series in Angular Chart -By using the [`chartMouseClick`](https://ej2.syncfusion.com/angular/documentation/api/chart/#chartmouseclick) event, you can show or hide series based on a legend item click. In this event, you can get the legend target ID, which allows you to retrieve the current series index. Based on the index, you can set the value of the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/series/#visible) property to `true` or `false`. +By using the [`chartMouseClick`](https://ej2.syncfusion.com/angular/documentation/api/chart#chartmouseclick) event, you can show or hide series based on a legend item click. In this event, you can get the legend target ID, which allows you to retrieve the current series index. Based on the index, you can set the value of the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/series#visible) property to `true` or `false`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/how-to/threshold.md b/chart-sdk/angular/charts/how-to/threshold.md index 26fb747c7..db86e1913 100644 --- a/chart-sdk/angular/charts/how-to/threshold.md +++ b/chart-sdk/angular/charts/how-to/threshold.md @@ -1,6 +1,6 @@ --- layout: post -title: Threshold in Angular Chart component | Syncfusion +title: How to Use Threshold in Angular Chart | Syncfusion description: Learn here all about Threshold in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Threshold @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Threshold in Angular Chart component +# How to Use Threshold in Angular Chart You can mark a threshold in a chart by using the [`striplines`](https://ej2.syncfusion.com/angular/documentation/api/chart/axisModel#striplines) property. Thresholds help visualize important reference values or ranges in your chart data, such as target goals, safety limits, or alert zones. diff --git a/chart-sdk/angular/charts/internationalization.md b/chart-sdk/angular/charts/internationalization.md index 419cca71f..3fe68da35 100644 --- a/chart-sdk/angular/charts/internationalization.md +++ b/chart-sdk/angular/charts/internationalization.md @@ -1,6 +1,6 @@ --- layout: post -title: Internationalization in Angular Chart component | Syncfusion +title: Internationalization in Angular Chart | Syncfusion description: Learn here all about Internationalization in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Internationalization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in Angular Chart component +# Internationalization in Angular Chart Chart provides support for internationalization for the following elements: diff --git a/chart-sdk/angular/charts/localization.md b/chart-sdk/angular/charts/localization.md index 2f96fb8f9..e2a7c9e3f 100644 --- a/chart-sdk/angular/charts/localization.md +++ b/chart-sdk/angular/charts/localization.md @@ -1,6 +1,6 @@ --- layout: post -title: Localization in Angular Chart component | Syncfusion +title: Localization in Angular Chart | Syncfusion description: Learn here all about Localization in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in Angular Chart component +# Localization in Angular Chart Localization enables the chart component to adapt its text content to different languages and regions. The chart's default text content, such as zoom toolbar labels and other static text elements, can be localized by providing locale-specific translation objects. diff --git a/chart-sdk/angular/charts/render-methods.md b/chart-sdk/angular/charts/render-methods.md index c18528c93..6b21ae278 100644 --- a/chart-sdk/angular/charts/render-methods.md +++ b/chart-sdk/angular/charts/render-methods.md @@ -1,6 +1,6 @@ --- layout: post -title: Render modes in Angular Chart component | Syncfusion +title: Rendering Modes in Angular Chart | Syncfusion description: Learn here all about Render modes in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Render modes @@ -9,7 +9,7 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Render modes in Angular Chart component +# Rendering Modes in Angular Chart Chart supports two rendering modes: diff --git a/chart-sdk/angular/charts/series/series-overview.md b/chart-sdk/angular/charts/series/series-overview.md index 7419e6044..3228e0c18 100644 --- a/chart-sdk/angular/charts/series/series-overview.md +++ b/chart-sdk/angular/charts/series/series-overview.md @@ -1,6 +1,6 @@ --- layout: post -title: Series in Angular Chart component | Syncfusion +title: Series Overview in Angular Chart | Syncfusion description: Learn about chart series, single and multiple series, and common series properties in the Syncfusion Angular Chart component. platform: chart-sdk control: Chart Series @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Overview of Chart Series +# Series Overview in Angular Chart ## **What is a series?** diff --git a/chart-sdk/angular/charts/series/series-types/area-types/spline-range-area.md b/chart-sdk/angular/charts/series/series-types/area-types/spline-range-area.md index 8467cf4bb..d989691eb 100644 --- a/chart-sdk/angular/charts/series/series-types/area-types/spline-range-area.md +++ b/chart-sdk/angular/charts/series/series-types/area-types/spline-range-area.md @@ -7,7 +7,7 @@ control: Spline Range Area Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Spline Range Area in Angular Charts +# Spline Range Area Chart in Angular Charts ## Spline Range Area diff --git a/chart-sdk/angular/charts/series/series-types/chart-series.md b/chart-sdk/angular/charts/series/series-types/chart-series.md index ec37ba1c9..c8a86f357 100644 --- a/chart-sdk/angular/charts/series/series-types/chart-series.md +++ b/chart-sdk/angular/charts/series/series-types/chart-series.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart series in Angular Chart component | Syncfusion +title: Multiple Series in Angular Chart | Syncfusion description: Learn here all about Chart series in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart series @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart series in Angular Chart component +# Multiple Series in Angular Chart ## Multiple Series @@ -46,7 +46,7 @@ Combinations of different types like Line, Column, etc., can be rendered in a ch {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/combination-cs1" %} ## Enable Complex Property in Series - +# By setting the [`enableComplexProperty`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#enablecomplexproperty) value as `true` in series, you can bind complex data to the chart. {% tabs %} diff --git a/chart-sdk/angular/charts/series/series-types/line-types/line.md b/chart-sdk/angular/charts/series/series-types/line-types/line.md index 9125e883e..a17c2128d 100644 --- a/chart-sdk/angular/charts/series/series-types/line-types/line.md +++ b/chart-sdk/angular/charts/series/series-types/line-types/line.md @@ -63,7 +63,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/line-cs8" %} -The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property can be used to apply a gradient color to the line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property can be used to apply a gradient color to the line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -83,7 +83,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire **Opacity** -The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -103,7 +103,7 @@ The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesD **Dash array** -The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#dasharray) property determines the pattern of dashes and gaps in the series. +The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dasharray) property determines the pattern of dashes and gaps in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -123,7 +123,7 @@ The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/serie **Width** -The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#width) property specifies the stroke width applied to the series. +The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#width) property specifies the stroke width applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -145,7 +145,7 @@ The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDir To render a multicolored line series in your chart, you need to follow a few steps to configure it correctly. Here's a concise guide on how to do this: -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#type) as `MultiColoredLine` in your chart configuration. This specifies that the series should be rendered as a multicolored line chart, with different segments of the line having distinct colors. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) as `MultiColoredLine` in your chart configuration. This specifies that the series should be rendered as a multicolored line chart, with different segments of the line having distinct colors. 2. **Inject the MultiColoredLineSeries module**: Use the `@NgModule.providers` method to inject the `MultiColoredLineSeriesService` module in your chart. This step is essential, as it ensures that the necessary functionalities for rendering multicolored line series are available in your chart. @@ -173,7 +173,7 @@ Data points with `null` or `undefined` values are considered empty. Empty data p **Mode** -Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. +Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -193,7 +193,7 @@ Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Fill** -Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#fill) property to customize the fill color of empty points in the series. +Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#fill) property to customize the fill color of empty points in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -213,7 +213,7 @@ Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Border** -Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#border) property to customize the width and color of the border for empty points. +Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#border) property to customize the width and color of the border for empty points. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/series/series-types/line-types/spline.md b/chart-sdk/angular/charts/series/series-types/line-types/spline.md index e99411ce1..1e19de08c 100644 --- a/chart-sdk/angular/charts/series/series-types/line-types/spline.md +++ b/chart-sdk/angular/charts/series/series-types/line-types/spline.md @@ -19,7 +19,7 @@ To render a [spline](https://www.syncfusion.com/angular-components/angular-chart Here's a concise guide on how to do this: -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#type) as `Spline` in your chart configuration. This indicates that the series should be represented as a smooth curve, connecting data points with a spline rather than straight lines. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) as `Spline` in your chart configuration. This indicates that the series should be represented as a smooth curve, connecting data points with a spline rather than straight lines. 2. **Provide SplineSeriesService**: Use the `@NgModule.providers` method to inject the `SplineSeriesService` module into your chart. This step is essential, as it ensures that the necessary functionalities for rendering spline series are available in your chart. @@ -41,7 +41,7 @@ Here's a concise guide on how to do this: ## Binding data with series -You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#yname) properties. +You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#yname) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -61,7 +61,7 @@ You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.c ## Spline type -Use the [`splineType`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#splinetype) to define the type of the spline series. The default type is `Natural`, which creates a smooth curve through the data points. +Use the [`splineType`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#splinetype) to define the type of the spline series. The default type is `Natural`, which creates a smooth curve through the data points. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -85,7 +85,7 @@ The following properties can be used to customize the `spline` series. **Fill** -The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property determines the color applied to the series. +The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property determines the color applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -103,7 +103,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/spline-cs" %} -The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property can be used to apply a gradient color to the spline series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property can be used to apply a gradient color to the spline series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -123,7 +123,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire **Opacity** -The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -143,7 +143,7 @@ The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesD **Dash array** -The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#dasharray) property determines the pattern of dashes and gaps in the series. +The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dasharray) property determines the pattern of dashes and gaps in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -163,7 +163,7 @@ The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/serie **Width** -The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#width) property specifies the stroke width applied to the series. +The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#width) property specifies the stroke width applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -187,7 +187,7 @@ Data points with `null` or `undefined` values are considered empty. Empty data p **Mode** -Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. +Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -207,7 +207,7 @@ Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Fill** -Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#fill) property to customize the fill color of empty points in the series. +Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#fill) property to customize the fill color of empty points in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -227,7 +227,7 @@ Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Border** -Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#border) property to customize the width and color of the border for empty points. +Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#border) property to customize the width and color of the border for empty points. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/series/series-types/line-types/stack-line.md b/chart-sdk/angular/charts/series/series-types/line-types/stack-line.md index 46d5245c3..eb5f8b6b3 100644 --- a/chart-sdk/angular/charts/series/series-types/line-types/stack-line.md +++ b/chart-sdk/angular/charts/series/series-types/line-types/stack-line.md @@ -20,7 +20,7 @@ To render a [stacked line](https://www.syncfusion.com/angular-components/angular Here's a concise guide on how to do this: -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#type) as `StackingLine` in your chart configuration. This indicates that the data should be represented as a stacked line chart, allowing multiple data series to be stacked on top of each other. This makes it easier to compare the contribution of each series to the total over a specific period. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) as `StackingLine` in your chart configuration. This indicates that the data should be represented as a stacked line chart, allowing multiple data series to be stacked on top of each other. This makes it easier to compare the contribution of each series to the total over a specific period. 2. **Provide StackingLineSeriesService**: Use the `@NgModule.providers` method to inject the `StackingLineSeriesService` module into your chart. This step is essential, as it ensures that the necessary functionalities for rendering stacked line series are available in your chart. @@ -42,7 +42,7 @@ Here's a concise guide on how to do this: ## Binding data with series -You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#yname) properties. +You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#yname) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -66,7 +66,7 @@ The following properties can be used to customize the `stacked line` series. **Fill** -The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property determines the color applied to the series. +The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property determines the color applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -84,7 +84,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/stackedline-cs" %} -The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property can be used to apply a gradient color to the stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property can be used to apply a gradient color to the stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -104,7 +104,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire **Opacity** -The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -124,7 +124,7 @@ The [opacity](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesD **Dash array** -The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#dasharray) property determines the pattern of dashes and gaps in the series. +The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dasharray) property determines the pattern of dashes and gaps in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -144,7 +144,7 @@ The [dashArray](https://ej2.syncfusion.com/angular/documentation/api/chart/serie **Width** -The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#width) property specifies the stroke width applied to the series. +The [width](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#width) property specifies the stroke width applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -168,7 +168,7 @@ Data points with `null` or `undefined` values are considered empty. Empty data p **Mode** -Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. +Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -188,7 +188,7 @@ Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Fill** -Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#fill) property to customize the fill color of empty points in the series. +Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#fill) property to customize the fill color of empty points in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -208,7 +208,7 @@ Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Border** -Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#border) property to customize the width and color of the border for empty points. +Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#border) property to customize the width and color of the border for empty points. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -249,15 +249,15 @@ The stack labels in stacked charts display cumulative total values for stack seg ### Stack labels customization Stack labels have various properties for customization to enhance the visuals based on your requirements: -* [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. -* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. -* [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. -* [`angle`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. -* [`rx`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. -* [`ry`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. -* [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#margin) - Configures the margin around the stack label (left, right, top, and bottom). -* [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#border) - Configures the appearance of the stack label's border. -* [`font`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings/#font) - Customizes the stack label text, including font size, color, style, weight, and family. +* [`visible`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`format`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`angle`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`rx`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`ry`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`margin`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#border) - Configures the appearance of the stack label's border. +* [`font`](https://ej2.syncfusion.com/angular/documentation/api/chart/stackLabelSettings#font) - Customizes the stack label text, including font size, color, style, weight, and family. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/series/series-types/line-types/stacked-line.md b/chart-sdk/angular/charts/series/series-types/line-types/stacked-line.md index 0085ce910..f77a4379e 100644 --- a/chart-sdk/angular/charts/series/series-types/line-types/stacked-line.md +++ b/chart-sdk/angular/charts/series/series-types/line-types/stacked-line.md @@ -20,7 +20,7 @@ To render a [100% stacked line](https://www.syncfusion.com/angular-components/an Here's a concise guide on how to do this: -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#type) as `StackingLine100` in your chart configuration. This indicates that the data should be represented as a 100% stacked line chart, with each data series shown as a percentage of the total. This chart type ensures that all lines are stacked to always reach 100% at each data point, allowing for easy comparison of the proportional relationships between series without the influence of absolute values. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) as `StackingLine100` in your chart configuration. This indicates that the data should be represented as a 100% stacked line chart, with each data series shown as a percentage of the total. This chart type ensures that all lines are stacked to always reach 100% at each data point, allowing for easy comparison of the proportional relationships between series without the influence of absolute values. 2. **Provide StackingLineSeriesService**: Use the `@NgModule.providers` method to inject the `StackingLineSeriesService` module into your chart. This step is essential, as it ensures that the necessary functionalities for rendering 100% stacked line series are available in your chart. @@ -42,7 +42,7 @@ Here's a concise guide on how to do this: ## Binding data with series -You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#yname) properties. +You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#yname) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -66,7 +66,7 @@ The following properties can be used to customize the 100% stacked line series. **Fill** -The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property determines the color applied to the series. +The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property determines the color applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -84,7 +84,7 @@ The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDi {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/100-stackedline-cs" %} -The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property can be used to apply a gradient color to the 100% stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property can be used to apply a gradient color to the 100% stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -104,7 +104,7 @@ The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDi **Opacity** -The [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -124,7 +124,7 @@ The [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/serie **Dash array** -The [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#dasharray) property determines the pattern of dashes and gaps in the series. +The [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dasharray) property determines the pattern of dashes and gaps in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -144,7 +144,7 @@ The [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/ser **Width** -The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#width) property specifies the stroke width applied to the series. +The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#width) property specifies the stroke width applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -168,7 +168,7 @@ Data points with `null` or `undefined` values are considered empty. Empty data p **Mode** -Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. +Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -188,7 +188,7 @@ Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Fill** -Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#fill) property to customize the fill color of empty points in the series. +Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#fill) property to customize the fill color of empty points in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -208,7 +208,7 @@ Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Border** -Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#border) property to customize the width and color of the border for empty points. +Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#border) property to customize the width and color of the border for empty points. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -230,7 +230,7 @@ Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/em ### Series render -The [`seriesRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartComponent/#seriesrender) event allows you to customize series properties, such as [`data`](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs/#data), [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs/#fill), and [`name`](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs/#name), before they are rendered on the chart. +The [`seriesRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartComponent#seriesrender) event allows you to customize series properties, such as [`data`](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs#data), [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs#fill), and [`name`](https://ej2.syncfusion.com/angular/documentation/api/chart/iSeriesRenderEventArgs#name), before they are rendered on the chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -251,7 +251,7 @@ The [`seriesRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/ ### Point render -The [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartComponent/#pointrender) event allows you to customize each data point before it is rendered on the chart. +The [`pointRender`](https://ej2.syncfusion.com/angular/documentation/api/chart/chartComponent#pointrender) event allows you to customize each data point before it is rendered on the chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/series/series-types/line-types/step-line.md b/chart-sdk/angular/charts/series/series-types/line-types/step-line.md index 4634dbf07..569fd07f4 100644 --- a/chart-sdk/angular/charts/series/series-types/line-types/step-line.md +++ b/chart-sdk/angular/charts/series/series-types/line-types/step-line.md @@ -20,7 +20,7 @@ To render a [step line](https://www.syncfusion.com/angular-components/angular-ch Here's a concise guide on how to do this: -1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#type) as `StepLine` in your chart configuration. This indicates that the data should be represented as a step line chart, which connects data points with horizontal and vertical lines, creating a staircase effect. This type is ideal for displaying data that changes at distinct points. +1. **Set the series type**: Define the series [`type`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#type) as `StepLine` in your chart configuration. This indicates that the data should be represented as a step line chart, which connects data points with horizontal and vertical lines, creating a staircase effect. This type is ideal for displaying data that changes at distinct points. 2. **Provide StepLineSeriesService**: Inject the `StepLineSeriesService` into your component using the `providers` array in the `@NgModule` decorator. This step is essential, as it ensures that the necessary functionalities for rendering step line series are available in your chart. @@ -42,7 +42,7 @@ Here's a concise guide on how to do this: ## Binding data with series -You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#yname) properties. +You can bind data to the chart using the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#datasource) property within the series configuration. This allows you to connect a JSON dataset or remote data to your chart. To display the data correctly, map the fields from the data to the chart series [`xName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#yname) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -66,7 +66,7 @@ The following properties can be used to customize the `step line` series. **Fill** -The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property determines the color applied to the series. +The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property determines the color applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -84,7 +84,7 @@ The [fill](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDire {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/charts/series/stepline-cs" %} -The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#fill) property can be used to apply a gradient color to the step line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#fill) property can be used to apply a gradient color to the step line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -104,7 +104,7 @@ The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDi **Opacity** -The [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#opacity) property specifies the transparency level of the fill. Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -124,7 +124,7 @@ The [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/chart/serie **Dash array** -The [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#dasharray) property determines the pattern of dashes and gaps in the series. +The [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#dasharray) property determines the pattern of dashes and gaps in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -144,7 +144,7 @@ The [`dashArray`](https://ej2.syncfusion.com/angular/documentation/api/chart/ser **Width** -The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#width) property specifies the stroke width applied to the series. +The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#width) property specifies the stroke width applied to the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -164,7 +164,7 @@ The [`width`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesD **Step** -Use the [`step`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective/#step) property to change the position of the steps in a step line series. +Use the [`step`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesDirective#step) property to change the position of the steps in a step line series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -184,7 +184,7 @@ Use the [`step`](https://ej2.syncfusion.com/angular/documentation/api/chart/seri **No risers** -You can eliminate the vertical lines between points by using the [`noRisers`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel/#norisers) property in a series. This approach is useful for highlighting trends without the distraction of risers. +You can eliminate the vertical lines between points by using the [`noRisers`](https://ej2.syncfusion.com/angular/documentation/api/chart/seriesModel#norisers) property in a series. This approach is useful for highlighting trends without the distraction of risers. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -208,7 +208,7 @@ Data points with `null` or `undefined` values are considered empty. Empty data p **Mode** -Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. +Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is `Gap`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -228,7 +228,7 @@ Use the [`mode`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Fill** -Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#fill) property to customize the fill color of empty points in the series. +Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#fill) property to customize the fill color of empty points in the series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -248,7 +248,7 @@ Use the [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/empt **Border** -Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel/#border) property to customize the width and color of the border for empty points. +Use the [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/emptyPointSettingsModel#border) property to customize the width and color of the border for empty points. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/charts/title-subtitle.md b/chart-sdk/angular/charts/title-subtitle.md index 287451d7c..314c76f74 100644 --- a/chart-sdk/angular/charts/title-subtitle.md +++ b/chart-sdk/angular/charts/title-subtitle.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart title and subtitle in Angular Chart component | Syncfusion +title: Title and Subtitle in Angular Chart | Syncfusion description: Learn here all about Chart title and subtitle in Syncfusion Angular Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart title and subtitle @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and Subtitle in Angular Chart Component +# Title and Subtitle in Angular Chart Chart titles and subtitles help provide context for the visualized data. The title typically indicates the main subject or metric represented in the chart, while the subtitle adds supporting details such as data sources, time ranges, or explanatory notes. Both elements can be customized in terms of position, alignment, and style to align with application design requirements. diff --git a/chart-sdk/angular/charts/understanding-chart.md b/chart-sdk/angular/charts/understanding-chart.md index ccfc94d3a..5b29623ff 100644 --- a/chart-sdk/angular/charts/understanding-chart.md +++ b/chart-sdk/angular/charts/understanding-chart.md @@ -1,13 +1,14 @@ --- layout: post -title: Understanding Angular Chart component | Syncfusion +title: Understanding the Chart in Angular Chart | Syncfusion description: Explore and understand the Syncfusion Angular Chart component in Essential JS 2 and discover its powerful features. platform: chart-sdk control: Understanding documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Understanding the Angular Chart component + +# Understanding the Chart in Angular Chart The [Angular Charts](https://www.syncfusion.com/angular-components/angular-charts) component is a versatile visualization tool that presents data using a wide range of graphical formats. Each chart is composed of essential elements—such as the title, series, tooltip, legend, and axes—that work together to provide clear, interactive, and meaningful insights. Understanding these elements helps in configuring and customizing charts for various analytical needs. diff --git a/chart-sdk/angular/circular-gauge/accessibility.md b/chart-sdk/angular/circular-gauge/accessibility.md index f37e371de..cd9b09c22 100644 --- a/chart-sdk/angular/circular-gauge/accessibility.md +++ b/chart-sdk/angular/circular-gauge/accessibility.md @@ -1,15 +1,15 @@ --- layout: post -title: Accessibility in Angular Circular gauge component | Syncfusion +title: Accessibility in Angular Circular Gauge | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Accessibility +control: Accessibility documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Circular gauge component +# Accessibility in Angular Circular Gauge The Circular Gauge component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/angular/circular-gauge/ej1-api-migration.md b/chart-sdk/angular/circular-gauge/ej1-api-migration.md index f3e3454c3..58ba2af22 100644 --- a/chart-sdk/angular/circular-gauge/ej1-api-migration.md +++ b/chart-sdk/angular/circular-gauge/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in Angular Circular gauge component | Syncfusion +title: Migration from Essential JS 1 in Angular Circular Gauge | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Ej1 api migration +control: EJ1 API Migration documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in Angular Circular gauge component +# Migration from Essential JS 1 in Angular Circular Gauge This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/circular-gauge/gauge-animation.md b/chart-sdk/angular/circular-gauge/gauge-animation.md index 6565a4067..a475037ea 100644 --- a/chart-sdk/angular/circular-gauge/gauge-animation.md +++ b/chart-sdk/angular/circular-gauge/gauge-animation.md @@ -1,17 +1,17 @@ --- layout: post -title: Animation in Angular Circular Gauge component | Syncfusion +title: Animation in Angular Circular Gauge | Syncfusion description: Learn here all about animation in the Syncfusion Angular Circular Gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Circular Gauge +control: Animation documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Animation in Angular Circular Gauge component +# Animation in Angular Circular Gauge -All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#animationduration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. +All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#animationduration) property. The animation for the Circular Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. 1. The axis line will be animated in the rendering direction (clockwise or anticlockwise). 2. Each tick line and label will then be animated. diff --git a/chart-sdk/angular/circular-gauge/gauge-annotations.md b/chart-sdk/angular/circular-gauge/gauge-annotations.md index bf21461dc..59d86c1ec 100644 --- a/chart-sdk/angular/circular-gauge/gauge-annotations.md +++ b/chart-sdk/angular/circular-gauge/gauge-annotations.md @@ -1,14 +1,14 @@ --- layout: post -title: Gauge annotations in Angular Circular gauge component | Syncfusion +title: Annotations in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge annotations in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge annotations +control: Annotations documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge annotations in Angular Circular gauge component +# Annotations in Angular Circular Gauge @@ -16,7 +16,7 @@ Annotations are used to mark a specific area of interest in the gauge with texts ## Content -You can place any custom element on the axis area by assigning the id of the element to [`content`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation/#content-string) property of [`annotation`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation) object. +You can place any custom element on the axis area by assigning the id of the element to [`content`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation#content-string) property of [`annotation`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation) object. >Note: To use annotation feature, we need to inject `AnnotationsService` into the `NgModule.providers`. @@ -34,7 +34,7 @@ You can place any custom element on the axis area by assigning the id of the ele ## Position -Annotation can be placed around the axis by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation/#radius-string) and [`angle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation/#angle-number) property. +Annotation can be placed around the axis by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation#radius-string) and [`angle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/annotation#angle-number) property. For example, if the angle is 90 degree and the radius is 110%, then the annotation, will be placed at the right side of the axis. Radius of the annotation takes value either in pixel or percentage. @@ -70,4 +70,4 @@ As the annotation allows you to place any custom element, we can initialize a ga ## See also -* [Tooltip for Annotation](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-user-interaction/#tooltip-for-annotations/) +* [Tooltip for Annotation](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-user-interaction#tooltip-for-annotations) diff --git a/chart-sdk/angular/circular-gauge/gauge-appearance.md b/chart-sdk/angular/circular-gauge/gauge-appearance.md index ef30422f1..e6c947686 100644 --- a/chart-sdk/angular/circular-gauge/gauge-appearance.md +++ b/chart-sdk/angular/circular-gauge/gauge-appearance.md @@ -1,19 +1,19 @@ --- layout: post -title: Gauge appearance in Angular Circular gauge component | Syncfusion +title: Appearance in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge appearance in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge appearance +control: Appearance documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge appearance in Angular Circular gauge component +# Appearance in Angular Circular Gauge ## Gauge Title -Circular gauge can be given a title by using [`title`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#title-string) property, to show the information about the gauge. -Title can be customized by using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#titlestyle-fontmodel) property in gauge. +Circular gauge can be given a title by using [`title`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#title-string) property, to show the information about the gauge. +Title can be customized by using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#titlestyle-fontmodel) property in gauge. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,8 +31,8 @@ Title can be customized by using [`titleStyle`](https://ej2.syncfusion.com/angul -Gauge can be positioned anywhere in the container with the help of [`centerX`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#centerx-string) and [`centerY`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#centery-string) property and it accepts values either in percentage or in pixels. -The default value of the [`centerX`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#centerx-string) and [`centerY`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#centery-string) property is 50%, which means gauge will get rendered to the centre of the container. +Gauge can be positioned anywhere in the container with the help of [`centerX`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#centerx-string) and [`centerY`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#centery-string) property and it accepts values either in percentage or in pixels. +The default value of the [`centerX`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#centerx-string) and [`centerY`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#centery-string) property is 50%, which means gauge will get rendered to the centre of the container. **In Pixel** @@ -54,7 +54,7 @@ You can set the mid point of the gauge in pixel as demonstrated below, **In Percentage** By setting the value in percentage, gauge gets its mid point with respect to its plot area. -For example, when the [`centerX`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#centerx-string) value as '0%' and [`centerY`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#centery-string) value is ‘50%’, gauge will get positioned at the top left corner of the plot area. +For example, when the [`centerX`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#centerx-string) value as '0%' and [`centerY`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#centery-string) value is ‘50%’, gauge will get positioned at the top left corner of the plot area. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -73,7 +73,7 @@ For example, when the [`centerX`](https://ej2.syncfusion.com/angular/documentati **Customize the gauge background** -Using [`background`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#background-string) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#border-bordermodel) properties, you can change the background color and border of the circular gauge. +Using [`background`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#background-string) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#border-bordermodel) properties, you can change the background color and border of the circular gauge. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -89,7 +89,7 @@ Using [`background`](https://ej2.syncfusion.com/angular/documentation/api/circul **Gauge Margin** -You can set margin for gauge from its container through [`margin`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#margin-marginmodel) property. +You can set margin for gauge from its container through [`margin`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#margin-marginmodel) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/circular-gauge/gauge-axes.md b/chart-sdk/angular/circular-gauge/gauge-axes.md index 726e1422f..0b7a96bfc 100644 --- a/chart-sdk/angular/circular-gauge/gauge-axes.md +++ b/chart-sdk/angular/circular-gauge/gauge-axes.md @@ -1,15 +1,15 @@ --- layout: post -title: Gauge axes in Angular Circular gauge component | Syncfusion +title: Axes in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge axes in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge axes +control: Axes documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge axes in Angular Circular gauge component +# Axes in Angular Circular Gauge By default, gauge will be displayed with an axis. Each axis contains its own ranges, pointers and annotation. @@ -18,7 +18,7 @@ Each axis contains its own ranges, pointers and annotation. ## Axis Customization -You can customize the width and color of an axis line by using [`lineStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/line) property. Background for an axis can be customized by using [`background`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#background-string) property. +You can customize the width and color of an axis line by using [`lineStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/line) property. Background for an axis can be customized by using [`background`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#background-string) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -35,7 +35,7 @@ You can customize the width and color of an axis line by using [`lineStyle`](htt ## Angles and Direction -Circular gauge axis can sweep from 0 to 360 degrees. By default start angle of an axis is 200 degree and end angle is 160 degree and you can customize this option by using [`startAngle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#startangle-number) and [`endAngle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#endangle-number) property. +Circular gauge axis can sweep from 0 to 360 degrees. By default start angle of an axis is 200 degree and end angle is 160 degree and you can customize this option by using [`startAngle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#startangle-number) and [`endAngle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#endangle-number) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -50,7 +50,7 @@ Circular gauge axis can sweep from 0 to 360 degrees. By default start angle of a {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/circular-gauge/gauge-axes-cs2" %} -The [`direction`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#direction-string) property enables you to render the gauge axis either in `ClockWise` or in `AntiClockWise` direction. +The [`direction`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#direction-string) property enables you to render the gauge axis either in `ClockWise` or in `AntiClockWise` direction. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -67,7 +67,7 @@ The [`direction`](https://ej2.syncfusion.com/angular/documentation/api/circular- ## Axis Radius -By default, radius of an axis is calculated based on the available size. You can customize this, by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#radius-string) property. +By default, radius of an axis is calculated based on the available size. You can customize this, by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#radius-string) property. It takes value either in `percentage` or in `pixel`. **In Pixel** @@ -107,8 +107,8 @@ For example, when the radius is ‘50%’, gauge renders to half of the availabl ## Ticks -You can customize the [`height`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#color-string), [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#color-string) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#width-number) of major and minor ticks by using [`majorTicks`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#majorticks-tickmodel) and [`minorTicks`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#minorticks-tickmodel) property. -By default, [`interval`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#interval-number) for `majorTicks` will be calculated automatically and also you can customize the interval for major and minor ticks using `interval` property. +You can customize the [`height`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#color-string), [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#color-string) and [`width`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#width-number) of major and minor ticks by using [`majorTicks`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#majorticks-tickmodel) and [`minorTicks`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#minorticks-tickmodel) property. +By default, [`interval`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#interval-number) for `majorTicks` will be calculated automatically and also you can customize the interval for major and minor ticks using `interval` property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -124,7 +124,7 @@ By default, [`interval`](https://ej2.syncfusion.com/angular/documentation/api/ci **Tick Position** -Both minor and major ticks can be moved by using [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#offset-number) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#position-string) property. The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#offset-number) defines the distance between the axis and ticks. By default, offset value is 0. The [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel/#position-string) will place the ticks either inside or outside of the axis. +Both minor and major ticks can be moved by using [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#offset-number) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#position-string) property. The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#offset-number) defines the distance between the axis and ticks. By default, offset value is 0. The [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tickModel#position-string) will place the ticks either inside or outside of the axis. By default, ticks will be placed `inside` the axis. @@ -142,7 +142,7 @@ By default, ticks will be placed `inside` the axis. ## Labels -Labels of an axis can be customized by using [`font`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#font-fontmodel) property in [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#labelstyle-labelmodel) options. +Labels of an axis can be customized by using [`font`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#font-fontmodel) property in [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#labelstyle-labelmodel) options. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -158,10 +158,10 @@ Labels of an axis can be customized by using [`font`](https://ej2.syncfusion.com **Label Position** -Labels can be moved by using [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#offset-number) or [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#position-string) property. -The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#offset-number) defines the distance between the labels and ticks. +Labels can be moved by using [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#offset-number) or [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#position-string) property. +The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#offset-number) defines the distance between the labels and ticks. By default, offset value is 0. -The [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#position-string) will place the labels either inside or outside of the axis. +The [`position`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#position-string) will place the labels either inside or outside of the axis. By default, labels will be placed `inside` the axis. {% tabs %} @@ -178,7 +178,7 @@ By default, labels will be placed `inside` the axis. **Auto Angle** -Labels can be swept along the axis angle by enabling [`autoAngle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#autoangle-boolean) property. +Labels can be swept along the axis angle by enabling [`autoAngle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#autoangle-boolean) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -195,7 +195,7 @@ Labels can be swept along the axis angle by enabling [`autoAngle`](https://ej2.s **Smart Labels** When an axis makes a complete circle, then the first and last label of the axis will get overlap with each other. -In this scenario, you can either hide 1st or last label using [`hiddenLabel`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#hiddenlabel-string) property. +In this scenario, you can either hide 1st or last label using [`hiddenLabel`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#hiddenlabel-string) property. When `hiddenLabel` value is `First`, then the 1st label will be hidden and when the `hiddenLabel` value is 'Last', then the last label will be hidden. {% tabs %} @@ -212,7 +212,7 @@ When `hiddenLabel` value is `First`, then the 1st label will be hidden and when **Label Format** -Axis labels can be formatted by using [`format`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel/#format-string) property in [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/label) and its supports all globalize format. +Axis labels can be formatted by using [`format`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/labelModel#format-string) property in [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/label) and its supports all globalize format. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -320,7 +320,7 @@ When the axis labels overlap with each other, you can hide the intersected label ## Minimum and Maximum -The [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#minimum-number) and [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis/#maximum-number) properties enables you to customize the start and end values of an axis. +The [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#minimum-number) and [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/axis#maximum-number) properties enables you to customize the start and end values of an axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/circular-gauge/gauge-dimensions.md b/chart-sdk/angular/circular-gauge/gauge-dimensions.md index 7b6e4f5c3..01c8ce784 100644 --- a/chart-sdk/angular/circular-gauge/gauge-dimensions.md +++ b/chart-sdk/angular/circular-gauge/gauge-dimensions.md @@ -1,15 +1,15 @@ --- layout: post -title: Gauge dimensions in Angular Circular gauge component | Syncfusion +title: Dimensions in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge dimensions in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge dimensions +control: Dimensions documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge dimensions in Angular Circular gauge component +# Dimensions in Angular Circular Gauge ## Size for Container @@ -38,7 +38,7 @@ You can set width and height to the element of the container. It determines the -You can also set size for the gauge directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#width-string) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#height-string) properties. +You can also set size for the gauge directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#width-string) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#height-string) properties. **In Pixel** diff --git a/chart-sdk/angular/circular-gauge/gauge-legend.md b/chart-sdk/angular/circular-gauge/gauge-legend.md index f00769980..f1444033a 100644 --- a/chart-sdk/angular/circular-gauge/gauge-legend.md +++ b/chart-sdk/angular/circular-gauge/gauge-legend.md @@ -1,15 +1,15 @@ --- layout: post -title: Gauge legend in Angular Circular gauge component | Syncfusion +title: Legend in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge legend in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge legend +control: Legend documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge legend in Angular Circular gauge component +# Legend in Angular Circular Gauge Legend provides valuable information for interpreting what the circular gauge axis range displays, and they can be represented in various colors, shapes, and other identifiers based on the data. It gives a breakdown of what each symbol represents in the axis range of circular gauge. diff --git a/chart-sdk/angular/circular-gauge/gauge-pointers.md b/chart-sdk/angular/circular-gauge/gauge-pointers.md index 4cecfb4c1..7f408b153 100644 --- a/chart-sdk/angular/circular-gauge/gauge-pointers.md +++ b/chart-sdk/angular/circular-gauge/gauge-pointers.md @@ -1,17 +1,17 @@ --- layout: post -title: Gauge pointers in Angular Circular Gauge Component | Syncfusion +title: Pointers in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge pointers in Syncfusion Angular Circular Gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge pointers +control: Pointers documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge pointers in Angular Circular Gauge Component +# Pointers in Angular Circular Gauge -Pointers are used to indicate values on the axis. Value of the pointer can be modified using the [`value`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#value-number) property. +Pointers are used to indicate values on the axis. Value of the pointer can be modified using the [`value`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#value-number) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -26,14 +26,14 @@ Pointers are used to indicate values on the axis. Value of the pointer can be mo {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/circular-gauge/gauge-pointers-cs1" %} Gauge supports 3 types of pointers such as `Needle`, `RangeBar` and `Marker`. -You can choose any one of the pointer by using [`type`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#type-string) property. +You can choose any one of the pointer by using [`type`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#type-string) property. ## Needle Pointers A needle pointer contains three parts, a needle, a cap / knob and a tail. -The length of the needle can be customized by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#radius-string) property. -The length of the tail can be customized by using [`length`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/needleTailModel/#length-string) property. -The radius of the cap can be customized by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/capModel/#radius-number) in cap object. +The length of the needle can be customized by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#radius-string) property. +The length of the tail can be customized by using [`length`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/needleTailModel#length-string) property. +The radius of the cap can be customized by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/capModel#radius-number) in cap object. The needle and tail length takes value either in `percentage` or `pixel`. {% tabs %} @@ -52,8 +52,8 @@ The needle and tail length takes value either in `percentage` or `pixel`. **Customization** -Needle color and width can be customized by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#color-string) and [`pointerWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#pointerwidth-number) property. -Cap and tails can be customized by using [`cap`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#cap-capmodel) and [`needleTail`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#needletail-needletailmodel) object. +Needle color and width can be customized by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#color-string) and [`pointerWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#pointerwidth-number) property. +Cap and tails can be customized by using [`cap`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#cap-capmodel) and [`needleTail`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#needletail-needletailmodel) object. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -69,7 +69,7 @@ Cap and tails can be customized by using [`cap`](https://ej2.syncfusion.com/angu -The appearance of the needle pointer can be customized by using [`needleStartWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#needlestartwidth) and [`needleEndWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#needleendwidth). +The appearance of the needle pointer can be customized by using [`needleStartWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#needlestartwidth) and [`needleEndWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#needleendwidth). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -102,7 +102,7 @@ RangeBar starts from the beginning of the gauge and ends at the pointer value. **Customization** -RangeBar can be customized in terms of color, border and thickness by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#color-string), [`border`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#border-bordermodel) and [`pointerWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#pointerwidth-number) property. +RangeBar can be customized in terms of color, border and thickness by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#color-string), [`border`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#border-bordermodel) and [`pointerWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#pointerwidth-number) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -136,7 +136,7 @@ The start and end pointers of range bar in the circular gauge are rounded to for ## Marker Pointer -Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using [`markerShape`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#markershape-string) +Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using [`markerShape`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#markershape-string) property in pointer. Gauge supports the below marker shape. * Circle @@ -145,7 +145,7 @@ Gauge supports the below marker shape. * InvertedTriangle * Diamond -We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting [`markerShape`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#markershape-string) to Image and assigning  image path to [`imageUrl`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#imageurl-string)in pointer. +We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting [`markerShape`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#markershape-string) to Image and assigning  image path to [`imageUrl`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#imageurl-string)in pointer. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -161,7 +161,7 @@ We can use image instead of rendering marker shape to denote the pointer value. **Customization** -The marker can be customized in terms of color, border, width and height by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#color-string), [`border`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#border-bordermodel), [`markerWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#markerwidth-number) and [`markerHeight`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#markerheight-number) property in [`pointer`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/). +The marker can be customized in terms of color, border, width and height by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#color-string), [`border`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#border-bordermodel), [`markerWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#markerwidth-number) and [`markerHeight`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#markerheight-number) property in [`pointer`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -179,7 +179,7 @@ The marker can be customized in terms of color, border, width and height by usin ## Dragging Pointer -The pointers can be dragged along the axis line by clicking and dragging them. To enable or disable the drag functionality for all pointers across all axes, use the [enablePointerDrag](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/circularGaugeModel/#enablepointerdrag) property. When this property is set to **true**, all pointers can be dynamically adjusted by dragging. Setting it to **false** keeps all pointers fixed in their specified positions. +The pointers can be dragged along the axis line by clicking and dragging them. To enable or disable the drag functionality for all pointers across all axes, use the [enablePointerDrag](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/circularGaugeModel#enablepointerdrag) property. When this property is set to **true**, all pointers can be dynamically adjusted by dragging. Setting it to **false** keeps all pointers fixed in their specified positions. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -195,7 +195,7 @@ The pointers can be dragged along the axis line by clicking and dragging them. T ### Enabling drag functionality for a specific pointer -To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointerDirective/#enabledrag) property in the required pointer model. +To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointerDirective#enabledrag) property in the required pointer model. >When the `enableDrag` property is enabled for any individual pointer model, the `enablePointerDrag` property becomes ineffective. @@ -231,9 +231,9 @@ In addition to the default pointer, you can add n number of pointer to an axis b ## Animation -Pointer will get animate on loading the gauge, this can be handled by using [`animation`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer/#animation-animationmodel) property in pointer. -The [`enable`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/animationModel/#enable-boolean) property in animation allows you to enable or disable the animation. -The [`duration`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/animationModel/#duration-number) property specify the duration of the animation in milliseconds. +Pointer will get animate on loading the gauge, this can be handled by using [`animation`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/pointer#animation-animationmodel) property in pointer. +The [`enable`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/animationModel#enable-boolean) property in animation allows you to enable or disable the animation. +The [`duration`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/animationModel#duration-number) property specify the duration of the animation in milliseconds. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -256,7 +256,7 @@ Gradient support allows to add multiple colors in the ranges and pointers of the ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient/#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient/#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient/#colorstop) property. +Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient#colorstop) property. The linear gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample. @@ -274,7 +274,7 @@ The linear gradient can be applied to all pointer types like marker, range bar a ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient/#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient/#colorstop) property. +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient#colorstop) property. The radial gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample. diff --git a/chart-sdk/angular/circular-gauge/gauge-print-and-export.md b/chart-sdk/angular/circular-gauge/gauge-print-and-export.md index 6ae19f1dd..120055286 100644 --- a/chart-sdk/angular/circular-gauge/gauge-print-and-export.md +++ b/chart-sdk/angular/circular-gauge/gauge-print-and-export.md @@ -1,19 +1,19 @@ --- layout: post -title: Gauge print and export in Angular Circular gauge component| Syncfusion +title: Print and Export in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge print and export in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge print and export +control: Print and Export documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge print and export in Angular Circular gauge component +# Print and Export in Angular Circular Gauge ## Print -To use the print functionality, we should inject the `PrintService` into the `@NgModule.providers` and set the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#allowprint) property to **true**. The rendered circular gauge can be printed directly from the browser by calling the method [`print`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#print). +To use the print functionality, we should inject the `PrintService` into the `@NgModule.providers` and set the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#allowprint) property to **true**. The rendered circular gauge can be printed directly from the browser by calling the method [`print`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#print). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,7 +31,7 @@ To use the print functionality, we should inject the `PrintService` into the `@N ### Image Export -To use the image export functionality, we should inject the `ImageExportService` into the `@NgModule.providers` and set the [`allowImageExport`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#allowimageexport) property to **true**. The rendered circular gauge can be exported as an image using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#export) method. The method requires two parameters: image type and file name. The circular gauge can be exported as an image in the following formats. +To use the image export functionality, we should inject the `ImageExportService` into the `@NgModule.providers` and set the [`allowImageExport`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#allowimageexport) property to **true**. The rendered circular gauge can be exported as an image using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#export) method. The method requires two parameters: image type and file name. The circular gauge can be exported as an image in the following formats. * JPEG * PNG @@ -49,7 +49,7 @@ To use the image export functionality, we should inject the `ImageExportService` {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/circular-gauge/gauge-print-and-export-cs2" %} -We can get the image file as base64 string for the JPEG and PNG formats. The circular gauge can be exported to image as a base64 string using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string. +We can get the image file as base64 string for the JPEG and PNG formats. The circular gauge can be exported to image as a base64 string using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -65,7 +65,7 @@ We can get the image file as base64 string for the JPEG and PNG formats. The cir ### PDF Export -To use the PDF export functionality, we should inject the `PdfExportService` into the `@NgModule.providers` and set the [`allowPdfExport`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#allowpdfexport) property to **true**. The rendered circular gauge can be exported as PDF using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#export) method. The [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and "0" indicates portrait and "1" indicates landscape. +To use the PDF export functionality, we should inject the `PdfExportService` into the `@NgModule.providers` and set the [`allowPdfExport`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#allowpdfexport) property to **true**. The rendered circular gauge can be exported as PDF using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#export) method. The [`export`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and "0" indicates portrait and "1" indicates landscape. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/circular-gauge/gauge-ranges.md b/chart-sdk/angular/circular-gauge/gauge-ranges.md index 7e92112ef..894e61a7a 100644 --- a/chart-sdk/angular/circular-gauge/gauge-ranges.md +++ b/chart-sdk/angular/circular-gauge/gauge-ranges.md @@ -1,21 +1,21 @@ --- layout: post -title: Gauge ranges in Angular Circular gauge component | Syncfusion +title: Ranges in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge ranges in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge ranges +control: Ranges documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge ranges in Angular Circular gauge component +# Ranges in Angular Circular Gauge -You can categories certain interval on gauge axis using [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#properties) property. +You can categories certain interval on gauge axis using [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#properties) property. ## Start and End -Start and end value of a range in an axis can be customized by using [`start`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#start-number) and [`end`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#end-number) properties. +Start and end value of a range in an axis can be customized by using [`start`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#start-number) and [`end`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#end-number) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,7 +31,7 @@ Start and end value of a range in an axis can be customized by using [`start`](h ## Customization -Color and thickness of the range can be customized by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#color-string), [`startWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#startwidth-number) and [`endWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#endwidth-number) property. +Color and thickness of the range can be customized by using [`color`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#color-string), [`startWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#startwidth-number) and [`endWidth`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#endwidth-number) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -49,7 +49,7 @@ Color and thickness of the range can be customized by using [`color`](https://ej ## Radius -You can place the range inside or outside of the axis by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range/#radius-string) property. +You can place the range inside or outside of the axis by using [`radius`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/range#radius-string) property. The radius of the range can takes value either in percentage or in pixels. By default, ranges take 100% of the axis radius. @@ -92,7 +92,7 @@ For example, when the radius is ‘50%’, range renders to half of the axis rad ## Dragging Range -The ranges can be dragged on the axis line by clicking and dragging the same. To enable or disable the range drag, use the [`enableRangeDrag`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/circularGaugeModel/#enablerangedrag) property. +The ranges can be dragged on the axis line by clicking and dragging the same. To enable or disable the range drag, use the [`enableRangeDrag`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/circularGaugeModel#enablerangedrag) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -149,7 +149,7 @@ Gradient support allows to add multiple colors in the ranges and pointers of the ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient/#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient/#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient/#colorstop) property. +Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/linearGradient#colorstop) property. To apply linear gradient to the range, follow the below code sample. @@ -167,7 +167,7 @@ To apply linear gradient to the range, follow the below code sample. ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient/#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient/#colorstop) property. +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/radialGradient#colorstop) property. To apply radial gradient to the range, follow the below code sample. @@ -185,4 +185,4 @@ To apply radial gradient to the range, follow the below code sample. ## See also -* [Tooltip for Ranges](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-user-interaction/#tooltip-for-ranges/) +* [Tooltip for Ranges](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-user-interaction#tooltip-for-ranges) diff --git a/chart-sdk/angular/circular-gauge/gauge-user-interaction.md b/chart-sdk/angular/circular-gauge/gauge-user-interaction.md index 8efd959f3..09225bfbf 100644 --- a/chart-sdk/angular/circular-gauge/gauge-user-interaction.md +++ b/chart-sdk/angular/circular-gauge/gauge-user-interaction.md @@ -1,15 +1,15 @@ --- layout: post -title: Gauge user interaction in Angular Circular gauge component |Syncfusion +title: User Interaction in Angular Circular Gauge | Syncfusion description: Learn here all about Gauge user interaction in Syncfusion Angular Circular gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge user interaction +control: User Interaction documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge user interaction in Angular Circular gauge component +# User Interaction in Angular Circular Gauge ## Tooltip for pointers @@ -19,7 +19,7 @@ Circular gauge will displays the pointer details through [tooltip](https://ej2.s **Enable Tooltip** -By default, tooltip is not visible. Enable the tooltip by setting [`enable`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tooltipSettings/#enable-boolean) property to true and by injecting `GaugeTooltipService` into the `NgModule.providers`. +By default, tooltip is not visible. Enable the tooltip by setting [`enable`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tooltipSettings#enable-boolean) property to true and by injecting `GaugeTooltipService` into the `NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -37,7 +37,7 @@ By default, tooltip is not visible. Enable the tooltip by setting [`enable`](htt **Template** -Any HTML elements can be displayed in the tooltip by using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tooltipSettings/#template-string) property of the tooltip. +Any HTML elements can be displayed in the tooltip by using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/tooltipSettings#template-string) property of the tooltip. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -99,7 +99,7 @@ The following code example shows the tooltip for the pointers, ranges and annota ## Pointer Drag Pointers can be dragged over the axis value. This can be achieved by clicking and dragging the pointer. -To enable or disable the pointer drag, you can use [`enablePointerDrag`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/#enablepointerdrag-boolean) property. +To enable or disable the pointer drag, you can use [`enablePointerDrag`](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge#enablepointerdrag-boolean) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/circular-gauge/getting-started.md b/chart-sdk/angular/circular-gauge/getting-started.md index b3019d803..0184c266d 100644 --- a/chart-sdk/angular/circular-gauge/getting-started.md +++ b/chart-sdk/angular/circular-gauge/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Angular Circular gauge component | Syncfusion +title: Getting Started with Angular Circular Gauge | Syncfusion description: Check out and learn about the Getting started with Angular Circular gauge component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with Angular Circular gauge component +# Getting Started with Angular Circular Gauge This article describes the steps to create a simple Circular Gauge and demonstrates its basic usage. diff --git a/chart-sdk/angular/circular-gauge/internationalization.md b/chart-sdk/angular/circular-gauge/internationalization.md index c6d7a6688..62e61704d 100644 --- a/chart-sdk/angular/circular-gauge/internationalization.md +++ b/chart-sdk/angular/circular-gauge/internationalization.md @@ -1,26 +1,26 @@ --- layout: post -title: Internationalization in Angular Circular Gauge component | Syncfusion +title: Internationalization in Angular Circular Gauge | Syncfusion description: Learn here all about Internationalization in Syncfusion Angular Circular Gauge component of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Internationalization +control: Internationalization documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in Angular Circular Gauge component +# Internationalization in Angular Circular Gauge Circular Gauge provides internationalization support for below elements. * Axis Labels * Tooltip -For more information about number formatter, you can refer [internationalization](https://ej2.syncfusion.com/documentation/common/internationalization/). +For more information about number formatter, you can refer [internationalization](https://ej2.syncfusion.com/documentation/common/internationalization). ## Globalization Globalization is the process of designing and developing a component that works in different cultures/locales. -Internationalization library is used to globalize number in Circular Gauge using [format](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/label/#format-string) property in [labelStyle](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/label). +Internationalization library is used to globalize number in Circular Gauge using [format](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/label#format-string) property in [labelStyle](https://ej2.syncfusion.com/angular/documentation/api/circular-gauge/label). **Numeric Format** @@ -41,7 +41,7 @@ In the below example, axis labels are globalized to **EUR**. ## Right-to-left -Circular Gauge can render its elements from right to left, which improves the user experience for certain language users. To do so, set the [enableRtl](https://helpej2.syncfusion.com/angular/documentation/api/circular-gauge/#enablertl) property to **true**. When this property is enabled, elements such as the tooltip and legend will be rendered from right to left. Meanwhile, the axis can be rendered from right to left by setting the [direction](https://helpej2.syncfusion.com/angular/documentation/api/circular-gauge/axisModel/#direction) property to **AntiClockWise**. For more information on axis, click [here](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-axes#angles-and-direction). +Circular Gauge can render its elements from right to left, which improves the user experience for certain language users. To do so, set the [enableRtl](https://helpej2.syncfusion.com/angular/documentation/api/circular-gauge#enablertl) property to **true**. When this property is enabled, elements such as the tooltip and legend will be rendered from right to left. Meanwhile, the axis can be rendered from right to left by setting the [direction](https://helpej2.syncfusion.com/angular/documentation/api/circular-gauge/axisModel#direction) property to **AntiClockWise**. For more information on axis, click [here](https://ej2.syncfusion.com/angular/documentation/circular-gauge/gauge-axes#angles-and-direction). The following example illustrates the right to left rendering of the Circular Gauge. diff --git a/chart-sdk/angular/heatmap-chart/accessibility.md b/chart-sdk/angular/heatmap-chart/accessibility.md index cc363bd38..d6327d99b 100644 --- a/chart-sdk/angular/heatmap-chart/accessibility.md +++ b/chart-sdk/angular/heatmap-chart/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular HeatMap chart component | Syncfusion +title: Accessibility in Angular HeatMap chart | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular HeatMap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular HeatMap chart component +# Accessibility in Angular HeatMap chart The HeatMap component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/angular/heatmap-chart/appearance.md b/chart-sdk/angular/heatmap-chart/appearance.md index c2306ede0..fd7a44955 100644 --- a/chart-sdk/angular/heatmap-chart/appearance.md +++ b/chart-sdk/angular/heatmap-chart/appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in Angular Heatmap chart component | Syncfusion +title: Appearance in Angular HeatMap Chart | Syncfusion description: Learn here all about Appearance in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance @@ -8,15 +8,15 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular Heatmap chart component +# Appearance in Angular HeatMap Chart ## Cell customization -You can customize the cell by using the [cellSettings](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#cellsettings) property. +You can customize the cell by using the [cellSettings](https://ej2.syncfusion.com/angular/documentation/api/heatmap#cellsettings) property. ### Border -Change the width, color, and radius of the heat map cells by using the [border](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#border) property. +Change the width, color, and radius of the heat map cells by using the [border](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#border) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -32,7 +32,7 @@ Change the width, color, and radius of the heat map cells by using the [border]( ### Cell highlighting -Enable or disable the cell highlighting while hovering over the heat map cells by using the [enableCellHighlighting](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#enablecellhighlighting) property. +Enable or disable the cell highlighting while hovering over the heat map cells by using the [enableCellHighlighting](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#enablecellhighlighting) property. >Note: The cell highlighting only works in a SVG rendering mode. @@ -50,7 +50,7 @@ Enable or disable the cell highlighting while hovering over the heat map cells b ### Color gradient mode -The [colorGradientMode](https://ej2.syncfusion.com/angular/documentation/api/heatmap/paletteSettingsModel/#colorgradientmode) property can be used to set the minimum and maximum values for colors based on row and column. Three types of color gradient modes are available. +The [colorGradientMode](https://ej2.syncfusion.com/angular/documentation/api/heatmap/paletteSettingsModel#colorgradientmode) property can be used to set the minimum and maximum values for colors based on row and column. Three types of color gradient modes are available. * **Table**: The minimum and maximum value colors calculated for overall data. * **Row**: The minimum and maximum value colors calculated for each row of data. @@ -72,7 +72,7 @@ The [colorGradientMode](https://ej2.syncfusion.com/angular/documentation/api/hea ## Background color -The background color of the heat map can be customized using the [backgroundColor](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#backgroundcolor) property. +The background color of the heat map can be customized using the [backgroundColor](https://ej2.syncfusion.com/angular/documentation/api/heatmap#backgroundcolor) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -88,7 +88,7 @@ The background color of the heat map can be customized using the [backgroundColo ## Margin -Set the margin for the heatmap from its container by using the [margin](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#margin) property. +Set the margin for the heatmap from its container by using the [margin](https://ej2.syncfusion.com/angular/documentation/api/heatmap#margin) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -104,7 +104,7 @@ Set the margin for the heatmap from its container by using the [margin](https:// ## Title -The title is used to provide a quick information about the data plotted in heatmap. The [text](https://ej2.syncfusion.com/angular/documentation/api/heatmap/title/#text) property is used to set the title for the heatmap. The text style of the title can be customized by using the [textStyle](https://ej2.syncfusion.com/angular/documentation/api/heatmap/title/#textstyle) property. +The title is used to provide a quick information about the data plotted in heatmap. The [text](https://ej2.syncfusion.com/angular/documentation/api/heatmap/title#text) property is used to set the title for the heatmap. The text style of the title can be customized by using the [textStyle](https://ej2.syncfusion.com/angular/documentation/api/heatmap/title#textstyle) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -136,7 +136,7 @@ Add data labels to improve the readability of the HeatMap. This can be achieved ### Customize the data label -The label displayed in the heat map cell can be changed using the [cellRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#cellrender) event. +The label displayed in the heat map cell can be changed using the [cellRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap#cellrender) event. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -152,7 +152,7 @@ The label displayed in the heat map cell can be changed using the [cellRender](h ### Text style -The text attributes of the data label such as font-family, font-size, and color can be customized using the [textStyle](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettingsModel/#textstyle) in the [cellSettings](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettingsModel) property. +The text attributes of the data label such as font-family, font-size, and color can be customized using the [textStyle](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettingsModel#textstyle) in the [cellSettings](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettingsModel) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -168,7 +168,7 @@ The text attributes of the data label such as font-family, font-size, and color ### Format -The format of the data label, such as currency, decimal, percent etc. can be changed using [format](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettingsModel/#format) property. +The format of the data label, such as currency, decimal, percent etc. can be changed using [format](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettingsModel#format) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -184,7 +184,7 @@ The format of the data label, such as currency, decimal, percent etc. can be cha ### Template -Any HTML elements can be added as a template in the data labels by using the [labelTemplate](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#labeltemplate) property of [cellSettings](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings) in the HeatMap. +Any HTML elements can be added as a template in the data labels by using the [labelTemplate](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#labeltemplate) property of [cellSettings](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings) in the HeatMap. The following examples show various data binding methods in the HeatMap using the `labelTemplate` property. @@ -262,4 +262,4 @@ The following example demonstrates how to add a data label template for JSON cel ## See Also -* [To customize the appearance of tool tip](./tooltip/#customize-the-appearance-of-tooltip) +* [To customize the appearance of tool tip](./tooltip#customize-the-appearance-of-tooltip) diff --git a/chart-sdk/angular/heatmap-chart/axis.md b/chart-sdk/angular/heatmap-chart/axis.md index f4d2b277e..bc2b8293f 100644 --- a/chart-sdk/angular/heatmap-chart/axis.md +++ b/chart-sdk/angular/heatmap-chart/axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis in Angular HeatMap chart component | Syncfusion +title: Axis in Angular HeatMap Chart | Syncfusion description: Learn here all about axis in Syncfusion Angular HeatMap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis in Angular HeatMap chart component +# Axis in Angular HeatMap Chart You can add axis labels to the HeatMap and format those labels using the [xAxis](https://ej2.syncfusion.com/angular/documentation/api/heatmap/xAxis) and [yAxis](https://ej2.syncfusion.com/angular/documentation/api/heatmap/yAxis) properties. Axis labels provide additional information about the data points populated in the HeatMap. diff --git a/chart-sdk/angular/heatmap-chart/bubble-heatmap.md b/chart-sdk/angular/heatmap-chart/bubble-heatmap.md index bdcad1454..ecaa1a7b8 100644 --- a/chart-sdk/angular/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/angular/heatmap-chart/bubble-heatmap.md @@ -1,6 +1,6 @@ --- layout: post -title: Bubble HeatMap in Angular Heatmap chart component | Syncfusion +title: Bubble HeatMap in Angular HeatMap Chart | Syncfusion description: Learn here all about Bubble heatmap in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bubble heatmap @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bubble heatmap in Angular Heatmap chart component +# Bubble HeatMap in Angular HeatMap Chart This section explains how to customize the appearance of the HeatMap cells as bubbles. The below video demonstrates the same. @@ -16,13 +16,13 @@ This section explains how to customize the appearance of the HeatMap cells as bu Data points represent the data source values with **gradient** or **fixed** colors in the HeatMap. You can customize the appearance of these data points by changing the `color` and `size` attributes. -The data points can be represented in color fill or bubble shape by defining the [tileType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#tiletype) property. By default, the data points are color filled with gradient or fixed colors and this depiction of data points is defined as `Rect` in the `tileType` property. +The data points can be represented in color fill or bubble shape by defining the [tileType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#tiletype) property. By default, the data points are color filled with gradient or fixed colors and this depiction of data points is defined as `Rect` in the `tileType` property. -The cell customizations and color mapping for rect tile type is defined in [appearance](./appearance/) and [palette](./palette/) sections in detail. +The cell customizations and color mapping for rect tile type is defined in [appearance](./appearance) and [palette](./palette) sections in detail. ## Bubble types -The data points can be represented in the bubble along with its attributes by setting the [tileType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#tiletype) property to **Bubble**. +The data points can be represented in the bubble along with its attributes by setting the [tileType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#tiletype) property to **Bubble**. In bubble HeatMap, you can display the data points with bubble size, bubble colors, and sector attributes of the bubble. @@ -30,9 +30,9 @@ In bubble HeatMap, you can display the data points with bubble size, bubble colo In this bubble HeatMap type, the size factor of the bubble is used to denote the data variations. The radius of the bubble varies according to data values. -By default, the bubble with small size denotes the data value with small magnitude and the larger bubble size denotes the data value with larger magnitude. This behavior can be inversed by using the [isInversedBubbleSize](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#isinversedbubblesize) property. +By default, the bubble with small size denotes the data value with small magnitude and the larger bubble size denotes the data value with larger magnitude. This behavior can be inversed by using the [isInversedBubbleSize](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#isinversedbubblesize) property. -To render a bubble HeatMap with size series, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#bubbletype) property to **Size**. +To render a bubble HeatMap with size series, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#bubbletype) property to **Size**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -50,7 +50,7 @@ To render a bubble HeatMap with size series, set the [bubbleType](https://ej2.sy In HeatMap, defined with this tile type, the data points will be represented with same sized bubbles and the data value variations are represented with the bubble colors. -To represent the data points with variations in bubble colors, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#bubbletype) property to **Color**. +To represent the data points with variations in bubble colors, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#bubbletype) property to **Color**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -68,7 +68,7 @@ To represent the data points with variations in bubble colors, set the [bubbleTy In this bubble HeatMap type, the sector of the bubble decides the magnitude of data point. If the sector is large, then the data point value will be high. -To render the data points with bubble sector, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#bubbletype) property to **Sector**. +To render the data points with bubble sector, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#bubbletype) property to **Sector**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -84,7 +84,7 @@ To render the data points with bubble sector, set the [bubbleType](https://ej2.s ### Combining size and color bubble types -In this bubble HeatMap type, size and color of the bubble represents the data value variation. To render this bubble HeatMap type, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings/#bubbletype) property to **SizeAndColor**. +In this bubble HeatMap type, size and color of the bubble represents the data value variation. To render this bubble HeatMap type, set the [bubbleType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/cellSettings#bubbletype) property to **SizeAndColor**. The following examples demonstrate different data binding with the **SizeAndColor** bubble type set in the HeatMap. @@ -169,7 +169,7 @@ The following example illustrates how to render a bubble HeatMap with different **Binding size and color values from datasource** -The size and color of the bubbles in the **SizeAndColor** bubble HeatMap type can be customized by binding the datasource field name that holds the size and color values to the [size](https://ej2.syncfusion.com/angular/documentation/api/heatmap/bubbleDataModel/#size) and [color](https://ej2.syncfusion.com/angular/documentation/api/heatmap/bubbleDataModel/#color) properties in the [bubbleDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/dataModel/#bubbledatamapping). +The size and color of the bubbles in the **SizeAndColor** bubble HeatMap type can be customized by binding the datasource field name that holds the size and color values to the [size](https://ej2.syncfusion.com/angular/documentation/api/heatmap/bubbleDataModel#size) and [color](https://ej2.syncfusion.com/angular/documentation/api/heatmap/bubbleDataModel#color) properties in the [bubbleDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/dataModel#bubbledatamapping). >The `bubbleDataMapping` supports only for the JSON data with cell adaptor type. @@ -183,4 +183,4 @@ The size and color of the bubbles in the **SizeAndColor** bubble HeatMap type ca {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/heatmap-chart/bubble-heatmap/sizeAndColorJSONCell-cs2" %} +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/heatmap-chart/bubble-heatmap/sizeAndColorJsonCell-cs2" %} diff --git a/chart-sdk/angular/heatmap-chart/dimensions.md b/chart-sdk/angular/heatmap-chart/dimensions.md index 548590cd8..e438c5374 100644 --- a/chart-sdk/angular/heatmap-chart/dimensions.md +++ b/chart-sdk/angular/heatmap-chart/dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Dimensions in Angular Heatmap chart component | Syncfusion +title: Dimensions in Angular HeatMap Chart | Syncfusion description: Learn here all about Dimensions in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dimensions @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in Angular Heatmap chart component +# Dimensions in Angular HeatMap Chart ## Size for container @@ -22,7 +22,7 @@ Heat map can be rendered to its container size. You can set the size through inl ## Size for heat map -You can set the size of heat map directly by using the [width](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#width) and [height](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#height) properties. +You can set the size of heat map directly by using the [width](https://ej2.syncfusion.com/angular/documentation/api/heatmap#width) and [height](https://ej2.syncfusion.com/angular/documentation/api/heatmap#height) properties. ## In pixel diff --git a/chart-sdk/angular/heatmap-chart/ej1-api-migration.md b/chart-sdk/angular/heatmap-chart/ej1-api-migration.md index 12627eb3a..eefdbb45c 100644 --- a/chart-sdk/angular/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/angular/heatmap-chart/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Heatmap chart component | Syncfusion +title: EJ1 API Migration in Angular HeatMap Chart | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in Angular Heatmap chart component +# EJ1 API Migration in Angular HeatMap Chart This article describes the API migration process of heat map component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/heatmap-chart/events.md b/chart-sdk/angular/heatmap-chart/events.md index 6f229f92a..79eaa204b 100644 --- a/chart-sdk/angular/heatmap-chart/events.md +++ b/chart-sdk/angular/heatmap-chart/events.md @@ -1,6 +1,6 @@ --- layout: post -title: Events in Angular Heatmap chart component | Syncfusion +title: Events in Angular HeatMap Chart | Syncfusion description: Learn here all about Events in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Events @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in Angular Heatmap chart component +# Events in Angular HeatMap Chart This section describes the HeatMap chart event, which occurs when the required actions are performed. ## cellClick -When you click on a HeatMap cell, the [cellClick](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#cellclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/icellclickeventargs/). +When you click on a HeatMap cell, the [cellClick](https://ej2.syncfusion.com/angular/documentation/api/heatmap#cellclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/icellclickeventargs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,7 +31,7 @@ When you click on a HeatMap cell, the [cellClick](https://ej2.syncfusion.com/ang ## cellDoubleClick -When you double click on a HeatMap cell, the [cellDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#celldoubleclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iCellClickEventArgs/). +When you double click on a HeatMap cell, the [cellDoubleClick](https://ej2.syncfusion.com/angular/documentation/api/heatmap#celldoubleclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iCellClickEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -47,7 +47,7 @@ When you double click on a HeatMap cell, the [cellDoubleClick](https://ej2.syncf ## cellRender -The [cellRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#cellrender) event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iCellEventArgs/). +The [cellRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap#cellrender) event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iCellEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -63,7 +63,7 @@ The [cellRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#c ## cellSelected -When single or multiple cells in the HeatMap are selected, the [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#cellselected) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iSelectedEventArgs/). +When single or multiple cells in the HeatMap are selected, the [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/heatmap#cellselected) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iSelectedEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -79,7 +79,7 @@ When single or multiple cells in the HeatMap are selected, the [cellSelected](ht ## created -Once HeatMap has been completely rendered, the [created](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#created) event is triggered. +Once HeatMap has been completely rendered, the [created](https://ej2.syncfusion.com/angular/documentation/api/heatmap#created) event is triggered. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -95,7 +95,7 @@ Once HeatMap has been completely rendered, the [created](https://ej2.syncfusion. ## legendRender -The [legendRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#legendrender) event is triggered before the legend is rendered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iLegendRenderEventArgs/). +The [legendRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap#legendrender) event is triggered before the legend is rendered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iLegendRenderEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -111,7 +111,7 @@ The [legendRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap/ ## load -The [load](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#load) event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iLoadedEventArgs/). +The [load](https://ej2.syncfusion.com/angular/documentation/api/heatmap#load) event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iLoadedEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -127,7 +127,7 @@ The [load](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#load) e ## loaded -Once HeatMap is loaded, the [loaded](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#loaded) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iLoadedEventArgs/). +Once HeatMap is loaded, the [loaded](https://ej2.syncfusion.com/angular/documentation/api/heatmap#loaded) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iLoadedEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -143,7 +143,7 @@ Once HeatMap is loaded, the [loaded](https://ej2.syncfusion.com/angular/document ## resized -When the window is resized, the [resized](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#resized) event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iResizeEventArgs/). +When the window is resized, the [resized](https://ej2.syncfusion.com/angular/documentation/api/heatmap#resized) event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iResizeEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -159,7 +159,7 @@ When the window is resized, the [resized](https://ej2.syncfusion.com/angular/doc ## tooltipRender -The [tooltipRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#tooltiprender) event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iTooltipEventArgs/). +The [tooltipRender](https://ej2.syncfusion.com/angular/documentation/api/heatmap#tooltiprender) event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/heatmap/iTooltipEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/heatmap-chart/getting-started.md b/chart-sdk/angular/heatmap-chart/getting-started.md index e93e839c4..032746b66 100644 --- a/chart-sdk/angular/heatmap-chart/getting-started.md +++ b/chart-sdk/angular/heatmap-chart/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Angular HeatMap chart component | Syncfusion +title: Getting Started with Angular HeatMap Chart | Syncfusion description: Check out and learn about the Getting started with Angular HeatMap chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: HeatMap @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with Angular HeatMap chart component +# Getting Started with Angular HeatMap Chart This section explains the steps required to create a HeatMap and demonstrates the basic usage of the HeatMap component. diff --git a/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md b/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md index 4e2aad09c..2974d3fa4 100644 --- a/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md +++ b/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend customization in Angular Heatmap chart component | Syncfusion +title: Customize the legend label in Angular HeatMap Chart | Syncfusion description: Learn here all about Legend customization in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend customization in Angular Heatmap chart component +# Customize the legend label in Angular HeatMap Chart You can change the legend label using the `legendRender` client-side event. You can also hide the legend label using this client-side event. diff --git a/chart-sdk/angular/heatmap-chart/how-to/tooltip-template.md b/chart-sdk/angular/heatmap-chart/how-to/tooltip-template.md index 42d164200..229454502 100644 --- a/chart-sdk/angular/heatmap-chart/how-to/tooltip-template.md +++ b/chart-sdk/angular/heatmap-chart/how-to/tooltip-template.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip template in Angular Heatmap chart component | Syncfusion +title: How to create a table in tooltip in Angular HeatMap Chart | Syncfusion description: Learn here all about Tooltip template in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip template @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip template in Angular Heatmap chart component +# How to create a table in tooltip in Angular HeatMap Chart You can show a tooltip as a table using the `template` property in `tooltipSettings`. diff --git a/chart-sdk/angular/heatmap-chart/legend.md b/chart-sdk/angular/heatmap-chart/legend.md index b17e771bf..420eb651c 100644 --- a/chart-sdk/angular/heatmap-chart/legend.md +++ b/chart-sdk/angular/heatmap-chart/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular Heatmap chart component | Syncfusion +title: Legend in Angular HeatMap Chart | Syncfusion description: Learn here all about Legend in Syncfusion Angular Heatmap 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 Heatmap chart component +# Legend in Angular HeatMap Chart ## Enable legend diff --git a/chart-sdk/angular/heatmap-chart/palette.md b/chart-sdk/angular/heatmap-chart/palette.md index 04c283771..da0ea3ed0 100644 --- a/chart-sdk/angular/heatmap-chart/palette.md +++ b/chart-sdk/angular/heatmap-chart/palette.md @@ -1,6 +1,6 @@ --- layout: post -title: Palette in Angular Heatmap chart component | Syncfusion +title: Palette in Angular HeatMap Chart | Syncfusion description: Learn here all about Palette in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Palette @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Palette in Angular Heatmap chart component +# Palette in Angular HeatMap Chart In heat map, each data point is displayed as a cell with applied color based on the data value. The palette in the heat map is used to define the color range for cells and gradient type for colors. You can define the colors either in RGB or hex codes using the [color](https://ej2.syncfusion.com/angular/documentation/api/heatmap/paletteCollection#color) property in `palette`. The defined colors are applied to the cell background based on the palette type and cell value. diff --git a/chart-sdk/angular/heatmap-chart/rendering-mode.md b/chart-sdk/angular/heatmap-chart/rendering-mode.md index 3a78d1e82..576a78f17 100644 --- a/chart-sdk/angular/heatmap-chart/rendering-mode.md +++ b/chart-sdk/angular/heatmap-chart/rendering-mode.md @@ -1,6 +1,6 @@ --- layout: post -title: Rendering mode in Angular Heatmap chart component | Syncfusion +title: Rendering Mode in Angular HeatMap Chart | Syncfusion description: Learn here all about Rendering mode in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Rendering mode @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Rendering mode in Angular Heatmap chart component +# Rendering Mode in Angular HeatMap Chart -Heat map can be displayed using **Canvas** or **Scalable Vector Graphics (SVG)** rendering logic to improve the initial load performance and scalability. Heat map can also be automatically switched between **Canvas** and **SVG** modes based on dataset size. You can enable this mode by setting the [renderingMode](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#renderingmode) property to **Auto**. +Heat map can be displayed using **Canvas** or **Scalable Vector Graphics (SVG)** rendering logic to improve the initial load performance and scalability. Heat map can also be automatically switched between **Canvas** and **SVG** modes based on dataset size. You can enable this mode by setting the [renderingMode](https://ej2.syncfusion.com/angular/documentation/api/heatmap#renderingmode) property to **Auto**. > If the **Auto** mode is enabled in the heat map and there are more than 10,000 data points, then the heat map will be rendered in a **Canvas** mode; Otherwise, the heat map will be rendered in a **SVG** mode. diff --git a/chart-sdk/angular/heatmap-chart/selection.md b/chart-sdk/angular/heatmap-chart/selection.md index c544b6b04..fc35008d8 100644 --- a/chart-sdk/angular/heatmap-chart/selection.md +++ b/chart-sdk/angular/heatmap-chart/selection.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection in Angular HeatMap chart component | Syncfusion +title: Selection in Angular HeatMap Chart | Syncfusion description: Learn here all about Selection in Syncfusion Angular HeatMap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selection @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection in Angular HeatMap chart component +# Selection in Angular HeatMap Chart -In the HeatMap, the cell selection is used to select single or multiple HeatMap cells at runtime and get the selected cell details using the [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#cellselected) event. You can enable the cell selection using the [allowSelection](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#allowselection) property. +In the HeatMap, the cell selection is used to select single or multiple HeatMap cells at runtime and get the selected cell details using the [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/heatmap#cellselected) event. You can enable the cell selection using the [allowSelection](https://ej2.syncfusion.com/angular/documentation/api/heatmap#allowselection) property. The HeatMap cells can be selected using the following interactions, as shown in the table below. @@ -34,7 +34,7 @@ The HeatMap cells can be selected using the following interactions, as shown in ## Enable single cell selection -In the HeatMap, the [enableMultiSelect](https://helpej2.syncfusion.com/angular/documentation/api/heatmap/#enablemultiselect) property is used to allow single cell selection. When you set the `enableMultiSelect` property to **false**, only one cell is selected. By default, `enableMultiSelect` property is set to **true**. +In the HeatMap, the [enableMultiSelect](https://helpej2.syncfusion.com/angular/documentation/api/heatmap#enablemultiselect) property is used to allow single cell selection. When you set the `enableMultiSelect` property to **false**, only one cell is selected. By default, `enableMultiSelect` property is set to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -50,7 +50,7 @@ In the HeatMap, the [enableMultiSelect](https://helpej2.syncfusion.com/angular/d ### Clearing cell selection -The [clearSelection](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#clearselection) method can be used to clear all the selected cells. The below example illustrates the same. +The [clearSelection](https://ej2.syncfusion.com/angular/documentation/api/heatmap#clearselection) method can be used to clear all the selected cells. The below example illustrates the same. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/heatmap-chart/title.md b/chart-sdk/angular/heatmap-chart/title.md index 40fcc637a..a5061224e 100644 --- a/chart-sdk/angular/heatmap-chart/title.md +++ b/chart-sdk/angular/heatmap-chart/title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title in Angular Heatmap chart component | Syncfusion +title: Title in Angular HeatMap Chart | Syncfusion description: Learn here all about Title in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title in Angular Heatmap chart component +# Title in Angular HeatMap Chart ## Add Heatmap title diff --git a/chart-sdk/angular/heatmap-chart/tooltip.md b/chart-sdk/angular/heatmap-chart/tooltip.md index c0ac29f8c..926c3c5a6 100644 --- a/chart-sdk/angular/heatmap-chart/tooltip.md +++ b/chart-sdk/angular/heatmap-chart/tooltip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in Angular Heatmap chart component | Syncfusion +title: Tooltip in Angular HeatMap Chart | Syncfusion description: Learn here all about Tooltip in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in Angular Heatmap chart component +# Tooltip in Angular HeatMap Chart Tooltip is used to provide the details of the heat map cell, and this can be displayed, while hovering the cursor over the cell or performing tap action in touch devices. diff --git a/chart-sdk/angular/heatmap-chart/working-with-data.md b/chart-sdk/angular/heatmap-chart/working-with-data.md index 8747c056d..9426612c3 100644 --- a/chart-sdk/angular/heatmap-chart/working-with-data.md +++ b/chart-sdk/angular/heatmap-chart/working-with-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Working with data in Angular Heatmap chart component | Syncfusion +title: Working with data in Angular HeatMap Chart | Syncfusion description: Learn here all about Working with data in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in Angular Heatmap chart component +# Working with data in Angular HeatMap Chart This section shows how to bind data to the HeatMap component. The below video demonstrates the same. @@ -29,7 +29,7 @@ Heat map supports the following types of data binding with the adaptor support. ### Array - table binding -This data type is a collection of one dimensional array objects, at which each inner array contains data points for an X-axis data label. This is the default data binding type for heat map. You can also directly bind the array object to the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#datasource) property. +This data type is a collection of one dimensional array objects, at which each inner array contains data points for an X-axis data label. This is the default data binding type for heat map. You can also directly bind the array object to the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap#datasource) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -45,7 +45,7 @@ This data type is a collection of one dimensional array objects, at which each i ### Array - cell binding -This data type is a collection of array objects that contain information about the row index, column index, and data value for each cell. You can bind the data to heat map by using the [data](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#data) property in the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#datasource) and setting the [adaptorType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#adaptortype) property to `Cell`. +This data type is a collection of array objects that contain information about the row index, column index, and data value for each cell. You can bind the data to heat map by using the [data](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#data) property in the [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap#datasource) and setting the [adaptorType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#adaptortype) property to `Cell`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -61,7 +61,7 @@ This data type is a collection of array objects that contain information about t ### JSON data - table binding -In JSON table data binding, each JSON object contains an X-axis data point as row header and all the corresponding Y-axis data values. You can bind the JSON table data to the heat map using the [data](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#data) property in [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#datasource). To achieve this, you should enable the [isJsonData](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#isjsondata) property and define the [adaptorType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#adaptortype) property as `Table`. The [xDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#xdatamapping) property is used to map the row header in JSON data. +In JSON table data binding, each JSON object contains an X-axis data point as row header and all the corresponding Y-axis data values. You can bind the JSON table data to the heat map using the [data](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#data) property in [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap#datasource). To achieve this, you should enable the [isJsonData](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#isjsondata) property and define the [adaptorType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#adaptortype) property as `Table`. The [xDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#xdatamapping) property is used to map the row header in JSON data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -77,7 +77,7 @@ In JSON table data binding, each JSON object contains an X-axis data point as ro ### JSON data - Cell binding -In JSON cell data binding, each JSON object consists a value for each cell along with a mapping value for row and column. You can bind the JSON cell data having information for each cell to the heat map using the [data](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#data) property in [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap/#datasource). To achieve this, you should define the [adaptorType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#adaptortype) property as `Cell` and enable the [isJsonData](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#isjsondata) property. Now, map the fields of data by using the [valueMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#valuemapping), [xDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#xdatamapping) and [yDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#ydatamapping) properties. +In JSON cell data binding, each JSON object consists a value for each cell along with a mapping value for row and column. You can bind the JSON cell data having information for each cell to the heat map using the [data](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#data) property in [dataSource](https://ej2.syncfusion.com/angular/documentation/api/heatmap#datasource). To achieve this, you should define the [adaptorType](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#adaptortype) property as `Cell` and enable the [isJsonData](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#isjsondata) property. Now, map the fields of data by using the [valueMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#valuemapping), [xDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#xdatamapping) and [yDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#ydatamapping) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -93,7 +93,7 @@ In JSON cell data binding, each JSON object consists a value for each cell along ## Empty points -The data points that use the `null` or `""` or `undefined` as value are considered as empty points. Empty data points are ignored and not displayed in the heat map, and these points are rendered with default palette. You can customize the empty data point color value using the [emptyPointColor](https://ej2.syncfusion.com/angular/documentation/api/heatmap/paletteSettings/#emptypointcolor) property. +The data points that use the `null` or `""` or `undefined` as value are considered as empty points. Empty data points are ignored and not displayed in the heat map, and these points are rendered with default palette. You can customize the empty data point color value using the [emptyPointColor](https://ej2.syncfusion.com/angular/documentation/api/heatmap/paletteSettings#emptypointcolor) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -109,7 +109,7 @@ The data points that use the `null` or `""` or `undefined` as value are consider ## Binding nested JSON data -In complex data binding, you can bind the nested JSON data to the data points in the heat map. The nested data can be mapped using the [xDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#xdatamapping), [yDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#ydatamapping), [valueMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#valuemapping) and [bubbleDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data/#bubbledatamapping) properties as string value concatenated by a dot. +In complex data binding, you can bind the nested JSON data to the data points in the heat map. The nested data can be mapped using the [xDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#xdatamapping), [yDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#ydatamapping), [valueMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#valuemapping) and [bubbleDataMapping](https://ej2.syncfusion.com/angular/documentation/api/heatmap/data#bubbledatamapping) properties as string value concatenated by a dot. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -125,4 +125,4 @@ In complex data binding, you can bind the nested JSON data to the data points in ## See Also -* [To bind data for bubble heat map with size and color attributes](./bubble-heatmap/#binding-data-for-bubble-heat-map-with-size-and-color-attributes) +* [To bind data for bubble heat map with size and color attributes](./bubble-heatmap#binding-data-for-bubble-heat-map-with-size-and-color-attributes) diff --git a/chart-sdk/angular/linear-gauge/accessibility.md b/chart-sdk/angular/linear-gauge/accessibility.md index ec0416958..b800b67b8 100644 --- a/chart-sdk/angular/linear-gauge/accessibility.md +++ b/chart-sdk/angular/linear-gauge/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in Angular Linear Gauge component | Syncfusion -description: Learn here all about Accessibility in Syncfusion Angular Linear Gauge component of Syncfusion Essential JS 2 and more. +title: Accessibility in Angular Linear Gauge | Syncfusion +description: Learn how the Syncfusion Angular Linear Gauge supports accessibility, including WCAG 2.2, Section 508, keyboard navigation, and screen reader support. platform: chart-sdk control: Accessibility documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Linear Gauge component +# Accessibility in Angular Linear Gauge The Linear Gauge component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/angular/linear-gauge/animation.md b/chart-sdk/angular/linear-gauge/animation.md index c0b95f821..06657ab3e 100644 --- a/chart-sdk/angular/linear-gauge/animation.md +++ b/chart-sdk/angular/linear-gauge/animation.md @@ -1,14 +1,14 @@ --- layout: post -title: Animation in Angular Linear Gauge component | Syncfusion -description: Learn here all about animation in Syncfusion Angular Linear Gauge component of Syncfusion Essential JS 2 and more. +title: Animation in Angular Linear Gauge | Syncfusion +description: Learn how to animate the Syncfusion Angular Linear Gauge elements, such as axis, ticks, labels, ranges, and pointers, using animationDuration. platform: chart-sdk -control: Linear Gauge +control: Animation documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Animation in Angular Linear gauge component +# Animation in Angular Linear Gauge All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#animationduration) property. The animation for the Linear Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. diff --git a/chart-sdk/angular/linear-gauge/annotations.md b/chart-sdk/angular/linear-gauge/annotations.md index 687acf7c3..a68907b17 100644 --- a/chart-sdk/angular/linear-gauge/annotations.md +++ b/chart-sdk/angular/linear-gauge/annotations.md @@ -1,14 +1,14 @@ --- layout: post -title: Annotations in Angular Linear gauge component | Syncfusion -description: Learn here all about Annotations in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Annotations in Angular Linear Gauge | Syncfusion +description: Learn how to use annotations in the Syncfusion Angular Linear Gauge to mark specific areas of interest with text, HTML elements, or images. platform: chart-sdk control: Annotations documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotations in Angular Linear gauge component +# Annotations in Angular Linear Gauge @@ -16,7 +16,7 @@ Annotations are used to mark the specific area of interest in the Linear Gauge w ## Adding annotation -To render the custom HTML elements in the Linear Gauge component, use the [`content`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#content) property in the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area. +To render the custom HTML elements in the Linear Gauge component, use the [`content`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#content) property in the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area. @@ -53,16 +53,16 @@ export class AppComponent { The following properties are used to customize the annotation. -* [`zIndex`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#zindex) - Bring the annotation to the front or back, when annotation overlaps with another element. -* [`axisValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#axisvalue) - To place the annotation in the specified axis value with respect to the provided axis index. -* [`axisIndex`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#axisindex) - To place the annotation in the specified axis with respect to the provided axis value. -* [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#horizontalalignment-string) - To place the annotation horizontally. -* [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#verticalalignment-string) - To place the annotation vertically. -* [`x`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#x), [`y`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#y) - To place the annotation in the specified location. +* [`zIndex`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#zindex) - Bring the annotation to the front or back, when annotation overlaps with another element. +* [`axisValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#axisvalue) - To place the annotation in the specified axis value with respect to the provided axis index. +* [`axisIndex`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#axisindex) - To place the annotation in the specified axis with respect to the provided axis value. +* [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#horizontalalignment-string) - To place the annotation horizontally. +* [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#verticalalignment-string) - To place the annotation vertically. +* [`x`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#x), [`y`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#y) - To place the annotation in the specified location. ### Changing the z-index -To change the stack order of an annotation element, the [`zIndex`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#zindex) property of the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation) can be used. +To change the stack order of an annotation element, the [`zIndex`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#zindex) property of the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation) can be used. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -80,7 +80,7 @@ To change the stack order of an annotation element, the [`zIndex`](https://ej2. ### Positioning an annotation -The annotation can be placed anywhere in the Linear Gauge by setting the pixel value to the [`x`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#y) properties in the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). +The annotation can be placed anywhere in the Linear Gauge by setting the pixel value to the [`x`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#y) properties in the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -98,7 +98,7 @@ The annotation can be placed anywhere in the Linear Gauge by setting the pixel v ### Alignment of annotation -The annotation can be aligned horizontally and vertically by using the [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#verticalalignment) properties respectively. The possible values can be **Center**, **Far**, **Near**, and **None**. The [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#verticalalignment) properties are not applicable when the [`x`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation/#y) properties are set in the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). +The annotation can be aligned horizontally and vertically by using the [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#verticalalignment) properties respectively. The possible values can be **Center**, **Far**, **Near**, and **None**. The [`horizontalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#horizontalalignment) and [`verticalAlignment`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#verticalalignment) properties are not applicable when the [`x`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#x) and [`y`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation#y) properties are set in the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -114,7 +114,7 @@ The annotation can be aligned horizontally and vertically by using the [`horizon ## Multiple annotations -Multiple annotations can be added to the Linear Gauge component by adding the multiple [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation) in the [`e-annotations`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#annotations) and customization for the annotation can be done with the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). +Multiple annotations can be added to the Linear Gauge component by adding the multiple [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation) in the [`e-annotations`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#annotations) and customization for the annotation can be done with the [`e-annotation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/annotation). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/linear-gauge/appearance.md b/chart-sdk/angular/linear-gauge/appearance.md index 9010810e6..8b3109452 100644 --- a/chart-sdk/angular/linear-gauge/appearance.md +++ b/chart-sdk/angular/linear-gauge/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Appearance in Angular Linear gauge component | Syncfusion -description: Learn here all about Appearance in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +description: Learn how to customize the appearance of the Syncfusion Angular Linear Gauge, including container area, background, and border styles. platform: chart-sdk control: Appearance documentation: ug @@ -14,11 +14,11 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Customizing the Linear Gauge area -The following properties are available in the [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/) to customize the Linear Gauge area. +The following properties are available in the [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge) to customize the Linear Gauge area. -* [`background`](api/linear-gauge/#background) - Applies the background color for the Linear gauge. -* [`border`](api/linear-gauge/#border) - To customize the color and width of the border in Linear Gauge. -* [`margin`](api/linear-gauge/#margin) - To customize the margins of the Linear Gauge. +* [`background`](api/linear-gauge#background) - Applies the background color for the Linear gauge. +* [`border`](api/linear-gauge#border) - To customize the color and width of the border in Linear Gauge. +* [`margin`](api/linear-gauge#margin) - To customize the margins of the Linear Gauge. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -34,14 +34,14 @@ The following properties are available in the [`ejs-lineargauge`](https://ej2.sy ## Setting up the Linear Gauge title -The title for the Linear Gauge can be set using [`title`](api/linear-gauge/#title) property in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge). Its appearance can be customized using the [`titleStyle`](api/linear-gauge/#titlestyle) with the below properties. +The title for the Linear Gauge can be set using [`title`](api/linear-gauge#title) property in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge). Its appearance can be customized using the [`titleStyle`](api/linear-gauge#titlestyle) with the below properties. -* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#color) - Specifies the text color of the title. -* [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#fontfamily) - Specifies the font family of the title. -* [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#fontstyle) - Specifies the font style of the title. -* [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#fontweight) - Specifies the font weight of the title. -* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#opacity) - Specifies the opacity of the title. -* [`size`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#size) - Specifies the font size of the title. +* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#color) - Specifies the text color of the title. +* [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#fontfamily) - Specifies the font family of the title. +* [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#fontstyle) - Specifies the font style of the title. +* [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#fontweight) - Specifies the font weight of the title. +* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#opacity) - Specifies the opacity of the title. +* [`size`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#size) - Specifies the font size of the title. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -63,13 +63,13 @@ The area used to render the ranges and pointers at the center position of the ga * Rounded Rectangle * Thermometer -The type of the container can be modified by using the [`type`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel/#type) property in [`container`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel). The container can be customized by using the following properties in [`container`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel). +The type of the container can be modified by using the [`type`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel#type) property in [`container`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel). The container can be customized by using the following properties in [`container`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel). -* [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel/#offset) - To place the container with the specified distance from the axis of the Linear Gauge. -* [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel/#width) - To set the thickness of the container. -* [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel/#height) - To set the length of the container. -* [`backgroundColor`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel/#backgroundcolor) - To set the background color of the container. -* [`border`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/container/#border) - To set the color and width for the border of the container. +* [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel#offset) - To place the container with the specified distance from the axis of the Linear Gauge. +* [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel#width) - To set the thickness of the container. +* [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel#height) - To set the length of the container. +* [`backgroundColor`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel#backgroundcolor) - To set the background color of the container. +* [`border`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/container#border) - To set the color and width for the border of the container. ### Normal @@ -89,7 +89,7 @@ The **Normal** type will render the container as a rectangle and this is the def ### Rounded Rectangle -The **RoundedRectangle** type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the [`roundedCornerRadius`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/container/#roundedcornerradius) property in [`container`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel). +The **RoundedRectangle** type will render the container as a rectangle with rounded corner radius. The rounded corner radius of the container can be customized using the [`roundedCornerRadius`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/container#roundedcornerradius) property in [`container`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/containerModel). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -121,7 +121,7 @@ The **Thermometer** type will render the container similar to the appearance of ## Fitting the Linear Gauge to the control -The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the [`allowMargin`](api/linear-gauge/#allowmargin) property in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge) is set as **false**. +The Linear Gauge component is rendered with margin by default. To remove the margin around the Linear Gauge, the [`allowMargin`](api/linear-gauge#allowmargin) property in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge) is set as **false**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -135,4 +135,4 @@ The Linear Gauge component is rendered with margin by default. To remove the mar {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/linear-gauge/appearance-cs6" %} ->To use this feature, set the [`allowMargin`](api/linear-gauge/#allowmargin) property to **false**, the [`width`](api/linear-gauge/#width) property to **100%** and the properties of [`margin`](api/linear-gauge/#margin) to **0**. +>To use this feature, set the [`allowMargin`](api/linear-gauge#allowmargin) property to **false**, the [`width`](api/linear-gauge#width) property to **100%** and the properties of [`margin`](api/linear-gauge#margin) to **0**. diff --git a/chart-sdk/angular/linear-gauge/axis.md b/chart-sdk/angular/linear-gauge/axis.md index 4b19e37ce..805e07271 100644 --- a/chart-sdk/angular/linear-gauge/axis.md +++ b/chart-sdk/angular/linear-gauge/axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Axis in Angular Linear gauge component | Syncfusion -description: Learn here all about Axis in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Axis in Angular Linear Gauge | Syncfusion +description: Learn how to customize the axis in the Syncfusion Angular Linear Gauge, including labels, ranges, pointers, and tick styles. platform: chart-sdk control: Axis documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis in Angular Linear gauge component +# Axis in Angular Linear Gauge This section explains how to customize the appearance of the axis labels, ranges, and pointers in the Linear Gauge component. The below video demonstrates the same. @@ -20,7 +20,7 @@ Axis is used to indicate the numeric values in the linear scale. The Linear Gaug ## Setting the start value and end value of the axis -The start value and end value for the Linear Gauge can be set using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#minimum) and [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#maximum) properties in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/) respectively. By default, the start value of the axis is **0** and the end value of the axis is **100**. +The start value and end value for the Linear Gauge can be set using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#minimum) and [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#maximum) properties in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel) respectively. By default, the start value of the axis is **0** and the end value of the axis is **100**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -38,10 +38,10 @@ The start value and end value for the Linear Gauge can be set using the [`minimu The following properties in the [`line`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel) can be used to customize the axis line in the Linear Gauge. -* [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel/#height) - To set the length of the axis line. -* [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel/#width) - To set the thickness of the axis line. -* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel/#color) - To set the color of the axis line. -* [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel/#offset) - To render the axis line with the specified distance from the Linear Gauge. +* [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel#height) - To set the length of the axis line. +* [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel#width) - To set the thickness of the axis line. +* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel#color) - To set the color of the axis line. +* [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/lineModel#offset) - To render the axis line with the specified distance from the Linear Gauge. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -57,12 +57,12 @@ The following properties in the [`line`](https://ej2.syncfusion.com/angular/doc ## Ticks Customization -Ticks are used to specify the interval in the axis. Ticks are of two types, major ticks and minor ticks. The following properties in the [`majorTicks`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#majorticks) and [`minorTicks`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#minorticks) can be used to customize the major ticks and minor ticks respectively. +Ticks are used to specify the interval in the axis. Ticks are of two types, major ticks and minor ticks. The following properties in the [`majorTicks`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#majorticks) and [`minorTicks`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#minorticks) can be used to customize the major ticks and minor ticks respectively. -* [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#height) - To set the length of the major and minor ticks in pixel values. -* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#color) - To set the color of the major and minor ticks of the Linear Gauge. -* [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#width) - To set the thickness of the major and minor ticks in pixel values. -* [`interval`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#interval) - To set the interval for the major ticks and minor ticks in the Linear Gauge. +* [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#height) - To set the length of the major and minor ticks in pixel values. +* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#color) - To set the color of the major and minor ticks of the Linear Gauge. +* [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#width) - To set the thickness of the major and minor ticks in pixel values. +* [`interval`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#interval) - To set the interval for the major ticks and minor ticks in the Linear Gauge. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -78,7 +78,7 @@ Ticks are used to specify the interval in the axis. Ticks are of two types, majo ### Positioning the ticks -The minor and major ticks can be positioned by using the [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#offset) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#position) properties. The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#offset) is used to render the ticks with the specified distance from the axis. By default, the offset value is **0**. The possible values of the [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel/#position) property are **Inside**, **Outside**, **Cross**, and **Auto**. By default, the ticks will be placed inside the axis. +The minor and major ticks can be positioned by using the [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#offset) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#position) properties. The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#offset) is used to render the ticks with the specified distance from the axis. By default, the offset value is **0**. The possible values of the [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tickModel#position) property are **Inside**, **Outside**, **Cross**, and **Auto**. By default, the ticks will be placed inside the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -94,14 +94,14 @@ The minor and major ticks can be positioned by using the [`offset`](https://ej2. ## Labels Customization -The style of the labels can be customized using the following properties in the [`font`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#font) property in [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel). +The style of the labels can be customized using the following properties in the [`font`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#font) property in [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel). -* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#color) - To set the color of the axis label. -* [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#fontfamily) - To set the font family of the axis label. -* [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#fontstyle) - To set the font style of the axis label. -* [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#fontweight) - To set the font weight of the axis label. -* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#opacity) - To set the opacity of the axis label. -* [`size`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font/#size) - To set the size of the axis label. +* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#color) - To set the color of the axis label. +* [`fontFamily`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#fontfamily) - To set the font family of the axis label. +* [`fontStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#fontstyle) - To set the font style of the axis label. +* [`fontWeight`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#fontweight) - To set the font weight of the axis label. +* [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#opacity) - To set the opacity of the axis label. +* [`size`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/font#size) - To set the size of the axis label. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -117,7 +117,7 @@ The style of the labels can be customized using the following properties in the ### Positioning the axis label -Labels can be positioned by using [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#offset) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#position) properties in the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel). The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#offset) defines the distance between the labels and ticks. By default, the offset value is **0**. The possible values of the [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#position) property are **Inside**, **Outside**, **Cross**, and **Auto**. By default, the labels will be placed inside the axis. +Labels can be positioned by using [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#offset) and [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#position) properties in the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel). The [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#offset) defines the distance between the labels and ticks. By default, the offset value is **0**. The possible values of the [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#position) property are **Inside**, **Outside**, **Cross**, and **Auto**. By default, the labels will be placed inside the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -133,7 +133,7 @@ Labels can be positioned by using [`offset`](https://ej2.syncfusion.com/angular/ ### Customizing the display of the last label -If the last label is not in the visible range, it will be hidden by default. The last label can be made visible by setting the [`showLastLabel`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis/#showlastlabel) property as **true** in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/). +If the last label is not in the visible range, it will be hidden by default. The last label can be made visible by setting the [`showLastLabel`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis#showlastlabel) property as **true** in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -151,7 +151,7 @@ If the last label is not in the visible range, it will be hidden by default. The ### Label Format -Axis labels in the Linear Gauge control can be formatted using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#format) property in the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis/#labelstyle). It is used to render the axis labels in a certain format or to add a user-defined unit in the label. It works with the help of placeholder like **{value}°C**, where **value** represents the axis value. For example, 20°C. +Axis labels in the Linear Gauge control can be formatted using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#format) property in the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis#labelstyle). It is used to render the axis labels in a certain format or to add a user-defined unit in the label. It works with the help of placeholder like **{value}°C**, where **value** represents the axis value. For example, 20°C. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -167,7 +167,7 @@ Axis labels in the Linear Gauge control can be formatted using the [`format`](ht ### Displaying numeric format in labels -The numeric formats such as currency, percentage, and so on can be displayed in the labels of the Linear Gauge using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#format) property in the [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel/). The following table describes the result of applying some commonly used label formats on numeric values. +The numeric formats such as currency, percentage, and so on can be displayed in the labels of the Linear Gauge using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#format) property in the [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel). The following table describes the result of applying some commonly used label formats on numeric values. @@ -241,7 +241,7 @@ The numeric formats such as currency, percentage, and so on can be displayed in ## Orientation -By default, the Linear Gauge is rendered vertically. To change its orientation, the [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel/#orientation) property must be set to "**Horizontal**". +By default, the Linear Gauge is rendered vertically. To change its orientation, the [`orientation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel#orientation) property must be set to "**Horizontal**". {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -257,7 +257,7 @@ By default, the Linear Gauge is rendered vertically. To change its orientation, ## Inverted Axis -The axis of the Linear Gauge component can be inversed by setting the [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis/#isinversed) property to **true** in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/). +The axis of the Linear Gauge component can be inversed by setting the [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis#isinversed) property to **true** in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -273,7 +273,7 @@ The axis of the Linear Gauge component can be inversed by setting the [`isInvers ## Opposed Axis -To place an axis opposite from its original position, [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis/#opposedposition) property in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/) must be set as **true**. +To place an axis opposite from its original position, [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axis#opposedposition) property in the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel) must be set as **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -289,7 +289,7 @@ To place an axis opposite from its original position, [`opposedPosition`](https: ## Multiple Axes -Multiple axes can be added to the Linear Gauge by adding multiple [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/) in the [`e-axes`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel/#axes) and customization can be done with the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/). Each axis can be customized separately as shown in the following example. +Multiple axes can be added to the Linear Gauge by adding multiple [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel) in the [`e-axes`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel#axes) and customization can be done with the [`e-axis`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel). Each axis can be customized separately as shown in the following example. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/linear-gauge/dimensions.md b/chart-sdk/angular/linear-gauge/dimensions.md index 8a39dd355..3c60fb972 100644 --- a/chart-sdk/angular/linear-gauge/dimensions.md +++ b/chart-sdk/angular/linear-gauge/dimensions.md @@ -1,20 +1,20 @@ --- layout: post -title: Dimensions in Angular Linear gauge component | Syncfusion -description: Learn here all about Dimensions in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Dimensions in Angular Linear Gauge | Syncfusion +description: Learn how to set the size and dimensions of the Syncfusion Angular Linear Gauge, including width, height, and container area. platform: chart-sdk control: Dimensions documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in Angular Linear gauge component +# Dimensions in Angular Linear Gauge ## Size for Linear Gauge -The height and width of the Linear Gauge can be set using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#height) properties in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/). +The height and width of the Linear Gauge can be set using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#width) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#height) properties in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge). ### In Pixel diff --git a/chart-sdk/angular/linear-gauge/ej1-api-migration.md b/chart-sdk/angular/linear-gauge/ej1-api-migration.md index 62a19e581..f5a7e782e 100644 --- a/chart-sdk/angular/linear-gauge/ej1-api-migration.md +++ b/chart-sdk/angular/linear-gauge/ej1-api-migration.md @@ -1,14 +1,14 @@ --- layout: post -title: Ej1 api migration in Angular Linear gauge component | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: EJ1 API Migration in Angular Linear Gauge | Syncfusion +description: Learn how to migrate the Syncfusion Angular Linear Gauge component from Essential JS 1 to Essential JS 2 using the API migration guide. platform: chart-sdk control: Ej1 api migration documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in Angular Linear gauge component +# EJ1 API Migration in Angular Linear Gauge This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/linear-gauge/events.md b/chart-sdk/angular/linear-gauge/events.md index b70c36680..239ad611e 100644 --- a/chart-sdk/angular/linear-gauge/events.md +++ b/chart-sdk/angular/linear-gauge/events.md @@ -1,20 +1,20 @@ --- layout: post -title: Events in Angular Linear gauge component | Syncfusion -description: Learn here all about Events in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Events in Angular Linear Gauge | Syncfusion +description: Learn about the events available in the Syncfusion Angular Linear Gauge component, which are triggered when corresponding operations are performed. platform: chart-sdk control: Events documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in Angular Linear gauge component +# Events in Angular Linear Gauge This section describes the Linear Gauge component's event that gets triggered when corresponding operations are performed. ## animationComplete -When the pointer animation is completed, the [`animationComplete`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#animationcomplete) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iAnimationCompleteEventArgs/). +When the pointer animation is completed, the [`animationComplete`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#animationcomplete) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iAnimationCompleteEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -30,7 +30,7 @@ When the pointer animation is completed, the [`animationComplete`](https://ej2.s ## annotationRender -Before the annotation is rendered in the Linear Gauge, the [`annotationRender`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#annotationrender) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iAnnotationRenderEventArgs/). +Before the annotation is rendered in the Linear Gauge, the [`annotationRender`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#annotationrender) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iAnnotationRenderEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -46,7 +46,7 @@ Before the annotation is rendered in the Linear Gauge, the [`annotationRender`]( ## axisLabelRender -Before each axis label is rendered in the Linear Gauge, the [`axisLabelRender`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#axislabelrender) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iAxisLabelRenderEventArgs/). +Before each axis label is rendered in the Linear Gauge, the [`axisLabelRender`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#axislabelrender) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iAxisLabelRenderEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -62,7 +62,7 @@ Before each axis label is rendered in the Linear Gauge, the [`axisLabelRender`]( ## beforePrint -The [`beforePrint`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#beforeprint) event is fired before the print begins. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPrintEventArgs/). +The [`beforePrint`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#beforeprint) event is fired before the print begins. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPrintEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -78,7 +78,7 @@ The [`beforePrint`](https://ej2.syncfusion.com/angular/documentation/api/linear- ## dragEnd -The [`dragEnd`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#dragend) event will be fired before the pointer drag is completed. To know more about the argument of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPointerDragEventArgs/). +The [`dragEnd`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#dragend) event will be fired before the pointer drag is completed. To know more about the argument of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPointerDragEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -94,7 +94,7 @@ The [`dragEnd`](https://ej2.syncfusion.com/angular/documentation/api/linear-gaug ## dragMove -The [`dragMove`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#dragmove) event will be fired when the pointer is dragged. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPointerDragEventArgs/). +The [`dragMove`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#dragmove) event will be fired when the pointer is dragged. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPointerDragEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -110,7 +110,7 @@ The [`dragMove`](https://ej2.syncfusion.com/angular/documentation/api/linear-gau ## dragStart -When the pointer drag begins, the [`dragStart`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#dragstart) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPointerDragEventArgs/). +When the pointer drag begins, the [`dragStart`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#dragstart) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iPointerDragEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -126,7 +126,7 @@ When the pointer drag begins, the [`dragStart`](https://ej2.syncfusion.com/angul ## gaugeMouseDown -When mouse is pressed down on the gauge, the [`gaugeMouseDown`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#gaugemousedown) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs/). +When mouse is pressed down on the gauge, the [`gaugeMouseDown`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#gaugemousedown) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -142,7 +142,7 @@ When mouse is pressed down on the gauge, the [`gaugeMouseDown`](https://ej2.sync ## gaugeMouseLeave -When mouse pointer moves over the gauge, the [`gaugemouseleave`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#gaugemouseleave) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs/). +When mouse pointer moves over the gauge, the [`gaugemouseleave`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#gaugemouseleave) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -158,7 +158,7 @@ When mouse pointer moves over the gauge, the [`gaugemouseleave`](https://ej2.syn ## gaugeMouseMove -When mouse pointer leaves the gauge, the [`gaugeMouseMove`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#gaugemousemove) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs/). +When mouse pointer leaves the gauge, the [`gaugeMouseMove`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#gaugemousemove) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -174,7 +174,7 @@ When mouse pointer leaves the gauge, the [`gaugeMouseMove`](https://ej2.syncfusi ## gaugeMouseUp -When the mouse pointer is released over the Linear Gauge, the [`gaugeMouseUp`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#gaugemouseup) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs/). +When the mouse pointer is released over the Linear Gauge, the [`gaugeMouseUp`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#gaugemouseup) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iMouseEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -190,7 +190,7 @@ When the mouse pointer is released over the Linear Gauge, the [`gaugeMouseUp`](h ## load -Before the Linear Gauge is loaded, the [`load`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#load) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iLoadEventArgs/). +Before the Linear Gauge is loaded, the [`load`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#load) event is fired. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iLoadEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -206,7 +206,7 @@ Before the Linear Gauge is loaded, the [`load`](https://ej2.syncfusion.com/angul ## loaded -After the Linear Gauge has been loaded, the [`loaded`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#loaded) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iLoadedEventArgs/). +After the Linear Gauge has been loaded, the [`loaded`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#loaded) event will be triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iLoadedEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -222,7 +222,7 @@ After the Linear Gauge has been loaded, the [`loaded`](https://ej2.syncfusion.co ## resized -After the window resizing, the [`resized`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#resized) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iResizeEventArgs/). +After the window resizing, the [`resized`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#resized) event is triggered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iResizeEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -238,7 +238,7 @@ After the window resizing, the [`resized`](https://ej2.syncfusion.com/angular/do ## tooltipRender -The [`tooltipRender`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#tooltiprender) event is fired before the tooltip is rendered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iTooltipRenderEventArgs/). +The [`tooltipRender`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#tooltiprender) event is fired before the tooltip is rendered. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iTooltipRenderEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -254,7 +254,7 @@ The [`tooltipRender`](https://ej2.syncfusion.com/angular/documentation/api/linea ## valueChange -The [`valueChange`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#valuechange) event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iValueChangeEventArgs/). +The [`valueChange`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#valuechange) event is triggered when the pointer is dragged from one value to another. To know more about the arguments of this event, refer [here](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/iValueChangeEventArgs). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/linear-gauge/getting-started.md b/chart-sdk/angular/linear-gauge/getting-started.md index 033ec5770..5bc59a10a 100644 --- a/chart-sdk/angular/linear-gauge/getting-started.md +++ b/chart-sdk/angular/linear-gauge/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with Angular Linear gauge component | Syncfusion -description: Learn how to get started with the Angular Linear Gauge component of Syncfusion Essential JS 2 and more details. +title: Getting Started with Angular Linear Gauge | Syncfusion +description: Learn how to get started with the Syncfusion Angular Linear Gauge control. Explore setup, features, examples, and customization options. platform: chart-sdk control: Getting Started documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with Angular Linear gauge component +# Getting Started with Angular Linear Gauge diff --git a/chart-sdk/angular/linear-gauge/internationalization.md b/chart-sdk/angular/linear-gauge/internationalization.md index 2dadc34c5..d554fb9c3 100644 --- a/chart-sdk/angular/linear-gauge/internationalization.md +++ b/chart-sdk/angular/linear-gauge/internationalization.md @@ -1,25 +1,25 @@ --- layout: post -title: Internationalization in Angular Linear gauge component | Syncfusion -description: Learn here all about Internationalization in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Internationalization in Angular Linear Gauge | Syncfusion +description: Learn how to globalize the number content in the Syncfusion Angular Linear Gauge component using the format property for different cultures and locales. platform: chart-sdk control: Internationalization documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in Angular Linear gauge component +# Internationalization in Angular Linear Gauge -Globalization is the process of designing and developing a component that works in different cultures. Internationalization is used to globalize the number content in Linear Gauge component using [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/label/#format) property in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel/). It has static text on some features such as +Globalization is the process of designing and developing a component that works in different cultures. Internationalization is used to globalize the number content in Linear Gauge component using [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/label#format) property in [`ejs-lineargauge`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGaugeModel). It has static text on some features such as * Axis label * Tooltip -The static text on above features can be changed to any culture such as Arabic, Deutsch and French. To know more about the globalization in Angular components, refer [here](https://ej2.syncfusion.com/angular/documentation/common/internationalization/). +The static text on above features can be changed to any culture such as Arabic, Deutsch and French. To know more about the globalization in Angular components, refer [here](https://ej2.syncfusion.com/angular/documentation/common/internationalization). ## Numeric Format -The text in axis labels and tooltip can be displayed in the numeric format such as currency, percentage and so on. To know more about the numeric formats in axis labels, refer [here](axis/#displaying-numeric-format-in-labels). In the below example, the axis label is displayed in the currency format. +The text in axis labels and tooltip can be displayed in the numeric format such as currency, percentage and so on. To know more about the numeric formats in axis labels, refer [here](axis#displaying-numeric-format-in-labels). In the below example, the axis label is displayed in the currency format. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/linear-gauge/methods.md b/chart-sdk/angular/linear-gauge/methods.md index e48e2f238..abfed6460 100644 --- a/chart-sdk/angular/linear-gauge/methods.md +++ b/chart-sdk/angular/linear-gauge/methods.md @@ -1,20 +1,20 @@ --- layout: post -title: Methods in Angular Linear gauge component | Syncfusion -description: Learn here all about Methods in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Methods in Angular Linear Gauge | Syncfusion +description: Learn about the methods available in the Syncfusion Angular Linear Gauge component, such as setPointerValue and setAnnotationValue. platform: chart-sdk control: Methods documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Methods in Angular Linear gauge component +# Methods in Angular Linear Gauge The following methods are available in the Linear Gauge component. ## setPointerValue -To change the pointer value dynamically, use the [`setPointerValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#setpointervalue) method in the Linear Gauge component. The following are the arguments for this method. +To change the pointer value dynamically, use the [`setPointerValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#setpointervalue) method in the Linear Gauge component. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| @@ -36,7 +36,7 @@ To change the pointer value dynamically, use the [`setPointerValue`](https://ej2 ## setAnnotationValue -To change the annotation content dynamically, use the [`setAnnotationValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#setannotationvalue) method in the Linear Gauge component. The following are the arguments for this method. +To change the annotation content dynamically, use the [`setAnnotationValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#setannotationvalue) method in the Linear Gauge component. The following are the arguments for this method. | Argument name | Description | |----------------------| -----------------------------------------| @@ -58,7 +58,7 @@ To change the annotation content dynamically, use the [`setAnnotationValue`](htt ## refresh -The [`refresh`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#refresh) method can be used to change the state of the component and render it again. +The [`refresh`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#refresh) method can be used to change the state of the component and render it again. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/linear-gauge/pointers.md b/chart-sdk/angular/linear-gauge/pointers.md index ad47e8e7c..2d3cc463c 100644 --- a/chart-sdk/angular/linear-gauge/pointers.md +++ b/chart-sdk/angular/linear-gauge/pointers.md @@ -1,14 +1,14 @@ --- layout: post -title: Pointers in Angular Linear gauge component | Syncfusion -description: Learn here all about Pointers in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Pointers in Angular Linear Gauge | Syncfusion +description: Learn how to configure and customize pointers in the Syncfusion Angular Linear Gauge, including pointer types, value, position, and styles. platform: chart-sdk control: Pointers documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pointers in Angular Linear gauge component +# Pointers in Angular Linear Gauge ## Set the pointer value @@ -109,7 +109,7 @@ The marker pointer can be customized using the following properties. * [position](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#position) - The position of the pointer can be changed by setting the value as **Inside**, **Outside**, **Cross**, or **Auto**. * [width](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#width) - To set the width of the pointer. * [color](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#color) - To set the color of the pointer. -* [placement](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#placement) - To place the pointer in the specified position. By default, the pointer is placed **Far** from the axis. To change the placement, set the [placement](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointerModel/#placement) property as **Near**, **Center**, or **None**. +* [placement](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#placement) - To place the pointer in the specified position. By default, the pointer is placed **Far** from the axis. To change the placement, set the [placement](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointerModel#placement) property as **Near**, **Center**, or **None**. * [offset](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointer#offset) - To place the pointer with specified distance from the axis. * [opacity](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#opacity) - To set the opacity of the pointer. * [animationDuration](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointermodel#animationduration) - To specify the duration of the animation in pointer. diff --git a/chart-sdk/angular/linear-gauge/print-and-export.md b/chart-sdk/angular/linear-gauge/print-and-export.md index 3c5a8b92e..7cacd5c59 100644 --- a/chart-sdk/angular/linear-gauge/print-and-export.md +++ b/chart-sdk/angular/linear-gauge/print-and-export.md @@ -1,20 +1,20 @@ --- layout: post -title: Print and export in Angular Linear gauge component | Syncfusion -description: Learn here all about Print and export in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Print and Export in Angular Linear Gauge | Syncfusion +description: Learn how to print and export the Syncfusion Angular Linear Gauge component as an image or printable document for sharing and reporting. platform: chart-sdk control: Print and export documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and export in Angular Linear gauge component +# Print and Export in Angular Linear Gauge ## Print -The rendered Linear Gauge can be printed directly from the browser by calling the [`print`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#print) method. To use the print functionality, set the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#allowprint) property as **true** and inject the **PrintService** in the **providers**. +The rendered Linear Gauge can be printed directly from the browser by calling the [`print`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#print) method. To use the print functionality, set the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#allowprint) property as **true** and inject the **PrintService** in the **providers**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -34,7 +34,7 @@ The rendered Linear Gauge can be printed directly from the browser by calling th -To use the image export functionality, set the [`allowImageExport`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#allowimageexport) property as **true** and inject the **ImageExportService** in the **providers**. The rendered Linear Gauge can be exported as an image using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#export) method. This method requires two parameters: export type and file name. The Linear Gauge can be exported as an image with the following formats. +To use the image export functionality, set the [`allowImageExport`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#allowimageexport) property as **true** and inject the **ImageExportService** in the **providers**. The rendered Linear Gauge can be exported as an image using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#export) method. This method requires two parameters: export type and file name. The Linear Gauge can be exported as an image with the following formats. * JPEG * PNG @@ -54,7 +54,7 @@ To use the image export functionality, set the [`allowImageExport`](https://ej2. ### PDF Export -To use the PDF export functionality, set the [`allowPdfExport`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#allowpdfexport) property as **true** and inject the **PdfExportService** in the **providers**. The rendered Linear Gauge can be exported as PDF using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#export) method. The [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation of the PDF document can be set as **Portrait** or **Landscape**. +To use the PDF export functionality, set the [`allowPdfExport`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#allowpdfexport) property as **true** and inject the **PdfExportService** in the **providers**. The rendered Linear Gauge can be exported as PDF using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#export) method. The [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation of the PDF document can be set as **Portrait** or **Landscape**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -70,7 +70,7 @@ To use the PDF export functionality, set the [`allowPdfExport`](https://ej2.sync ### Exporting Linear Gauge as base64 string of the file -The Linear Gauge can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Linear Gauge can be exported as base64 string of the exported image or PDF document used in the [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/#export) method. The arguments that are required for this method is export type, file name, orientation of the exported PDF document and **allowDownload** boolean value that is set as **false** to return base64 string. The value for the orientation of the exported PDF document is set as **null** for image export and **Portrait** or **Landscape** for the PDF document. +The Linear Gauge can be exported as base64 string for the JPEG, PNG and PDF formats. The rendered Linear Gauge can be exported as base64 string of the exported image or PDF document used in the [`export`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge#export) method. The arguments that are required for this method is export type, file name, orientation of the exported PDF document and **allowDownload** boolean value that is set as **false** to return base64 string. The value for the orientation of the exported PDF document is set as **null** for image export and **Portrait** or **Landscape** for the PDF document. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/linear-gauge/ranges.md b/chart-sdk/angular/linear-gauge/ranges.md index afdca3d07..eaf31e182 100644 --- a/chart-sdk/angular/linear-gauge/ranges.md +++ b/chart-sdk/angular/linear-gauge/ranges.md @@ -1,17 +1,17 @@ --- layout: post -title: Ranges in Angular Linear gauge component | Syncfusion -description: Learn here all about Ranges in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: Ranges in Angular Linear Gauge | Syncfusion +description: Learn how to add and customize ranges in the Syncfusion Angular Linear Gauge component to highlight specific value intervals on the axis. platform: chart-sdk control: Ranges documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ranges in Angular Linear gauge component +# Ranges in Angular Linear Gauge -Range is the set of values in the axis. The range can be defined using the [`start`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#start) and [`end`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#end) properties in the [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/). Any number of ranges can be added to the Linear Gauge using the [`e-ranges`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#ranges). +Range is the set of values in the axis. The range can be defined using the [`start`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#start) and [`end`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#end) properties in the [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel). Any number of ranges can be added to the Linear Gauge using the [`e-ranges`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#ranges). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -27,14 +27,14 @@ Range is the set of values in the axis. The range can be defined using the [`sta ## Customizing the range -Ranges can be customized using the following properties in [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/). +Ranges can be customized using the following properties in [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel). -* [`startWidth`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#startwidth) - Customize the range thickness at the start axis value. -* [`endWidth`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#endwidth) - Customize the range thickness at the end axis value. -* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#color) - Customize the range color. -* [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#position) - To place the range. By default, the range is placed outside of the axis. To change the position, this property can be set as "**Inside**", "**Outside**", "**Cross**", or "**Auto**". -* [`Offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#offset) - To place the range with specified distance from the axis. -* [`border`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/#border) - Customize color and width of range border. +* [`startWidth`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#startwidth) - Customize the range thickness at the start axis value. +* [`endWidth`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#endwidth) - Customize the range thickness at the end axis value. +* [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#color) - Customize the range color. +* [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#position) - To place the range. By default, the range is placed outside of the axis. To change the position, this property can be set as "**Inside**", "**Outside**", "**Cross**", or "**Auto**". +* [`Offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#offset) - To place the range with specified distance from the axis. +* [`border`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel#border) - Customize color and width of range border. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -50,7 +50,7 @@ Ranges can be customized using the following properties in [`e-range`](https://e ## Setting the range color for the labels -To set the color of the labels like the range color, set the [`useRangeColor`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel/#userangecolor) property as **true** in the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#labelstyle). +To set the color of the labels like the range color, set the [`useRangeColor`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/labelModel#userangecolor) property as **true** in the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#labelstyle). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -66,7 +66,7 @@ To set the color of the labels like the range color, set the [`useRangeColor`](h ## Multiple ranges -Multiple ranges can be added to the Linear Gauge by adding collections of [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/) in the [`e-ranges`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel/#ranges) and customization of ranges can be done with [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel/). +Multiple ranges can be added to the Linear Gauge by adding collections of [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel) in the [`e-ranges`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/axisModel#ranges) and customization of ranges can be done with [`e-range`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/rangeModel). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -89,7 +89,7 @@ Gradient support allows the addition of multiple colors in the range. The follow ### Linear Gradient -Using linear-gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient/#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient/#endvalue) property. The color stop values such as [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel/#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel/#opacity), and [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel/#offset) to be defined in [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient/#colorstop). +Using linear-gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient#endvalue) property. The color stop values such as [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel#opacity), and [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel#offset) to be defined in [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient#colorstop). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -105,7 +105,7 @@ Using linear-gradient, colors will be applied in a linear progression. The start ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/radialGradient/#outerposition) property. The color stop values such as [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel/#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel/#opacity), and [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel/#offset) to be defined in [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/radialGradient/#colorstop). +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/radialGradient#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/radialGradient#outerposition) property. The color stop values such as [`color`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel#color), [`opacity`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel#opacity), and [`offset`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/colorStopModel#offset) to be defined in [`colorStop`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/radialGradient#colorstop). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -119,4 +119,4 @@ Using radial gradient, colors will be applied in circular progression. The inner {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/linear-gauge/ranges-cs6" %} ->If we set both gradients for the range, only the linear gradient gets rendered. If we set the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient/#startvalue) and [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient/#endvalue) property of the [`linearGradient`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient/) as empty strings, then the radial gradient gets rendered in the range of the Linear Gauge. +>If we set both gradients for the range, only the linear gradient gets rendered. If we set the [`startValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient#startvalue) and [`endValue`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient#endvalue) property of the [`linearGradient`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/linearGradient) as empty strings, then the radial gradient gets rendered in the range of the Linear Gauge. diff --git a/chart-sdk/angular/linear-gauge/user-interaction.md b/chart-sdk/angular/linear-gauge/user-interaction.md index 84a3f90cd..f267f2060 100644 --- a/chart-sdk/angular/linear-gauge/user-interaction.md +++ b/chart-sdk/angular/linear-gauge/user-interaction.md @@ -1,14 +1,14 @@ --- layout: post -title: User interaction in Angular Linear gauge component | Syncfusion -description: Learn here all about User interaction in Syncfusion Angular Linear gauge component of Syncfusion Essential JS 2 and more. +title: User Interaction in Angular Linear Gauge | Syncfusion +description: Learn about user interaction features in the Syncfusion Angular Linear Gauge, including tooltips and context menu support. platform: chart-sdk control: User interaction documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interaction in Angular Linear gauge component +# User Interaction in Angular Linear Gauge @@ -16,7 +16,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -Linear Gauge displays the details about a pointer value through [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/), when the mouse hovers over the pointer. To enable the tooltip, set [`enable`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettingsModel/#enable) property as **true** and and inject the **GaugeTooltipService** in the **providers**. +Linear Gauge displays the details about a pointer value through [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings), when the mouse hovers over the pointer. To enable the tooltip, set [`enable`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettingsModel#enable) property as **true** and and inject the **GaugeTooltipService** in the **providers**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -36,7 +36,7 @@ Linear Gauge displays the details about a pointer value through [`tooltip`](http -Tooltip in the Linear Gauge control can be formatted using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#format) property in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/). It is used to render the tooltip in certain format or to add a user-defined unit in the tooltip. By default, the tooltip shows the pointer value only. In addition to that, more information can be added in the tooltip. For example, the format **{value}km** shows pointer value with kilometer unit in the tooltip. +Tooltip in the Linear Gauge control can be formatted using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#format) property in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings). It is used to render the tooltip in certain format or to add a user-defined unit in the tooltip. By default, the tooltip shows the pointer value only. In addition to that, more information can be added in the tooltip. For example, the format **{value}km** shows pointer value with kilometer unit in the tooltip. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -52,7 +52,7 @@ Tooltip in the Linear Gauge control can be formatted using the [`format`](https: ### Tooltip Template -The HTML element can be rendered in the tooltip of the Linear Gauge using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#template) property in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/). The **${value}** can be used as placeholders in the HTML element to display the pointer values of the corresponding axis. +The HTML element can be rendered in the tooltip of the Linear Gauge using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#template) property in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings). The **${value}** can be used as placeholders in the HTML element to display the pointer values of the corresponding axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -68,13 +68,13 @@ The HTML element can be rendered in the tooltip of the Linear Gauge using the [` ### Customize the appearance of the tooltip -The tooltip can be customized using the following properties in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/). +The tooltip can be customized using the following properties in [`tooltip`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings). -* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#fill) - To fill the color for tooltip. -* [`enableAnimation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#enableanimation) - To enable or disable the tooltip animation. -* [`border`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#border) - To set the border color and width of the tooltip. -* [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#textstyle) - To customize the style of the text in tooltip. -* [`showAtMousePosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#showatmouseposition) - To show the tooltip at the mouse position. +* [`fill`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#fill) - To fill the color for tooltip. +* [`enableAnimation`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#enableanimation) - To enable or disable the tooltip animation. +* [`border`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#border) - To set the border color and width of the tooltip. +* [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#textstyle) - To customize the style of the text in tooltip. +* [`showAtMousePosition`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#showatmouseposition) - To show the tooltip at the mouse position. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -90,7 +90,7 @@ The tooltip can be customized using the following properties in [`tooltip`](http ### Positioning the tooltip -The tooltip is positioned at the **End** of the pointer. To change the position of the tooltip at the start, or center of the pointer, set the [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings/#position) property to **Start** or **Center**. +The tooltip is positioned at the **End** of the pointer. To change the position of the tooltip at the start, or center of the pointer, set the [`position`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/tooltipSettings#position) property to **Start** or **Center**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -106,7 +106,7 @@ The tooltip is positioned at the **End** of the pointer. To change the position ## Pointer Drag -To drag either marker or bar pointer to the desired axis value, set the [`enableDrag`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointer/#enabledrag) property as **true** in the [`pointer`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointerModel/). +To drag either marker or bar pointer to the desired axis value, set the [`enableDrag`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointer#enabledrag) property as **true** in the [`pointer`](https://ej2.syncfusion.com/angular/documentation/api/linear-gauge/pointerModel). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/maps/accessibility.md b/chart-sdk/angular/maps/accessibility.md index 5565df018..bd7e8f6f9 100644 --- a/chart-sdk/angular/maps/accessibility.md +++ b/chart-sdk/angular/maps/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Maps component | Syncfusion +title: Accessibility in Angular Maps | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Maps component +# Accessibility in Angular Maps Accessibility enables users with disabilities to interact with the Maps component through assistive technologies such as screen readers and keyboard navigation. The Maps component is designed to comply with [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles). diff --git a/chart-sdk/angular/maps/annotations.md b/chart-sdk/angular/maps/annotations.md index e6147e4af..34d4315fc 100644 --- a/chart-sdk/angular/maps/annotations.md +++ b/chart-sdk/angular/maps/annotations.md @@ -1,6 +1,6 @@ --- layout: post -title: Annotations in Angular Maps component | Syncfusion +title: Annotation in Angular Maps | Syncfusion description: Learn here all about Annotations in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Annotations @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotations in Angular Maps component +# Annotation in Angular Maps diff --git a/chart-sdk/angular/maps/bubble.md b/chart-sdk/angular/maps/bubble.md index b3dcea110..511e258a0 100644 --- a/chart-sdk/angular/maps/bubble.md +++ b/chart-sdk/angular/maps/bubble.md @@ -1,6 +1,6 @@ --- layout: post -title: Bubble in Angular Maps component | Syncfusion +title: Bubble in Angular Maps | Syncfusion description: Learn here all about Bubble in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bubble @@ -12,7 +12,7 @@ This section shows how to add and customize bubbles in the Maps component using {% youtube "https://www.youtube.com/watch?v=xx3KmBK0If8" %} -# Bubble in Angular Maps component +# Bubble in Angular Maps Bubbles in the Maps component provide a visual representation of data values across geographical regions. They appear as circular or square shapes scattered over map areas, with their size proportional to the underlying data values. To enable bubbles, set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/maps/bubbleSettingsModel#visible) property of [`bubbleSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/bubbleSettingsModel) to **true**. Then, bind the data source to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/maps/bubbleSettingsModel#datasource) property and specify the field containing numerical data using the [`valuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/bubbleSettingsModel#valuepath) property. diff --git a/chart-sdk/angular/maps/color-mapping.md b/chart-sdk/angular/maps/color-mapping.md index c19a05327..7babbd15d 100644 --- a/chart-sdk/angular/maps/color-mapping.md +++ b/chart-sdk/angular/maps/color-mapping.md @@ -1,6 +1,6 @@ --- layout: post -title: Color mapping in Angular Maps component | Syncfusion +title: Color Mapping in Angular Maps | Syncfusion description: Learn here all about Color mapping in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Color mapping @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Color mapping in Angular Maps component +# Color Mapping in Angular Maps Color mapping customizes shape colors based on data values. It supports three primary types: range, equal, and desaturation. To apply color mapping, bind data to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel#datasource) property of [`layerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel) and set the [`colorValuePath`](https://ej2.syncfusion.com/angular/documentation/api/maps/shapeSettingsModel#colorvaluepath) property in [`shapeSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/shapeSettingsModel) to specify which field controls the color value. diff --git a/chart-sdk/angular/maps/customization.md b/chart-sdk/angular/maps/customization.md index a8ea9cdf9..84a75f73f 100644 --- a/chart-sdk/angular/maps/customization.md +++ b/chart-sdk/angular/maps/customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Customization in Angular Maps component | Syncfusion +title: Customization in Angular Maps | Syncfusion description: Learn here all about Customization in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in Angular Maps component +# Customization in Angular Maps The Maps component provides various options to customize its appearance, including size, title, theme, container styling, shape properties, and projection type. This section explains how to configure these customization options. diff --git a/chart-sdk/angular/maps/data-labels.md b/chart-sdk/angular/maps/data-labels.md index 47a10d297..8eb245011 100644 --- a/chart-sdk/angular/maps/data-labels.md +++ b/chart-sdk/angular/maps/data-labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Data labels in Angular Maps component | Syncfusion +title: Data Labels in Angular Maps | Syncfusion description: Learn here all about Data labels in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data labels @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in Angular Maps component +# Data Labels in Angular Maps Data labels display information about Maps shapes. Enable data labels by setting the [visible](https://ej2.syncfusion.com/angular/documentation/api/maps/dataLabelSettingsModel#visible) property of the [dataLabelSettings](https://ej2.syncfusion.com/angular/documentation/api/maps/dataLabelSettingsModel) to **true**. diff --git a/chart-sdk/angular/maps/ej1-api-migration.md b/chart-sdk/angular/maps/ej1-api-migration.md index cb937b0b4..51fcef8cd 100644 --- a/chart-sdk/angular/maps/ej1-api-migration.md +++ b/chart-sdk/angular/maps/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Maps component | Syncfusion +title: Migration from Essential JS 1 in Angular Maps | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Ej1 api migration in Angular Maps component +# EMigration from Essential JS 1 in Angular Maps This article describes the API migration process of Maps component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/maps/getting-started.md b/chart-sdk/angular/maps/getting-started.md index 5eaba16a0..9dd80fc1d 100644 --- a/chart-sdk/angular/maps/getting-started.md +++ b/chart-sdk/angular/maps/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Angular Maps component | Syncfusion +title: Getting Started with Angular Maps | Syncfusion description: Check out and learn about the Getting started with Angular Maps component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Maps Component +# Getting Started with Angular Maps This section explains the steps required to create a simple [Maps](https://www.syncfusion.com/angular-components/angular-maps-library) and demonstrates the basic usage of the Maps component. diff --git a/chart-sdk/angular/maps/how-to/creating-routes-between-the-markers.md b/chart-sdk/angular/maps/how-to/creating-routes-between-the-markers.md index 95ce83016..89ae7cbeb 100644 --- a/chart-sdk/angular/maps/how-to/creating-routes-between-the-markers.md +++ b/chart-sdk/angular/maps/how-to/creating-routes-between-the-markers.md @@ -1,6 +1,6 @@ --- layout: post -title: How to create routes between markers in Maps component | Syncfusion +title: How to create routes between markers in Angular Maps | Syncfusion description: Learn here all about creating routes between markers in the Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Maps @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Creating Routes Between Markers in the Angular Maps component +# How to create routes between markers in Angular Maps The Syncfusion® Maps component supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to visually indicate the source and destination, making it easier to view the path between them on the map. diff --git a/chart-sdk/angular/maps/how-to/custom-path.md b/chart-sdk/angular/maps/how-to/custom-path.md index aee29f2cc..c31d60813 100644 --- a/chart-sdk/angular/maps/how-to/custom-path.md +++ b/chart-sdk/angular/maps/how-to/custom-path.md @@ -1,6 +1,6 @@ --- layout: post -title: Custom path in Angular Maps component | Syncfusion +title: How to render a custom path in Angular Maps | Syncfusion description: Learn here all about Custom path in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Custom path @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Custom path in Angular Maps component +# How to render a custom path in Angular Maps Maps component can be customized as the desired layout using the custom path map feature. Here, the Maps component has been showcased with normal geometry type shapes to represent the bus seat selection layout. Please refer to the following example to render the bus seat selection. diff --git a/chart-sdk/angular/maps/how-to/drilldown.md b/chart-sdk/angular/maps/how-to/drilldown.md index 60154272f..b446d1b91 100644 --- a/chart-sdk/angular/maps/how-to/drilldown.md +++ b/chart-sdk/angular/maps/how-to/drilldown.md @@ -1,6 +1,6 @@ --- layout: post -title: Drilldown in Angular Maps component | Syncfusion +title: How to enable drilldown in Angular Maps | Syncfusion description: Learn here all about Drilldown in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Drilldown @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown in Angular Maps component +# How to enable drilldown in Angular Maps -By clicking a continent, all the countries available in that continent can be viewed using the drill-down feature. For example, the countries in the `Africa` continent have been showcased here. To showcase all the countries in `Africa` continent by clicking the [`shapeSelected`](https://ej2.syncfusion.com/angular/documentation/api/maps/#shapeselected) event as mentioned in the following example. +By clicking a continent, all the countries available in that continent can be viewed using the drill-down feature. For example, the countries in the `Africa` continent have been showcased here. To showcase all the countries in `Africa` continent by clicking the [`shapeSelected`](https://ej2.syncfusion.com/angular/documentation/api/maps#shapeselected) event as mentioned in the following example. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/maps/internationalization.md b/chart-sdk/angular/maps/internationalization.md index 4deaaa7bb..a59e7078d 100644 --- a/chart-sdk/angular/maps/internationalization.md +++ b/chart-sdk/angular/maps/internationalization.md @@ -1,6 +1,6 @@ --- layout: post -title: Internationalization in Angular Maps component | Syncfusion +title: Internationalization in Angular Maps | Syncfusion description: Learn here all about Internationalization in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Internationalization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in Angular Maps component +# Internationalization in Angular Maps Internationalization enables the Maps component to display content in different cultures and locales, making it accessible to users worldwide. The Maps component supports internationalization for the following elements: diff --git a/chart-sdk/angular/maps/layers.md b/chart-sdk/angular/maps/layers.md index 17e004f36..d7791242a 100644 --- a/chart-sdk/angular/maps/layers.md +++ b/chart-sdk/angular/maps/layers.md @@ -1,6 +1,6 @@ --- layout: post -title: Layers in Angular Maps component | Syncfusion +title: Layers in Angular Maps | Syncfusion description: Learn here all about Layers in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Layers @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Layers in Angular Maps component +# Layers in Angular Maps Layers are the fundamental building blocks of the Maps component. Each layer can display shape data from GeoJSON files or map providers. The Maps component renders content through the [`layers`](https://ej2.syncfusion.com/angular/documentation/api/maps#layers) property, and multiple layers can be added to create rich, layered map visualizations. diff --git a/chart-sdk/angular/maps/legend.md b/chart-sdk/angular/maps/legend.md index 84ec08355..8d7f10c9f 100644 --- a/chart-sdk/angular/maps/legend.md +++ b/chart-sdk/angular/maps/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular Maps component | Syncfusion +title: Legend in Angular Maps | Syncfusion description: Learn here all about Legend in Syncfusion Angular Maps 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 Maps component +# Legend in Angular Maps A Legend is a key on a Maps that contains descriptions for swatches of symbols. It can be represented in various colors, shapes or other identifiers based on the data and provides valuable information for interpreting what the Maps are displaying. It explains what each symbol in the Maps represents. Legends are enabled by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/maps/legendSettingsModel#visible) property of [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/legendSettingsModel) property to **true**. diff --git a/chart-sdk/angular/maps/localization.md b/chart-sdk/angular/maps/localization.md index 9d92e744e..12bac2ce1 100644 --- a/chart-sdk/angular/maps/localization.md +++ b/chart-sdk/angular/maps/localization.md @@ -1,6 +1,6 @@ --- layout: post -title: Localization in Angular Maps component | Syncfusion +title: Localization in Angular Maps | Syncfusion description: Learn here all about Localization in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in Angular Maps component +# Localization in Angular Maps The localization library allows localizing the default text content of the Maps component. The Maps component has the static text of some features such as tooltip of zoom toolbar, and that can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object. diff --git a/chart-sdk/angular/maps/markers.md b/chart-sdk/angular/maps/markers.md index 456fd85ca..949b2904d 100644 --- a/chart-sdk/angular/maps/markers.md +++ b/chart-sdk/angular/maps/markers.md @@ -1,6 +1,6 @@ --- layout: post -title: Markers in Angular Maps component | Syncfusion +title: Markers in Angular Maps | Syncfusion description: Learn here all about Markers in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Markers @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Markers in Angular Maps component +# Markers in Angular Maps Markers are visual indicators used to pinpoint specific locations on the Maps. They can display desired symbols to highlight points of interest or important geographic positions. Markers can be enabled by setting the[`visible`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel#visible) property of the [`markerSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/markerSettingsModel) to **true**. diff --git a/chart-sdk/angular/maps/methods.md b/chart-sdk/angular/maps/methods.md index 064f07751..217d563ad 100644 --- a/chart-sdk/angular/maps/methods.md +++ b/chart-sdk/angular/maps/methods.md @@ -1,6 +1,6 @@ --- layout: post -title: Methods in Angular Maps component | Syncfusion +title: Methods in Angular Maps | Syncfusion description: Learn here all about the methods in the Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Maps @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Methods in Angular Maps component +# Methods in Angular Maps The Maps component provides several public methods that enable programmatic control and interaction with map component. These methods allow developers to perform operations such as retrieving geographic coordinates, manipulating layers, refreshing content, and exporting map visualizations. This section documents the available methods and their usage. diff --git a/chart-sdk/angular/maps/navigation-line.md b/chart-sdk/angular/maps/navigation-line.md index a6d5310ba..8d34169e1 100644 --- a/chart-sdk/angular/maps/navigation-line.md +++ b/chart-sdk/angular/maps/navigation-line.md @@ -1,6 +1,6 @@ --- layout: post -title: Navigation line in Angular Maps component | Syncfusion +title: Navigation Lines in Angular Maps | Syncfusion description: Learn here all about Navigation line in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Navigation line @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Navigation line in Angular Maps component +# Navigation Lines in Angular Maps Navigation lines are curved paths used to denote the route between two locations on the Maps. This feature is commonly used to draw flight routes, sea routes, or any path connecting two geographic points. Navigation lines are enabled by setting the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/maps/navigationLineSettingsModel#visible) property of the [`navigationLineSettings`](https://ej2.syncfusion.com/angular/documentation/api/maps/navigationLineSettingsModel) to **true**. diff --git a/chart-sdk/angular/maps/polygon.md b/chart-sdk/angular/maps/polygon.md index 611e8915c..dfbe8ee85 100644 --- a/chart-sdk/angular/maps/polygon.md +++ b/chart-sdk/angular/maps/polygon.md @@ -1,6 +1,6 @@ --- layout: post -title: Polygon in Angular Maps component | Syncfusion +title: Polygon in Angular Maps | Syncfusion description: Learn here all about Polygon in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Polygon @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Polygon shape in Angular Maps component +# Polygon in Angular Maps The Maps component supports rendering custom polygon shapes as overlays on both geometry-based maps and online tile maps. Polygons are useful for highlighting specific geographic regions, marking zones of interest, drawing custom boundaries, or visualizing areas such as coverage zones, territorial boundaries, or restricted areas. This feature is configured using the [polygons](https://ej2.syncfusion.com/angular/documentation/api/maps/polygonSettingsModel#polygons) property, which allows multiple polygon shapes to be added and customized independently. diff --git a/chart-sdk/angular/maps/populate-data.md b/chart-sdk/angular/maps/populate-data.md index 35ac8df88..f2eae676b 100644 --- a/chart-sdk/angular/maps/populate-data.md +++ b/chart-sdk/angular/maps/populate-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Populate data in Angular Maps component | Syncfusion +title: Populate Data in Angular Maps | Syncfusion description: Learn here all about Populate data in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Populate data @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Populate data in Angular Maps component +# Populate Data in Angular Maps ## Geometry types diff --git a/chart-sdk/angular/maps/print.md b/chart-sdk/angular/maps/print.md index 2f74a95c3..42e015789 100644 --- a/chart-sdk/angular/maps/print.md +++ b/chart-sdk/angular/maps/print.md @@ -1,6 +1,6 @@ --- layout: post -title: Print in Angular Maps component | Syncfusion +title: Print and Export in Angular Maps | Syncfusion description: Learn here all about Print in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Print @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print in Angular Maps component +# Print and Export in Angular Maps ## Print diff --git a/chart-sdk/angular/maps/providers/azure-maps.md b/chart-sdk/angular/maps/providers/azure-maps.md index 237f1a7be..7f1f932f6 100644 --- a/chart-sdk/angular/maps/providers/azure-maps.md +++ b/chart-sdk/angular/maps/providers/azure-maps.md @@ -1,6 +1,6 @@ --- layout: post -title: Azure maps in Angular Maps component | Syncfusion +title: Azure Maps in Angular Maps | Syncfusion description: Learn here all about Azure maps in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Azure maps @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Azure maps integration in Angular Maps component +# Azure Maps in Angular Maps Azure Maps is an online map service provider from Microsoft. Similar to OSM and Bing Maps, it provides map tile images based on requests and combines them to display the map area. Azure Maps offers various map styles including satellite imagery, road maps, and terrain views with global coverage. @@ -22,7 +22,7 @@ Before using Azure Maps with the Maps component, the following prerequisites mus To obtain an Azure Maps subscription key, follow the steps outlined in the [Azure Maps authentication documentation](https://docs.microsoft.com/en-us/azure/azure-maps/how-to-manage-authentication). The subscription key must be included in all API requests to authenticate and access Azure Maps services. ->Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/legal/) for terms of use and pricing information. +>Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/legal) for terms of use and pricing information. ## Adding Azure Maps diff --git a/chart-sdk/angular/maps/providers/bing-maps.md b/chart-sdk/angular/maps/providers/bing-maps.md index 6d116dcba..c855fdc30 100644 --- a/chart-sdk/angular/maps/providers/bing-maps.md +++ b/chart-sdk/angular/maps/providers/bing-maps.md @@ -1,6 +1,6 @@ --- layout: post -title: Bing maps in Angular Maps component | Syncfusion +title: Bing Maps in Angular Maps | Syncfusion description: Learn here all about Bing maps in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bing maps @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bing maps integration in Angular Maps component +# Bing Maps in Angular Maps Bing Maps is a online Maps provider, owned by Microsoft. As like OSM, it provide Maps tile images based on our requests and combines those images into a single one to display Maps area. diff --git a/chart-sdk/angular/maps/providers/map-provider.md b/chart-sdk/angular/maps/providers/map-provider.md index 9c8a27581..07638fb03 100644 --- a/chart-sdk/angular/maps/providers/map-provider.md +++ b/chart-sdk/angular/maps/providers/map-provider.md @@ -1,6 +1,6 @@ --- layout: post -title: Map provider in Angular Maps component | Syncfusion +title: OpenStreetMap in Angular Maps | Syncfusion description: Learn here all about Map provider in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Map provider @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# OpenStreetMap integration in Angular Maps component +# OpenStreetMap in Angular Maps Map providers are online services that supply map tile images for rendering geographic visualizations. The Maps component supports integration with various tile-based map providers to display real-world geographic data. diff --git a/chart-sdk/angular/maps/providers/other-maps.md b/chart-sdk/angular/maps/providers/other-maps.md index 50e6ce147..32017280e 100644 --- a/chart-sdk/angular/maps/providers/other-maps.md +++ b/chart-sdk/angular/maps/providers/other-maps.md @@ -1,6 +1,6 @@ --- layout: post -title: Other maps in Angular Maps component | Syncfusion +title: Other Maps in Angular Maps | Syncfusion description: Learn here all about Other maps in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Other maps @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Other maps in Angular Maps component +# Other Maps in Angular Maps In addition to OpenStreetMap, Bing Maps, and Azure Maps, the Maps component supports integration with other third-party online map service providers. Custom map providers can be rendered by specifying their tile server URL in the [urlTemplate](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel#urltemplate) property. The Maps component supports any tile-based map provider that uses standard URL template formats for tile requests. diff --git a/chart-sdk/angular/maps/state-persistence.md b/chart-sdk/angular/maps/state-persistence.md index 5ccf8eb45..069012dc0 100644 --- a/chart-sdk/angular/maps/state-persistence.md +++ b/chart-sdk/angular/maps/state-persistence.md @@ -1,6 +1,6 @@ --- layout: post -title: State persistence in Angular Maps component | Syncfusion +title: State Persistence in Angular Maps | Syncfusion description: Learn here all about State persistence in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: State persistence @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# State persistence in Angular Maps component +# State Persistence in Angular Maps ## State Persistence diff --git a/chart-sdk/angular/maps/user-interactions.md b/chart-sdk/angular/maps/user-interactions.md index eb2cf03e1..ce47738f9 100644 --- a/chart-sdk/angular/maps/user-interactions.md +++ b/chart-sdk/angular/maps/user-interactions.md @@ -1,6 +1,6 @@ --- layout: post -title: User interactions in Angular Maps component | Syncfusion +title: User Interactions in Angular Maps | Syncfusion description: Learn here all about User interactions in Syncfusion Angular Maps component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: User interactions @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interactions in Angular Maps component +# User Interactions in Angular Maps ## Zooming diff --git a/chart-sdk/angular/range-navigator/accessibility.md b/chart-sdk/angular/range-navigator/accessibility.md index 1874bf915..fc916d332 100644 --- a/chart-sdk/angular/range-navigator/accessibility.md +++ b/chart-sdk/angular/range-navigator/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Range navigator component | Syncfusion +title: Accessibility in Angular Range Navigator | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Range navigator component +# Accessibility in Angular Range Navigator The Range navigator component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/angular/range-navigator/axis.md b/chart-sdk/angular/range-navigator/axis.md index 2bd311b9b..176bbfd88 100644 --- a/chart-sdk/angular/range-navigator/axis.md +++ b/chart-sdk/angular/range-navigator/axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis in Angular Range navigator component | Syncfusion +title: Axis in Angular Range Navigator | Syncfusion description: Learn here all about Axis in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis @@ -10,11 +10,11 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Axis in Angular Range navigator component +# Axis in Angular Range Navigator ## Numeric -The numeric scale is used to represent the numeric values of data in a Range Selector. By default, the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#valuetype) of a Range Selector is **Double**. +The numeric scale is used to represent the numeric values of data in a Range Selector. By default, the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#valuetype) of a Range Selector is **Double**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -30,7 +30,7 @@ The numeric scale is used to represent the numeric values of data in a Range Sel ### Range -The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#maximum), and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#interval) properties. +The minimum and the maximum of the scale will be calculated automatically based on the provided data. It can be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#maximum), and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#interval) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -46,7 +46,7 @@ The minimum and the maximum of the scale will be calculated automatically based ### Label Format -The numeric labels can be formatted using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelformat) property and it supports all the globalized formats. +The numeric labels can be formatted using the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelformat) property and it supports all the globalized formats. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -156,7 +156,7 @@ The Logarithmic supports the logarithmic scale, and it is used to visualize the ### Range -The minimum and the maximum of the Range Selector will be calculated automatically based on the provided data. It can be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#maximum), and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#interval) properties. +The minimum and the maximum of the Range Selector will be calculated automatically based on the provided data. It can be customized by using the [`minimum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#minimum), [`maximum`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#maximum), and [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#interval) properties. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -172,7 +172,7 @@ The minimum and the maximum of the Range Selector will be calculated automatical ### Logarithmic Base -The Logarithmic Base can be customized using the [`logBase`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#logbase) property. The default value of this property is **10**. +The Logarithmic Base can be customized using the [`logBase`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#logbase) property. The default value of this property is **10**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -206,7 +206,7 @@ The Range Selector supports the DateTime scale and displays the DateTime values ### Interval Customization -The DateTime intervals can be customized using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#interval) and the [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#intervaltype) properties of the Range Selector. For example, if the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#interval) is set to 2 and the [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#intervaltype) is set to years, the interval will be considered to be 2 years. +The DateTime intervals can be customized using the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#interval) and the [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#intervaltype) properties of the Range Selector. For example, if the [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#interval) is set to 2 and the [`intervalType`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#intervaltype) is set to years, the interval will be considered to be 2 years. DateTime supports the following interval types: * Auto @@ -232,7 +232,7 @@ DateTime supports the following interval types: ### Label Format -The [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelformat) property is used to format and parse the date to all globalize format. +The [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelformat) property is used to format and parse the date to all globalize format. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -246,7 +246,7 @@ The [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-n {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/range-selector/axis/datetime-cs3" %} -The following table shows the results of applying some common DateTime formats to the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelformat) property. +The following table shows the results of applying some common DateTime formats to the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelformat) property.
diff --git a/chart-sdk/angular/range-navigator/customization.md b/chart-sdk/angular/range-navigator/customization.md index cd459e78e..df8de77f6 100644 --- a/chart-sdk/angular/range-navigator/customization.md +++ b/chart-sdk/angular/range-navigator/customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Customization in Angular Range navigator component | Syncfusion +title: Customization in Angular Range Navigator | Syncfusion description: Learn here all about Customization in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customization @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in Angular Range navigator component +# Customization in Angular Range Navigator ## Navigator appearance -The Range Selector can be customized by using the [`navigatorStyleSettings`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#navigatorstylesettings). The [`selectedRegionColor`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/styleSettingsModel/#selectedregioncolor) property is used to specify the color for the selected region, whereas the [`unselectedRegionColor`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/styleSettingsModel/#unselectedregioncolor) property is used to specify the color for the unselected region. +The Range Selector can be customized by using the [`navigatorStyleSettings`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#navigatorstylesettings). The [`selectedRegionColor`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/styleSettingsModel#selectedregioncolor) property is used to specify the color for the selected region, whereas the [`unselectedRegionColor`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/styleSettingsModel#unselectedregioncolor) property is used to specify the color for the unselected region. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ The thumb property allows to customize the border, fill color, size, and type of ## Border customization -Using the [`navigatorBorder`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/thumbSettingsModel/#border), the [`width`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/borderModel/#width) and [`color`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/borderModel/#color) of the Range Selector border can be customized. +Using the [`navigatorBorder`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/thumbSettingsModel#border), the [`width`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/borderModel#width) and [`color`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/borderModel#color) of the Range Selector border can be customized. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ Using the [`navigatorBorder`](https://ej2.syncfusion.com/angular/documentation/a ## Deferred update -If the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#enabledeferredupdate) property is set to **true**, then the changed event will be triggered after dragging the slider. If the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#enabledeferredupdate) is **false**, then the changed event will be triggered when dragging the slider. By default, the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#enabledeferredupdate) is set to **false**. +If the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#enabledeferredupdate) property is set to **true**, then the changed event will be triggered after dragging the slider. If the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#enabledeferredupdate) is **false**, then the changed event will be triggered when dragging the slider. By default, the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#enabledeferredupdate) is set to **false**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -76,7 +76,7 @@ If the [`enableDeferredUpdate`](https://ej2.syncfusion.com/angular/documentation ## Allow snapping -The [`allowSnapping`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#allowsnapping) property toggles the placement of the slider exactly to the left or on the nearest interval. +The [`allowSnapping`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#allowsnapping) property toggles the placement of the slider exactly to the left or on the nearest interval. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -92,7 +92,7 @@ The [`allowSnapping`](https://ej2.syncfusion.com/angular/documentation/api/range ## Animation -The speed of the animation can be controlled using the [`animationDuration`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#animationduration) property. The default value of the [`animationDuration`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#animationduration) property is **500** milliseconds. +The speed of the animation can be controlled using the [`animationDuration`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#animationduration) property. The default value of the [`animationDuration`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#animationduration) property is **500** milliseconds. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -108,5 +108,5 @@ The speed of the animation can be controlled using the [`animationDuration`](htt ## See Also -* [Grid and Tick Lines](./grid-tick/) -* [Labels](./labels/) \ No newline at end of file +* [Grid and Tick Lines](./grid-tick) +* [Labels](./labels) \ No newline at end of file diff --git a/chart-sdk/angular/range-navigator/ej1-api-migration.md b/chart-sdk/angular/range-navigator/ej1-api-migration.md index c72f59e11..3d7062e71 100644 --- a/chart-sdk/angular/range-navigator/ej1-api-migration.md +++ b/chart-sdk/angular/range-navigator/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Range navigator component | Syncfusion +title: Ej1 Api Migration in Angular Range Navigator | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in Angular Range navigator component +# Ej1 Api Migration in Angular Range Navigator This article describes the API migration process of Chart component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/range-navigator/export-print.md b/chart-sdk/angular/range-navigator/export-print.md index de35072c2..c21981928 100644 --- a/chart-sdk/angular/range-navigator/export-print.md +++ b/chart-sdk/angular/range-navigator/export-print.md @@ -1,6 +1,6 @@ --- layout: post -title: Export print in Angular Range navigator component | Syncfusion +title: Export Print in Angular Range Navigator | Syncfusion description: Learn here all about Export print in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Export print @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Export print in Angular Range navigator component +# Export Print in Angular Range Navigator ## Export -The rendered Range Selector can be exported to **JPEG**, **PNG**, **SVG**, or **PDF** format by using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#export) method in the Range Selector. This method contains the following parameters: +The rendered Range Selector can be exported to **JPEG**, **PNG**, **SVG**, or **PDF** format by using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#export) method in the Range Selector. This method contains the following parameters: * **Type** - To specify the export type. The component can be exported to **JPEG**, **PNG**, **SVG**, or **PDF** format. * **File name** - To specify the file name to export. @@ -32,7 +32,7 @@ The rendered Range Selector can be exported to **JPEG**, **PNG**, **SVG**, or ** ## Print -The rendered Range Selector can be printed directly from the browser by calling the public method [`print`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#print). +The rendered Range Selector can be printed directly from the browser by calling the public method [`print`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#print). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/range-navigator/getting-started.md b/chart-sdk/angular/range-navigator/getting-started.md index 92eb7cd3a..20a0f280d 100644 --- a/chart-sdk/angular/range-navigator/getting-started.md +++ b/chart-sdk/angular/range-navigator/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular Range Navigator component | Syncfusion +title: Getting Started with Angular Range Navigator | Syncfusion description: Check out and learn about Getting Started with Angular Range Navigator component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Range Navigator Component +# Getting Started with Angular Range Navigator This section explains the steps required to create a simple [Angular Range Navigator](https://www.syncfusion.com/angular-components/angular-range-selector) and demonstrates the basic usage of the Range Navigator component. diff --git a/chart-sdk/angular/range-navigator/grid-tick.md b/chart-sdk/angular/range-navigator/grid-tick.md index 0cc4e60da..8f4d6a63a 100644 --- a/chart-sdk/angular/range-navigator/grid-tick.md +++ b/chart-sdk/angular/range-navigator/grid-tick.md @@ -1,6 +1,6 @@ --- layout: post -title: Grid tick in Angular Range navigator component | Syncfusion +title: Grid Tick in Angular Range Navigator | Syncfusion description: Learn here all about Grid tick in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Grid tick @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grid tick in Angular Range navigator component +# Grid Tick in Angular Range Navigator ## Grid line customization -The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The `width`, `color`, and `dashArray` of the major gridlines can be customized by using the [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#majorgridlines) setting. +The gridlines indicate axis divisions by drawing the chart plot. Gridlines include helpful cues to the user, particularly for large or complicated charts. The `width`, `color`, and `dashArray` of the major gridlines can be customized by using the [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#majorgridlines) setting. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ The gridlines indicate axis divisions by drawing the chart plot. Gridlines inclu ## Tick line customization -Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The `width`, `color`, and `dashArray` of the major ticklines can be customized by using the [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#majorticklines) setting. +Ticklines are the small lines which is drawn on the axis line representing the axis labels. Ticklines will be drawn outside the axis by default. The `width`, `color`, and `dashArray` of the major ticklines can be customized by using the [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#majorticklines) setting. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/range-navigator/inversed.md b/chart-sdk/angular/range-navigator/inversed.md index db8262b56..45667f18c 100644 --- a/chart-sdk/angular/range-navigator/inversed.md +++ b/chart-sdk/angular/range-navigator/inversed.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Inversed in Angular Range navigator component -The Range Selector supports right-to-left (RTL), which can be enabled with the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#enablertl) property. +The Range Selector supports right-to-left (RTL), which can be enabled with the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#enablertl) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/range-navigator/labels.md b/chart-sdk/angular/range-navigator/labels.md index a41d98a3d..405a3dc3f 100644 --- a/chart-sdk/angular/range-navigator/labels.md +++ b/chart-sdk/angular/range-navigator/labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Labels in Angular Range navigator component | Syncfusion +title: Labels in Angular Range Navigator | Syncfusion description: Learn here all about Labels in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Labels @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Labels in Angular Range navigator component +# Labels in Angular Range Navigator ## Multilevel labels -The multi-level labels for the Range Selector can be enabled by setting the [`enableGrouping`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#enablegrouping) property to **true**. This is restricted to the DateTime axis alone. +The multi-level labels for the Range Selector can be enabled by setting the [`enableGrouping`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#enablegrouping) property to **true**. This is restricted to the DateTime axis alone. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ The multi-level labels for the Range Selector can be enabled by setting the [`en ## Grouping -The multi-level labels can be grouped using the [`groupBy`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#groupby) property with the following interval types: +The multi-level labels can be grouped using the [`groupBy`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#groupby) property with the following interval types: * Auto * Years @@ -54,7 +54,7 @@ The multi-level labels can be grouped using the [`groupBy`](https://ej2.syncfusi ## Smart labels -The [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelintersectaction) property is used to avoid overlapping of labels. The following code sample shows the setting of [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelintersectaction) property to **Hide**. +The [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelintersectaction) property is used to avoid overlapping of labels. The following code sample shows the setting of [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelintersectaction) property to **Hide**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -70,7 +70,7 @@ The [`labelIntersectAction`](https://ej2.syncfusion.com/angular/documentation/ap ## Label positioning -By default, the labels can be placed outside the Range Selector. It can also be placed inside the Range Selector using the [`labelPosition`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelposition) property. +By default, the labels can be placed outside the Range Selector. It can also be placed inside the Range Selector using the [`labelPosition`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelposition) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -86,7 +86,7 @@ By default, the labels can be placed outside the Range Selector. It can also be ## Labels customization -The font size, color, family, etc. can be customized using the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#labelstyle) setting. +The font size, color, family, etc. can be customized using the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#labelstyle) setting. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/range-navigator/lightweight.md b/chart-sdk/angular/range-navigator/lightweight.md index ccf6d2ddc..ed2535ce2 100644 --- a/chart-sdk/angular/range-navigator/lightweight.md +++ b/chart-sdk/angular/range-navigator/lightweight.md @@ -1,16 +1,17 @@ --- layout: post -title: Lightweight in Angular Range navigator component | Syncfusion -description: Learn here all about Lightweight in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. +title: Lightweight in Angular Range Navigator | Syncfusion +description: Learn here all about Lightweight in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more platform: chart-sdk control: Lightweight documentation: ug domainurl: https://help.syncfusion.com/chart-sdk + --- -# Lightweight in Angular Range navigator component +# Lightweight in Angular Range Navigator -By default, when the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#datasource) for [`series`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#series) is empty, a lightweight Range Selector will be shown without Chart. +By default, when the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#datasource) for [`series`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#series) is empty, a lightweight Range Selector will be shown without Chart. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -26,4 +27,4 @@ By default, when the [`dataSource`](https://ej2.syncfusion.com/angular/documenta ## See Also -* [Period Selector](./period-selector/) +* [Period Selector](./period-selector) diff --git a/chart-sdk/angular/range-navigator/period-selector.md b/chart-sdk/angular/range-navigator/period-selector.md index c51cac479..ce513a740 100644 --- a/chart-sdk/angular/range-navigator/period-selector.md +++ b/chart-sdk/angular/range-navigator/period-selector.md @@ -1,6 +1,6 @@ --- layout: post -title: Period selector in Angular Range navigator component | Syncfusion +title: Period Selector in Angular Range Navigator | Syncfusion description: Learn here all about Period selector in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Period selector @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Period selector in Angular Range navigator component +# Period Selector in Angular Range Navigator The period selector allows to select a range with specified periods. ## Periods -An array of objects that allows the users to specify pre-defined time intervals. The [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#interval) property specifies the count value of the button, and the `text` property specifies the text to be displayed on the button. The [`intervaltype`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#intervaltype) property allows the users to customize the interval type, and it supports the following types: +An array of objects that allows the users to specify pre-defined time intervals. The [`interval`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#interval) property specifies the count value of the button, and the `text` property specifies the text to be displayed on the button. The [`intervaltype`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#intervaltype) property allows the users to customize the interval type, and it supports the following types: * Auto * Years @@ -42,7 +42,7 @@ An array of objects that allows the users to specify pre-defined time intervals. ## Positioning period selector -The [`position`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/periodSelectorSettingsModel/#position) property allows the users to position the period selector at the **Top** or **Bottom**. +The [`position`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/periodSelectorSettingsModel#position) property allows the users to position the period selector at the **Top** or **Bottom**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -58,7 +58,7 @@ The [`position`](https://ej2.syncfusion.com/angular/documentation/api/range-navi ## Height -The [`height`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/periodSelectorSettingsModel/#height) property allows the users to specify the height of the period selector. The default value of the height property is **43px**. +The [`height`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/periodSelectorSettingsModel#height) property allows the users to specify the height of the period selector. The default value of the height property is **43px**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -74,7 +74,7 @@ The [`height`](https://ej2.syncfusion.com/angular/documentation/api/range-naviga ## Visibility of range navigator -The [`disableRangeSelector`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#disablerangeselector) property allows the users to display only the period selector and not the Range Selector. +The [`disableRangeSelector`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#disablerangeselector) property allows the users to display only the period selector and not the Range Selector. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -90,4 +90,4 @@ The [`disableRangeSelector`](https://ej2.syncfusion.com/angular/documentation/ap ## See Also -* [LightWeight](./lightweight/) \ No newline at end of file +* [LightWeight](./lightweight) \ No newline at end of file diff --git a/chart-sdk/angular/range-navigator/r-t-l.md b/chart-sdk/angular/range-navigator/r-t-l.md index 3934e6041..eb6193a67 100644 --- a/chart-sdk/angular/range-navigator/r-t-l.md +++ b/chart-sdk/angular/range-navigator/r-t-l.md @@ -1,6 +1,6 @@ --- layout: post -title: R t l in Angular Range navigator component | Syncfusion +title: R T L in Angular Range Navigator | Syncfusion description: Learn here all about R t l in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: R t l @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# R t l in Angular Range navigator component +# R T L in Angular Range Navigator -The Range Selector supports right-to-left (RTL), which can be enabled with the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#enablertl) property. +The Range Selector supports right-to-left (RTL), which can be enabled with the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#enablertl) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/range-navigator/selecting-range.md b/chart-sdk/angular/range-navigator/selecting-range.md index 08348cab2..b74dd3369 100644 --- a/chart-sdk/angular/range-navigator/selecting-range.md +++ b/chart-sdk/angular/range-navigator/selecting-range.md @@ -1,6 +1,6 @@ --- layout: post -title: Selecting range in Angular Range navigator component | Syncfusion +title: Selecting Range in Angular Range Navigator | Syncfusion description: Learn here all about Selecting range in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selecting range @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selecting range in Angular Range navigator component +# Selecting Range in Angular Range Navigator The Range Selector's left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways: * By dragging the thumbs. * By tapping on the labels. -* By setting the start and the end through the [`value`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator/#value) property. +* By setting the start and the end through the [`value`](https://ej2.syncfusion.com/angular/documentation/api/range-navigator#value) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/range-navigator/series-types.md b/chart-sdk/angular/range-navigator/series-types.md index 51b3bd7ef..b666c24d2 100644 --- a/chart-sdk/angular/range-navigator/series-types.md +++ b/chart-sdk/angular/range-navigator/series-types.md @@ -1,6 +1,6 @@ --- layout: post -title: Series types in Angular Range navigator component | Syncfusion +title: Series Types in Angular Range Navigator | Syncfusion description: Learn here all about Series types in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series types @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series types in Angular Range navigator component +# Series Types in Angular Range Navigator To render the data, the Range Selector supports six types of series. diff --git a/chart-sdk/angular/range-navigator/tool-tip.md b/chart-sdk/angular/range-navigator/tool-tip.md index f17947d7b..4b400d383 100644 --- a/chart-sdk/angular/range-navigator/tool-tip.md +++ b/chart-sdk/angular/range-navigator/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tool tip in Angular Range navigator component | Syncfusion +title: Tool Tip in Angular Range Navigator | Syncfusion description: Learn here all about Tool tip in Syncfusion Angular Range navigator component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool tip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in Angular Range navigator component +# Tool Tip in Angular Range Navigator The tooltip for sliders are supported by the Range Selector. Sliders are used in the Range Selector to select data from a specific range. The tooltip displays the selected start and end values. diff --git a/chart-sdk/angular/sankey-diagram/accessibility.md b/chart-sdk/angular/sankey-diagram/accessibility.md index 6e2ea09a8..1f772b50c 100644 --- a/chart-sdk/angular/sankey-diagram/accessibility.md +++ b/chart-sdk/angular/sankey-diagram/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Sankey component | Syncfusion +title: Accessibility in Angular Sankey | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Accessibility platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Sankey component +# Accessibility in Angular Sankey The Sankey component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22), and relevant [WAI-ARIA](https://www.w3.org/TR/wai-aria#roles) roles. diff --git a/chart-sdk/angular/sankey-diagram/appearance.md b/chart-sdk/angular/sankey-diagram/appearance.md index d0341e1e9..cc56402f1 100644 --- a/chart-sdk/angular/sankey-diagram/appearance.md +++ b/chart-sdk/angular/sankey-diagram/appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in Angular Sankey component | Syncfusion +title: Appearance in Angular Sankey | Syncfusion description: Learn here all about Appearance in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Appearance platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular Sankey component +# Appearance in Angular Sankey The Sankey component provides comprehensive customization options to control visual appearance, dimensions, responsiveness, colors, borders, and themes. These appearance settings enable you to create diagrams that match your application's design system and user experience requirements. diff --git a/chart-sdk/angular/sankey-diagram/customization.md b/chart-sdk/angular/sankey-diagram/customization.md index f20c30906..ec72de0c1 100644 --- a/chart-sdk/angular/sankey-diagram/customization.md +++ b/chart-sdk/angular/sankey-diagram/customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Customization in Angular Sankey component | Syncfusion +title: Customization in Angular Sankey | Syncfusion description: Learn here all about Customization in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Customization platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in Angular Sankey component +# Customization in Angular Sankey The Sankey component provides extensive customization options to create visualizations that match your specific design requirements and data presentation needs. From styling and theming to advanced visual techniques, the component enables complete control over appearance and behavior. diff --git a/chart-sdk/angular/sankey-diagram/events.md b/chart-sdk/angular/sankey-diagram/events.md index 97343f871..953838810 100644 --- a/chart-sdk/angular/sankey-diagram/events.md +++ b/chart-sdk/angular/sankey-diagram/events.md @@ -1,6 +1,6 @@ --- layout: post -title: Events in Angular Sankey component | Syncfusion +title: Events in Angular Sankey | Syncfusion description: Learn here all about Events in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Events platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in Angular Sankey component +# Events in Angular Sankey The Sankey Chart provides comprehensive events that allow you to customize behavior, respond to user interactions, and hook into the chart life cycle. These events enable advanced customization scenarios including data transformation, analytics tracking, and dynamic UI updates. diff --git a/chart-sdk/angular/sankey-diagram/getting-started.md b/chart-sdk/angular/sankey-diagram/getting-started.md index 027d5c082..8b1e9d511 100644 --- a/chart-sdk/angular/sankey-diagram/getting-started.md +++ b/chart-sdk/angular/sankey-diagram/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular Sankey Chart component | Syncfusion +title: Getting Started with Angular Sankey | Syncfusion description: Check out and learn about Getting Started with Angular Sankey Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Sankey Chart Component +# Getting Started with Angular Sankey This section explains the steps required to create a simple [Angular Sankey Chart](https://www.syncfusion.com/angular-components/angular-sankey-chart) and demonstrates the basic usage of the Angular Sankey Chart component. diff --git a/chart-sdk/angular/sankey-diagram/labels.md b/chart-sdk/angular/sankey-diagram/labels.md index 78b41a61a..a609fefac 100644 --- a/chart-sdk/angular/sankey-diagram/labels.md +++ b/chart-sdk/angular/sankey-diagram/labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Labels in Angular Sankey component \ Syncfusion +title: Labels in Angular Sankey | Syncfusion description: Learn here all about Labels in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Labels platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Labels in Angular Sankey component +# Labels in Angular Sankey Labels display descriptive text associated with nodes in the Sankey diagram, improving readability and interpretation. Additionally, labels make the diagram more understandable and interpretable, and the component provides comprehensive label customization options including visibility control, font styling, individual label configuration, and dynamic rendering events. diff --git a/chart-sdk/angular/sankey-diagram/legend.md b/chart-sdk/angular/sankey-diagram/legend.md index 4e99b78ab..1496db8a0 100644 --- a/chart-sdk/angular/sankey-diagram/legend.md +++ b/chart-sdk/angular/sankey-diagram/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular Sankey component \ Syncfusion +title: Legend in Angular Sankey | Syncfusion description: Learn here all about Legend in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Legend platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in Angular Sankey component +# Legend in Angular Sankey A legend provides a visual key that helps users understand the categories and meanings represented by nodes in the Sankey Chart. The Sankey Chart provides comprehensive legend configuration options including positioning, styling, customization, and interactive behaviors. You can enable and customize the legend using the `legend` property and by injecting the `SankeyLegend` module. diff --git a/chart-sdk/angular/sankey-diagram/links.md b/chart-sdk/angular/sankey-diagram/links.md index 82ca4c1b9..2e3f72899 100644 --- a/chart-sdk/angular/sankey-diagram/links.md +++ b/chart-sdk/angular/sankey-diagram/links.md @@ -1,6 +1,6 @@ --- layout: post -title: Links in Angular Sankey component | Syncfusion +title: Links in Angular Sankey | Syncfusion description: Learn here all about Links in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Links platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Links in Angular Sankey component +# Links in Angular Sankey Links are the connecting paths that visualize flow between nodes. Each link connects a source node to a target node and carries a quantitative value that determines its visual thickness. diff --git a/chart-sdk/angular/sankey-diagram/nodes.md b/chart-sdk/angular/sankey-diagram/nodes.md index 14d666887..e468055de 100644 --- a/chart-sdk/angular/sankey-diagram/nodes.md +++ b/chart-sdk/angular/sankey-diagram/nodes.md @@ -1,6 +1,6 @@ --- layout: post -title: Nodes in Angular Sankey component | Syncfusion +title: Nodes in Angular Sankey | Syncfusion description: Learn here all about Nodes in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Nodes platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Nodes in Angular Sankey component +# Nodes in Angular Sankey Nodes are the fundamental building blocks of a Sankey Chart, representing sources, targets, and intermediate entities in flow diagrams. The Sankey Chart provides extensive customization options for node appearance, enabling you to create visually meaningful and interactive flow diagrams. diff --git a/chart-sdk/angular/sankey-diagram/orientation-rtl.md b/chart-sdk/angular/sankey-diagram/orientation-rtl.md index cf79ff8da..55d540564 100644 --- a/chart-sdk/angular/sankey-diagram/orientation-rtl.md +++ b/chart-sdk/angular/sankey-diagram/orientation-rtl.md @@ -1,6 +1,6 @@ --- layout: post -title: Orientation and RTL in Angular Sankey component | Syncfusion +title: Orientation Rtl in Angular Sankey | Syncfusion description: Learn here all about Orientation and RTL in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Orientation and RTL platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Orientation and RTL in Angular Sankey component +# Orientation Rtl in Angular Sankey The Sankey Chart supports flexible layout options including horizontal and vertical orientations, as well as right-to-left (RTL) rendering for international applications. These features enable you to create localized and directionally appropriate visualizations. diff --git a/chart-sdk/angular/sankey-diagram/print-and-export.md b/chart-sdk/angular/sankey-diagram/print-and-export.md index 5f961e148..304e3d949 100644 --- a/chart-sdk/angular/sankey-diagram/print-and-export.md +++ b/chart-sdk/angular/sankey-diagram/print-and-export.md @@ -1,6 +1,6 @@ --- layout: post -title: Print and Export in Angular Sankey component | Syncfusion +title: Print and Export in Angular Sankey | Syncfusion description: Learn here all about Print and Export in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Print and Export platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in Angular Sankey component +# Print and Export in Angular Sankey The Sankey Chart provides comprehensive print and export functionality, enabling users to generate static files in multiple formats (PNG, JPEG, SVG, PDF) or print the diagram directly. This is useful for reports, documentation, sharing, and offline access. diff --git a/chart-sdk/angular/sankey-diagram/title-and-sub-title.md b/chart-sdk/angular/sankey-diagram/title-and-sub-title.md index fc0b68d31..540fe7a16 100644 --- a/chart-sdk/angular/sankey-diagram/title-and-sub-title.md +++ b/chart-sdk/angular/sankey-diagram/title-and-sub-title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title and Subtitle in Angular Sankey component | Syncfusion +title: Title and Sub Title in Angular Sankey | Syncfusion description: Learn here all about Title and Subtitle in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: Title and Subtitle platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and Subtitle in Angular Sankey component +# Title and Sub Title in Angular Sankey The Sankey Chart supports adding descriptive titles and subtitles to provide context and information about your data visualization. These text elements help users quickly understand the purpose and content of the diagram. You can fully customize the text, styling, alignment, and appearance using dedicated properties. diff --git a/chart-sdk/angular/sankey-diagram/tool-tip.md b/chart-sdk/angular/sankey-diagram/tool-tip.md index d30f87700..3e747916c 100644 --- a/chart-sdk/angular/sankey-diagram/tool-tip.md +++ b/chart-sdk/angular/sankey-diagram/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: ToolTip in Angular Sankey component | Syncfusion +title: Tool Tip in Angular Sankey | Syncfusion description: Learn here all about ToolTip in Syncfusion Angular Sankey component of Syncfusion Essential JS 2 and more. control: ToolTip platform: chart-sdk @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# ToolTip in Angular Sankey component +# Tool Tip in Angular Sankey The Sankey Chart provides tooltips that surface contextual details for hovered elements without cluttering the diagram. Tooltips display additional information when users hover over nodes or links in the Sankey Chart. You can enable and customize tooltips using the tooltip property and by injecting the SankeyTooltip module. diff --git a/chart-sdk/angular/smith-chart/accessibility.md b/chart-sdk/angular/smith-chart/accessibility.md index cd4e84180..9268c9777 100644 --- a/chart-sdk/angular/smith-chart/accessibility.md +++ b/chart-sdk/angular/smith-chart/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Smithchart component | Syncfusion +title: Accessibility in Angular Smith Chart | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Smithchart component +# Accessibility in Angular Smith Chart The Smith chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/angular/smith-chart/getting-started.md b/chart-sdk/angular/smith-chart/getting-started.md index 824a01b52..d6d920f5a 100644 --- a/chart-sdk/angular/smith-chart/getting-started.md +++ b/chart-sdk/angular/smith-chart/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular Smith Chart Component | Syncfusion +title: Getting Started with Angular Smith Chart | Syncfusion description: Check out and learn about getting started with the Angular Smith Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Smith Chart Component +# Getting Started with Angular Smith Chart This section explains the steps required to create an [Angular Smith Chart](https://www.syncfusion.com/angular-components/angular-smith-chart) and demonstrates the basic usage of the Smith Chart component in an Angular environment. diff --git a/chart-sdk/angular/smith-chart/smith-chart-axis.md b/chart-sdk/angular/smith-chart/smith-chart-axis.md index 573ce5c29..1d4162264 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-axis.md +++ b/chart-sdk/angular/smith-chart/smith-chart-axis.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart axis in Angular Smithchart component | Syncfusion +title: Smith Chart Axis in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart axis in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart axis @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smith chart axis in Angular Smithchart component +# Smith Chart Axis in Angular Smith Chart Like chart, Smithchart is having support for two types of axis. * Horizontal axis - axis drawn as straight line in the horizontal direction of the chart. diff --git a/chart-sdk/angular/smith-chart/smith-chart-dimensions.md b/chart-sdk/angular/smith-chart/smith-chart-dimensions.md index 9043b88b8..05cd3836e 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-dimensions.md +++ b/chart-sdk/angular/smith-chart/smith-chart-dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart dimensions in Angular Smithchart component | Syncfusion +title: Smith Chart Dimensions in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart dimensions in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart dimensions @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smith chart dimensions in Angular Smithchart component +# Smith Chart Dimensions in Angular Smith Chart You can render the smithchart either corresponding to its container size or you can set the size of the smithchart as per your requirement. To render the smithchart corresponding to its container size, you need to set the size for the smithchart container. Else to set the size for the smithchart as per your requirement, you can use the width and height properties in the smithchart. diff --git a/chart-sdk/angular/smith-chart/smith-chart-legend.md b/chart-sdk/angular/smith-chart/smith-chart-legend.md index f71d19839..bb359a2bb 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-legend.md +++ b/chart-sdk/angular/smith-chart/smith-chart-legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart legend in Angular Smithchart component | Syncfusion +title: Smith Chart Legend in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart legend in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart legend @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Smith chart legend in Angular Smithchart component +# Smith Chart Legend in Angular Smith Chart Legend is a key used in smithchart, that contains symbol and descriptions. It provides valuable information for interpreting what the smithchart is displaying and can be represented in various colors, shapes or other identifiers based on the data. In simple words, we can define that legend is used to denote the series rendered in the smithchart. diff --git a/chart-sdk/angular/smith-chart/smith-chart-marker.md b/chart-sdk/angular/smith-chart/smith-chart-marker.md index 2236aab23..b25dabf4c 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-marker.md +++ b/chart-sdk/angular/smith-chart/smith-chart-marker.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart marker in Angular Smithchart component | Syncfusion +title: Smith Chart Marker in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart marker in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart marker @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Smith chart marker in Angular Smithchart component +# Smith Chart Marker in Angular Smith Chart Markers and Datalabels are used to provide information about the data points in the series. You can add a shape to adorn each data point. By default marker and datalabel both are disabled in smithchart. You can enable both of them by setting visible property as true in marker and datalabel settings diff --git a/chart-sdk/angular/smith-chart/smith-chart-print.md b/chart-sdk/angular/smith-chart/smith-chart-print.md index 1b5fa5370..1a9766054 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-print.md +++ b/chart-sdk/angular/smith-chart/smith-chart-print.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart print in Angular Smithchart component | Syncfusion +title: Smith Chart Print in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart print in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart print @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smith chart print in Angular Smithchart component +# Smith Chart Print in Angular Smith Chart ## Print diff --git a/chart-sdk/angular/smith-chart/smith-chart-series.md b/chart-sdk/angular/smith-chart/smith-chart-series.md index 84d1b38bb..0ec1564ee 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-series.md +++ b/chart-sdk/angular/smith-chart/smith-chart-series.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart series in Angular Smithchart component | Syncfusion +title: Smith Chart Series in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart series in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart series @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smith chart series in Angular Smithchart component +# Smith Chart Series in Angular Smith Chart You can add any number of series to the smithchart as per your requirement. You can use series setting to either add or customize the data. For the points or datasource added in the series, line is drawn. You can customize the each series as per your requirement with marker, datalabel, animation, opacity and so on. diff --git a/chart-sdk/angular/smith-chart/smith-chart-tooltip.md b/chart-sdk/angular/smith-chart/smith-chart-tooltip.md index 326b47000..acee48619 100644 --- a/chart-sdk/angular/smith-chart/smith-chart-tooltip.md +++ b/chart-sdk/angular/smith-chart/smith-chart-tooltip.md @@ -1,6 +1,6 @@ --- layout: post -title: Smith chart tooltip in Angular Smithchart component | Syncfusion +title: Smith Chart Tooltip in Angular Smith Chart | Syncfusion description: Learn here all about Smith chart tooltip in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart tooltip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Smith chart tooltip in Angular Smithchart component +# Smith Chart Tooltip in Angular Smith Chart ## Enable the tooltip for Smith Chart series diff --git a/chart-sdk/angular/smith-chart/title-subtitle.md b/chart-sdk/angular/smith-chart/title-subtitle.md index 1ad219ef8..8081007db 100644 --- a/chart-sdk/angular/smith-chart/title-subtitle.md +++ b/chart-sdk/angular/smith-chart/title-subtitle.md @@ -1,6 +1,6 @@ --- layout: post -title: Title subtitle in Angular Smithchart component | Syncfusion +title: Title Subtitle in Angular Smith Chart | Syncfusion description: Learn here all about Title subtitle in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title subtitle @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title subtitle in Angular Smithchart component +# Title Subtitle in Angular Smith Chart ## Add a title to the Smith Chart diff --git a/chart-sdk/angular/smith-chart/working-with-data.md b/chart-sdk/angular/smith-chart/working-with-data.md index b05536fb3..e3aa56cd0 100644 --- a/chart-sdk/angular/smith-chart/working-with-data.md +++ b/chart-sdk/angular/smith-chart/working-with-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Working with data in Angular Smithchart component | Syncfusion +title: Working with Data in Angular Smith Chart | Syncfusion description: Learn here all about Working with data in Syncfusion Angular Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data @@ -8,9 +8,9 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in Angular Smithchart component +# Working with Data in Angular Smith Chart -Smithchart can visualise the data bound from local data. The data you bind for the smithchart, should be an array of object and that should contain the field resistance and rectangle. This should be bind to points or datasource in the smithchart. +Smithchart can visualizes the data bound from local data. The data you bind for the smithchart, should be an array of object and that should contain the field resistance and rectangle. This should be bind to points or datasource in the smithchart. ## Data Binding diff --git a/chart-sdk/angular/sparkline-charts/accessibility.md b/chart-sdk/angular/sparkline-charts/accessibility.md index 304d68037..22967b2e7 100644 --- a/chart-sdk/angular/sparkline-charts/accessibility.md +++ b/chart-sdk/angular/sparkline-charts/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Sparkline component | Syncfusion +title: Accessibility in Angular Sparkline | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Sparkline component +# Accessibility in Angular Sparkline The Sparkline component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/angular/sparkline-charts/appearance.md b/chart-sdk/angular/sparkline-charts/appearance.md index fac4d54a6..39c4f2428 100644 --- a/chart-sdk/angular/sparkline-charts/appearance.md +++ b/chart-sdk/angular/sparkline-charts/appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in Angular Sparkline component | Syncfusion +title: Appearance in Angular Sparkline | Syncfusion description: Learn here all about Appearance in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular Sparkline component +# Appearance in Angular Sparkline The appearance of the sparkline can be customized using margin, container Area border, and container Area background. diff --git a/chart-sdk/angular/sparkline-charts/axis-customization.md b/chart-sdk/angular/sparkline-charts/axis-customization.md index 6dbd31f02..a00fef9a5 100644 --- a/chart-sdk/angular/sparkline-charts/axis-customization.md +++ b/chart-sdk/angular/sparkline-charts/axis-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis customization in Angular Sparkline component | Syncfusion +title: Axis Customization in Angular Sparkline | Syncfusion description: Learn here all about Axis customization in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in Angular Sparkline component +# Axis Customization in Angular Sparkline You can customize axis value types and min and max values of the sparkline. diff --git a/chart-sdk/angular/sparkline-charts/data-labels.md b/chart-sdk/angular/sparkline-charts/data-labels.md index 4b51bc28c..7fdd9a432 100644 --- a/chart-sdk/angular/sparkline-charts/data-labels.md +++ b/chart-sdk/angular/sparkline-charts/data-labels.md @@ -1,6 +1,6 @@ --- layout: post -title: Data labels in Angular Sparkline component | Syncfusion +title: Data Labels in Angular Sparkline | Syncfusion description: Learn here all about Data labels in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data labels @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in Angular Sparkline component +# Data Labels in Angular Sparkline Data labels are used to display values of data points to improve the readability. diff --git a/chart-sdk/angular/sparkline-charts/ej1-api-migration.md b/chart-sdk/angular/sparkline-charts/ej1-api-migration.md index 9881dc1ac..b1d334e5e 100644 --- a/chart-sdk/angular/sparkline-charts/ej1-api-migration.md +++ b/chart-sdk/angular/sparkline-charts/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Sparkline component | Syncfusion +title: Ej1 Api Migration in Angular Sparkline | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Ej1 api migration in Angular Sparkline component +# Ej1 Api Migration in Angular Sparkline This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/sparkline-charts/getting-started.md b/chart-sdk/angular/sparkline-charts/getting-started.md index 7df2305f2..cbd990ed9 100644 --- a/chart-sdk/angular/sparkline-charts/getting-started.md +++ b/chart-sdk/angular/sparkline-charts/getting-started.md @@ -1,14 +1,14 @@ --- layout: post -title: Getting started with Angular Sparkline component | Syncfusion -description: Check out and learn about Getting started with the Angular Sparkline component of Syncfusion Essential JS 2 and more details. +title: Getting Started with Angular Sparkline | Syncfusion +description: Learn how to get started with the Syncfusion Angular Sparkline control. Explore setup, features, examples, and customization options. platform: chart-sdk control: Getting started documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with Angular Sparkline component +# Getting Started with Angular Sparkline This section explains the steps required to create a simple [Angular Sparkline](https://www.syncfusion.com/angular-components/angular-sparkline) and demonstrates the basic usage of the Sparkline component in an Angular environment. diff --git a/chart-sdk/angular/sparkline-charts/localization.md b/chart-sdk/angular/sparkline-charts/localization.md index d9090c036..5a08a46a5 100644 --- a/chart-sdk/angular/sparkline-charts/localization.md +++ b/chart-sdk/angular/sparkline-charts/localization.md @@ -1,6 +1,6 @@ --- layout: post -title: Localization in Angular Sparkline component | Syncfusion +title: Localization in Angular Sparkline | Syncfusion description: Learn here all about Localization in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in Angular Sparkline component +# Localization in Angular Sparkline The sparkline control supports localization. The default culture for localization is `en-US`. You can change the culture using the `setCulture` method. diff --git a/chart-sdk/angular/sparkline-charts/marker.md b/chart-sdk/angular/sparkline-charts/marker.md index 4c488d052..6cbbe1e73 100644 --- a/chart-sdk/angular/sparkline-charts/marker.md +++ b/chart-sdk/angular/sparkline-charts/marker.md @@ -1,6 +1,6 @@ --- layout: post -title: Marker in Angular Sparkline component | Syncfusion +title: Marker in Angular Sparkline | Syncfusion description: Learn here all about Marker in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Marker @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Marker in Angular Sparkline component +# Marker in Angular Sparkline This section explains how to add markers to the sparkline. diff --git a/chart-sdk/angular/sparkline-charts/range-band.md b/chart-sdk/angular/sparkline-charts/range-band.md index 281fc4bc1..e21483f4c 100644 --- a/chart-sdk/angular/sparkline-charts/range-band.md +++ b/chart-sdk/angular/sparkline-charts/range-band.md @@ -1,6 +1,6 @@ --- layout: post -title: Range band in Angular Sparkline component | Syncfusion +title: Range Band in Angular Sparkline | Syncfusion description: Learn here all about Range band in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range band @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range band in Angular Sparkline component +# Range Band in Angular Sparkline This section explains how to customize the sparkline with multiple range bands. diff --git a/chart-sdk/angular/sparkline-charts/sparkline-dimension.md b/chart-sdk/angular/sparkline-charts/sparkline-dimension.md index 0896d66b4..5fad8eba7 100644 --- a/chart-sdk/angular/sparkline-charts/sparkline-dimension.md +++ b/chart-sdk/angular/sparkline-charts/sparkline-dimension.md @@ -1,6 +1,6 @@ --- layout: post -title: Sparkline dimension in Angular Sparkline component | Syncfusion +title: Sparkline Dimension in Angular Sparkline | Syncfusion description: Learn here all about Sparkline dimension in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline dimension @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Sparkline dimension in Angular Sparkline component +# Sparkline Dimension in Angular Sparkline ## Size for container @@ -34,7 +34,7 @@ Sparkline can be rendered to its container size. You can set the size through in -You can also set the size for sparkline directly using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/sparkline/#width-string) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/sparkline/#height-string) properties. +You can also set the size for sparkline directly using the [`width`](https://ej2.syncfusion.com/angular/documentation/api/sparkline#width-string) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/sparkline#height-string) properties. **In pixel** diff --git a/chart-sdk/angular/sparkline-charts/sparkline-types.md b/chart-sdk/angular/sparkline-charts/sparkline-types.md index 18716d9c9..27599e855 100644 --- a/chart-sdk/angular/sparkline-charts/sparkline-types.md +++ b/chart-sdk/angular/sparkline-charts/sparkline-types.md @@ -1,6 +1,6 @@ --- layout: post -title: Sparkline types in Angular Sparkline component | Syncfusion +title: Sparkline Types in Angular Sparkline | Syncfusion description: Learn here all about Sparkline types in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline types @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Sparkline types in Angular Sparkline component +# Sparkline Types in Angular Sparkline Different types of shapes can be used to represent the sparkline. You can change the sparkline type by setting the type property. Sparkline supports the following types: diff --git a/chart-sdk/angular/sparkline-charts/special-points-customization.md b/chart-sdk/angular/sparkline-charts/special-points-customization.md index 983b674a5..7b58e6e20 100644 --- a/chart-sdk/angular/sparkline-charts/special-points-customization.md +++ b/chart-sdk/angular/sparkline-charts/special-points-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Special points customization in Angular Sparkline component | Syncfusion +title: Special Points Customization in Angular Sparkline | Syncfusion description: Learn here all about Special points customization in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Special points customization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Special points customization in Angular Sparkline component +# Special Points Customization in Angular Sparkline You can customize the points by initializing the point colors. The customization options allows to differentiate the [`start`], [`end`], [`positive`], [`negative`], and [`low`] points. This customization is only applicable for line, column, and area type sparkline. diff --git a/chart-sdk/angular/sparkline-charts/user-interaction.md b/chart-sdk/angular/sparkline-charts/user-interaction.md index 01bd51da3..dd452874d 100644 --- a/chart-sdk/angular/sparkline-charts/user-interaction.md +++ b/chart-sdk/angular/sparkline-charts/user-interaction.md @@ -1,6 +1,6 @@ --- layout: post -title: User interaction in Angular Sparkline component | Syncfusion +title: User Interaction in Angular Sparkline | Syncfusion description: Learn here all about User interaction in Syncfusion Angular Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: User interaction @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interaction in Angular Sparkline component +# User Interaction in Angular Sparkline Sparkline has two user interaction features: tooltip and tracker line. diff --git a/chart-sdk/angular/stock-charts/accessibility.md b/chart-sdk/angular/stock-charts/accessibility.md index e70564deb..338694e8b 100644 --- a/chart-sdk/angular/stock-charts/accessibility.md +++ b/chart-sdk/angular/stock-charts/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular Stock chart component | Syncfusion +title: Accessibility in Angular Stock Chart | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular Stock chart component +# Accessibility in Angular Stock Chart The Stock chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/angular/stock-charts/appearance.md b/chart-sdk/angular/stock-charts/appearance.md index d79636b47..7ce73edaf 100644 --- a/chart-sdk/angular/stock-charts/appearance.md +++ b/chart-sdk/angular/stock-charts/appearance.md @@ -1,6 +1,6 @@ --- layout: post -title: Appearance in Angular Stock chart component | Syncfusion +title: Appearance in Angular Stock Chart | Syncfusion description: Learn here all about Appearance in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in Angular Stock chart component +# Appearance in Angular Stock Chart ## Stock Chart Title -StockChart can be given a title using [`title`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/#title-string) property, to show the information about the data plotted. +StockChart can be given a title using [`title`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart#title-string) property, to show the information about the data plotted. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -48,7 +48,7 @@ The `textStyle` property of stockchart title provides options to customize the ` Changing Stock Chart theme will affect background color, grid lines, tooltip colors and appearance. -[`theme`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel/#theme) property of Stock chart is shipped with several built-in themes such as `Material`, `Fabric`, `Bootstrap` , `HighContrastLight`, `MaterialDark`, `FabricDark`, `FabricDark`, `HighContrast` and `BootstrapDark`. +[`theme`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel#theme) property of Stock chart is shipped with several built-in themes such as `Material`, `Fabric`, `Bootstrap` , `HighContrastLight`, `MaterialDark`, `FabricDark`, `FabricDark`, `HighContrast` and `BootstrapDark`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -64,4 +64,4 @@ Changing Stock Chart theme will affect background color, grid lines, tooltip col ## See Also -* [Axis Customization](./axis-customization/) +* [Axis Customization](./axis-customization) diff --git a/chart-sdk/angular/stock-charts/axis-customization.md b/chart-sdk/angular/stock-charts/axis-customization.md index 2b8d7928c..f55d4dc25 100644 --- a/chart-sdk/angular/stock-charts/axis-customization.md +++ b/chart-sdk/angular/stock-charts/axis-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis customization in Angular Stock chart component | Syncfusion +title: Axis Customization in Angular Stock Chart | Syncfusion description: Learn here all about Axis customization in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in Angular Stock chart component +# Axis Customization in Angular Stock Chart ## Axis Crossing -An axis can be positioned in the Stock Chart area using [`crossesAt`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#crossesat) and [`crossesInAxis`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#crossesinaxis) properties. The [`crossesAt`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#crossesat) property specifies the values (datetime, numeric, or logarithmic) at which the axis line has to be intersected with the vertical axis or vice-versa, and the [`crossesInAxis`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#crossesinaxis) property specifies the axis name with which the axis line has to be crossed. +An axis can be positioned in the Stock Chart area using [`crossesAt`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#crossesat) and [`crossesInAxis`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#crossesinaxis) properties. The [`crossesAt`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#crossesat) property specifies the values (datetime, numeric, or logarithmic) at which the axis line has to be intersected with the vertical axis or vice-versa, and the [`crossesInAxis`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#crossesinaxis) property specifies the axis name with which the axis line has to be crossed. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -28,7 +28,7 @@ An axis can be positioned in the Stock Chart area using [`crossesAt`](https://ej ## Title -You can add a title to the axis using [`title`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#title) property to provide quick information to the user about the data plotted in the axis. Title style can be customized using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#titlestyle) property of the axis. +You can add a title to the axis using [`title`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#title) property to provide quick information to the user about the data plotted in the axis. Title style can be customized using [`titleStyle`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#titlestyle) property of the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -44,7 +44,7 @@ You can add a title to the axis using [`title`](https://ej2.syncfusion.com/angul ## Tick Lines Customization -You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#majorticklines) and [`minorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#minorticklines) properties in the axis. +You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#majorticklines) and [`minorTickLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#minorticklines) properties in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -60,7 +60,7 @@ You can customize the  `width`, `color` and `size` of the minor and major ## Grid Lines Customization -You can customize the `width`, `color` and `dashArray` of the minor and major grid lines, using [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#minorgridlines) properties in the axis. +You can customize the `width`, `color` and `dashArray` of the minor and major grid lines, using [`majorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#minorgridlines) properties in the axis. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -94,7 +94,7 @@ In addition to primary X and Y axis, we can add n number of axis to the Stock Ch -When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#isinversed) to true. +When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [`isInversed`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#isinversed) to true. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -110,7 +110,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v ## Opposed Position -To place an axis opposite from its original position, set [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#opposedposition) property of the axis to true. +To place an axis opposite from its original position, set [`opposedPosition`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#opposedposition) property of the axis to true. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/axis-types.md b/chart-sdk/angular/stock-charts/axis-types.md index a66858cfc..1fa413ed4 100644 --- a/chart-sdk/angular/stock-charts/axis-types.md +++ b/chart-sdk/angular/stock-charts/axis-types.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis types in Angular Stock chart component | Syncfusion +title: Axis Types in Angular Stock Chart | Syncfusion description: Learn here all about Axis types in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis types @@ -9,11 +9,11 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis types in Angular Stock chart component +# Axis Types in Angular Stock Chart ## DateTime axis -DateTime axis uses date time scale and displays the date time values as axis labels in the specified format. To use DateTime axis, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTime`. +DateTime axis uses date time scale and displays the date time values as axis labels in the specified format. To use DateTime axis, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -29,7 +29,7 @@ DateTime axis uses date time scale and displays the date time values as axis lab ## DateTimeCategory axis -DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTimeCategory`. +DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -47,7 +47,7 @@ DateTimeCategory axis in the stock chart is used to display only business days. -Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106). To use Logarithmic axis, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel/#valuetype) of axis to `Logarithmic`. +Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106). To use Logarithmic axis, set the [`valueType`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -63,4 +63,4 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat ## See also -* [Axis Customization](./axis-customization/) +* [Axis Customization](./axis-customization) diff --git a/chart-sdk/angular/stock-charts/chart-dimensions.md b/chart-sdk/angular/stock-charts/chart-dimensions.md index 3ec311443..c97bccb79 100644 --- a/chart-sdk/angular/stock-charts/chart-dimensions.md +++ b/chart-sdk/angular/stock-charts/chart-dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Chart dimensions in Angular Stock chart component | Syncfusion +title: Chart Dimensions in Angular Stock Chart | Syncfusion description: Learn here all about Chart dimensions in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart dimensions @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart dimensions in Angular Stock chart component +# Chart Dimensions in Angular Stock Chart ## Size for Container @@ -30,7 +30,7 @@ Stock Chart can render to its container size. You can set the size via inline or -You can also set size for chart directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/#width-string) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/#height-string) properties. +You can also set size for chart directly through [`width`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart#width-string) and [`height`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart#height-string) properties. **In Pixel** diff --git a/chart-sdk/angular/stock-charts/cross-hair.md b/chart-sdk/angular/stock-charts/cross-hair.md index 3c32f08cf..4279c3bcf 100644 --- a/chart-sdk/angular/stock-charts/cross-hair.md +++ b/chart-sdk/angular/stock-charts/cross-hair.md @@ -1,6 +1,6 @@ --- layout: post -title: Cross hair in Angular Stock chart component | Syncfusion +title: Cross Hair in Angular Stock Chart | Syncfusion description: Learn here all about Cross hair in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Cross hair @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Cross hair in Angular Stock chart component +# Cross Hair in Angular Stock Chart Crosshair has a vertical and horizontal line to view the value of the axis at mouse or touch position. diff --git a/chart-sdk/angular/stock-charts/export-print.md b/chart-sdk/angular/stock-charts/export-print.md index c46561a73..f1c4de0e6 100644 --- a/chart-sdk/angular/stock-charts/export-print.md +++ b/chart-sdk/angular/stock-charts/export-print.md @@ -1,6 +1,6 @@ --- layout: post -title: Export print in Angular Stock chart component | Syncfusion +title: Export Print in Angular Stock Chart | Syncfusion description: Learn here all about Export print in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Export print @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Export print in Angular Stock chart component +# Export Print in Angular Stock Chart The rendered stock chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the export dropdown button in the period selector toolbar. You can choose the required format using the export dropdown button in stock-chart. diff --git a/chart-sdk/angular/stock-charts/getting-started.md b/chart-sdk/angular/stock-charts/getting-started.md index 95aaa7244..e9f8c99d2 100644 --- a/chart-sdk/angular/stock-charts/getting-started.md +++ b/chart-sdk/angular/stock-charts/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Angular Stock Chart component | Syncfusion +title: Getting Started with Angular Stock Chart | Syncfusion description: Check out and learn about Getting Started with Angular Stock Chart component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting Started with Angular Stock Chart Component +# Getting Started with Angular Stock Chart This section explains the steps required to create a simple [stock chart](https://www.syncfusion.com/angular-components/angular-stock-chart) and demonstrates the basic usage of the Angular Stock Chart component. diff --git a/chart-sdk/angular/stock-charts/gradient.md b/chart-sdk/angular/stock-charts/gradient.md index fd55dba05..4ffcb59c2 100644 --- a/chart-sdk/angular/stock-charts/gradient.md +++ b/chart-sdk/angular/stock-charts/gradient.md @@ -1,6 +1,6 @@ --- layout: post -title: Gradient in Angular Stock chart component | Syncfusion +title: Gradient in Angular Stock Chart | Syncfusion description: Learn here all about Gradient in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Gradient @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Gradient in Angular Stock chart control +# Gradient in Angular Stock Chart diff --git a/chart-sdk/angular/stock-charts/how-to/live-data.md b/chart-sdk/angular/stock-charts/how-to/live-data.md index d777e9197..4cc710338 100644 --- a/chart-sdk/angular/stock-charts/how-to/live-data.md +++ b/chart-sdk/angular/stock-charts/how-to/live-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Live data in Angular Stock chart component | Syncfusion +title: How to update live data in Angular Stock Chart | Syncfusion description: Learn here all about Live data in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Live data @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Live data in Angular Stock chart component +# How to update live data in Angular Stock Chart You can update a stockchart with live data by using the set interval. diff --git a/chart-sdk/angular/stock-charts/internationalization.md b/chart-sdk/angular/stock-charts/internationalization.md index edfa7e977..20a594f53 100644 --- a/chart-sdk/angular/stock-charts/internationalization.md +++ b/chart-sdk/angular/stock-charts/internationalization.md @@ -1,6 +1,6 @@ --- layout: post -title: Internationalization in Angular Stock chart component | Syncfusion +title: Internationalization in Angular Stock Chart | Syncfusion description: Learn here all about Internationalization in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Internationalization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in Angular Stock chart component +# Internationalization in Angular Stock Chart Chart provide supports for internationalization for below chart elements. diff --git a/chart-sdk/angular/stock-charts/legend.md b/chart-sdk/angular/stock-charts/legend.md index af02da83f..66634cd32 100644 --- a/chart-sdk/angular/stock-charts/legend.md +++ b/chart-sdk/angular/stock-charts/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular Stock chart component | Syncfusion +title: Legend in Angular Stock Chart | Syncfusion description: Learn here all about Legend in Syncfusion Angular Stock 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 Stock chart component +# Legend in Angular Stock Chart Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/legendSettingsvisible) option in the [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/legendSettings). diff --git a/chart-sdk/angular/stock-charts/localization.md b/chart-sdk/angular/stock-charts/localization.md index 8078c446a..1dccc4818 100644 --- a/chart-sdk/angular/stock-charts/localization.md +++ b/chart-sdk/angular/stock-charts/localization.md @@ -1,6 +1,6 @@ --- layout: post -title: Localization in Angular Stock chart component | Syncfusion +title: Localization in Angular Stock Chart | Syncfusion description: Learn here all about Localization in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in Angular Stock chart component +# Localization in Angular Stock Chart Localization library allows to localize the default text content of StockChart. In stock chart component, it has the static text on some features(like zooming toolbars) and this can be changed to any other culture(Arabic, Deutsch, French, etc) by defining the locale value and translation object. @@ -47,7 +47,7 @@ Localization library allows to localize the default text content of StockChart. To load translation object in an application use load function of `L10n` class. -For more information about localization, refer this [`localization`](https://ej2.syncfusion.com/angular/documentation/common/localization/) +For more information about localization, refer this [`localization`](https://ej2.syncfusion.com/angular/documentation/common/localization) {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/period-selector.md b/chart-sdk/angular/stock-charts/period-selector.md index 9516f7f3b..2284b824a 100644 --- a/chart-sdk/angular/stock-charts/period-selector.md +++ b/chart-sdk/angular/stock-charts/period-selector.md @@ -1,6 +1,6 @@ --- layout: post -title: Period selector in Angular Stock chart component | Syncfusion +title: Period Selector in Angular Stock Chart | Syncfusion description: Learn here all about Period selector in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Period selector @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Period selector in Angular Stock chart component +# Period Selector in Angular Stock Chart The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart. ## Periods -Periods is an array of objects that allows users to specify the range of [`periods`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel/#periods). The `interval` property specifies the count value of the button, and the `text` property specifies the text to be displayed on button. The `intervalType` property allows users to customize the intervals of the buttons. The `intervalType` property supports the following interval types: +Periods is an array of objects that allows users to specify the range of [`periods`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel#periods). The `interval` property specifies the count value of the button, and the `text` property specifies the text to be displayed on button. The `intervalType` property allows users to customize the intervals of the buttons. The `intervalType` property supports the following interval types: * Auto * Years @@ -40,7 +40,7 @@ Periods is an array of objects that allows users to specify the range of [`perio ## Visibility of period selector -The [`enablePeriodSelector`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel/#enableperiodselector) property allows users to toggle the visibility of period selector. +The [`enablePeriodSelector`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel#enableperiodselector) property allows users to toggle the visibility of period selector. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/range-selector.md b/chart-sdk/angular/stock-charts/range-selector.md index 535eef400..26d7fabb8 100644 --- a/chart-sdk/angular/stock-charts/range-selector.md +++ b/chart-sdk/angular/stock-charts/range-selector.md @@ -1,6 +1,6 @@ --- layout: post -title: Range selector in Angular Stock chart component | Syncfusion +title: Range Selector in Angular Stock Chart | Syncfusion description: Learn here all about Range selector in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range selector @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range selector in Angular Stock chart component +# Range Selector in Angular Stock Chart The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Following are the ways you can select a range. @@ -30,7 +30,7 @@ The left and right thumb of RangeNavigator are used to indicate the selected ran ## Visibility of range selector -The [`enableSelector`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel/#enableselector) property allows users to toggle the visibility of range selector. +The [`enableSelector`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartModel#enableselector) property allows users to toggle the visibility of range selector. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/series-types.md b/chart-sdk/angular/stock-charts/series-types.md index e12a5581d..3586ea174 100644 --- a/chart-sdk/angular/stock-charts/series-types.md +++ b/chart-sdk/angular/stock-charts/series-types.md @@ -1,6 +1,6 @@ --- layout: post -title: Series types in Angular Stock chart component | Syncfusion +title: Series Types in Angular Stock Chart | Syncfusion description: Learn here all about Series types in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series types @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series types in Angular Stock chart component +# Series Types in Angular Stock Chart Essential® JS 2 StockChart supports 7 major types of series namely `Line`, `Spline`, `Area`, `Hilo`, `HiloOpenClose`, `Hollow Candle` and `Candle` . By using the series dropdown button you can navigate between the above listed series types. @@ -16,31 +16,31 @@ Essential® JS 2 StockChart supports 7 major ## Line -To render a line series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `Line` and inject `LineSeriesService` into the `@NgModule.providers`. +To render a line series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `Line` and inject `LineSeriesService` into the `@NgModule.providers`. ## Spline -To render a spline series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `Spline` and inject `SplineSeriesService` into the `@NgModule.providers`. +To render a spline series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `Spline` and inject `SplineSeriesService` into the `@NgModule.providers`. ## Area -To render a area series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `Area` and inject `AreaSeriesService` into the `@NgModule.providers`. +To render a area series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `Area` and inject `AreaSeriesService` into the `@NgModule.providers`. ## Hilo -To render a hilo series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `Hilo` and inject `HiloSeries` into the `@NgModule.providers`. +To render a hilo series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `Hilo` and inject `HiloSeries` into the `@NgModule.providers`. ## HiloOpenClose -To render a hiloOpenClose series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` into the `@NgModule.providers`.. +To render a hiloOpenClose series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` into the `@NgModule.providers`.. ## HollowCandle -To render a hollowcandle series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` into the `@NgModule.providers`. +To render a hollowcandle series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` into the `@NgModule.providers`. ## Candle -To render a candle series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#type) as `Candle` and inject `CandleSeries` into the `@NgModule.providers`. +To render a candle series, use series [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#type) as `Candle` and inject `CandleSeries` into the `@NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/stock-events.md b/chart-sdk/angular/stock-charts/stock-events.md index 0ca90784f..59abb96b3 100644 --- a/chart-sdk/angular/stock-charts/stock-events.md +++ b/chart-sdk/angular/stock-charts/stock-events.md @@ -1,6 +1,6 @@ --- layout: post -title: Stock events in Angular Stock chart component | Syncfusion +title: Stock Events in Angular Stock Chart | Syncfusion description: Learn here all about Stock events in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Stock events @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stock events in Angular Stock chart component +# Stock Events in Angular Stock Chart diff --git a/chart-sdk/angular/stock-charts/technical-indicators.md b/chart-sdk/angular/stock-charts/technical-indicators.md index ac06bc5dd..30ebaeb7a 100644 --- a/chart-sdk/angular/stock-charts/technical-indicators.md +++ b/chart-sdk/angular/stock-charts/technical-indicators.md @@ -1,6 +1,6 @@ --- layout: post -title: Technical indicators in Angular Stock chart component | Syncfusion +title: Technical Indicators in Angular Stock Chart | Syncfusion description: Learn here all about Technical indicators in Syncfusion Angular Stock 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 Stock chart component +# Technical Indicators in Angular Stock Chart A technical indicator is a mathematical calculation based on historic price, volume or open interest information that aims to forecast financial market direction. diff --git a/chart-sdk/angular/stock-charts/tool-tip.md b/chart-sdk/angular/stock-charts/tool-tip.md index 6a4be4ab0..97ae52940 100644 --- a/chart-sdk/angular/stock-charts/tool-tip.md +++ b/chart-sdk/angular/stock-charts/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tool tip in Angular Stock chart component | Syncfusion +title: Tool Tip in Angular Stock Chart | Syncfusion description: Learn here all about Tool tip in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool tip @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in Angular Stock chart component +# Tool Tip in Angular Stock Chart @@ -16,7 +16,7 @@ stockchart will display details about the points through tooltip, when the mouse ## Default tooltip -By default, tooltip is not visible. Enable the tooltip by setting [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel/) property to true and by injecting `TooltipService` into the `NgModule.providers`. +By default, tooltip is not visible. Enable the tooltip by setting [`enable`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel) property to true and by injecting `TooltipService` into the `NgModule.providers`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -54,7 +54,7 @@ By default, tooltip shows information of x and y value in points. In addition to ## Position the tooltip -By default, the tooltip is positioned at the left side of the stock chart. You can move the tooltip along with the mouse by setting **Nearest** to the [`position`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockTooltipSettingsModel/#position) property. +By default, the tooltip is positioned at the left side of the stock chart. You can move the tooltip along with the mouse by setting **Nearest** to the [`position`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockTooltipSettingsModel#position) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -86,7 +86,7 @@ Any HTML elements can be displayed in the tooltip by using the ‘template’ pr ## Customize the appearance of the tooltip -The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel/#fill) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel/#textstyle) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel#fill) and [`border`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/angular/documentation/api/chart/tooltipSettingsModel#textstyle) property in the tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/trend-lines.md b/chart-sdk/angular/stock-charts/trend-lines.md index baeedd5f2..d9061ae35 100644 --- a/chart-sdk/angular/stock-charts/trend-lines.md +++ b/chart-sdk/angular/stock-charts/trend-lines.md @@ -1,6 +1,6 @@ --- layout: post -title: Trend lines in Angular Stock chart component | Syncfusion +title: Trend Lines in Angular Stock Chart | Syncfusion description: Learn here all about Trend lines in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Trend lines @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk -# Trend lines in Angular Stock chart component +# Trend Lines in Angular Stock Chart Trendlines are used to show the direction and speed of price. @@ -18,25 +18,25 @@ StockChart supports 6 types of trendlines namely `Linear`,`Exponential`,`Logarit ## Linear -A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Linear` and inject `TrendLines` . +A linear trendline is a best fit straight line that is used with simpler data sets. To render a linear trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Linear` and inject `TrendLines` . ## Exponential An exponential trendline is a curved line that is most useful when data values rise or fall at increasingly higher rates. You cannot create an exponential trendline, if your data contains zero or negative values. -To render a exponential trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Exponential` and inject `TrendLines`. +To render a exponential trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Exponential` and inject `TrendLines`. ## Logarithmic A logarithmic trendline is a best-fit curved line that is most useful when the rate of change in the data increases or decreases quickly and then levels out. A logarithmic trendline can use negative and/or positive values. -To render a logarithmic trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Logarithmic` and inject `Trendlines` . +To render a logarithmic trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Logarithmic` and inject `Trendlines` . ## Polynomial A polynomial trendline is a curved line that is used when data fluctuates. -To render a polynomial trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Polynomial` and inject `Trendlines` . +To render a polynomial trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Polynomial` and inject `Trendlines` . `polynomialOrder` used to define the polynomial value. @@ -44,13 +44,13 @@ To render a polynomial trendline, use trendline [`type`](https://ej2.syncfusion. A power trendline is a curved line that is best used with data sets that compare measurements that increase at a specific rate. -To render a power trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Power` and inject `Trendlines` . +To render a power trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Power` and inject `Trendlines` . ## Moving Average A moving average trendline smoothen out fluctuations in data to show a pattern or trend more clearly. -To render a moving average trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `MovingAverage` and inject `Trendlines`. +To render a moving average trendline, use trendline [`type`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockChartTrendlineModel#type) as `MovingAverage` and inject `Trendlines`. `period` property defines the period to find the moving average. diff --git a/chart-sdk/angular/stock-charts/working-with-data.md b/chart-sdk/angular/stock-charts/working-with-data.md index b6ae11814..cd570e02c 100644 --- a/chart-sdk/angular/stock-charts/working-with-data.md +++ b/chart-sdk/angular/stock-charts/working-with-data.md @@ -1,6 +1,6 @@ --- layout: post -title: Working with data in Angular Stock chart component | Syncfusion +title: Working with Data in Angular Stock Chart | Syncfusion description: Learn here all about Working with data in Syncfusion Angular Stock chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data @@ -9,13 +9,13 @@ domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in Angular Stock chart component +# Working with Data in Angular Stock Chart Stock Chart can visualise data bound from local or remote data. ## Local Data -You can bind a simple JSON data to the chart using [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel/#datasource) property in series. +You can bind a simple JSON data to the chart using [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/stockSeriesModel#datasource) property in series. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -31,7 +31,7 @@ You can bind a simple JSON data to the chart using [`dataSource`](https://ej2.sy ## Remote Data -You can also bind remote data to the chart using `DataManager`. The DataManager requires minimal information like webservice URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance of DataManager to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective/#datasource) property in series and map the fields of data to [`xName`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective/#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective/#yname) properties. You can also use the [`query`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective/#query) property of the series to filter the data. +You can also bind remote data to the chart using `DataManager`. The DataManager requires minimal information like webservice URL, adaptor and crossDomain to interact with service endpoint properly. Assign the instance of DataManager to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective#datasource) property in series and map the fields of data to [`xName`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective#xname) and [`yName`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective#yname) properties. You can also use the [`query`](https://ej2.syncfusion.com/angular/documentation/api/stock-chart/seriesDirective#query) property of the series to filter the data. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -63,4 +63,4 @@ When no data is available to render in the stock chart, the `noDataTemplate` pro ## See Also -* [Series Types](./series-types/) \ No newline at end of file +* [Series Types](./series-types) \ No newline at end of file diff --git a/chart-sdk/angular/treemap/accessibility.md b/chart-sdk/angular/treemap/accessibility.md index 414a0ae43..7251d513f 100644 --- a/chart-sdk/angular/treemap/accessibility.md +++ b/chart-sdk/angular/treemap/accessibility.md @@ -1,6 +1,6 @@ --- layout: post -title: Accessibility in Angular TreeMap component | Syncfusion +title: Accessibility in Angular TreeMap | Syncfusion description: Learn here all about Accessibility in Syncfusion Angular TreeMap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in Angular TreeMap component +# Accessibility in Angular TreeMap The TreeMap component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/angular/treemap/color-mapping.md b/chart-sdk/angular/treemap/color-mapping.md index 3378b6b92..8973c755b 100644 --- a/chart-sdk/angular/treemap/color-mapping.md +++ b/chart-sdk/angular/treemap/color-mapping.md @@ -1,6 +1,6 @@ --- layout: post -title: Color mapping in Angular Treemap component | Syncfusion +title: Color Mapping in Angular TreeMap | Syncfusion description: Learn here all about Color mapping in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Color mapping @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Color mapping in Angular Treemap component +# Color Mapping in Angular TreeMap ## Apply Color Mapping diff --git a/chart-sdk/angular/treemap/data-binding.md b/chart-sdk/angular/treemap/data-binding.md index 40b886d56..a3956196c 100644 --- a/chart-sdk/angular/treemap/data-binding.md +++ b/chart-sdk/angular/treemap/data-binding.md @@ -1,6 +1,6 @@ --- layout: post -title: Data binding in Angular Treemap component | Syncfusion +title: Data Binding in Angular TreeMap | Syncfusion description: Learn here all about Data binding in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data binding @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data binding in Angular Treemap component +# Data Binding in Angular TreeMap The TreeMap control supports data binding using the dataSource property. ## Populate data -The [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#datasource) property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#datasource) property. +The [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/treemap#datasource) property accepts collection values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the [`dataSource`](https://ej2.syncfusion.com/angular/documentation/api/treemap#datasource) property. diff --git a/chart-sdk/angular/treemap/data-label.md b/chart-sdk/angular/treemap/data-label.md index cb42d1bee..be45e093a 100644 --- a/chart-sdk/angular/treemap/data-label.md +++ b/chart-sdk/angular/treemap/data-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Data label in Angular Treemap component | Syncfusion +title: Data Label in Angular TreeMap | Syncfusion description: Learn here all about Data label in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data label @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in Angular Treemap component +# Data Label in Angular TreeMap Data Labels are used to identify the name of items or groups in the TreeMap component. Data Labels will be shown by specifying the data source properties in the [`labelPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labelpath) of the [`leafItemSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap#leafitemsettings). diff --git a/chart-sdk/angular/treemap/drilldown.md b/chart-sdk/angular/treemap/drilldown.md index e26af5d61..bf2afb2a2 100644 --- a/chart-sdk/angular/treemap/drilldown.md +++ b/chart-sdk/angular/treemap/drilldown.md @@ -1,6 +1,6 @@ --- layout: post -title: Drilldown in Angular Treemap component | Syncfusion +title: Drilldown in Angular TreeMap | Syncfusion description: Learn here all about Drilldown in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Drilldown @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown in Angular Treemap component +# Drilldown in Angular TreeMap The TreeMap supports drill-down to expose the hierarchy, achieved by clicking a node. If an item is clicked in the TreeMap, it will be moved to the next level or sub level hierarchy and returned back to the previous level by clicking the node. ## Perform drill-down action -The TreeMap items can be drilled by setting the [`enableDrillDown`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enabledrilldown) property to **true**. +The TreeMap items can be drilled by setting the [`enableDrillDown`](https://ej2.syncfusion.com/angular/documentation/api/treemap#enabledrilldown) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -30,7 +30,7 @@ The TreeMap items can be drilled by setting the [`enableDrillDown`](https://ej2. ## On-demand data loading -All the child items are rendered during the normal drill-down process, and visible at the initial rendering of the TreeMap. But on-demand data loading, it will not render child items at initial rendering, and child nodes will be rendered during the drill-down process by setting the [`drillDownView`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#drilldownview) property to **true**. +All the child items are rendered during the normal drill-down process, and visible at the initial rendering of the TreeMap. But on-demand data loading, it will not render child items at initial rendering, and child nodes will be rendered during the drill-down process by setting the [`drillDownView`](https://ej2.syncfusion.com/angular/documentation/api/treemap#drilldownview) property to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -46,7 +46,7 @@ All the child items are rendered during the normal drill-down process, and visib ## Breadcrumb support -TreeMap items are drilled, up to any level of parent using breadcrumb navigation and the level from root parent to current level is displayed at the top of item layout. It can be enabled by using the [`enableBreadcrumb`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablebreadcrumb) property to **true** and customize the breadcrumb connector using the [`breadcrumbConnector`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#breadcrumbconnector) property. By default, **-**(hyphen) is the connector. +TreeMap items are drilled, up to any level of parent using breadcrumb navigation and the level from root parent to current level is displayed at the top of item layout. It can be enabled by using the [`enableBreadcrumb`](https://ej2.syncfusion.com/angular/documentation/api/treemap#enablebreadcrumb) property to **true** and customize the breadcrumb connector using the [`breadcrumbConnector`](https://ej2.syncfusion.com/angular/documentation/api/treemap#breadcrumbconnector) property. By default, **-**(hyphen) is the connector. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/treemap/ej1-api-migration.md b/chart-sdk/angular/treemap/ej1-api-migration.md index 4d8104aa1..04eb607e6 100644 --- a/chart-sdk/angular/treemap/ej1-api-migration.md +++ b/chart-sdk/angular/treemap/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 api migration in Angular Treemap component | Syncfusion +title: EJ1 API Migration in Angular TreeMap | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in Angular Treemap component +# EJ1 API Migration in Angular TreeMap This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/angular/treemap/getting-started.md b/chart-sdk/angular/treemap/getting-started.md index 29830d61b..daa9febbf 100644 --- a/chart-sdk/angular/treemap/getting-started.md +++ b/chart-sdk/angular/treemap/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting started with Angular TreeMap component | Syncfusion +title: Getting Started with Angular TreeMap | Syncfusion description: Checkout and learn about Getting started with Angular TreeMap component of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting started @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started with Angular TreeMap component +# Getting Started with Angular TreeMap This document explains the steps required to create and render a TreeMap component and demonstrates the component's basic usage. diff --git a/chart-sdk/angular/treemap/how-to/drilldown-with-label.md b/chart-sdk/angular/treemap/how-to/drilldown-with-label.md index 1e0e303a4..d33b58917 100644 --- a/chart-sdk/angular/treemap/how-to/drilldown-with-label.md +++ b/chart-sdk/angular/treemap/how-to/drilldown-with-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Drilldown with label in Angular Treemap component | Syncfusion +title: How to drilldown with label in Angular TreeMap | Syncfusion description: Learn here all about Drilldown with label in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Drilldown with label @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown with label in Angular Treemap component +# How to drilldown with label in Angular TreeMap Yon can add a label template as
element to the treemap control when using the label template. To add a label template to the treemap control, you have to hide another labels by setting the `showLabels` property to **false** in `leafItemSettings` to show only the label template. diff --git a/chart-sdk/angular/treemap/how-to/drilldown.md b/chart-sdk/angular/treemap/how-to/drilldown.md index 1eaec8fad..51c3a0eca 100644 --- a/chart-sdk/angular/treemap/how-to/drilldown.md +++ b/chart-sdk/angular/treemap/how-to/drilldown.md @@ -1,6 +1,6 @@ --- layout: post -title: Drilldown in Angular Treemap component | Syncfusion +title: How to drilldown in Angular TreeMap | Syncfusion description: Learn here all about Drilldown in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Drilldown @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Drilldown in Angular Treemap component +# How to drilldown in Angular TreeMap ## Customize the header for treemap drilldown diff --git a/chart-sdk/angular/treemap/internationalization.md b/chart-sdk/angular/treemap/internationalization.md index 81febe837..2fb2d6012 100644 --- a/chart-sdk/angular/treemap/internationalization.md +++ b/chart-sdk/angular/treemap/internationalization.md @@ -1,6 +1,6 @@ --- layout: post -title: Internationalization in Angular Treemap component | Syncfusion +title: Internationalization in Angular TreeMap | Syncfusion description: Learn here all about Internationalization in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Internationalization @@ -8,7 +8,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in Angular Treemap component +# Internationalization in Angular TreeMap The TreeMap control supports internationalization for the following elements: @@ -21,7 +21,7 @@ For more information about number and date formatter, refer to [`internationaliz ## Globalization -Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the tree map control using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#format) property in the Treemap. +Globalization is the process of designing and developing a component that works in different cultures/locales. Internationalization library is used to globalize number, date, and time values in the tree map control using the [`format`](https://ej2.syncfusion.com/angular/documentation/api/treemap#format) property in the Treemap. **Numeric format** @@ -45,7 +45,7 @@ The TreeMap control supports right-to-left rendering for all its elements such a ## Legend with Rtl support -If set the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablertl) property to **true**, then the legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon. +If set the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/treemap#enablertl) property to **true**, then the legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -61,7 +61,7 @@ If set the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/tr ## Tooltip with Rtl support -If the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#enablertl) property is set to **true**, the tooltip data will be rendered in reverse direction. +If the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/treemap#enablertl) property is set to **true**, the tooltip data will be rendered in reverse direction. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -77,7 +77,7 @@ If the [`enableRtl`](https://ej2.syncfusion.com/angular/documentation/api/treema ## Treemap Item Rendering Direction -The direction of TreeMap item is `TopLeftBottomRight` by default and customize the rendering direction of the TreeMap item by setting the [`renderDirection`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#renderdirection) property. +The direction of TreeMap item is `TopLeftBottomRight` by default and customize the rendering direction of the TreeMap item by setting the [`renderDirection`](https://ej2.syncfusion.com/angular/documentation/api/treemap#renderdirection) property. The TreeMap can be rendered in the following directions: diff --git a/chart-sdk/angular/treemap/layout.md b/chart-sdk/angular/treemap/layout.md index b12ab2f7b..7fa38d9cb 100644 --- a/chart-sdk/angular/treemap/layout.md +++ b/chart-sdk/angular/treemap/layout.md @@ -1,6 +1,6 @@ --- layout: post -title: Layout in Angular Treemap component | Syncfusion +title: Layout in Angular TreeMap | Syncfusion description: Learn here all about Layout in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Layout @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Layout in Angular Treemap component +# Layout in Angular TreeMap This section explains how to customize the appearance of the TreeMap component. The below video demonstrates the same. {% youtube "https://www.youtube.com/watch?v=phfdhfoRnpM" %} -Determine the visual representation of nodes belonging to all the TreeMap levels using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#layouttype) property. +Determine the visual representation of nodes belonging to all the TreeMap levels using the [`layoutType`](https://ej2.syncfusion.com/angular/documentation/api/treemap#layouttype) property. ## Types of layout diff --git a/chart-sdk/angular/treemap/leaf-item.md b/chart-sdk/angular/treemap/leaf-item.md index 81869e45a..dc1045e9a 100644 --- a/chart-sdk/angular/treemap/leaf-item.md +++ b/chart-sdk/angular/treemap/leaf-item.md @@ -1,6 +1,6 @@ --- layout: post -title: Leaf item in Angular Treemap component | Syncfusion +title: Leaf Item in Angular TreeMap | Syncfusion description: Learn here all about Leaf item in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Leaf item @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Leaf item in Angular Treemap component +# Leaf Item in Angular TreeMap A leaf item defines a visualized data element and does not contain child nodes but contains parent node if the levels are specified in the TreeMap. ## Leaf label -Label is represented by item name or value. Label will be appeared by specifying the [`labelPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#labelpath) property and customize the label style using the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#labelstyle) property. +Label is represented by item name or value. Label will be appeared by specifying the [`labelPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labelpath) property and customize the label style using the [`labelStyle`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labelstyle) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -32,7 +32,7 @@ Label is represented by item name or value. Label will be appeared by specifying ### Label position and format -Positioning the leaf item label using the [`labelPosition`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#labelposition) property and the text format can be customized by specifying data source properties name in the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#labelformat) property. +Positioning the leaf item label using the [`labelPosition`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labelposition) property and the text format can be customized by specifying data source properties name in the [`labelFormat`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labelformat) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -50,7 +50,7 @@ Positioning the leaf item label using the [`labelPosition`](https://ej2.syncfusi ### Label template and position -Specifies the template of leaf item label and position of the template to be customized using [`labelTemplate`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#labeltemplate) and [`templatePosition`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#labelposition) properties. +Specifies the template of leaf item label and position of the template to be customized using [`labelTemplate`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labeltemplate) and [`templatePosition`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#labelposition) properties. ```typescript import { Component } from '@angular/core'; @@ -91,7 +91,7 @@ export class AppComponent { ## Item gap -The [`gap`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel/#gap) property is used to separate an item from another item. Each item rectangle is split into equal space with specified gap. +The [`gap`](https://ej2.syncfusion.com/angular/documentation/api/treemap/leafItemSettingsModel#gap) property is used to separate an item from another item. Each item rectangle is split into equal space with specified gap. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/treemap/legend.md b/chart-sdk/angular/treemap/legend.md index 9bdfffe16..b3a420445 100644 --- a/chart-sdk/angular/treemap/legend.md +++ b/chart-sdk/angular/treemap/legend.md @@ -1,6 +1,6 @@ --- layout: post -title: Legend in Angular Treemap component | Syncfusion +title: Legend in Angular TreeMap | Syncfusion description: Learn here all about Legend in Syncfusion Angular Treemap 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 Treemap component +# Legend in Angular TreeMap Legend is used to provide valuable information for interpreting what the TreeMap displays. The legends can be represented in various colors, shapes or other identifiers based on the data. @@ -176,7 +176,7 @@ To enable or disable the desired legend item for each color mapping, set the [`s ## Hide legend items based data source value -To enable or disable the legend visibility for each item through the data source, bind the appropriate data source field name to [`showLegendPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendSettings/#showlegendpath) property in the [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendSettings/). +To enable or disable the legend visibility for each item through the data source, bind the appropriate data source field name to [`showLegendPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendSettings#showlegendpath) property in the [`legendSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/legendSettings). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/treemap/levels.md b/chart-sdk/angular/treemap/levels.md index 33ea4c501..b47198dd9 100644 --- a/chart-sdk/angular/treemap/levels.md +++ b/chart-sdk/angular/treemap/levels.md @@ -1,6 +1,6 @@ --- layout: post -title: Levels in Angular Treemap component | Syncfusion +title: Levels in Angular TreeMap | Syncfusion description: Learn here all about Levels in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Levels @@ -8,17 +8,17 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Levels in Angular Treemap component +# Levels in Angular TreeMap -TreeMap supports **n** number of levels and each level is separated by using the [`groupPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#grouppath) property. +TreeMap supports **n** number of levels and each level is separated by using the [`groupPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#grouppath) property. ## Group path -The [`groupPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#grouppath) property is used to separate each level of the TreeMap by specifying the property from the data source. +The [`groupPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#grouppath) property is used to separate each level of the TreeMap by specifying the property from the data source. -In the following example, three levels are added and each level is configured using the [`groupPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#grouppath) property. +In the following example, three levels are added and each level is configured using the [`groupPath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#grouppath) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -36,7 +36,7 @@ In the following example, three levels are added and each level is configured us ## Group gap -The [`groupGap`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#groupgap) property is used to separate an item from each group or another item to differentiate the levels mentioned in the TreeMap. +The [`groupGap`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#groupgap) property is used to separate an item from each group or another item to differentiate the levels mentioned in the TreeMap. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -54,7 +54,7 @@ The [`groupGap`](https://ej2.syncfusion.com/angular/documentation/api/treemap/le ## Header format and Alignment -Customize header using the [`headerFormat`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#headerformat) property in which fields are mapping from the dataSource and align header using the [`headerAlignment`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#headeralignment) property. +Customize header using the [`headerFormat`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#headerformat) property in which fields are mapping from the dataSource and align header using the [`headerAlignment`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#headeralignment) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -70,7 +70,7 @@ Customize header using the [`headerFormat`](https://ej2.syncfusion.com/angular/d ## Header height and style -Customize the font color, family, weight, opacity and size using the [`headerStyle`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#headerstyle). Based on the font settings, the header height is given using the [`headerHeight`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#headerheight) property in [`levels`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#levels). +Customize the font color, family, weight, opacity and size using the [`headerStyle`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#headerstyle). Based on the font settings, the header height is given using the [`headerHeight`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#headerheight) property in [`levels`](https://ej2.syncfusion.com/angular/documentation/api/treemap#levels). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -86,7 +86,7 @@ Customize the font color, family, weight, opacity and size using the [`headerSty ## Header template and position -The TreeMap header supports to customize header of each item using the [`headerTemplate`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#headertemplate) property. It uses Essential® JS2 Template engine to render the elements. You can position the template using the [`templatePosition`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel/#templateposition) property. +The TreeMap header supports to customize header of each item using the [`headerTemplate`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#headertemplate) property. It uses Essential® JS2 Template engine to render the elements. You can position the template using the [`templatePosition`](https://ej2.syncfusion.com/angular/documentation/api/treemap/levelSettingsModel#templateposition) property. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/treemap/print-and-export.md b/chart-sdk/angular/treemap/print-and-export.md index 943174cab..2c1954985 100644 --- a/chart-sdk/angular/treemap/print-and-export.md +++ b/chart-sdk/angular/treemap/print-and-export.md @@ -1,6 +1,6 @@ --- layout: post -title: Print and export in Angular Treemap component | Syncfusion +title: Print and Export in Angular TreeMap | Syncfusion description: Learn here all about Print and export in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Print and export @@ -8,11 +8,11 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and export in Angular Treemap component +# Print and Export in Angular TreeMap ## Print -To use the print functionality, we should inject the `PrintService` into the `@NgModule.providers` and set the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#allowprint) property to **true**. The rendered treemap can be printed directly from the browser by calling the method [`print`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#print). +To use the print functionality, we should inject the `PrintService` into the `@NgModule.providers` and set the [`allowPrint`](https://ej2.syncfusion.com/angular/documentation/api/treemap#allowprint) property to **true**. The rendered treemap can be printed directly from the browser by calling the method [`print`](https://ej2.syncfusion.com/angular/documentation/api/treemap#print). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -30,7 +30,7 @@ To use the print functionality, we should inject the `PrintService` into the `@N ### Image Export -To use the image export functionality, we should inject the `ImageExportService` into the `@NgModule.providers` and set the [`allowImageExport`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#allowimageexport) property to **true**. The rendered treemap can be exported as an image using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#export) method. The method requires two parameters: image type and file name. The treemap can be exported as an image in the following formats. +To use the image export functionality, we should inject the `ImageExportService` into the `@NgModule.providers` and set the [`allowImageExport`](https://ej2.syncfusion.com/angular/documentation/api/treemap#allowimageexport) property to **true**. The rendered treemap can be exported as an image using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap#export) method. The method requires two parameters: image type and file name. The treemap can be exported as an image in the following formats. * JPEG * PNG @@ -48,7 +48,7 @@ To use the image export functionality, we should inject the `ImageExportService` {% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/treemap/getting-started/treemap-cs48" %} -We can get the image file as base64 string for the JPEG and PNG formats. The treemap can be exported to image as a base64 string using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string. +We can get the image file as base64 string for the JPEG and PNG formats. The treemap can be exported to image as a base64 string using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -64,7 +64,7 @@ We can get the image file as base64 string for the JPEG and PNG formats. The tre ### PDF Export -To use the PDF export functionality, we should inject the `PdfExportService` into the `@NgModule.providers` and set the [`allowPdfExport`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#allowpdfexport) property to **true**. The rendered treemap can be exported as PDF using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#export) method. The [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and **0** indicates portrait and **1** indicates landscape. +To use the PDF export functionality, we should inject the `PdfExportService` into the `@NgModule.providers` and set the [`allowPdfExport`](https://ej2.syncfusion.com/angular/documentation/api/treemap#allowpdfexport) property to **true**. The rendered treemap can be exported as PDF using the [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap#export) method. The [`export`](https://ej2.syncfusion.com/angular/documentation/api/treemap#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and **0** indicates portrait and **1** indicates landscape. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/treemap/selection-and-highlight.md b/chart-sdk/angular/treemap/selection-and-highlight.md index 1b07ed7cf..609d26d70 100644 --- a/chart-sdk/angular/treemap/selection-and-highlight.md +++ b/chart-sdk/angular/treemap/selection-and-highlight.md @@ -1,6 +1,6 @@ --- layout: post -title: Selection and highlight in Angular Treemap component | Syncfusion +title: Selection and Highlight in Angular TreeMap | Syncfusion description: Learn here all about Selection and highlight in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selection and highlight @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection and highlight in Angular Treemap component +# Selection and Highlight in Angular TreeMap ## Selection Selection is used to select a particular group or item to differentiate from other items. Each item or each group can be selected and deselected while interacting with the items. The corresponding Treemap items are also selected while tapping a specific legend item, and vice versa. -The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionSettings/#fill) property is used to change the selected item color. The [`color`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel/#color) and the [`width`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel/#width) properties are used to customize the selected item border, and the selection is enabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionSettings/#enable) property to **true** in the [`selectionSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionSettings/). +The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionSettings#fill) property is used to change the selected item color. The [`color`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel#color) and the [`width`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel#width) properties are used to customize the selected item border, and the selection is enabled by using the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionSettings#enable) property to **true** in the [`selectionSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/selectionSettings). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -32,7 +32,7 @@ The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/treemap/select Highlight is used to highlight an item or group from other items or groups. Each item or each group can be highlighted by hovering the mouse over the items. The corresponding Treemap items are also be highlighted while hovering over a specific legend item, and vice versa. -The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightSettingsModel/#fill) property is used to change the highlighted item color. The [`color`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel/#color) and the [`width`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel/#width) properties are used to customize the highlighted item border, and the highlight is enabled by setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightSettingsModel/#enable) property to **true** in the [`highlightSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightSettings/). +The [`fill`](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightSettingsModel#fill) property is used to change the highlighted item color. The [`color`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel#color) and the [`width`](https://ej2.syncfusion.com/angular/documentation/api/treemap/borderModel#width) properties are used to customize the highlighted item border, and the highlight is enabled by setting the [`enable`](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightSettingsModel#enable) property to **true** in the [`highlightSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/highlightSettings). {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/treemap/tooltip.md b/chart-sdk/angular/treemap/tooltip.md index 98119e22a..9207fdd59 100644 --- a/chart-sdk/angular/treemap/tooltip.md +++ b/chart-sdk/angular/treemap/tooltip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in Angular Treemap component | Syncfusion +title: Tooltip in Angular Treemap | Syncfusion description: Learn here all about Tooltip in Syncfusion Angular Treemap component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip @@ -8,13 +8,13 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in Angular Treemap component +# Tooltip in Angular Treemap Tooltip is used to display details about the items in the TreeMap. When space constraints prevent us from displaying the information using Data Labels, the tooltip comes in handy. ## Default tooltip -The tooltip is not visible by default, to make it visible, set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipSettingsModel/#visible) property in the [`tooltipSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#tooltipsettings) to **true**. +The tooltip is not visible by default, to make it visible, set the [`visible`](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipSettingsModel#visible) property in the [`tooltipSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap#tooltipsettings) to **true**. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -30,7 +30,7 @@ The tooltip is not visible by default, to make it visible, set the [`visible`](h ## Format tooltip -The tooltip content is displayed by default based on the [`weightValuePath`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#weightvaluepath). In addition, to show more information in the tooltip, use the [`format`](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipSettingsModel/#format) property and define field from the data source as `${datafield}`. +The tooltip content is displayed by default based on the [`weightValuePath`](https://ej2.syncfusion.com/angular/documentation/api/treemap#weightvaluepath). In addition, to show more information in the tooltip, use the [`format`](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipSettingsModel#format) property and define field from the data source as `${datafield}`. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} @@ -46,7 +46,7 @@ The tooltip content is displayed by default based on the [`weightValuePath`](htt ## Tooltip template -Tooltip can be rendered as a custom component using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipSettingsModel/#template) property in the [`tooltipSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap/#tooltipsettings) which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. You can use `${datafield}` as placeholder in HTML element to display the values from data source. +Tooltip can be rendered as a custom component using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/treemap/tooltipSettingsModel#template) property in the [`tooltipSettings`](https://ej2.syncfusion.com/angular/documentation/api/treemap#tooltipsettings) which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. You can use `${datafield}` as placeholder in HTML element to display the values from data source. {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/javascript/3d-charts/Chart-types/bar.md b/chart-sdk/javascript/3d-charts/Chart-types/bar.md index bcbbe4459..765cb04b8 100644 --- a/chart-sdk/javascript/3d-charts/Chart-types/bar.md +++ b/chart-sdk/javascript/3d-charts/Chart-types/bar.md @@ -1,18 +1,17 @@ --- layout: post -title: Bar Chart in JavaScript 3D Chart control | Syncfusion -description: Learn here all about bar chart in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Bar Chart in JavaScript 3D Chart | Syncfusion +description: Learn how to render a bar series in the Syncfusion JavaScript 3D Chart using the BarSeries3D module. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bar Chart in JavaScript 3D Chart control +# Bar Chart in JavaScript 3D Chart ## Bar chart -To render a [bar series](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bar-chart), use series [`type`](../../api/chart3d/series3DModel/#type) as `Bar` and inject `BarSeries3D` module using `Chart3D.Inject(BarSeries3D)` method. +To render a [bar series](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/bar-chart), use series [`type`](../../api/chart3d/series3DModel#type) as `Bar` and inject `BarSeries3D` module using `Chart3D.Inject(BarSeries3D)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To render a [bar series](https://www.syncfusion.com/javascript-ui-controls/js-ch ## Bar space and width -The [`columnSpacing`](../../api/chart3d/series3DModel/#columnspacing) and [`columnWidth`](../../api/chart3d/series3DModel/#columnwidth) properties are used to customize the space between bars. +The [`columnSpacing`](../../api/chart3d/series3DModel#columnspacing) and [`columnWidth`](../../api/chart3d/series3DModel#columnwidth) properties are used to customize the space between bars. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ The [`columnSpacing`](../../api/chart3d/series3DModel/#columnspacing) and [`colu ## Grouped bar -The data points can be grouped in the bar type charts by using the [`groupName`](../../api/chart3d/series3DModel/#groupname) property. Data points with same group name are grouped together. +The data points can be grouped in the bar type charts by using the [`groupName`](../../api/chart3d/series3DModel#groupname) property. Data points with same group name are grouped together. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -57,7 +56,7 @@ The data points can be grouped in the bar type charts by using the [`groupName`] ## Cylindrical bar chart -To render a cylindrical bar chart, set the [`columnFacet`](../../api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical bar chart, set the [`columnFacet`](../../api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -74,8 +73,8 @@ To render a cylindrical bar chart, set the [`columnFacet`](../../api/chart3d/ser The following properties can be used to customize the `bar` series. -* [fill](../../api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](../../api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel/#fill) color. +* [fill](../../api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](../../api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/Chart-types/column.md b/chart-sdk/javascript/3d-charts/Chart-types/column.md index d1f49ab42..4c6dfd71e 100644 --- a/chart-sdk/javascript/3d-charts/Chart-types/column.md +++ b/chart-sdk/javascript/3d-charts/Chart-types/column.md @@ -1,18 +1,17 @@ --- layout: post -title: Column Chart in JavaScript 3D Chart control | Syncfusion -description: Learn here all about column chart in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Column Chart in JavaScript 3D Chart | Syncfusion +description: Learn how to render a column series in the Syncfusion JavaScript 3D Chart using the ColumnSeries3D module. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Column Chart in JavaScript 3D Chart control +# Column Chart in JavaScript 3D Chart ## Column chart -To render a [column series](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/column-chart), use series [`type`](../../api/chart3d/series3DModel/#type) as `Column` and inject `ColumnSeries3D` module using `Chart3D.Inject(ColumnSeries3D)` method. +To render a [column series](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/column-chart), use series [`type`](../../api/chart3d/series3DModel#type) as `Column` and inject `ColumnSeries3D` module using `Chart3D.Inject(ColumnSeries3D)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To render a [column series](https://www.syncfusion.com/javascript-ui-controls/js ## Column space and width -The [`columnSpacing`](../../api/chart3d/series3DModel/#columnspacing) and [`columnWidth`](../../api/chart3d/series3DModel/#columnwidth) properties are used to customize the space between columns. +The [`columnSpacing`](../../api/chart3d/series3DModel#columnspacing) and [`columnWidth`](../../api/chart3d/series3DModel#columnwidth) properties are used to customize the space between columns. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ The [`columnSpacing`](../../api/chart3d/series3DModel/#columnspacing) and [`colu ## Grouped column -The data points can be grouped in the column type charts by using the [`groupName`](../../api/chart3d/series3DModel/#groupname) property. Data points with same group name are grouped together. +The data points can be grouped in the column type charts by using the [`groupName`](../../api/chart3d/series3DModel#groupname) property. Data points with same group name are grouped together. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -57,7 +56,7 @@ The data points can be grouped in the column type charts by using the [`groupNam ## Cylindrical column chart -To render a cylindrical column chart, set the [`columnFacet`](../../api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical column chart, set the [`columnFacet`](../../api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -74,8 +73,8 @@ To render a cylindrical column chart, set the [`columnFacet`](../../api/chart3d/ The following properties can be used to customize the `column` series. -* [fill](../../api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](../../api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel/#fill) color. +* [fill](../../api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](../../api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/Chart-types/stack-bar.md b/chart-sdk/javascript/3d-charts/Chart-types/stack-bar.md index 5a119b1fe..76b7b4d2d 100644 --- a/chart-sdk/javascript/3d-charts/Chart-types/stack-bar.md +++ b/chart-sdk/javascript/3d-charts/Chart-types/stack-bar.md @@ -1,18 +1,17 @@ --- layout: post -title: Stacked Bar Chart in JavaScript 3D Chart control | Syncfusion -description: Learn here all about stacked bar chart in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Stacked Bar Chart in JavaScript 3D Chart | Syncfusion +description: Learn how to render a stacked bar series in the Syncfusion JavaScript 3D Chart using the StackingBarSeries3D module. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked bar chart in JavaScript 3D Chart control +# Stacked Bar Chart in JavaScript 3D Chart ## Stacked bar chart -To render a stacked bar series, use series [`type`](../../api/chart3d/series3DModel/#type) as `StackingBar` and inject `StackingBarSeries3D` module using `Chart3D.Inject(StackingBarSeries3D)` method. +To render a stacked bar series, use series [`type`](../../api/chart3d/series3DModel#type) as `StackingBar` and inject `StackingBarSeries3D` module using `Chart3D.Inject(StackingBarSeries3D)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To render a stacked bar series, use series [`type`](../../api/chart3d/series3DMo ## Stacking group -To group the stacked bar, the [`stackingGroup`](../../api/chart3d/series3DModel/#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. +To group the stacked bar, the [`stackingGroup`](../../api/chart3d/series3DModel#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ To group the stacked bar, the [`stackingGroup`](../../api/chart3d/series3DModel/ ## Cylindrical stacked bar chart -To render a cylindrical stacked bar chart, set the [`columnFacet`](../../api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical stacked bar chart, set the [`columnFacet`](../../api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -59,8 +58,8 @@ To render a cylindrical stacked bar chart, set the [`columnFacet`](../../api/cha The following properties can be used to customize the `stacked bar` series. -* [fill](../../api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](../../api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel/#fill) color. +* [fill](../../api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](../../api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/Chart-types/stack-column.md b/chart-sdk/javascript/3d-charts/Chart-types/stack-column.md index ca5ed049e..b2a3e8213 100644 --- a/chart-sdk/javascript/3d-charts/Chart-types/stack-column.md +++ b/chart-sdk/javascript/3d-charts/Chart-types/stack-column.md @@ -1,18 +1,17 @@ --- layout: post -title: Stacked Column Chart in JavaScript 3D Chart control | Syncfusion -description: Learn here all about stacked column chart in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Stacked Column Chart in JavaScript 3D Chart | Syncfusion +description: Learn how to render a stacked column series in the Syncfusion JavaScript 3D Chart using the StackingColumnSeries3D module. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked column chart in JavaScript 3D Chart control +# Stacked Column Chart in JavaScript 3D Chart ## Stacked column chart -To render a stacked column series, use series [`type`](../../api/chart3d/series3DModel/#type) as `StackingColumn` and inject `StackingColumnSeries3D` module using `Chart3D.Inject(StackingColumnSeries3D)` method. +To render a stacked column series, use series [`type`](../../api/chart3d/series3DModel#type) as `StackingColumn` and inject `StackingColumnSeries3D` module using `Chart3D.Inject(StackingColumnSeries3D)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To render a stacked column series, use series [`type`](../../api/chart3d/series3 ## Stacking group -To group the stacked column, the [`stackingGroup`](../../api/chart3d/series3DModel/#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. +To group the stacked column, the [`stackingGroup`](../../api/chart3d/series3DModel#stackinggroup) property can be used. The columns with same group name are stacked on top of each other. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ To group the stacked column, the [`stackingGroup`](../../api/chart3d/series3DMod ## Cylindrical stacked column chart -To render a cylindrical stacked column chart, set the [`columnFacet`](../../api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical stacked column chart, set the [`columnFacet`](../../api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -59,8 +58,8 @@ To render a cylindrical stacked column chart, set the [`columnFacet`](../../api/ The following properties can be used to customize the `stacked column` series. -* [fill](../../api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](../../api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel/#fill) color. +* [fill](../../api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](../../api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel#fill) color. {% tabs %} diff --git a/chart-sdk/javascript/3d-charts/Chart-types/stacked-bar.md b/chart-sdk/javascript/3d-charts/Chart-types/stacked-bar.md index 4f78af667..cef8f5c1e 100644 --- a/chart-sdk/javascript/3d-charts/Chart-types/stacked-bar.md +++ b/chart-sdk/javascript/3d-charts/Chart-types/stacked-bar.md @@ -1,18 +1,17 @@ --- layout: post -title: 100% Stacked Bar Chart in JavaScript 3D Chart control | Syncfusion -description: Learn here all about 100% stacked bar chart in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: 100% Stacked Bar Chart in JavaScript 3D Chart | Syncfusion +description: Learn how to render a 100% stacked bar series in the Syncfusion JavaScript 3D Chart using the StackingBarSeries3D module. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# 100% Stacked bar chart in JavaScript 3D Chart control +# 100% Stacked bar chart in JavaScript 3D Chart ## 100% Stacked bar chart -To render a [100% stacked bar](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/100-stacked-bar-chart) series, use series [`type`](../../api/chart3d/series3DModel/#type) as `StackingBar100` and inject `StackingBarSeries3D` module using `Chart3D.Inject(StackingBarSeries3D)` method. +To render a [100% stacked bar](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/100-stacked-bar-chart) series, use series [`type`](../../api/chart3d/series3DModel#type) as `StackingBar100` and inject `StackingBarSeries3D` module using `Chart3D.Inject(StackingBarSeries3D)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To render a [100% stacked bar](https://www.syncfusion.com/javascript-ui-controls ## 100% Cylindrical stacked bar chart -To render a cylindrical 100% stacked bar chart, set the [`columnFacet`](../../api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a cylindrical 100% stacked bar chart, set the [`columnFacet`](../../api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -44,8 +43,8 @@ To render a cylindrical 100% stacked bar chart, set the [`columnFacet`](../../ap The following properties can be used to customize the `100% stacked bar` series. -* [fill](../../api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](../../api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel/#fill) color. +* [fill](../../api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](../../api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/Chart-types/stacked-column.md b/chart-sdk/javascript/3d-charts/Chart-types/stacked-column.md index 7561d93ea..9fbdfb93e 100644 --- a/chart-sdk/javascript/3d-charts/Chart-types/stacked-column.md +++ b/chart-sdk/javascript/3d-charts/Chart-types/stacked-column.md @@ -1,18 +1,17 @@ --- layout: post -title: 100% Stacked Column Chart in JavaScript 3D Chart control | Syncfusion -description: Learn here all about 100% stacked column chart in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: 100% Stacked Column Chart in JavaScript 3D Chart | Syncfusion +description: Learn how to render a 100% stacked column series in the Syncfusion JavaScript 3D Chart using the StackingColumnSeries3D module. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# 100% Stacked column chart in JavaScript 3D Chart control +# 100% Stacked column chart in JavaScript 3D Chart ## 100% Stacked column chart -To render a [100% stacked column](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/100-stacked-column-chart) series, use series [`type`](../../api/chart3d/series3DModel/#type) as `StackingColumn100` and inject `StackingColumnSeries3D` module using `Chart3D.Inject(StackingColumnSeries3D)` method. +To render a [100% stacked column](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/100-stacked-column-chart) series, use series [`type`](../../api/chart3d/series3DModel#type) as `StackingColumn100` and inject `StackingColumnSeries3D` module using `Chart3D.Inject(StackingColumnSeries3D)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To render a [100% stacked column](https://www.syncfusion.com/javascript-ui-contr ## 100% Cylindrical stacked column chart -To render a 100% cylindrical stacked column chart, set the [`columnFacet`](../../api/chart3d/series3DModel/#columnfacet) property to `Cylinder` in the chart series. +To render a 100% cylindrical stacked column chart, set the [`columnFacet`](../../api/chart3d/series3DModel#columnfacet) property to `Cylinder` in the chart series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -44,8 +43,8 @@ To render a 100% cylindrical stacked column chart, set the [`columnFacet`](../.. The following properties can be used to customize the `100% stacked column` series. -* [fill](../../api/chart3d/series3DModel/#fill) – Specifies the color of the series. -* [opacity](../../api/chart3d/series3DModel/#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel/#fill) color. +* [fill](../../api/chart3d/series3DModel#fill) – Specifies the color of the series. +* [opacity](../../api/chart3d/series3DModel#opacity) – Specifies the opacity of the [fill](../../api/chart3d/series3DModel#fill) color. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/accessibility.md b/chart-sdk/javascript/3d-charts/accessibility.md index 636ccfa89..5aadc4768 100644 --- a/chart-sdk/javascript/3d-charts/accessibility.md +++ b/chart-sdk/javascript/3d-charts/accessibility.md @@ -1,15 +1,14 @@ --- layout: post -title: Accessibility in JavaScript 3D Chart control | Syncfusion -description: Learn here all about accessibility in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript 3D Chart | Syncfusion +description: Learn how to make the Syncfusion JavaScript 3D Chart accessible using WAI-ARIA roles and keyboard navigation. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript 3D Chart control +# Accessibility in JavaScript 3D Chart Accessibility is achieved in the 3D chart control through WAI-ARIA standard and keyboard navigation. The 3D chart features can be effectively accessed through assistive technologies such as screen readers. diff --git a/chart-sdk/javascript/3d-charts/appearance.md b/chart-sdk/javascript/3d-charts/appearance.md index 5ee94f91e..5c50e00cd 100644 --- a/chart-sdk/javascript/3d-charts/appearance.md +++ b/chart-sdk/javascript/3d-charts/appearance.md @@ -1,19 +1,18 @@ --- layout: post -title: Appearance in JavaScript 3D Chart control | Syncfusion -description: Learn here all about appearance in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Appearance in JavaScript 3D Chart | Syncfusion +description: Learn how to customize the appearance of the Syncfusion JavaScript 3D Chart using palettes, background, border, animation, and title. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in JavaScript 3D Chart control +# Appearance in JavaScript 3D Chart ## Custom color palette -The default color of series or points can be customized by providing a custom color palette of your choice by using the [`palettes`](../api/chart3d/chart3DModel/#palettes) property. +The default color of series or points can be customized by providing a custom color palette of your choice by using the [`palettes`](../api/chart3d/chart3DModel#palettes) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -32,7 +31,7 @@ The color of an individual data point can be customized using the below options. ### Point color mapping -The color for the points can be bound from the [`dataSource`](../api/chart3d/series3D/#datasource) for the series by utilizing the [`pointColorMapping`](../api/chart3d/series3D/#pointcolormapping) property. +The color for the points can be bound from the [`dataSource`](../api/chart3d/series3D#datasource) for the series by utilizing the [`pointColorMapping`](../api/chart3d/series3D#pointcolormapping) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -47,7 +46,7 @@ The color for the points can be bound from the [`dataSource`](../api/chart3d/ser ## Point level customization -The data label and fill color of each data point can be customized using the [`pointRender`](../api/chart3d/i3DPointRenderEventArgs/) and [`textRender`](../api/chart3d/i3dtextrendereventargs/) events. +The data label and fill color of each data point can be customized using the [`pointRender`](../api/chart3d/i3DPointRenderEventArgs) and [`textRender`](../api/chart3d/i3dtextrendereventargs) events. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -68,7 +67,7 @@ The data label and fill color of each data point can be customized using the [`p **Customize the chart background** -The background color and border of the 3D chart can be customized using the [`background`](../api/chart3d/chart3DModel/#background) and [`border`](../api/chart3d/chart3DModel/#border) properties. +The background color and border of the 3D chart can be customized using the [`background`](../api/chart3d/chart3DModel#background) and [`border`](../api/chart3d/chart3DModel#border) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -83,7 +82,7 @@ The background color and border of the 3D chart can be customized using the [`ba **Chart margin** -The 3D chart's margin can be set from its container using the [`margin`](../api/chart3d/chart3DModel/#margin) property. +The 3D chart's margin can be set from its container using the [`margin`](../api/chart3d/chart3DModel#margin) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -98,7 +97,7 @@ The 3D chart's margin can be set from its container using the [`margin`](../api/ ## Animation -To customize the animation for a particular series, the [`animation`](../api/chart3d/series3D/#animation) property can be used. It can be enabled or disabled by using the [`enable`](../api/chart3d/animationModel/#enable) property. The [`duration`](../api/chart3d/animationModel/#duration) property specifies the duration of an animation and the [`delay`](../api/chart3d/animationModel/#delay) property allows us to start the animation at desire time. +To customize the animation for a particular series, the [`animation`](../api/chart3d/series3D#animation) property can be used. It can be enabled or disabled by using the [`enable`](../api/chart3d/animationModel#enable) property. The [`duration`](../api/chart3d/animationModel#duration) property specifies the duration of an animation and the [`delay`](../api/chart3d/animationModel#delay) property allows us to start the animation at desire time. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -113,7 +112,7 @@ To customize the animation for a particular series, the [`animation`](../api/cha ## Chart rotation -The 3D chart can be rotated by using the [`enableRotation`](../api/chart3d/chart3DModel/#enablerotation) property. +The 3D chart can be rotated by using the [`enableRotation`](../api/chart3d/chart3DModel#enablerotation) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -128,7 +127,7 @@ The 3D chart can be rotated by using the [`enableRotation`](../api/chart3d/chart ## Title -The 3D chart can be given a title by using [`title`](../api/chart3d/chart3DModel/#title) property, to show the information about the data plotted. +The 3D chart can be given a title by using [`title`](../api/chart3d/chart3DModel#title) property, to show the information about the data plotted. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -143,7 +142,7 @@ The 3D chart can be given a title by using [`title`](../api/chart3d/chart3DModel ### Title position -By using the [`position`](../api/chart3d/titleSettingsModel/#position) property in [`titleStyle`](../api/chart3d/chart3DModel/#titlestyle), the [`title`](../api/chart/#title-string) can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default. +By using the [`position`](../api/chart3d/titleSettingsModel#position) property in [`titleStyle`](../api/chart3d/chart3DModel#titlestyle), the [`title`](../api/chart#title-string) can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -156,7 +155,7 @@ By using the [`position`](../api/chart3d/titleSettingsModel/#position) propert {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/appearance-cs8" %} -The custom option is used to position the title anywhere in the 3D chart using [`x`](../api/chart3d/titleSettingsModel/#x) and [`y`](../api/chart3d/titleSettingsModel/#y) coordinates. +The custom option is used to position the title anywhere in the 3D chart using [`x`](../api/chart3d/titleSettingsModel#x) and [`y`](../api/chart3d/titleSettingsModel#y) coordinates. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -171,7 +170,7 @@ The custom option is used to position the title anywhere in the 3D chart using [ ### Title alignment -The title can be aligned to the near, far, or center of the 3D chart by using the [`textAlignment`](../api/chart3d/titleSettingsModel/#textalignment) property. +The title can be aligned to the near, far, or center of the 3D chart by using the [`textAlignment`](../api/chart3d/titleSettingsModel#textalignment) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -186,16 +185,16 @@ The title can be aligned to the near, far, or center of the 3D chart by using th ### Title customization -The [`titleStyle`](../api/chart3d/chart3DModel/#titlestyle) property of the 3D chart provides options to customize the title by using the following properties. +The [`titleStyle`](../api/chart3d/chart3DModel#titlestyle) property of the 3D chart provides options to customize the title by using the following properties. -* [`size`](../api/chart3d/titleSettingsModel/#size) - Specifies the size of the title. -* [`color`](../api/chart3d/titleSettingsModel/#color) - Specifies the color for the title. -* [`fontFamily`](../api/chart3d/titleSettingsModel/#fontfamily) - Specifies the font family for the title. -* [`fontWeight`](../api/chart3d/titleSettingsModel/#fontweight) - Specifies the font weight of the title. -* [`fontStyle`](../api/chart3d/titleSettingsModel/#fontstyle) - Specifies the font style for the title. -* [`opacity`](../api/chart3d/titleSettingsModel/#opacity) - Specifies the opacity for the color of the title. -* [`textAlignment`](../api/chart3d/titleSettingsModel/#textalignment) - Specifies the alignment of the title. -* [`textOverflow`](../api/chart3d/titleSettingsModel/#textoverflow) - Specifies the overflow of the title. +* [`size`](../api/chart3d/titleSettingsModel#size) - Specifies the size of the title. +* [`color`](../api/chart3d/titleSettingsModel#color) - Specifies the color for the title. +* [`fontFamily`](../api/chart3d/titleSettingsModel#fontfamily) - Specifies the font family for the title. +* [`fontWeight`](../api/chart3d/titleSettingsModel#fontweight) - Specifies the font weight of the title. +* [`fontStyle`](../api/chart3d/titleSettingsModel#fontstyle) - Specifies the font style for the title. +* [`opacity`](../api/chart3d/titleSettingsModel#opacity) - Specifies the opacity for the color of the title. +* [`textAlignment`](../api/chart3d/titleSettingsModel#textalignment) - Specifies the alignment of the title. +* [`textOverflow`](../api/chart3d/titleSettingsModel#textoverflow) - Specifies the overflow of the title. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/axis-customization.md b/chart-sdk/javascript/3d-charts/axis-customization.md index 80ad46526..2478f5b87 100644 --- a/chart-sdk/javascript/3d-charts/axis-customization.md +++ b/chart-sdk/javascript/3d-charts/axis-customization.md @@ -1,19 +1,18 @@ --- layout: post -title: Axis customization in JavaScript 3D Chart control | Syncfusion -description: Learn here all about axis customization in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Axis Customization in JavaScript 3D Chart | Syncfusion +description: Learn how to customize the axes of the Syncfusion JavaScript 3D Chart 3D Chart, including titles, labels, and tick lines. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in JavaScript 3D Chart control +# Axis Customization in JavaScript 3D Chart ## Title -The title for the axis can be added by using the [`title`](../api/chart3d/axis3D/#title) property. It helps to provide quick information to the user about the data plotted in the axis. Title style can be customized using [`titleStyle`](../api/chart3d/axis3D/#titlestyle) property of the axis. +The title for the axis can be added by using the [`title`](../api/chart3d/axis3D#title) property. It helps to provide quick information to the user about the data plotted in the axis. Title style can be customized using [`titleStyle`](../api/chart3d/axis3D#titlestyle) property of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ The title for the axis can be added by using the [`title`](../api/chart3d/axis3D ## Title rotation -The title can be rotated from 0 to 360 degree by using the [`titleRotation`](../api/chart3d/axis3D/#titlerotation) property. +The title can be rotated from 0 to 360 degree by using the [`titleRotation`](../api/chart3d/axis3D#titlerotation) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ The title can be rotated from 0 to 360 degree by using the [`titleRotation`](../ ## Tick lines customization -The [`width`](../api/chart3d/majorTickModel/#width), [`color`](../api/chart3d/majorTickModel/#color) and [`height`](../api/chart3d/majorTickModel/#height) of the minor and major tick lines can be customized by using the [`majorTickLines`](../api/chart3d/axis3D/#majorticklines) and [`minorTickLines`](../api/chart3d/axis3D/#minorticklines) properties in the axis. +The [`width`](../api/chart3d/majorTickModel#width), [`color`](../api/chart3d/majorTickModel#color) and [`height`](../api/chart3d/majorTickModel#height) of the minor and major tick lines can be customized by using the [`majorTickLines`](../api/chart3d/axis3D#majorticklines) and [`minorTickLines`](../api/chart3d/axis3D#minorticklines) properties in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ The [`width`](../api/chart3d/majorTickModel/#width), [`color`](../api/chart3d/m ## Grid lines customization -The [`width`](../api/chart3d/majorGridModel/#width) and [`color`](../api/chart3d/majorGridModel/#color) of the minor and major grid lines can be customized by using the [`majorGridLines`](../api/chart3d/axis3D/#majorgridlines) and [`minorGridLines`](../api/chart3d/axis3D/#minorgridlines) properties in the axis. +The [`width`](../api/chart3d/majorGridModel#width) and [`color`](../api/chart3d/majorGridModel#color) of the minor and major grid lines can be customized by using the [`majorGridLines`](../api/chart3d/axis3D#majorgridlines) and [`minorGridLines`](../api/chart3d/axis3D#minorgridlines) properties in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -90,7 +89,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. -When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner, set the [`isInversed`](../api/chart3d/axis3D/#isinversed) property to **true**. +When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner, set the [`isInversed`](../api/chart3d/axis3D#isinversed) property to **true**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -105,7 +104,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v ## Opposed position -To place an axis opposite from its original position, set the [`opposedPosition`](../api/chart3d/axis3D/#opposedposition) property to **true**. +To place an axis opposite from its original position, set the [`opposedPosition`](../api/chart3d/axis3D#opposedposition) property to **true**. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/axis-labels.md b/chart-sdk/javascript/3d-charts/axis-labels.md index 115a9d257..dd70b3f3a 100644 --- a/chart-sdk/javascript/3d-charts/axis-labels.md +++ b/chart-sdk/javascript/3d-charts/axis-labels.md @@ -1,21 +1,20 @@ --- layout: post -title: Axis labels in JavaScript 3D Chart control | Syncfusion -description: Learn here all about axis labels in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Axis Labels in JavaScript 3D Chart | Syncfusion +description: Learn how to customize axis labels in the Syncfusion JavaScript 3D Chart, including smart labels and edge label placement. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis labels in JavaScript 3D Chart control +# Axis Labels in JavaScript 3D Chart Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis. ## Smart axis labels -When the axis labels overlap with each other, [`labelIntersectAction`](../api/chart3d/axis3D/#labelintersectaction) property in the axis can be used to place them smartly. +When the axis labels overlap with each other, [`labelIntersectAction`](../api/chart3d/axis3D#labelintersectaction) property in the axis can be used to place them smartly. **Case 1**: When setting `labelIntersectAction` as `Hide`. @@ -59,7 +58,7 @@ When the axis labels overlap with each other, [`labelIntersectAction`](../api/c ## Edge label placement Labels with long text at the edges of an axis may appear partially in the 3D chart. To avoid this, -use the [`edgeLabelPlacement`](../api/chart3d/axis3D/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. +use the [`edgeLabelPlacement`](../api/chart3d/axis3D#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -74,7 +73,7 @@ use the [`edgeLabelPlacement`](../api/chart3d/axis3D/#edgelabelplacement) prop ## Maximum labels -The labels will be rendered based on the count in the [`maximumLabels`](../api/chart3d/axis3D/#maximumlabels) property per 100 pixel. If the range (minimum, maximum, interval) and `maximumLabels` are set, then the priority goes to range. If the range is not set, then the priority goes to `maximumLabels` property. +The labels will be rendered based on the count in the [`maximumLabels`](../api/chart3d/axis3D#maximumlabels) property per 100 pixel. If the range (minimum, maximum, interval) and `maximumLabels` are set, then the priority goes to range. If the range is not set, then the priority goes to `maximumLabels` property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/category-axis.md b/chart-sdk/javascript/3d-charts/category-axis.md index c065c14ea..690899bca 100644 --- a/chart-sdk/javascript/3d-charts/category-axis.md +++ b/chart-sdk/javascript/3d-charts/category-axis.md @@ -1,15 +1,14 @@ --- layout: post -title: Category axis in JavaScript 3D Chart control | Syncfusion -description: Learn here all about category axis in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Category Axis in JavaScript 3D Chart | Syncfusion +description: Learn how to render the Syncfusion JavaScript 3D Chart with a category axis that shows text values along the horizontal axis. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Category axis in JavaScript 3D Chart control +# Category Axis in JavaScript 3D Chart The category axis is the horizontal axis of a 3D chart that shows text values rather than numerical values. Compared to the vertical axis, this axis has fewer labels. The following sample shows to render the 3D chart using category axis. @@ -24,11 +23,11 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/column-cs1" %} ->Note: To use category axis, we need to inject `Category3D` module using `Chart3D.Inject(Category3D)` method and set the [`valueType`](../api/chart3d/axis3D/#valuetype) of axis to **Category**. +>Note: To use category axis, we need to inject `Category3D` module using `Chart3D.Inject(Category3D)` method and set the [`valueType`](../api/chart3d/axis3D#valuetype) of axis to **Category**. ## Labels placement -By default, category axis labels are placed between ticks in an axis. It can also be placed on ticks using the [`labelPlacement`](../api/chart3d/axis3D/#labelplacement) property. +By default, category axis labels are placed between ticks in an axis. It can also be placed on ticks using the [`labelPlacement`](../api/chart3d/axis3D#labelplacement) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ By default, category axis labels are placed between ticks in an axis. It can als ## Range -The range of the category axis can be customized using [`minimum`](../api/chart3d/axis3D/#minimum), [`maximum`](../api/chart3d/axis3D/#maximum) and [`interval`](../api/chart3d/axis3D/#interval) properties of the axis. +The range of the category axis can be customized using [`minimum`](../api/chart3d/axis3D#minimum), [`maximum`](../api/chart3d/axis3D#maximum) and [`interval`](../api/chart3d/axis3D#interval) properties of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ The range of the category axis can be customized using [`minimum`](../api/chart3 ## Indexed category axis -The category axis can also be rendered based on the index values of the data source. This can be achieved by defining the [`isIndexed`](../api/chart3d/axis3D/#isindexed) property to **true** in the axis. +The category axis can also be rendered based on the index values of the data source. This can be achieved by defining the [`isIndexed`](../api/chart3d/axis3D#isindexed) property to **true** in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/data-labels.md b/chart-sdk/javascript/3d-charts/data-labels.md index 3f75848b8..632e2f06b 100644 --- a/chart-sdk/javascript/3d-charts/data-labels.md +++ b/chart-sdk/javascript/3d-charts/data-labels.md @@ -1,17 +1,16 @@ --- layout: post -title: Data labels in JavaScript 3D Chart control | Syncfusion -description: Learn here all about data labels in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Data labels in JavaScript 3D Chart | Syncfusion +description: Learn how to add and customize data labels in the Syncfusion JavaScript 3D Chart for each chart series. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in JavaScript 3D Chart control +# Data labels in JavaScript 3D Chart -Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the [`visible`](../api/chart3d/dataLabelStyleModel/#visible) property in the [`dataLabel`](../api/chart3d/series3DModel/#datalabel). By default, the labels will arrange smartly without overlapping. +Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the [`visible`](../api/chart3d/dataLabelStyleModel#visible) property in the [`dataLabel`](../api/chart3d/series3DModel#datalabel). By default, the labels will arrange smartly without overlapping. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ Data labels are fields that includes information about the sample point connecte ## Position -The [`position`](../api/chart3d/dataLabelStyleModel/#position) property is used to place the label either on `Top`, `Middle`, or `Bottom`. +The [`position`](../api/chart3d/dataLabelStyleModel#position) property is used to place the label either on `Top`, `Middle`, or `Bottom`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ The [`position`](../api/chart3d/dataLabelStyleModel/#position) property is used ## Template -Label content can be formatted by using the template option. Inside the template, the placeholder text `${point.x}` and `${point.y}` can be added to display corresponding data points x & y value. Using [`template`](../api/chart3d/dataLabelStyleModel/#template) property, the data label template can be set. +Label content can be formatted by using the template option. Inside the template, the placeholder text `${point.x}` and `${point.y}` can be added to display corresponding data points x & y value. Using [`template`](../api/chart3d/dataLabelStyleModel#template) property, the data label template can be set. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ Label content can be formatted by using the template option. Inside the template ## Text mapping -Text from the data source can be mapped using the [`name`](../api/chart3d/dataLabelStyleModel/#name) property. +Text from the data source can be mapped using the [`name`](../api/chart3d/dataLabelStyleModel#name) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -73,7 +72,7 @@ Text from the data source can be mapped using the [`name`](../api/chart3d/dataLa ## Format -Data label for the chart can be formatted using the [`format`](../api/chart3d/dataLabelStyleModel/#format) property. The global formatting options can be used as 'n', 'p', and 'c'. +Data label for the chart can be formatted using the [`format`](../api/chart3d/dataLabelStyleModel#format) property. The global formatting options can be used as 'n', 'p', and 'c'. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -145,7 +144,7 @@ Data label for the chart can be formatted using the [`format`](../api/chart3d/da ## Margin -The [`margin`](../api/chart3d/dataLabelStyleModel/#margin) for data label can be applied by using [`left`](../api/chart3d/marginModel/#left), [`right`](../api/chart3d/marginModel/#right), [`bottom`](../api/chart3d/marginModel/#bottom) and [`top`](../api/chart3d/marginModel/#top) properties. +The [`margin`](../api/chart3d/dataLabelStyleModel#margin) for data label can be applied by using [`left`](../api/chart3d/marginModel#left), [`right`](../api/chart3d/marginModel#right), [`bottom`](../api/chart3d/marginModel#bottom) and [`top`](../api/chart3d/marginModel#top) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -160,7 +159,7 @@ The [`margin`](../api/chart3d/dataLabelStyleModel/#margin) for data label can be ## Customization -The `stroke` and `border` of data label can be customized using [`fill`](../api/chart3d/dataLabelStyleModel/#fill) and [`border`](../api/chart3d/dataLabelStyleModel/#border) properties. +The `stroke` and `border` of data label can be customized using [`fill`](../api/chart3d/dataLabelStyleModel#fill) and [`border`](../api/chart3d/dataLabelStyleModel#border) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -175,7 +174,7 @@ The `stroke` and `border` of data label can be customized using [`fill`](../api/ ## Customizing specific label -A specific label can be customized by using the [`textRender`](../api/chart3d/i3dtextrendereventargs/) event. The `textRender` event allows you to change the label text for the point. +A specific label can be customized by using the [`textRender`](../api/chart3d/i3dtextrendereventargs) event. The `textRender` event allows you to change the label text for the point. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/datetime-axis.md b/chart-sdk/javascript/3d-charts/datetime-axis.md index 93b279e95..589c07b0d 100644 --- a/chart-sdk/javascript/3d-charts/datetime-axis.md +++ b/chart-sdk/javascript/3d-charts/datetime-axis.md @@ -1,16 +1,15 @@ --- layout: post -title: DateTime axis in JavaScript 3D Chart control | Syncfusion -description: Learn here all about DateTime axis in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: DateTime Axis in JavaScript 3D Chart | Syncfusion +description: Learn how to render the Syncfusion JavaScript 3D Chart with a DateTime axis that displays date and time scale values. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# DateTime axis in JavaScript 3D Chart control +# DateTime Axis in JavaScript 3D Chart ## DateTime axis @@ -27,7 +26,7 @@ DateTime axis uses date time scale and displays the date time values as axis lab {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/date-time-cs1" %} ->Note: To use datetime axis, we need to inject `DateTime3D` module using `Chart3D.Inject(DateTime3D)` method and set the [`valueType`](../api/chart3d/axis3D/#valuetype) of axis to **DateTime**. +>Note: To use datetime axis, we need to inject `DateTime3D` module using `Chart3D.Inject(DateTime3D)` method and set the [`valueType`](../api/chart3d/axis3D#valuetype) of axis to **DateTime**. ## DateTime category axis @@ -44,11 +43,11 @@ DateTime category axis is used to display the date time values with non-linear i {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/date-time-cs2" %} ->Note: To use datetime category axis, we need to inject `DateTimeCategory3D` module using the `Chart3D.Inject(DateTimeCategory3D)` method and set the [`valueType`](../api/chart3d/axis3D/#valuetype) of axis to **DateTimeCategory**. +>Note: To use datetime category axis, we need to inject `DateTimeCategory3D` module using the `Chart3D.Inject(DateTimeCategory3D)` method and set the [`valueType`](../api/chart3d/axis3D#valuetype) of axis to **DateTimeCategory**. ### Range -Range of an axis will be calculated automatically based on the provided data. You can also customize the range of an axis using [`minimum`](../api/chart3d/axis3D/#minimum), [`maximum`](../api/chart3d/axis3D/#maximum) and [`interval`](../api/chart3d/axis3D/#interval) properties. +Range of an axis will be calculated automatically based on the provided data. You can also customize the range of an axis using [`minimum`](../api/chart3d/axis3D#minimum), [`maximum`](../api/chart3d/axis3D#maximum) and [`interval`](../api/chart3d/axis3D#interval) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -63,7 +62,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo ### Interval customization -Date time intervals can be customized by using the [`interval`](../api/chart3d/axis3D/#interval) and [`intervalType`](../api/chart3d/axis3D/#intervaltype) properties of the axis. For example, when you set `interval` as **2** and `intervalType` as **Years**, it considers 2 years as interval. DateTime axis supports following interval types, +Date time intervals can be customized by using the [`interval`](../api/chart3d/axis3D#interval) and [`intervalType`](../api/chart3d/axis3D#intervaltype) properties of the axis. For example, when you set `interval` as **2** and `intervalType` as **Years**, it considers 2 years as interval. DateTime axis supports following interval types, * Auto * Years @@ -86,7 +85,7 @@ Date time intervals can be customized by using the [`interval`](../api/chart3d/a **Applying padding to the range** -Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) property. DateTime axis supports the following types of padding, +Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](../api/chart3d/axis3D#rangepadding) property. DateTime axis supports the following types of padding, * None * Round @@ -94,7 +93,7 @@ Padding can be applied to the minimum and maximum extremes of the range by using **DateTime - None** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -109,7 +108,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `None`, **DateTime - Round** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is **15th Jan**, interval is **1** and interval type is **Month**, then the axis minimum will be **Jan 1st**. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is **15th Jan**, interval is **1** and interval type is **Month**, then the axis minimum will be **Jan 1st**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -124,7 +123,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `Round` **DateTime - Additional** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -139,7 +138,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `Additi ## Label format -The date can be formatted and parsed to all globalize format using the [`labelFormat`](../api/chart3d/axis3D/#labelformat) property in an axis. +The date can be formatted and parsed to all globalize format using the [`labelFormat`](../api/chart3d/axis3D#labelformat) property in an axis. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/dimensions.md b/chart-sdk/javascript/3d-charts/dimensions.md index e33643eed..4b6ff00db 100644 --- a/chart-sdk/javascript/3d-charts/dimensions.md +++ b/chart-sdk/javascript/3d-charts/dimensions.md @@ -1,15 +1,14 @@ --- layout: post -title: Dimensions in JavaScript 3D Chart control | Syncfusion +title: Dimensions in JavaScript 3D Chart | Syncfusion description: Learn here all about dimensions in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in JavaScript 3D Chart control +# Dimensions in JavaScript 3D Chart ## Size for container @@ -37,7 +36,7 @@ The 3D chart can be rendered to its container size and it can be set via inline -The size of the 3D chart can be set directly through [`width`](../api/chart3d/chart3DModel/#width) and [`height`](../api/chart3d/chart3DModel/#height) properties. +The size of the 3D chart can be set directly through [`width`](../api/chart3d/chart3DModel#width) and [`height`](../api/chart3d/chart3DModel#height) properties. **In Pixel** diff --git a/chart-sdk/javascript/3d-charts/es5-getting-started.md b/chart-sdk/javascript/3d-charts/es5-getting-started.md index 12220c376..88e2296f9 100644 --- a/chart-sdk/javascript/3d-charts/es5-getting-started.md +++ b/chart-sdk/javascript/3d-charts/es5-getting-started.md @@ -1,10 +1,9 @@ --- layout: post -title: ES5 getting started with JavaScript 3D Chart control | Syncfusion -description: Check out and learn about ES5 getting started with JavaScript 3D Chart control of Syncfusion Essential JS 2 and more details. +title: Getting Started with JavaScript 3D Chart (ES5) | Syncfusion +description: Learn how to get started with the Syncfusion JavaScript 3D Chart in an ES5 application using the CDN approach. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/3d-charts/legend.md b/chart-sdk/javascript/3d-charts/legend.md index 965e97589..b82e5336c 100644 --- a/chart-sdk/javascript/3d-charts/legend.md +++ b/chart-sdk/javascript/3d-charts/legend.md @@ -1,16 +1,15 @@ --- layout: post -title: Legend in JavaScript 3D Chart control | Syncfusion -description: Learn here all about legend in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Legend in JavaScript 3D Chart | Syncfusion +description: Learn how to add and customize the legend in the Syncfusion JavaScript 3D Chart, including position, alignment, and title. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in JavaScript 3D Chart control +# Legend in JavaScript 3D Chart @@ -18,7 +17,7 @@ Legend provides information about the series rendered in the 3D chart. ## Position and alignment -By using the [`position`](../api/chart3d/legendSettings/#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default. +By using the [`position`](../api/chart3d/legendSettings#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -46,7 +45,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us ### Legend reverse -The order of the legend items can be reversed by using the [`reverse`](../api/chart3d/legendSettings/#reverse) property. By default, legend for the first series in the collection will be placed first. +The order of the legend items can be reversed by using the [`reverse`](../api/chart3d/legendSettings#reverse) property. By default, legend for the first series in the collection will be placed first. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -61,7 +60,7 @@ The order of the legend items can be reversed by using the [`reverse`](../api/ch ### Legend alignment -The legend can be aligned at near, far or center to the 3D chart using the [`alignment`](../api/chart3d/legendSettings/#alignment) property. +The legend can be aligned at near, far or center to the 3D chart using the [`alignment`](../api/chart3d/legendSettings#alignment) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -76,7 +75,7 @@ The legend can be aligned at near, far or center to the 3D chart using the [`ali ## Legend customization -To change the legend icon shape, [`legendShape`](../api/chart3d/series3D/#legendshape) property in the [`series`](../api/chart3d/series3D/) can be used. By default, the legend icon shape is `seriesType`. +To change the legend icon shape, [`legendShape`](../api/chart3d/series3D#legendshape) property in the [`series`](../api/chart3d/series3D) can be used. By default, the legend icon shape is `seriesType`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -91,7 +90,7 @@ To change the legend icon shape, [`legendShape`](../api/chart3d/series3D/#legend ### Legend size -By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the [`height`](../api/chart3d/legendSettings/#height) and [`width`](../api/chart3d/legendSettings/#width) properties of the `legendSettings`. +By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the [`height`](../api/chart3d/legendSettings#height) and [`width`](../api/chart3d/legendSettings#width) properties of the `legendSettings`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -106,7 +105,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i ### Legend item size -The size of the legend items can be customised by using the [`shapeHeight`](../api/chart3d/legendSettings/#shapeheight) and [`shapeWidth`](../api/chart3d/legendSettings/#shapewidth) properties. +The size of the legend items can be customised by using the [`shapeHeight`](../api/chart3d/legendSettings#shapeheight) and [`shapeWidth`](../api/chart3d/legendSettings#shapewidth) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -136,7 +135,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun ### Legend text wrap -When the legend text exceeds the container, the text can be wrapped by using the [`textWrap`](../api/chart3d/legendSettings/#textwrap) property. End user can also wrap the legend text based on the [`maximumLabelWidth`](../api/chart3d/legendSettings/#maximumlabelwidth) property. +When the legend text exceeds the container, the text can be wrapped by using the [`textWrap`](../api/chart3d/legendSettings#textwrap) property. End user can also wrap the legend text based on the [`maximumLabelWidth`](../api/chart3d/legendSettings#maximumlabelwidth) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -151,7 +150,7 @@ When the legend text exceeds the container, the text can be wrapped by using the ## Series selection through legend -By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the [`toggleVisibility`](../api/chart3d/legendSettings/#togglevisibility) property if you must use a legend click to choose a series. +By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the [`toggleVisibility`](../api/chart3d/legendSettings#togglevisibility) property if you must use a legend click to choose a series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -181,7 +180,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa ## Legend title -You can set title for legend using [`title`](../api/chart3d/legendSettings/#title) property in [`legendSettings`](../api/chart3d/legendSettings). The [`size`](../api/chart3d/fontModel/#size), [`color`](../api/chart3d/fontModel/#color), [`opacity`](../api/chart3d/fontModel/#opacity),[`fontStyle`](../api/chart3d/fontModel/#fontstyle), [`fontWeight`](../api/chart3d/fontModel/#fontweight), [`fontFamily`](../api/chart3d/fontModel/#fontfamily), [`textAlignment`](../api/chart3d/fontModel/#textalignment), and [`textOverflow`](../api/chart3d/fontModel/#textoverflow) of legend title can be customized by using the [`titleStyle`](../api/chart3d/legendSettings/#titlestyle) property in [`legendSettings`](../api/chart3d/legendSettings/). The [`titlePosition`](../api/chart3d/legendSettings/#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. The [`maximumTitleWidth`](../api/chart3d/legendSettings/#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. +You can set title for legend using [`title`](../api/chart3d/legendSettings#title) property in [`legendSettings`](../api/chart3d/legendSettings). The [`size`](../api/chart3d/fontModel#size), [`color`](../api/chart3d/fontModel#color), [`opacity`](../api/chart3d/fontModel#opacity),[`fontStyle`](../api/chart3d/fontModel#fontstyle), [`fontWeight`](../api/chart3d/fontModel#fontweight), [`fontFamily`](../api/chart3d/fontModel#fontfamily), [`textAlignment`](../api/chart3d/fontModel#textalignment), and [`textOverflow`](../api/chart3d/fontModel#textoverflow) of legend title can be customized by using the [`titleStyle`](../api/chart3d/legendSettings#titlestyle) property in [`legendSettings`](../api/chart3d/legendSettings). The [`titlePosition`](../api/chart3d/legendSettings#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. The [`maximumTitleWidth`](../api/chart3d/legendSettings#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -196,7 +195,7 @@ You can set title for legend using [`title`](../api/chart3d/legendSettings/#titl ## Arrow page navigation -The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The [`enablePages`](../api/chart3d/legendSettings/#enablepages) property needs to be set to **false** in order to render the arrow page navigation. +The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The [`enablePages`](../api/chart3d/legendSettings#enablepages) property needs to be set to **false** in order to render the arrow page navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -211,7 +210,7 @@ The page number will always be visible while using legend paging. It is now poss ## Legend item padding -The [`itemPadding`](../api/chart3d/legendSettings/#itempadding) property can be used to adjust the space between the legend items. +The [`itemPadding`](../api/chart3d/legendSettings#itempadding) property can be used to adjust the space between the legend items. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/logarithmic-axis.md b/chart-sdk/javascript/3d-charts/logarithmic-axis.md index edbdc66a1..65950689e 100644 --- a/chart-sdk/javascript/3d-charts/logarithmic-axis.md +++ b/chart-sdk/javascript/3d-charts/logarithmic-axis.md @@ -1,15 +1,14 @@ --- layout: post -title: Logarithmic axis in JavaScript 3D Chart control | Syncfusion -description: Learn here all about logarithmic axis in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Logarithmic Axis in JavaScript 3D Chart | Syncfusion +description: Learn how to render the Syncfusion JavaScript 3D Chart with a logarithmic axis to visualize data across many orders of magnitude. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Logarithmic axis in JavaScript 3D Chart control +# Logarithmic Axis in JavaScript 3D Chart Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106). @@ -24,11 +23,11 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/logarithmic-cs1" %} ->Note: To use logarithmic axis, we need to inject `Logarithmic3D` module using the `Chart3D.Inject(Logarithmic3D)` method and set the [`valueType`](../api/chart3d/axis3D/#valuetype) of the axis to **Logarithmic**. +>Note: To use logarithmic axis, we need to inject `Logarithmic3D` module using the `Chart3D.Inject(Logarithmic3D)` method and set the [`valueType`](../api/chart3d/axis3D#valuetype) of the axis to **Logarithmic**. ## Range -The range of an axis will be calculated automatically based on the provided data and it can also be customized by using the [`minimum`](../api/chart3d/axis3D/#minimum), [`maximum`](../api/chart3d/axis3D/#maximum) and [`interval`](../api/chart3d/axis3D/#interval) properties of the axis. +The range of an axis will be calculated automatically based on the provided data and it can also be customized by using the [`minimum`](../api/chart3d/axis3D#minimum), [`maximum`](../api/chart3d/axis3D#maximum) and [`interval`](../api/chart3d/axis3D#interval) properties of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ The range of an axis will be calculated automatically based on the provided data ## Logarithmic base -Logarithmic base can be customized by using the [`logBase`](../api/chart3d/axis3D/#logbase) property of the axis. For example when the `logBase` is **5**, the axis values follows 5-2, 5-1, 50, 51, 52 etc. +Logarithmic base can be customized by using the [`logBase`](../api/chart3d/axis3D#logbase) property of the axis. For example when the `logBase` is **5**, the axis values follows 5-2, 5-1, 50, 51, 52 etc. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ Logarithmic base can be customized by using the [`logBase`](../api/chart3d/axis ## Logarithmic interval -The interval of the logarithmic axis can be customized by using the [`interval`](../api/chart3d/axis3D/#interval) property in the axis. When the logarithmic base is 10 and logarithmic **interval** is 2, then the axis labels are placed at an interval of 102. The default value of the [`interval`](../api/chart3d/axis3D/#interval) is **1**. +The interval of the logarithmic axis can be customized by using the [`interval`](../api/chart3d/axis3D#interval) property in the axis. When the logarithmic base is 10 and logarithmic **interval** is 2, then the axis labels are placed at an interval of 102. The default value of the [`interval`](../api/chart3d/axis3D#interval) is **1**. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/multiple-panes.md b/chart-sdk/javascript/3d-charts/multiple-panes.md index 0f3673fb2..d7026a34b 100644 --- a/chart-sdk/javascript/3d-charts/multiple-panes.md +++ b/chart-sdk/javascript/3d-charts/multiple-panes.md @@ -1,24 +1,23 @@ --- layout: post -title: Multiple panes in JavaScript 3D Chart control | Syncfusion -description: Learn here all about multiple panes in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Multiple Panes in JavaScript 3D Chart | Syncfusion +description: Learn how to split the Syncfusion JavaScript 3D Chart area into multiple rows and columns to create multiple panes. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Multiple panes in JavaScript 3D Chart control +# Multiple Panes in JavaScript 3D Chart -The chart area can be divided into multiple panes using [`rows`](../api/chart3d/chart3DModel/#rows) and [`columns`](../api/chart3d/chart3DModel/#columns). +The chart area can be divided into multiple panes using [`rows`](../api/chart3d/chart3DModel#rows) and [`columns`](../api/chart3d/chart3DModel#columns). ## Rows -To split the chart area vertically into number of rows, use [`rows`](../api/chart3d/chart3DModel/#rows) property of the 3D chart. +To split the chart area vertically into number of rows, use [`rows`](../api/chart3d/chart3DModel#rows) property of the 3D chart. -* The space for each row can be allocated by using the [`height`](../api/chart3d/threeDimensionRowModel/#height) property. The value can be either in percentage or in pixel. -* To associate a vertical axis to a particular row, specify its index to [`rowIndex`](../api/chart3d/axis3DModel/#rowindex) property of the axis. +* The space for each row can be allocated by using the [`height`](../api/chart3d/threeDimensionRowModel#height) property. The value can be either in percentage or in pixel. +* To associate a vertical axis to a particular row, specify its index to [`rowIndex`](../api/chart3d/axis3DModel#rowindex) property of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -31,7 +30,7 @@ To split the chart area vertically into number of rows, use [`rows`](../api/char {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/multi-pane-cs1" %} -For spanning the vertical axis along multiple rows, use [`span`](../api/chart3d/axis3DModel/#span) property of an axis. +For spanning the vertical axis along multiple rows, use [`span`](../api/chart3d/axis3DModel#span) property of an axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -46,10 +45,10 @@ For spanning the vertical axis along multiple rows, use [`span`](../api/chart3d ## Columns -To split the chart area horizontally into number of columns, use [`columns`](../api/chart3d/chart3DModel/#columns) property of the 3D chart. +To split the chart area horizontally into number of columns, use [`columns`](../api/chart3d/chart3DModel#columns) property of the 3D chart. -* The space for each column can be allocated by using the [`width`](../api/chart3d/threeDimensionColumnModel/#width) property. The given width can be either in percentage or in pixel. -* To associate a horizontal axis to a particular column, specify its index to [`columnIndex`](../api/chart3d/axis3DModel/#columnindex) property of the axis. +* The space for each column can be allocated by using the [`width`](../api/chart3d/threeDimensionColumnModel#width) property. The given width can be either in percentage or in pixel. +* To associate a horizontal axis to a particular column, specify its index to [`columnIndex`](../api/chart3d/axis3DModel#columnindex) property of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -62,7 +61,7 @@ To split the chart area horizontally into number of columns, use [`columns`](../ {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/3d-charts/multi-pane-cs3" %} -For spanning the vertical axis along multiple column, you can use [`span`](../api/chart3d/axis3DModel/#span) property of an axis. +For spanning the vertical axis along multiple column, you can use [`span`](../api/chart3d/axis3DModel#span) property of an axis. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/numeric-axis.md b/chart-sdk/javascript/3d-charts/numeric-axis.md index a67d4718f..3b702151c 100644 --- a/chart-sdk/javascript/3d-charts/numeric-axis.md +++ b/chart-sdk/javascript/3d-charts/numeric-axis.md @@ -1,16 +1,15 @@ --- layout: post -title: Numeric axis in JavaScript 3D Chart control | Syncfusion -description: Learn here all about numeric axis in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Numeric Axis in JavaScript 3D Chart | Syncfusion +description: Learn how to render the Syncfusion JavaScript 3D Chart with a numeric axis to represent numeric values along an axis. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Numeric axis in JavaScript 3D Chart control +# Numeric Axis in JavaScript 3D Chart The [numeric axis](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-axis) can be used to represent the numeric values of data in 3D chart. By default, the `valueType` of an axis is **Double**. @@ -27,7 +26,7 @@ The [numeric axis](https://www.syncfusion.com/javascript-ui-controls/js-charts/c ## Range -The range of an axis will be calculated automatically based on the provided data, and it can also be customized by using the [`minimum`](../api/chart3d/axis3D/#maximum), [`maximum`](../api/chart3d/axis3D/#maximum) and [`interval`](../api/chart3d/axis3D/#interval) properties of the axis. +The range of an axis will be calculated automatically based on the provided data, and it can also be customized by using the [`minimum`](../api/chart3d/axis3D#maximum), [`maximum`](../api/chart3d/axis3D#maximum) and [`interval`](../api/chart3d/axis3D#interval) properties of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ The range of an axis will be calculated automatically based on the provided data ## Range padding -Padding can be applied to the minimum and maximum extremes of an axis range by using the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) property. Numeric axis supports the following types of padding. +Padding can be applied to the minimum and maximum extremes of an axis range by using the [`rangePadding`](../api/chart3d/axis3D#rangepadding) property. Numeric axis supports the following types of padding. * None * Round @@ -52,7 +51,7 @@ Padding can be applied to the minimum and maximum extremes of an axis range by u **Numeric - None** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -67,7 +66,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to `None`, **Numeric - Round** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Round**, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the [`minimum`](../api/chart3d/axis3D/#maximum) is **3.5** and the [`interval`](../api/chart3d/axis3D/#interval) is **1**, then the minimum will be rounded to **3**. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to **Round**, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the [`minimum`](../api/chart3d/axis3D#maximum) is **3.5** and the [`interval`](../api/chart3d/axis3D#interval) is **1**, then the minimum will be rounded to **3**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -82,7 +81,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Round **Numeric - Additional** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Additional**, interval of an axis will be added to the minimum and maximum of the axis. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to **Additional**, interval of an axis will be added to the minimum and maximum of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -97,7 +96,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Addit **Numeric - Normal** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Normal**, padding is applied to the axis based on default range calculation. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to **Normal**, padding is applied to the axis based on default range calculation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -112,7 +111,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Norma **Numeric - Auto** -When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Auto**, horizontal numeric axis takes **None** as padding calculation, while the vertical numeric axis takes **Normal** as padding calculation. +When the [`rangePadding`](../api/chart3d/axis3D#rangepadding) is set to **Auto**, horizontal numeric axis takes **None** as padding calculation, while the vertical numeric axis takes **Normal** as padding calculation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -129,7 +128,7 @@ When the [`rangePadding`](../api/chart3d/axis3D/#rangepadding) is set to **Auto* **Numeric label format** -Numeric labels can be formatted by using the [`labelFormat`](../api/chart3d/axis3D/#labelformat) property. Also, it supports all globalize format. +Numeric labels can be formatted by using the [`labelFormat`](../api/chart3d/axis3D#labelformat) property. Also, it supports all globalize format. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -204,7 +203,7 @@ The following table describes the result of applying some commonly used label fo ## Grouping separator -To separate the y-axis labels to groups of thousands, set the [`useGroupingSeparator`](../api/chart3d/chart3DModel/#usegroupingseparator) property to **true** in the 3D chart. +To separate the y-axis labels to groups of thousands, set the [`useGroupingSeparator`](../api/chart3d/chart3DModel#usegroupingseparator) property to **true** in the 3D chart. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/print-export.md b/chart-sdk/javascript/3d-charts/print-export.md index 083941bfe..272c45c93 100644 --- a/chart-sdk/javascript/3d-charts/print-export.md +++ b/chart-sdk/javascript/3d-charts/print-export.md @@ -1,19 +1,18 @@ --- layout: post -title: Print and Export in JavaScript 3D Chart control | Syncfusion -description: Learn here all about print and export in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Print and Export in JavaScript 3D Chart | Syncfusion +description: Learn how to print and export the Syncfusion JavaScript 3D Chart from the browser using the built-in print method. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in JavaScript 3D Chart control +# Print and Export in JavaScript 3D Chart ## Print -The rendered 3D chart can be printed directly from the browser by calling the public method [`print`](../api/chart3d/printUtils/#print). The ID of the 3D chart's div element must be passed as the input parameter to that method. +The rendered 3D chart can be printed directly from the browser by calling the public method [`print`](../api/chart3d/printUtils#print). The ID of the 3D chart's div element must be passed as the input parameter to that method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ The rendered 3D chart can be printed directly from the browser by calling the pu ## Export -The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the [`export`](../api/chart3d/exportUtils/#export) method. The input parameters for this method are: `type` for format and `fileName` for result. +The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the [`export`](../api/chart3d/exportUtils#export) method. The input parameters for this method are: `type` for format and `fileName` for result. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/selection.md b/chart-sdk/javascript/3d-charts/selection.md index f5ddce597..982e2b3eb 100644 --- a/chart-sdk/javascript/3d-charts/selection.md +++ b/chart-sdk/javascript/3d-charts/selection.md @@ -1,16 +1,15 @@ --- layout: post -title: Selection in JavaScript 3D Chart control | Syncfusion -description: Learn here all about selection in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Selection in JavaScript 3D Chart | Syncfusion +description: Learn how to enable selection in the Syncfusion JavaScript 3D Chart for series and data points on mouse click. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection in JavaScript 3D Chart control +# Selection in JavaScript 3D Chart The 3D chart provides selection support for the series and its data points on mouse click. @@ -25,7 +24,7 @@ We have different types of selection mode for selecting a data. ## Point -To select a point, set the [`selectionMode`](../api/chart3d/chart3DModel/#selectionmode) property to **Point**. +To select a point, set the [`selectionMode`](../api/chart3d/chart3DModel#selectionmode) property to **Point**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -40,7 +39,7 @@ To select a point, set the [`selectionMode`](../api/chart3d/chart3DModel/#select ## Series -To select a series, set the [`selectionMode`](../api/chart3d/chart3DModel/#selectionmode) property to **Series**. +To select a series, set the [`selectionMode`](../api/chart3d/chart3DModel#selectionmode) property to **Series**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -55,7 +54,7 @@ To select a series, set the [`selectionMode`](../api/chart3d/chart3DModel/#selec ## Cluster -To select the points that corresponds to the same index in all the series, set the [`selectionMode`](../api/chart3d/chart3DModel/#selectionmode) property to **Cluster**. +To select the points that corresponds to the same index in all the series, set the [`selectionMode`](../api/chart3d/chart3DModel#selectionmode) property to **Cluster**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -70,7 +69,7 @@ To select the points that corresponds to the same index in all the series, set t ## Selection type -To select multiple points or series, enable the [`isMultiSelect`](../api/chart3d/chart3DModel/#ismultiselect) property. +To select multiple points or series, enable the [`isMultiSelect`](../api/chart3d/chart3DModel#ismultiselect) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -85,7 +84,7 @@ To select multiple points or series, enable the [`isMultiSelect`](../api/chart3d ## Selection during initial loading -In a 3D chart, selecting a point or series during initial loading can only be done programmatically. The [`selectedDataIndexes`](../api/chart3d/chart3DModel/#selecteddataindexes) property can be used for this. +In a 3D chart, selecting a point or series during initial loading can only be done programmatically. The [`selectedDataIndexes`](../api/chart3d/chart3DModel#selecteddataindexes) property can be used for this. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -100,7 +99,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do ## Selection through legend -To select a point or series through legend use the [`toggleVisibility`](../api/chart3d/legendSettingsModel/#togglevisibility) property. Also, use [`enableHighlight`](../api/chart3d/legendSettingsModel/#enablehighlight) property for highlighting the series through legend. +To select a point or series through legend use the [`toggleVisibility`](../api/chart3d/legendSettingsModel#togglevisibility) property. Also, use [`enableHighlight`](../api/chart3d/legendSettingsModel#enablehighlight) property for highlighting the series through legend. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/tool-tip.md b/chart-sdk/javascript/3d-charts/tool-tip.md index 8b4b395f1..3e9ac9ccd 100644 --- a/chart-sdk/javascript/3d-charts/tool-tip.md +++ b/chart-sdk/javascript/3d-charts/tool-tip.md @@ -1,15 +1,14 @@ --- layout: post -title: Tooltip in JavaScript 3D Chart control | Syncfusion -description: Learn here all about tooltip in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Tooltip in JavaScript 3D Chart | Syncfusion +description: Learn how to enable and customize tooltips in the Syncfusion JavaScript 3D Chart to display point details on hover. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in JavaScript 3D Chart control +# Tooltip in JavaScript 3D Chart @@ -17,7 +16,7 @@ The 3D Chart will display details about the points through tooltip, when the mou ## Default tooltip -By default, tooltip is not visible. The tooltip can be enabled by setting the [`enable`](../../api/chart3d/tooltipSettings/#enable) property in `tooltipSettings` to **true** and by injecting `Tooltip3D` module using `Chart3D.Inject(Tooltip3D)`. +By default, tooltip is not visible. The tooltip can be enabled by setting the [`enable`](../../api/chart3d/tooltipSettings#enable) property in `tooltipSettings` to **true** and by injecting `Tooltip3D` module using `Chart3D.Inject(Tooltip3D)`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -34,7 +33,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the [` ## Fixed tooltip -By default, tooltip track the mouse movement, but the tooltip can be set in fixed position by using the [`location`](../../api/chart3d/tooltipSettings/#location) property. +By default, tooltip track the mouse movement, but the tooltip can be set in fixed position by using the [`location`](../../api/chart3d/tooltipSettings#location) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -51,7 +50,7 @@ By default, tooltip track the mouse movement, but the tooltip can be set in fixe -By default, tooltip shows information of x and y value in points. In addition to that, more information can be shown in tooltip by using the [`format`](../../api/chart3d/tooltipSettings/#format) property. For example the format `${series.name} : ${point.y}` shows series name and point y value. +By default, tooltip shows information of x and y value in points. In addition to that, more information can be shown in tooltip by using the [`format`](../../api/chart3d/tooltipSettings#format) property. For example the format `${series.name} : ${point.y}` shows series name and point y value. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -66,7 +65,7 @@ By default, tooltip shows information of x and y value in points. In addition to ## Inline tooltip formatting -The tooltip content can be formatted directly within the [`format`](../../api/chart3d/tooltipSettings/#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events. +The tooltip content can be formatted directly within the [`format`](../../api/chart3d/tooltipSettings#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events. A format specifier can be applied to a tooltip token by adding a colon (`:`) followed by the required format. @@ -116,7 +115,7 @@ If the specified format does not match the resolved value type, the original val ## Tooltip template -Any HTML elements can be displayed in the tooltip by using the [`template`](../../api/chart3d/tooltipSettings/#template) property of the tooltip. The ${x} and ${y} can be used as place holders in the HTML element to display the x and y values of the corresponding data point. +Any HTML elements can be displayed in the tooltip by using the [`template`](../../api/chart3d/tooltipSettings#template) property of the tooltip. The ${x} and ${y} can be used as place holders in the HTML element to display the x and y values of the corresponding data point. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -131,7 +130,7 @@ Any HTML elements can be displayed in the tooltip by using the [`template`](../. ## Customize the appearance of tooltip -The [`fill`](../../api/chart3d/tooltipSettings/#fill) and [`border`](../../api/chart3d/tooltipSettings/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../../api/chart3d/tooltipSettings/#textstyle) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](../../api/chart3d/tooltipSettings#fill) and [`border`](../../api/chart3d/tooltipSettings#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../../api/chart3d/tooltipSettings#textstyle) property in the tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-charts/working-with-data.md b/chart-sdk/javascript/3d-charts/working-with-data.md index 5a2e5ef7e..e50fbd5da 100644 --- a/chart-sdk/javascript/3d-charts/working-with-data.md +++ b/chart-sdk/javascript/3d-charts/working-with-data.md @@ -1,20 +1,19 @@ --- layout: post -title: Working with data source in JavaScript 3D Chart control | Syncfusion -description: Learn here all about working with data source in Syncfusion JavaScript 3D Chart control of Syncfusion Essential JS 2 and more. +title: Working with Data in JavaScript 3D Chart | Syncfusion +description: Learn how to bind local, remote, and complex data sources to the Syncfusion JavaScript 3D Chart using the dataSource property. platform: chart-sdk control: 3D Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in JavaScript 3D Chart control +# Working with Data in JavaScript 3D Chart ## Local data -A simple JSON data can be bound to the 3D chart using [`dataSource`](../api/chart3d/series3DModel/#datasource) property in series. Now map the fields in JSON to [`xName`](../api/chart3d/series3DModel/#xname) and [`yName`](../api/chart3d/series3DModel/#yname) properties. +A simple JSON data can be bound to the 3D chart using [`dataSource`](../api/chart3d/series3DModel#datasource) property in series. Now map the fields in JSON to [`xName`](../api/chart3d/series3DModel#xname) and [`yName`](../api/chart3d/series3DModel#yname) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -29,7 +28,7 @@ A simple JSON data can be bound to the 3D chart using [`dataSource`](../api/char ## Remote data -The remote data can be bound to the 3D chart using the [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/dataManager/). The `DataManager` requires minimal information like web service URL, adaptor and cross domain to interact with service endpoint properly. Assign the instance of the `DataManager` to the [`dataSource`](../api/chart3d/series3DModel/#datasource) property in series and map the fields of data to [`xName`](../api/chart3d/series3DModel/#xname) and [`yName`](../api/chart3d/series3DModel/#yname) properties. You can also use the [`query`](../api/chart3d/series3DModel/#query) property of the series to filter the data. +The remote data can be bound to the 3D chart using the [`DataManager`](https://ej2.syncfusion.com/documentation/api/data/dataManager). The `DataManager` requires minimal information like web service URL, adaptor and cross domain to interact with service endpoint properly. Assign the instance of the `DataManager` to the [`dataSource`](../api/chart3d/series3DModel#datasource) property in series and map the fields of data to [`xName`](../api/chart3d/series3DModel#xname) and [`yName`](../api/chart3d/series3DModel#yname) properties. You can also use the [`query`](../api/chart3d/series3DModel#query) property of the series to filter the data. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -59,7 +58,7 @@ The remote data can be bound to the 3D chart using the [`DataManager`](https://e ## Empty points -The data points that uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and is not plotted in the chart. When the data is provided by using the points property, by using [`emptyPointSettings`](../api/chart3d/threeDimensionalEmptyPointSettingsModel/) property in series, the empty can be customized. The default [`mode`](../api/chart3d/threeDimensionalEmptyPointSettingsModel/#mode) of the empty point is **Gap**. +The data points that uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and is not plotted in the chart. When the data is provided by using the points property, by using [`emptyPointSettings`](../api/chart3d/threeDimensionalEmptyPointSettingsModel) property in series, the empty can be customized. The default [`mode`](../api/chart3d/threeDimensionalEmptyPointSettingsModel#mode) of the empty point is **Gap**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -74,7 +73,7 @@ The data points that uses the `null` or `undefined` as value are considered as e **Customizing empty point** -The specific color for empty point can be set by the [`fill`](../api/chart3d/threeDimensionalEmptyPointSettingsModel/#fill) property in [`emptyPointSettings`](../api/chart3d/threeDimensionalEmptyPointSettingsModel/). +The specific color for empty point can be set by the [`fill`](../api/chart3d/threeDimensionalEmptyPointSettingsModel#fill) property in [`emptyPointSettings`](../api/chart3d/threeDimensionalEmptyPointSettingsModel). {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/3d-circular-charts/data-label.md b/chart-sdk/javascript/3d-circular-charts/data-label.md index 35917ee0d..eb98323dd 100644 --- a/chart-sdk/javascript/3d-circular-charts/data-label.md +++ b/chart-sdk/javascript/3d-circular-charts/data-label.md @@ -1,15 +1,14 @@ --- layout: post -title: Data Label in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about data label in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Data Label in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about data label in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Label -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data Label in JavaScript 3D Circular Chart control +# Data Label in JavaScript 3D Circular Chart A data label refers to a label associated with specific data points. It can be added to a 3D Circular Chart series by enabling the `visible` option in the `dataLabel` property. By default, the labels will arrange themselves smartly to avoid overlapping. diff --git a/chart-sdk/javascript/3d-circular-charts/empty-points.md b/chart-sdk/javascript/3d-circular-charts/empty-points.md index 47079e473..7fdab072a 100644 --- a/chart-sdk/javascript/3d-circular-charts/empty-points.md +++ b/chart-sdk/javascript/3d-circular-charts/empty-points.md @@ -1,15 +1,14 @@ --- layout: post -title: Empty points in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about empty points in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Empty points in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about empty points in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Empty points -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Empty points in JavaScript 3D Circular Chart control +# Empty points in JavaScript 3D Circular Chart Data points containing `null` or `undefined` values are considered empty points. These empty data points are ignored and not plotted in the 3D Circular Chart. You can customize the handling of empty points using the `emptyPointSettings` property in the series. The default mode for empty points is `Gap`. Other supported modes include `Average`, `Drop`, and `Zero`. diff --git a/chart-sdk/javascript/3d-circular-charts/es5-getting-started.md b/chart-sdk/javascript/3d-circular-charts/es5-getting-started.md index 995cb7eec..f47acc265 100644 --- a/chart-sdk/javascript/3d-circular-charts/es5-getting-started.md +++ b/chart-sdk/javascript/3d-circular-charts/es5-getting-started.md @@ -1,10 +1,9 @@ --- layout: post -title: ES5 getting started with JavaScript 3D Circular Chart control | Syncfusion -description: Check out and learn about ES5 getting started with JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more details. +title: ES5 getting started with JavaScript 3D Circular Chart | Syncfusion +description: Check out and learn about ES5 getting started with JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: 3D Circular Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/3d-circular-charts/legend.md b/chart-sdk/javascript/3d-circular-charts/legend.md index 11a5f8993..3d9a73f54 100644 --- a/chart-sdk/javascript/3d-circular-charts/legend.md +++ b/chart-sdk/javascript/3d-circular-charts/legend.md @@ -1,15 +1,14 @@ --- layout: post -title: Legend in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about legend in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Legend in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about legend in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in JavaScript 3D Circular Chart control +# Legend in JavaScript 3D Circular Chart The legend provides information about the data points rendered in the 3D Circular Chart. It can be added by enabling the `visible` option in the `legendSettings` property. diff --git a/chart-sdk/javascript/3d-circular-charts/pie-donut-chart.md b/chart-sdk/javascript/3d-circular-charts/pie-donut-chart.md index 34c87299c..4592957ee 100644 --- a/chart-sdk/javascript/3d-circular-charts/pie-donut-chart.md +++ b/chart-sdk/javascript/3d-circular-charts/pie-donut-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Pie and Donut in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about Pie and Donut in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Pie and Donut in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about Pie and Donut in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Pie and Donut -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie and Donut in JavaScript 3D Circular Chart control +# Pie and Donut in JavaScript 3D Circular Chart ## Pie chart diff --git a/chart-sdk/javascript/3d-circular-charts/print-and-export.md b/chart-sdk/javascript/3d-circular-charts/print-and-export.md index ce7e422e0..c3a80570f 100644 --- a/chart-sdk/javascript/3d-circular-charts/print-and-export.md +++ b/chart-sdk/javascript/3d-circular-charts/print-and-export.md @@ -1,15 +1,14 @@ --- layout: post -title: Print and Export in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about print and export in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Print and Export in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about print and export in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Print and Export -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Print and Export in JavaScript 3D Circular Chart control +# Print and Export in JavaScript 3D Circular Chart ## Print diff --git a/chart-sdk/javascript/3d-circular-charts/title-and-subtitle.md b/chart-sdk/javascript/3d-circular-charts/title-and-subtitle.md index bad307857..f301db052 100644 --- a/chart-sdk/javascript/3d-circular-charts/title-and-subtitle.md +++ b/chart-sdk/javascript/3d-circular-charts/title-and-subtitle.md @@ -1,15 +1,14 @@ --- layout: post -title: Title and subtitle in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about title and subtitle in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Title and subtitle in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about title and subtitle in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title and subtitle -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and subtitle in JavaScript 3D Circular Chart control +# Title and subtitle in JavaScript 3D Circular Chart ## Title diff --git a/chart-sdk/javascript/3d-circular-charts/tooltip.md b/chart-sdk/javascript/3d-circular-charts/tooltip.md index 0fff12c8b..b2d75466f 100644 --- a/chart-sdk/javascript/3d-circular-charts/tooltip.md +++ b/chart-sdk/javascript/3d-circular-charts/tooltip.md @@ -1,15 +1,14 @@ --- layout: post -title: Tooltip in JavaScript 3D Circular Chart control | Syncfusion -description: Learn here all about tooltip in Syncfusion JavaScript 3D Circular Chart control of Syncfusion Essential JS 2 and more. +title: Tooltip in JavaScript 3D Circular Chart | Syncfusion +description: Learn here all about tooltip in Syncfusion JavaScript 3D Circular Chart of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in JavaScript 3D Circular Chart control +# Tooltip in JavaScript 3D Circular Chart The 3D Circular Chart will display details about the points through a tooltip, when the mouse is moved over a specific point. By default, the tooltip is not visible. It can be enabled by using the `enable` property in `tooltip` to **true**. diff --git a/chart-sdk/javascript/accumulation-charts/accessibility.md b/chart-sdk/javascript/accumulation-charts/accessibility.md index dee649910..c24cbb3e0 100644 --- a/chart-sdk/javascript/accumulation-charts/accessibility.md +++ b/chart-sdk/javascript/accumulation-charts/accessibility.md @@ -1,15 +1,14 @@ --- layout: post -title: Accessibility in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Accessibility in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript Accumulation Chart | Syncfusion +description: Learn how to make the Syncfusion JavaScript Accumulation Chart accessible using ADA, Section 508, WCAG 2.2, and ARIA roles. platform: chart-sdk -control: Accessibility -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript Accumulation chart control +# Accessibility in JavaScript Accumulation Chart The Accumulation chart control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/javascript/accumulation-charts/advanced-accessibility-configuration.md b/chart-sdk/javascript/accumulation-charts/advanced-accessibility-configuration.md index d06392909..e7b46779a 100644 --- a/chart-sdk/javascript/accumulation-charts/advanced-accessibility-configuration.md +++ b/chart-sdk/javascript/accumulation-charts/advanced-accessibility-configuration.md @@ -1,27 +1,26 @@ --- layout: post -title: Accessibility customization in Accumulation chart control | Syncfusion -description: Learn here all about Accessibility customization in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Advanced Accessibility in JavaScript Accumulation Chart | Syncfusion +description: Learn how to customize accessibility features in the Syncfusion JavaScript Accumulation Chart for users with disabilities. platform: chart-sdk -control: Accessibility customization -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility customization +# Advanced Accessibility in ##Platform_Name## Accumulation Chart The Syncfusion® JavaScript Accumulation Chart control is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the JavaScript Accumulation Chart control's accessibility customization are briefly explained in this section. The accumulation chart control has a number of characteristics that enable accessibility features to be customized, including: -* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers. -* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately. -* [`focusable`](../api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation. -* [`focusBorderColor`](../api/accumulation-chart/#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused. -* [`focusBorderMargin`](../api/accumulation-chart/#focusbordermargin) - Defines the margin around the focus border. -* [`focusBorderWidth`](../api/accumulation-chart/#focusborderwidth) - Specifies the width of the focus border. -* [`tabIndex`](../api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers. +* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately. +* [`focusable`](../api/accumulation-chart/accessibilityModel#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation. +* [`focusBorderColor`](../api/accumulation-chart#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused. +* [`focusBorderMargin`](../api/accumulation-chart#focusbordermargin) - Defines the margin around the focus border. +* [`focusBorderWidth`](../api/accumulation-chart#focusborderwidth) - Specifies the width of the focus border. +* [`tabIndex`](../api/accumulation-chart/accessibilityModel#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation. {% if page.publishingplatform == "typescript" %} @@ -52,12 +51,12 @@ The accumulation chart control has a number of characteristics that enable acces ## Series -The [`series`](../api/accumulation-chart/#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as: +The [`series`](../api/accumulation-chart#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as: -* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. -* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. -* [`focusable`](../api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. -* [`tabIndex`](../api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. +* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. +* [`focusable`](../api/accumulation-chart/accessibilityModel#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. +* [`tabIndex`](../api/accumulation-chart/accessibilityModel#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. {% if page.publishingplatform == "typescript" %} @@ -88,12 +87,12 @@ The [`series`](../api/accumulation-chart/#series) supports the customization of ## Legend -The [`legendSettings`](../api/accumulation-chart/#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](../api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](../api/accumulation-chart/#legendsettings) can be used to alter the accessibility of the accumulation chart's legend: +The [`legendSettings`](../api/accumulation-chart#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](../api/accumulation-chart/legendSettingsModel#accessibility) properties in [`legendSettings`](../api/accumulation-chart#legendsettings) can be used to alter the accessibility of the accumulation chart's legend: -* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers.. -* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. -* [`focusable`](../api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation. -* [`tabIndex`](../api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/accumulation-chart/accessibilityModel#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers.. +* [`accessibilityRole`](../api/accumulation-chart/accessibilityModel#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. +* [`focusable`](../api/accumulation-chart/accessibilityModel#focusable) - Specifies whether legend items are focusable via keyboard navigation. +* [`tabIndex`](../api/accumulation-chart/accessibilityModel#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. {% if page.publishingplatform == "typescript" %} diff --git a/chart-sdk/javascript/accumulation-charts/annotation.md b/chart-sdk/javascript/accumulation-charts/annotation.md index 443fa3b28..adcf1cafd 100644 --- a/chart-sdk/javascript/accumulation-charts/annotation.md +++ b/chart-sdk/javascript/accumulation-charts/annotation.md @@ -1,15 +1,14 @@ --- layout: post -title: Annotation in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Annotation in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Annotation in JavaScript Accumulation Chart | Syncfusion +description: Learn how to add annotations to the Syncfusion JavaScript Accumulation Chart to mark areas of interest with text, shapes, or images. platform: chart-sdk -control: Annotation -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotation in JavaScript Accumulation chart control +# Annotation in JavaScript Accumulation Chart The annotations are used to mark the specific area of interest in the chart area with texts, shapes or images. diff --git a/chart-sdk/javascript/accumulation-charts/center-label.md b/chart-sdk/javascript/accumulation-charts/center-label.md index af57f19cd..da75fa4c7 100644 --- a/chart-sdk/javascript/accumulation-charts/center-label.md +++ b/chart-sdk/javascript/accumulation-charts/center-label.md @@ -1,17 +1,16 @@ --- layout: post -title: Center label in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Center label in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Center Label in JavaScript Accumulation Chart | Syncfusion +description: Learn how to place a label at the center of a pie or doughnut chart in the Syncfusion JavaScript Accumulation Chart. platform: chart-sdk control: Center label -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Center label in JavaScript Accumulation chart control +# Center Label in JavaScript Accumulation Chart -Using [`centerLabel`](../api/accumulation-chart/centerLabel) it is now possible to place a label at the center of a pie or doughnut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the [`text`](../api/accumulation-chart/centerLabel/#text) property in the [`centerLabel`](../api/accumulation-chart/centerLabel). +Using [`centerLabel`](../api/accumulation-chart/centerLabel) it is now possible to place a label at the center of a pie or doughnut chart. To configure the default text rendered on the center label for the pie and doughnut charts, use the [`text`](../api/accumulation-chart/centerLabel#text) property in the [`centerLabel`](../api/accumulation-chart/centerLabel). {% tabs %} @@ -27,7 +26,7 @@ Using [`centerLabel`](../api/accumulation-chart/centerLabel) it is now possible ## Hover text -The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the [`hoverTextFormat`](../api/accumulation-chart/centerLabel/#hovertextformat) property. +The default text in the center label can be changed when the mouse pointer hovers over the pie and doughnut charts slice using the [`hoverTextFormat`](../api/accumulation-chart/centerLabel#hovertextformat) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ The default text in the center label can be changed when the mouse pointer hover ## Customization -Customize the center label text using the [`textStyle`](../api/accumulation-chart/centerLabel/#textstyle) property. +Customize the center label text using the [`textStyle`](../api/accumulation-chart/centerLabel#textstyle) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/accumulation-charts/chart-print.md b/chart-sdk/javascript/accumulation-charts/chart-print.md index f51c3f86f..ad3b1136e 100644 --- a/chart-sdk/javascript/accumulation-charts/chart-print.md +++ b/chart-sdk/javascript/accumulation-charts/chart-print.md @@ -1,15 +1,14 @@ --- layout: post -title: Chart print in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Chart print in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Print and Export in JavaScript Accumulation Chart | Syncfusion +description: Learn how to print and export the Syncfusion JavaScript Accumulation Chart to PNG, JPEG, SVG, or PDF formats. platform: chart-sdk control: Chart print -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart print in JavaScript Accumulation chart control +# Chart Print in JavaScript Accumulation Chart ## Print diff --git a/chart-sdk/javascript/accumulation-charts/data-label.md b/chart-sdk/javascript/accumulation-charts/data-label.md index 2f4851503..afd270355 100644 --- a/chart-sdk/javascript/accumulation-charts/data-label.md +++ b/chart-sdk/javascript/accumulation-charts/data-label.md @@ -1,17 +1,16 @@ --- layout: post -title: Data label in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Data label in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Data label in JavaScript Accumulation Chart | Syncfusion +description: Learn how to add and customize data labels in the Syncfusion JavaScript Accumulation Chart series. platform: chart-sdk control: Data label -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in JavaScript Accumulation chart control +# Data label in JavaScript Accumulation Chart -Data label can be added to a chart series by enabling the [`visible`](../api/accumulation-chart/accumulationDataLabelSettingsModel/) +Data label can be added to a chart series by enabling the [`visible`](../api/accumulation-chart/accumulationDataLabelSettingsModel) option in the dataLabel property. {% tabs %} @@ -44,7 +43,7 @@ Accumulation chart provides support for placing the data label either `inside` o ## Smart labels -Data labels will be arranged smartly without overlapping with each other. You can enable or disable this feature using the [`enableSmartLabels`](../api/accumulation-chart/accumulationChartModel/#enablesmartlabels) property. +Data labels will be arranged smartly without overlapping with each other. You can enable or disable this feature using the [`enableSmartLabels`](../api/accumulation-chart/accumulationChartModel#enablesmartlabels) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -59,7 +58,7 @@ Data labels will be arranged smartly without overlapping with each other. You ca ## Data Label Template -Label content can be formatted by using the template option. Inside the template, you can add the placeholder text `${point.x}` and `${point.y}` to display corresponding data points x & y value. Using [`template`](../api/accumulation-chart/accumulationDataLabelSettingsModel/)property, you can set data label template in chart. +Label content can be formatted by using the template option. Inside the template, you can add the placeholder text `${point.x}` and `${point.y}` to display corresponding data points x & y value. Using [`template`](../api/accumulation-chart/accumulationDataLabelSettingsModel)property, you can set data label template in chart. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -104,7 +103,7 @@ Text from the data source can be mapped to data label using `name` property. ## Format -Data label for the accumulation chart can be formatted using [`format`](../api/accumulation-chart/accumulationChartModel/#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. +Data label for the accumulation chart can be formatted using [`format`](../api/accumulation-chart/accumulationChartModel#format) property. You can use the global formatting options, such as 'n', 'p', and 'c'. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -191,7 +190,7 @@ Individual text can be customized using the `textRender` event. ## Text wrap -When the data label text exceeds the container, the text can be wrapped by using [`textWrap`](../api/accumulation-chart/accumulationDataLabelSettings/#textwrap) property. End user can also wrap the data label text based on [`maxWidth`](../api/accumulation-chart/accumulationDataLabelSettings/#maxwidth) property. +When the data label text exceeds the container, the text can be wrapped by using [`textWrap`](../api/accumulation-chart/accumulationDataLabelSettings#textwrap) property. End user can also wrap the data label text based on [`maxWidth`](../api/accumulation-chart/accumulationDataLabelSettings#maxwidth) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/accumulation-charts/dynamic-data-update.md b/chart-sdk/javascript/accumulation-charts/dynamic-data-update.md index 14aa5fc96..71b9a9f72 100644 --- a/chart-sdk/javascript/accumulation-charts/dynamic-data-update.md +++ b/chart-sdk/javascript/accumulation-charts/dynamic-data-update.md @@ -1,19 +1,18 @@ --- layout: post -title: Dynamic data update in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about dynamic data update in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Dynamic Data Update in JavaScript Accumulation Chart | Syncfusion +description: Learn how to dynamically add, update, or remove data points in the Syncfusion JavaScript Accumulation Chart at runtime. platform: chart-sdk control: Dynamic Data Update -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic data update in Angular Accumulation Chart component +# Dynamic Data Update in Angular Accumulation Chart component ## Adding a new data point -The [`addPoint`](../api/accumulation-chart/accumulationSeries/#addpoint) method is used to dynamically add a new data point to the accumulation chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire accumulation chart. This method takes two parameters: +The [`addPoint`](../api/accumulation-chart/accumulationSeries#addpoint) method is used to dynamically add a new data point to the accumulation chart series. This method is particularly useful when you want to update the chart with a new data point without having to refresh the entire accumulation chart. This method takes two parameters: * The first parameter is the new data point to add to your existing data source. * The optional second parameter specifies the animation duration for adding the new data point. @@ -31,7 +30,7 @@ The [`addPoint`](../api/accumulation-chart/accumulationSeries/#addpoint) method ## Removing an existing data point -The [`removePoint`](../api/accumulation-chart/accumulationSeries/#removepoint) method is used to dynamically remove a data point from the accumulation chart series. This method is particularly useful when you want to update the accumulation chart by removing an existing data point without having to refresh the entire accumulation chart. This method takes two parameters: +The [`removePoint`](../api/accumulation-chart/accumulationSeries#removepoint) method is used to dynamically remove a data point from the accumulation chart series. This method is particularly useful when you want to update the accumulation chart by removing an existing data point without having to refresh the entire accumulation chart. This method takes two parameters: * The first parameter is the index of the data point that needs to be removed from the existing data source. * The optional second parameter specifies the animation duration for removing the data point. @@ -49,7 +48,7 @@ The [`removePoint`](../api/accumulation-chart/accumulationSeries/#removepoint) m ## Replacing entire data points -To replace the existing data source in the accumulation chart with a new data source, you can simply use the [`setData`](../api/accumulation-chart/accumulationSeries/#setdata) method. This method allows you to replace the existing data points in the accumulation chart series with a new set of data points, enabling you to easily update the accumulation chart with new information. This method takes two parameters: +To replace the existing data source in the accumulation chart with a new data source, you can simply use the [`setData`](../api/accumulation-chart/accumulationSeries#setdata) method. This method allows you to replace the existing data points in the accumulation chart series with a new set of data points, enabling you to easily update the accumulation chart with new information. This method takes two parameters: * The first parameter is the new set of data points to be updated. * The optional second parameter specifies the animation duration for updating the new data source. diff --git a/chart-sdk/javascript/accumulation-charts/ej1-api-migration.md b/chart-sdk/javascript/accumulation-charts/ej1-api-migration.md index 29244c17f..97fe136c9 100644 --- a/chart-sdk/javascript/accumulation-charts/ej1-api-migration.md +++ b/chart-sdk/javascript/accumulation-charts/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 api migration in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Migration from Essential JS 1 in JavaScript Accumulation Chart | Syncfusion +description: Learn how to migrate Accumulation Chart code and APIs from Syncfusion Essential JS 1 to Syncfusion Essential JS 2. platform: chart-sdk -control: Ej1 api migration -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in JavaScript Accumulation chart control +# Migration from Essential JS 1 in JavaScript Accumulation Chart This article describes the API migration process of Chart component from Essential JS 1 to Essential JS 2. diff --git a/chart-sdk/javascript/accumulation-charts/empty-points.md b/chart-sdk/javascript/accumulation-charts/empty-points.md index 8e011c0a3..09d56303d 100644 --- a/chart-sdk/javascript/accumulation-charts/empty-points.md +++ b/chart-sdk/javascript/accumulation-charts/empty-points.md @@ -1,15 +1,14 @@ --- layout: post -title: Empty points in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Empty points in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Empty Points in JavaScript Accumulation Chart | Syncfusion +description: Learn how to handle and customize empty data points in the Syncfusion JavaScript Accumulation Chart. platform: chart-sdk -control: Empty points -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Empty points in JavaScript Accumulation chart control +# Empty points in JavaScript Accumulation Chart The data points those uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the `emptyPointSettings` property in series. The default mode of the empty point is `Gap`. Other supported modes are `Average` and `Zero`. diff --git a/chart-sdk/javascript/accumulation-charts/es5-getting-started.md b/chart-sdk/javascript/accumulation-charts/es5-getting-started.md index 9650dfc1b..8e81bdc17 100644 --- a/chart-sdk/javascript/accumulation-charts/es5-getting-started.md +++ b/chart-sdk/javascript/accumulation-charts/es5-getting-started.md @@ -4,7 +4,6 @@ title: ES5 getting started with JavaScript Accumulation Chart control | Syncfusi description: Check out and learn about ES5 getting started with JavaScript Accumulation Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Accumulation Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk Build your first Syncfusion JavaScript (ES5) application with a simple Accumulation Chart control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Accumulation Chart from the CDN, initializes it with sample data, and renders an interactive chart. -> The `34.1.29` version segment in the CDN URLs is shown for reference. Replace it with the latest published version from the [Syncfusion EJ2 CDN](https://cdn.syncfusion.com/ej2/) when you start a new project. +> The `34.1.29` version segment in the CDN URLs is shown for reference. Replace it with the latest published version from the [Syncfusion EJ2 CDN](https://cdn.syncfusion.com/ej2) when you start a new project. ## Prerequisites diff --git a/chart-sdk/javascript/accumulation-charts/funnel.md b/chart-sdk/javascript/accumulation-charts/funnel.md index e9be7c000..fb00ea19c 100644 --- a/chart-sdk/javascript/accumulation-charts/funnel.md +++ b/chart-sdk/javascript/accumulation-charts/funnel.md @@ -1,17 +1,16 @@ --- layout: post -title: Funnel in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Funnel in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Funnel in JavaScript Accumulation Chart | Syncfusion +description: Learn how to render a funnel series in the Syncfusion JavaScript Accumulation Chart using the FunnelSeries module. platform: chart-sdk -control: Funnel -publishingplatform: chart-sdk +control: FAccumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Funnel in JavaScript Accumulation chart control +# Funnel in JavaScript Accumulation Chart -To render a funnel series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel/) as `Funnel` and inject, the `FunnelSeries` module using the `AccumulationChart.Inject(FunnelSeries)` method. +To render a funnel series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel) as `Funnel` and inject, the `FunnelSeries` module using the `AccumulationChart.Inject(FunnelSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -116,7 +115,7 @@ Individual points can be customized using the `pointRender` event. ## Modes -The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`funnelMode`](../api/accumulation-chart/funnelModes/) is `Standard`. +The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`funnelMode`](../api/accumulation-chart/funnelModes) is `Standard`. ### Standard diff --git a/chart-sdk/javascript/accumulation-charts/getting-started.md b/chart-sdk/javascript/accumulation-charts/getting-started.md index 6d8e4915a..9be9c9d4e 100644 --- a/chart-sdk/javascript/accumulation-charts/getting-started.md +++ b/chart-sdk/javascript/accumulation-charts/getting-started.md @@ -1,16 +1,15 @@ --- layout: post -title: Getting started with JavaScript Accumulation chart control | Syncfusion -description: Checkout and learn about Getting started with JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more details. +title: Getting started with JavaScript Accumulation Chart (ES5) | Syncfusion +description: Learn how to get started with the Syncfusion JavaScript Accumulation Chart in an ES5 application using the CDN approach. platform: chart-sdk -control: Getting started -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Getting started in JavaScript Accumulation chart control +# Getting Started in JavaScript Accumulation Chart In EJ2, accumulation chart is implemented as a separate control to avoid the axis related logics. The dependencies for accumulation chart is same as chart control. @@ -116,7 +115,7 @@ chart.appendTo('#element'); **Pie Series** -By default, the pie series will be rendered when assigning the JSON data to the series using the [`dataSource`](../api/accumulation-chart/accumulationSeries/#datasource) property. Map the field names in the JSON data to the [`xName`](../api/accumulation-chart/accumulationSeries/#xname) and [`yName`](../api/accumulation-chart/accumulationSeries/#yname) properties of the series. +By default, the pie series will be rendered when assigning the JSON data to the series using the [`dataSource`](../api/accumulation-chart/accumulationSeries#datasource) property. Map the field names in the JSON data to the [`xName`](../api/accumulation-chart/accumulationSeries#xname) and [`yName`](../api/accumulation-chart/accumulationSeries#yname) properties of the series. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/accumulation-charts/gradient.md b/chart-sdk/javascript/accumulation-charts/gradient.md index ae299c9ac..536e3ba8c 100644 --- a/chart-sdk/javascript/accumulation-charts/gradient.md +++ b/chart-sdk/javascript/accumulation-charts/gradient.md @@ -1,15 +1,14 @@ --- layout: post -title: Gradient in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Gradient in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Gradient in JavaScript Accumulation Chart | Syncfusion +description: Learn how to apply linear and radial gradients to the Syncfusion JavaScript Accumulation Chart for richer styling. platform: chart-sdk -control: Gradient -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gradient in JavaScript Accumulation chart control +# Gradient in JavaScript Accumulation Chart Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types: diff --git a/chart-sdk/javascript/accumulation-charts/grouping.md b/chart-sdk/javascript/accumulation-charts/grouping.md index 483ed73c9..9d21f9ed8 100644 --- a/chart-sdk/javascript/accumulation-charts/grouping.md +++ b/chart-sdk/javascript/accumulation-charts/grouping.md @@ -1,18 +1,17 @@ --- layout: post -title: Grouping in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Grouping in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Grouping in JavaScript Accumulation Chart | Syncfusion +description: Learn how to group data points in the Syncfusion JavaScript Accumulation Chart using the groupTo property. platform: chart-sdk -control: Grouping -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grouping in JavaScript Accumulation chart control +# Grouping in JavaScript Accumulation Chart You can club/group few points of the series based on -[`groupTo`](../api/accumulation-chart/accumulationSeries/) property. For example, if the club +[`groupTo`](../api/accumulation-chart/accumulationSeries) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. The property also takes value in percentage (percentage of total data points value). diff --git a/chart-sdk/javascript/accumulation-charts/legend.md b/chart-sdk/javascript/accumulation-charts/legend.md index 7ecf59a80..adfbe7a80 100644 --- a/chart-sdk/javascript/accumulation-charts/legend.md +++ b/chart-sdk/javascript/accumulation-charts/legend.md @@ -1,15 +1,14 @@ --- layout: post -title: Legend in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Legend in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Legend in JavaScript Accumulation Chart | Syncfusion +description: Learn how to add and customize the legend in the Syncfusion JavaScript Accumulation Chart, including position and visibility. platform: chart-sdk -control: Legend -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in JavaScript Accumulation chart control +# Legend in JavaScript Accumulation Chart As like a chart, the legend is also available for accumulation charts, which gives information about the points. By default, the legend will be placed on the right, if the width of the chart is high or will be placed on the bottom, if the height of the chart is high. Other customization features regarding the legend element are same as the [`chart legend`](http://ej2.syncfusion.com/documentation/chart/legend). Here, the legend for a point can be collapsed by giving the empty string to the x value of the point. @@ -43,7 +42,7 @@ By using the position property, you can position the legend at the `left`, ` ## Legend reverse -You can reverse the order of the legend items by using the [`reverse`](https://ej2.syncfusion.com/documentation/api/accumulation-chart/legendSettingsModel/#reverse) property. By default, legend for the first series in the collection will be placed first. +You can reverse the order of the legend items by using the [`reverse`](https://ej2.syncfusion.com/documentation/api/accumulation-chart/legendSettingsModel#reverse) property. By default, legend for the first series in the collection will be placed first. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -163,7 +162,7 @@ By default, the page number will be enabled while legend paging. Now, you can di ## Legend item padding -The [`itemPadding`](../api/accumulation-chart/legendSettings/#itempadding) property can be used to adjust the space between the legend items. +The [`itemPadding`](../api/accumulation-chart/legendSettings#itempadding) property can be used to adjust the space between the legend items. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -178,7 +177,7 @@ The [`itemPadding`](../api/accumulation-chart/legendSettings/#itempadding) prope ## Legend layout -The [`layout`](../api/accumulation-chart/legendSettingsModel/#layout) property in [`legendSettings`](../api/accumulation-chart/#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](../api/accumulation-chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](../api/accumulation-chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](../api/accumulation-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`](../api/accumulation-chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](../api/accumulation-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`](../api/accumulation-chart/legendSettingsModel#layout) property in [`legendSettings`](../api/accumulation-chart#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](../api/accumulation-chart/legendSettingsModel#layout) is set to **Auto**. The [`maximumColumns`](../api/accumulation-chart/legendSettingsModel#maximumcolumns) property in [`legendSettings`](../api/accumulation-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`](../api/accumulation-chart/legendSettingsModel#fixedwidth) property in [`legendSettings`](../api/accumulation-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. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/accumulation-charts/pie-dough-nut.md b/chart-sdk/javascript/accumulation-charts/pie-dough-nut.md index e5c3171c9..00b0f13d7 100644 --- a/chart-sdk/javascript/accumulation-charts/pie-dough-nut.md +++ b/chart-sdk/javascript/accumulation-charts/pie-dough-nut.md @@ -1,19 +1,18 @@ --- layout: post -title: Pie dough nut in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Pie dough nut in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Pie and Doughnut in JavaScript Accumulation Chart | Syncfusion +description: Learn how to render pie and doughnut series in the Syncfusion JavaScript Accumulation Chart with various customizations. platform: chart-sdk -control: Pie dough nut -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie dough nut in JavaScript Accumulation chart control +# Pie and Doughnut in JavaScript Accumulation Chart ## Pie chart -To render a pie series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel/#type) as `Pie` and inject the `PieSeries` module using `AccumulationChart.Inject(PieSeries)` method. If the `PieSeries` module is not injected, this module will be loaded by default. +To render a pie series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel#type) as `Pie` and inject the `PieSeries` module using `AccumulationChart.Inject(PieSeries)` method. If the `PieSeries` module is not injected, this module will be loaded by default. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ To render a pie series, use the series [`type`](../api/accumulation-chart/accumu ## Radius customization -By default, radius of the pie series will be 80% of the size (minimum of chart width and height). You can customize this using [`radius`](../api/accumulation-chart/accumulationSeriesModel/#radius) property of the series. +By default, radius of the pie series will be 80% of the size (minimum of chart width and height). You can customize this using [`radius`](../api/accumulation-chart/accumulationSeriesModel#radius) property of the series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ By default, radius of the pie series will be 80% of the size (minimum of chart w ## Pie center -The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using [`center`](../api/accumulation-chart/accumulationChartModel/#center) property of the series. +The center position of the pie can be changed by Center X and Center Y. By default, center value of the pie series x and y is 50%. You can customize this using [`center`](../api/accumulation-chart/accumulationChartModel#center) property of the series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ The center position of the pie can be changed by Center X and Center Y. By defau ## Various radius pie chart -You can use radius mapping to render the slice with different [`radius`](../api/accumulation-chart/accumulationSeries/#radius) pie and also use [`border`](../api/accumulation-chart/accumulationSeries/#border) , fill properties to customize the point. dataLabel is used to represent individual data and its value. +You can use radius mapping to render the slice with different [`radius`](../api/accumulation-chart/accumulationSeries#radius) pie and also use [`border`](../api/accumulation-chart/accumulationSeries#border) , fill properties to customize the point. dataLabel is used to represent individual data and its value. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -73,7 +72,7 @@ You can use radius mapping to render the slice with different [`radius`](../api/ ## Doughnut chart -To achieve a doughnut in pie series, customize the [`innerRadius`](../api/accumulation-chart/accumulationSeries/#innerradius) property of the series. By setting value greater than 0%, a doughnut will appear. The `innerRadius` property takes value from 0% to 100% of the pie radius. +To achieve a doughnut in pie series, customize the [`innerRadius`](../api/accumulation-chart/accumulationSeries#innerradius) property of the series. By setting value greater than 0%, a doughnut will appear. The `innerRadius` property takes value from 0% to 100% of the pie radius. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -88,7 +87,7 @@ To achieve a doughnut in pie series, customize the [`innerRadius`](../api/accumu ## Multiple Donut -You can create multiple donuts within a single chart by adding multiple series with different [`innerRadius`](../api/accumulation-chart/accumulationSeries/#innerradius) and [`radius`](../api/accumulation-chart/accumulationSeries/#radius) values. This allows you to compare multiple data sets with the same categories. Each series can have different data, colors, and customizations. You can also use the [`mappingKey`](../api/accumulation-chart/accumulationLegendSettings/#mappingkey) property in `legendSettings` to map the legend items based on the specified field from the data source. When set, points with matching `mappingKey` values are grouped into a single legend item. +You can create multiple donuts within a single chart by adding multiple series with different [`innerRadius`](../api/accumulation-chart/accumulationSeries#innerradius) and [`radius`](../api/accumulation-chart/accumulationSeries#radius) values. This allows you to compare multiple data sets with the same categories. Each series can have different data, colors, and customizations. You can also use the [`mappingKey`](../api/accumulation-chart/accumulationLegendSettings#mappingkey) property in `legendSettings` to map the legend items based on the specified field from the data source. When set, points with matching `mappingKey` values are grouped into a single legend item. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -103,7 +102,7 @@ You can create multiple donuts within a single chart by adding multiple series w ## Start and end angles -You can customize the start and end angle of the pie series using the [`startAngle`](../api/accumulation-chart/accumulationSeries/#startangle) and [`endAngle`](../api/accumulation-chart/accumulationSeries/#endangle) properties. The default value of `startAngle` is 0 degree, and `endAngle` is 360 degrees. By customizing this, you can achieve a semi pie series. +You can customize the start and end angle of the pie series using the [`startAngle`](../api/accumulation-chart/accumulationSeries#startangle) and [`endAngle`](../api/accumulation-chart/accumulationSeries#endangle) properties. The default value of `startAngle` is 0 degree, and `endAngle` is 360 degrees. By customizing this, you can achieve a semi pie series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -133,7 +132,7 @@ The fill color and the text in the data source can be mapped to the chart using ## Border radius -You can create rounded corners for each slice by using the [borderRadius](../api/accumulation-chart/accumulationSeriesModel/#borderradius) option, which gives the chart a modern and polished appearance. +You can create rounded corners for each slice by using the [borderRadius](../api/accumulation-chart/accumulationSeriesModel#borderradius) option, which gives the chart a modern and polished appearance. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -148,7 +147,7 @@ You can create rounded corners for each slice by using the [borderRadius](../api ## Palette -The default palette for the pie series can be customized by using the [`palettes`](../api/accumulation-chart/accumulationSeriesModel/#palettes) property in the series. +The default palette for the pie series can be customized by using the [`palettes`](../api/accumulation-chart/accumulationSeriesModel#palettes) property in the series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -178,7 +177,7 @@ Individual points can be customized using the `pointRender` event. ## Patterns -You can apply different patterns to the pie slices using the [`applyPattern`](../api/accumulation-chart/accumulationSeriesModel/#applypattern) property in the series and the [`pointRender`](../api/accumulation-chart/iAccPointRenderEventArgs/) event. +You can apply different patterns to the pie slices using the [`applyPattern`](../api/accumulation-chart/accumulationSeriesModel#applypattern) property in the series and the [`pointRender`](../api/accumulation-chart/iAccPointRenderEventArgs) event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -208,9 +207,9 @@ By default, the border will appear in the pie/doughnut chart while mouse hover o ## Multi-level pie chart -You can achieve a multi-level drill down in pie and doughnut charts using [pointClick](../../api/accumulation-chart/accumulationChartModel/#pointclick) event. If user clicks any point in the chart, that corresponding data will be shown in the next level and so on based on point clicked. +You can achieve a multi-level drill down in pie and doughnut charts using [pointClick](../../api/accumulation-chart/accumulationChartModel#pointclick) event. If user clicks any point in the chart, that corresponding data will be shown in the next level and so on based on point clicked. -You can also achieve drill-up (back to the initial state) by using [chartMouseClick](../../api/accumulation-chart/accumulationChartModel/#chartmouseclick) event. In below sample, you can drill-up by clicking back button in the center of the chart. +You can also achieve drill-up (back to the initial state) by using [chartMouseClick](../../api/accumulation-chart/accumulationChartModel#chartmouseclick) event. In below sample, you can drill-up by clicking back button in the center of the chart. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -225,5 +224,5 @@ You can also achieve drill-up (back to the initial state) by using [chartMouseCl ## See also -* [Data label](./data-label/) -* [Grouping](./grouping/) \ No newline at end of file +* [Data label](./data-label) +* [Grouping](./grouping) \ No newline at end of file diff --git a/chart-sdk/javascript/accumulation-charts/pie.md b/chart-sdk/javascript/accumulation-charts/pie.md index 2754c2758..072a883aa 100644 --- a/chart-sdk/javascript/accumulation-charts/pie.md +++ b/chart-sdk/javascript/accumulation-charts/pie.md @@ -1,19 +1,18 @@ --- layout: post -title: Pie in JavaScript Accumulation chart control | Syncfusion +title: Pie in JavaScript Accumulation Chart | Syncfusion description: Learn here all about Pie in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Pie -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pie in JavaScript Accumulation chart control +# Pie in JavaScript Accumulation Chart ## Pie Chart -To render a pie series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel/#type) as `Pie` and inject the `PieSeries` module using `AccumulationChart.Inject(PieSeries)` method. If the `PieSeries` module is not injected, this module will be loaded by default. +To render a pie series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel#type) as `Pie` and inject the `PieSeries` module using `AccumulationChart.Inject(PieSeries)` method. If the `PieSeries` module is not injected, this module will be loaded by default. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ To render a pie series, use the series [`type`](../api/accumulation-chart/accumu ## Radius Customization -By default, radius of the pie series will be 80% of the size (minimum of chart width and height). You can customize this using [`radius`](../api/accumulation-chart/accumulationSeries/#radius) property of the series. +By default, radius of the pie series will be 80% of the size (minimum of chart width and height). You can customize this using [`radius`](../api/accumulation-chart/accumulationSeries#radius) property of the series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ By default, radius of the pie series will be 80% of the size (minimum of chart w ## Doughnut Chart -To achieve a [doughnut](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/donut-chart) in pie series, customize the [`innerRadius`](../api/accumulation-chart/accumulationSeries/#innerradius) property of the series. By setting value greater than 0%, a doughnut will appear. The `innerRadius` property takes value from 0% to 100% of the pie radius. +To achieve a [doughnut](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-types/donut-chart) in pie series, customize the [`innerRadius`](../api/accumulation-chart/accumulationSeries#innerradius) property of the series. By setting value greater than 0%, a doughnut will appear. The `innerRadius` property takes value from 0% to 100% of the pie radius. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ To achieve a [doughnut](https://www.syncfusion.com/javascript-ui-controls/js-cha ## Start and End angles -You can customize the start and end angle of the pie series using the [`startAngle`](../api/accumulation-chart/accumulationSeries/#startangle) and [`endAngle`](../api/accumulation-chart/accumulationSeries/#endangle) properties. The default value of `startAngle` is 0 degree, and `endAngle` is 360 degrees. By customizing this, you can achieve a semi pie series. +You can customize the start and end angle of the pie series using the [`startAngle`](../api/accumulation-chart/accumulationSeries#startangle) and [`endAngle`](../api/accumulation-chart/accumulationSeries#endangle) properties. The default value of `startAngle` is 0 degree, and `endAngle` is 360 degrees. By customizing this, you can achieve a semi pie series. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/accumulation-charts/pyramid.md b/chart-sdk/javascript/accumulation-charts/pyramid.md index a01b9670c..7105373f0 100644 --- a/chart-sdk/javascript/accumulation-charts/pyramid.md +++ b/chart-sdk/javascript/accumulation-charts/pyramid.md @@ -1,17 +1,16 @@ --- layout: post -title: Pyramid in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Pyramid in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Pyramid in JavaScript Accumulation Chart | Syncfusion +description: Learn how to render a pyramid series in the Syncfusion JavaScript Accumulation Chart using the PyramidSeries module. platform: chart-sdk -control: Pyramid -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pyramid in JavaScript Accumulation chart control +# Pyramid in JavaScript Accumulation Chart -To render a pyramid series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel/) as `Pyramid` and inject `PyramidSeries` module using the `AccumulationChart.Inject(PyramidSeries)` method. +To render a pyramid series, use the series [`type`](../api/accumulation-chart/accumulationSeriesModel) as `Pyramid` and inject `PyramidSeries` module using the `AccumulationChart.Inject(PyramidSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -101,5 +100,5 @@ Individual points can be customized using the `pointRender` event. ## See also -* [Data label](./data-label/) -* [Grouping](./grouping/) +* [Data label](./data-label) +* [Grouping](./grouping) diff --git a/chart-sdk/javascript/accumulation-charts/title-and-sub-title.md b/chart-sdk/javascript/accumulation-charts/title-and-sub-title.md index 013b59328..ce281c630 100644 --- a/chart-sdk/javascript/accumulation-charts/title-and-sub-title.md +++ b/chart-sdk/javascript/accumulation-charts/title-and-sub-title.md @@ -1,19 +1,18 @@ --- layout: post -title: Title and sub title in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Title and sub title in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Title and Subtitle in JavaScript Accumulation Chart | Syncfusion +description: Learn how to add a title and subtitle to the Syncfusion JavaScript Accumulation Chart using the title property. platform: chart-sdk -control: Title and sub title -publishingplatform: chart-sdk +control: Accumulation Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title and sub title in JavaScript Accumulation chart control +# Title and Subtitle in JavaScript Accumulation Chart ## Title -Accumulation Chart can be given a title using [`title`](../api/accumulation-chart/accumulationChartModel/#title) property, to show the information about the data plotted. +Accumulation Chart can be given a title using [`title`](../api/accumulation-chart/accumulationChartModel#title) property, to show the information about the data plotted. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ Accumulation Chart can be given a title using [`title`](../api/accumulation-char ## Title customization -Accumulation Chart can be customizing a title using [`titleStyle`](../api/accumulation-chart/accumulationChartModel/#titlestyle) property. +Accumulation Chart can be customizing a title using [`titleStyle`](../api/accumulation-chart/accumulationChartModel#titlestyle) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ Accumulation Chart can be customizing a title using [`titleStyle`](../api/accumu ### Position -The [`position`](../api/accumulation-chart/titlePosition/) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements. +The [`position`](../api/accumulation-chart/titlePosition) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ The [`position`](../api/accumulation-chart/titlePosition/) property customizes t ## SubTitle -Accumulation Chart can be given a subtitle using [`subTitle`](../api/accumulation-chart/accumulationChartModel/#subtitle) property, to show the information about the data plotted. +Accumulation Chart can be given a subtitle using [`subTitle`](../api/accumulation-chart/accumulationChartModel#subtitle) property, to show the information about the data plotted. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -73,7 +72,7 @@ Accumulation Chart can be given a subtitle using [`subTitle`](../api/accumulatio ## SubTitle customization -Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](../api/accumulation-chart/accumulationChartModel/#subtitlestyle) property, to show the information about the data plotted. +Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](../api/accumulation-chart/accumulationChartModel#subtitlestyle) property, to show the information about the data plotted. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -88,7 +87,7 @@ Accumulation Chart can be customizing a subtitle using [`subTitleStyle`](../api/ ### Position -The [`position`](../api/accumulation-chart/titleStyleSettings/#position) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements. +The [`position`](../api/accumulation-chart/titleStyleSettings#position) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/accumulation-charts/tool-tip.md b/chart-sdk/javascript/accumulation-charts/tool-tip.md index f40ffdde2..fff8cea60 100644 --- a/chart-sdk/javascript/accumulation-charts/tool-tip.md +++ b/chart-sdk/javascript/accumulation-charts/tool-tip.md @@ -1,17 +1,16 @@ --- layout: post -title: Tooltip in JavaScript Accumulation chart control | Syncfusion -description: Learn here all about Tooltip in Syncfusion JavaScript Accumulation chart control of Syncfusion Essential JS 2 and more. +title: Tooltip in JavaScript Accumulation Chart | Syncfusion +description: Learn how to enable and customize tooltips in the Syncfusion JavaScript Accumulation Chart to display point details on hover. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in JavaScript Accumulation chart control +# Tooltip in JavaScript Accumulation Chart -Tooltip for the accumulation chart can be enabled by using the [`enable`](../api/accumulation-chart/tooltipSettingsModel/#enable) property. +Tooltip for the accumulation chart can be enabled by using the [`enable`](../api/accumulation-chart/tooltipSettingsModel#enable) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ Tooltip for the accumulation chart can be enabled by using the [`enable`](../ap ## Header -We can specify header for the tooltip using [`header`](../api/accumulation-chart/tooltipSettingsModel/#header) property. +We can specify header for the tooltip using [`header`](../api/accumulation-chart/tooltipSettingsModel#header) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ By default, tooltip shows information of x and y value in points. In addition to ## Inline tooltip formatting -The tooltip content can be formatted directly within the [`format`](../api/accumulation-chart/tooltipSettingsModel/#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events. +The tooltip content can be formatted directly within the [`format`](../api/accumulation-chart/tooltipSettingsModel#format) property by adding DateTime or number format specifiers to supported tooltip tokens. This allows you to control how point and series values are displayed without using additional events. A format specifier can be applied to a tooltip token by adding a colon (`:`) followed by the required format. @@ -114,7 +113,7 @@ If the specified format does not match the resolved value type, the original val ## Tooltip Template -Any HTML element can be displayed in the tooltip by using the [`template`](../api/accumulation-chart/tooltipSettingsModel/#template) property. +Any HTML element can be displayed in the tooltip by using the [`template`](../api/accumulation-chart/tooltipSettingsModel#template) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -129,7 +128,7 @@ Any HTML element can be displayed in the tooltip by using the [`template`](../ap ## Fixed tooltip -By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the [`location`](../api/accumulation-chart/tooltipSettingsModel/#location) property. +By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the [`location`](../api/accumulation-chart/tooltipSettingsModel#location) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -144,7 +143,7 @@ By default, tooltip track the mouse movement, but you can set a fixed position f ## Customization -The [`fill`](../api/accumulation-chart/tooltipSettingsModel/#fill) and [`border`](../api/accumulation-chart/tooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/accumulation-chart/tooltipSettingsModel/#textstyle) property in the tooltip is used to customize the font of the tooltip text. The [`highlightColor`](../api/accumulation-chart/accumulationChartModel/#highlightcolor) property can be used to change the color of the data point when hovering. +The [`fill`](../api/accumulation-chart/tooltipSettingsModel#fill) and [`border`](../api/accumulation-chart/tooltipSettingsModel#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/accumulation-chart/tooltipSettingsModel#textstyle) property in the tooltip is used to customize the font of the tooltip text. The [`highlightColor`](../api/accumulation-chart/accumulationChartModel#highlightcolor) property can be used to change the color of the data point when hovering. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -159,7 +158,7 @@ The [`fill`](../api/accumulation-chart/tooltipSettingsModel/#fill) and [`border` ## To customize individual tooltip -Using [`tooltipRender`](../api/accumulation-chart/iAccTooltipRenderEventArgs/) event, you can customize a tooltip for particular point. event, you can customize a tooltip for particular point. +Using [`tooltipRender`](../api/accumulation-chart/iAccTooltipRenderEventArgs) event, you can customize a tooltip for particular point. event, you can customize a tooltip for particular point. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -174,7 +173,7 @@ Using [`tooltipRender`](../api/accumulation-chart/iAccTooltipRenderEventArgs/)  ## Enable highlight -By setting the [`enableHighlight`](../api/accumulation-chart/tooltipSettingsModel/#enablehighlight) property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity. +By setting the [`enableHighlight`](../api/accumulation-chart/tooltipSettingsModel#enablehighlight) property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/bullet-chart/accessibility.md b/chart-sdk/javascript/bullet-chart/accessibility.md index 7ec4d4726..9cdd67457 100644 --- a/chart-sdk/javascript/bullet-chart/accessibility.md +++ b/chart-sdk/javascript/bullet-chart/accessibility.md @@ -1,15 +1,14 @@ --- layout: post -title: Accessibility in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Accessibility in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript Bullet Chart | Syncfusion +description: Learn how to make the Syncfusion JavaScript Bullet Chart accessible using ADA, Section 508, WCAG 2.2, and ARIA roles. platform: chart-sdk -control: Accessibility -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript Bullet chart control +# Accessibility in JavaScript Bullet Chart The Bullet chart control followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/javascript/bullet-chart/axis-customization.md b/chart-sdk/javascript/bullet-chart/axis-customization.md index f7508ad12..e2dc8b9f4 100644 --- a/chart-sdk/javascript/bullet-chart/axis-customization.md +++ b/chart-sdk/javascript/bullet-chart/axis-customization.md @@ -1,19 +1,18 @@ --- layout: post -title: Axis customization in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Axis customization in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Axis customization in JavaScript Bullet Chart | Syncfusion +description: Learn how to customize the major and minor tick lines and grid lines of the Syncfusion JavaScript Bullet Chart axis. platform: chart-sdk -control: Axis customization -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in JavaScript Bullet chart control +# Axis customization in JavaScript Bullet Chart ## MajorTickLines and MinorTickLines Customization -You can customize the `width`, `color`, and `size` of minor and major tick lines using the [`majorTickLines`](../api/bullet-chart/bulletChartModel/) and [`minorTickLines`](../api/bullet-chart/bulletChartModel/) properties of the bullet-chart. +You can customize the `width`, `color`, and `size` of minor and major tick lines using the [`majorTickLines`](../api/bullet-chart/bulletChartModel) and [`minorTickLines`](../api/bullet-chart/bulletChartModel) properties of the bullet-chart. The following properties can be used to customize `majorTicklines` and `minorTicklines`. @@ -35,7 +34,7 @@ The following properties can be used to customize `majorTicklines` and `minorTic ## Tick Placement -You can place major and minor ticks `inside` or `outside` the ranges using the [`tickPosition`](../api/bullet-chart/bulletChartModel/) property of bullet-chart. The major and the minor ticks can be placed **inside** or **outside** the ranges using the `tickPosition` property. +You can place major and minor ticks `inside` or `outside` the ranges using the [`tickPosition`](../api/bullet-chart/bulletChartModel) property of bullet-chart. The major and the minor ticks can be placed **inside** or **outside** the ranges using the `tickPosition` property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -52,7 +51,7 @@ You can place major and minor ticks `inside` or `outside` the ranges using the [ ***Axis Label Format*** -Axis numeric labels can be formatted by using the [`labelFormat`](../api/bullet-chart/bulletChartModel/#labelformat)property. Axis labels support all globalize formats. The following table describes the result of applying some commonly used label formats on numeric axis values. +Axis numeric labels can be formatted by using the [`labelFormat`](../api/bullet-chart/bulletChartModel#labelformat)property. Axis labels support all globalize formats. The following table describes the result of applying some commonly used label formats on numeric axis values. Axis numeric labels can be formatted by using the `labelFormat` property. Axis labels support all globalize formats. {% tabs %} @@ -128,7 +127,7 @@ The following table describes the result of applying some commonly used formats ## GroupingSeparator -To separate groups of thousands, use the [`enableGroupSeparator`](../api/bullet-chart/bulletChartModel/#enablegroupseparator) property of bullet-chart. +To separate groups of thousands, use the [`enableGroupSeparator`](../api/bullet-chart/bulletChartModel#enablegroupseparator) property of bullet-chart. To separate the groups of thousands, set the `enableGroupSeparator` property to **true**. {% tabs %} @@ -159,7 +158,7 @@ Using the `labelFormat` property, axis labels can be specified with a custom def ## Label Placement -You can customize the axis labels `inside` or `outside` the bullet-chart using the [`labelPosition`](../api/bullet-chart/bulletChartModel/#labelposition) property. Label can be placed **Inside** or **Outside** of the ranges using the `labelPosition` property. +You can customize the axis labels `inside` or `outside` the bullet-chart using the [`labelPosition`](../api/bullet-chart/bulletChartModel#labelposition) property. Label can be placed **Inside** or **Outside** of the ranges using the `labelPosition` property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -174,7 +173,7 @@ You can customize the axis labels `inside` or `outside` the bullet-chart using t ## Opposed Position -To place an axis opposite to its original position, set the [`opposedPosition`](../api/bullet-chart/bulletChartModel/#opposedposition) property to true. To place an axis opposite to its original position, set the `opposedPosition` property to **true**. +To place an axis opposite to its original position, set the [`opposedPosition`](../api/bullet-chart/bulletChartModel#opposedposition) property to true. To place an axis opposite to its original position, set the `opposedPosition` property to **true**. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/javascript/bullet-chart/bullet-chart-dimensions.md index 4d119e909..c72f86023 100644 --- a/chart-sdk/javascript/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/javascript/bullet-chart/bullet-chart-dimensions.md @@ -1,15 +1,14 @@ --- layout: post -title: Bullet chart dimensions in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Bullet chart dimensions in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Bullet Chart Dimensions in JavaScript Bullet Chart | Syncfusion +description: Learn how to set the width and height of the Syncfusion JavaScript Bullet Chart by configuring the container size. platform: chart-sdk -control: Bullet chart dimensions -publishingplatform: chart-sdk +control: Bullet chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bullet chart dimensions in JavaScript Bullet chart control +# Bullet Chart Dimensions in JavaScript Bullet Chart ## Size for Container diff --git a/chart-sdk/javascript/bullet-chart/comparative-bar.md b/chart-sdk/javascript/bullet-chart/comparative-bar.md index 886462236..576836336 100644 --- a/chart-sdk/javascript/bullet-chart/comparative-bar.md +++ b/chart-sdk/javascript/bullet-chart/comparative-bar.md @@ -1,16 +1,15 @@ --- layout: post -title: Comparative bar in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Comparative bar in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Comparative Bar in JavaScript Bullet Chart | Syncfusion +description: Learn how to display the target bar in the Syncfusion JavaScript Bullet Chart using the targetField property. platform: chart-sdk -control: Comparative bar -publishingplatform: chart-sdk +control: Comparative Bar documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Comparative bar in JavaScript Bullet chart control +# Comparative Bar in JavaScript Bullet Chart The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [`targetField`](../api/bullet-chart#targetfield) should be mapped to the appropriate field from the datasource. @@ -42,7 +41,7 @@ The shape of the target bar can be customized using the [`targetTypes`](../api/b ## Target bar customization -The following properties can be used to customize the target bar. Also, you can bind the color for the target bar from [`dataSource`](../api/bullet-chart/#datasource) for the bullet chart. +The following properties can be used to customize the target bar. Also, you can bind the color for the target bar from [`dataSource`](../api/bullet-chart#datasource) for the bullet chart. * [`targetColor`](../api/bullet-chart#targetcolor) - Specifies the fill color of target bar. * [`targetWidth`](../api/bullet-chart#targetwidth) - Specifies the width of target bar. diff --git a/chart-sdk/javascript/bullet-chart/customization.md b/chart-sdk/javascript/bullet-chart/customization.md index 357458d6c..30e3a4f5a 100644 --- a/chart-sdk/javascript/bullet-chart/customization.md +++ b/chart-sdk/javascript/bullet-chart/customization.md @@ -1,16 +1,15 @@ --- layout: post -title: Customization in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Customization in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Customization in JavaScript Bullet Chart | Syncfusion +description: Learn how to customize the Syncfusion JavaScript Bullet Chart, including orientation, flow direction, and animation. platform: chart-sdk -control: Customization -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Customization in JavaScript Bullet chart control +# Customization in JavaScript Bullet Chart ## Orientation diff --git a/chart-sdk/javascript/bullet-chart/data-binding.md b/chart-sdk/javascript/bullet-chart/data-binding.md index 4b3a7f020..77687b93b 100644 --- a/chart-sdk/javascript/bullet-chart/data-binding.md +++ b/chart-sdk/javascript/bullet-chart/data-binding.md @@ -1,16 +1,15 @@ --- layout: post -title: Data binding in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Data binding in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Working with Data in JavaScript Bullet Chart | Syncfusion +description: Learn how to bind local and remote data to the Syncfusion JavaScript Bullet Chart using valueField and targetField. platform: chart-sdk control: Data binding -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data binding in JavaScript Bullet chart control +# Working with Data in JavaScript Bullet Chart The `dataSource` property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the `valueField` and `targetField` respectively. diff --git a/chart-sdk/javascript/bullet-chart/data-label.md b/chart-sdk/javascript/bullet-chart/data-label.md index c4d9dbf41..7913616f3 100644 --- a/chart-sdk/javascript/bullet-chart/data-label.md +++ b/chart-sdk/javascript/bullet-chart/data-label.md @@ -1,16 +1,15 @@ --- layout: post -title: Data label in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Data label in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Data Label in JavaScript Bullet Chart | Syncfusion +description: Learn how to enable and customize data labels in the Syncfusion JavaScript Bullet Chart for the actual bar. platform: chart-sdk -control: Data label -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label in JavaScript Bullet chart control +# Data Label in JavaScript Bullet Chart Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the `dataLabel` setting's `enable` property to **true**. diff --git a/chart-sdk/javascript/bullet-chart/es5-getting-started.md b/chart-sdk/javascript/bullet-chart/es5-getting-started.md index 6c3de2977..9a9ad66e6 100644 --- a/chart-sdk/javascript/bullet-chart/es5-getting-started.md +++ b/chart-sdk/javascript/bullet-chart/es5-getting-started.md @@ -1,10 +1,9 @@ --- layout: post -title: ES5 getting started with JavaScript Bullet Chart control | Syncfusion -description: Check out and learn about ES5 getting started with JavaScript Bullet Chart control of Syncfusion Essential JS 2 and more details. +title: Getting Started with JavaScript Bullet Chart (ES5) | Syncfusion +description: Learn how to get started with the Syncfusion JavaScript Bullet Chart in an ES5 application using the CDN approach. platform: chart-sdk control: Bullet Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/ranges.md b/chart-sdk/javascript/bullet-chart/ranges.md index 29704abaf..3079951e7 100644 --- a/chart-sdk/javascript/bullet-chart/ranges.md +++ b/chart-sdk/javascript/bullet-chart/ranges.md @@ -1,16 +1,15 @@ --- layout: post -title: Ranges in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Ranges in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Ranges in JavaScript Bullet Chart | Syncfusion +description: Learn how to define qualitative ranges in the Syncfusion JavaScript Bullet Chart scale using the ranges property. platform: chart-sdk -control: Ranges -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ranges in JavaScript Bullet chart control +# Ranges in JavaScript Bullet Chart Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the `end` property in `ranges`. The `minimum` value of a quantitative scale is considered the starting point of the first range or the previous range end point. diff --git a/chart-sdk/javascript/bullet-chart/title.md b/chart-sdk/javascript/bullet-chart/title.md index fd1ea1dd3..ccf264e80 100644 --- a/chart-sdk/javascript/bullet-chart/title.md +++ b/chart-sdk/javascript/bullet-chart/title.md @@ -1,16 +1,15 @@ --- layout: post -title: Title in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Title in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Title and Subtitle in JavaScript Bullet Chart | Syncfusion +description: Learn how to add a title and subtitle to the Syncfusion JavaScript Bullet Chart and customize their text styles. platform: chart-sdk -control: Title -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Title in JavaScript Bullet chart control +# Title in JavaScript Bullet Chart ## Title diff --git a/chart-sdk/javascript/bullet-chart/tool-tip.md b/chart-sdk/javascript/bullet-chart/tool-tip.md index a2558ada4..79910a088 100644 --- a/chart-sdk/javascript/bullet-chart/tool-tip.md +++ b/chart-sdk/javascript/bullet-chart/tool-tip.md @@ -1,21 +1,20 @@ --- layout: post -title: Tool tip in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Tool tip in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Tooltip in JavaScript Bullet Chart | Syncfusion +description: Learn how to enable and customize tooltips in the SyncfusionJavaScript Bullet Chart to display actual and target values. platform: chart-sdk -control: Tool tip -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip in JavaScript Bullet chart control +# Tooltip in JavaScript Bullet Chart When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values. ## Default tooltip -By setting [`enable`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel/#enable)the property to 'True' and by injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)`.The 'Tooltip' is visible in the 'Bullet chart' by default. +By setting [`enable`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel#enable)the property to 'True' and by injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)`.The 'Tooltip' is visible in the 'Bullet chart' by default. The tooltip is not visible by default. To make it visible, set the `enable` property in the `tooltip` to **true** and injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)`. {% tabs %} @@ -46,7 +45,7 @@ Any HTML elements can be displayed in the tooltip by using the `template` proper ## Customization of the appearance of tooltip -The [`fill`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel/#fill) and [`border`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel/#textstyle) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel#fill) and [`border`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/documentation/api/bullet-chart/bulletTooltipSettingsModel#textstyle) property in the tooltip is used to customize the font of the tooltip text. The following properties can be used to customize the Bullet Chart tooltip. diff --git a/chart-sdk/javascript/bullet-chart/value-bar.md b/chart-sdk/javascript/bullet-chart/value-bar.md index b5746eeb4..1904b279d 100644 --- a/chart-sdk/javascript/bullet-chart/value-bar.md +++ b/chart-sdk/javascript/bullet-chart/value-bar.md @@ -1,18 +1,17 @@ --- layout: post -title: Value bar in JavaScript Bullet chart control | Syncfusion -description: Learn here all about Value bar in Syncfusion JavaScript Bullet chart control of Syncfusion Essential JS 2 and more. +title: Value Bar in JavaScript Bullet Chart | Syncfusion +description: Learn how to display the actual bar in the Syncfusion JavaScript Bullet Chart using the valueField property. platform: chart-sdk -control: Value bar -publishingplatform: chart-sdk +control: Bullet Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Value bar in JavaScript Bullet chart control +# Value Bar in JavaScript Bullet Chart -To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [`valueField`](../api/bullet-chart/#valuefield) should be mapped to the appropriate field from the data source. +To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [`valueField`](../api/bullet-chart#valuefield) should be mapped to the appropriate field from the data source. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,7 +26,7 @@ To display the primary data or the current value of the data being measured know ## Types of actual bar -The shape of the actual bar can be customized using the [`type`](../api/bullet-chart/#type) property of the Bullet Chart. The actual bar contains `Rect` and `Dot` shapes. By default, the actual bar shape is Rect. +The shape of the actual bar can be customized using the [`type`](../api/bullet-chart#type) property of the Bullet Chart. The actual bar contains `Rect` and `Dot` shapes. By default, the actual bar shape is Rect. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -44,7 +43,7 @@ The shape of the actual bar can be customized using the [`type`](../api/bullet-c ### Border customization -Using the [`valueBorder`](../api/bullet-chart/#valueborder) property of the bullet chart, you can customize the border [`color`](../api/bullet-chart/border/#color) and [`width`](../api/bullet-chart/border/#width) of the actual bar. +Using the [`valueBorder`](../api/bullet-chart#valueborder) property of the bullet chart, you can customize the border [`color`](../api/bullet-chart/border#color) and [`width`](../api/bullet-chart/border#width) of the actual bar. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -59,7 +58,7 @@ Using the [`valueBorder`](../api/bullet-chart/#valueborder) property of the bull ### Fill color and height customization -Customize the fill color and height of the actual bar using the [`valueFill`](../api/bullet-chart/#valuefill) and [`valueHeight`](../api/bullet-chart/#valueheight) properties of the bullet chart. Also, you can bind the color for the actual bar from [`dataSource`](../api/bullet-chart/#datasource) for the bullet chart using [`valueFill`](../api/bullet-chart/#valuefill) property. +Customize the fill color and height of the actual bar using the [`valueFill`](../api/bullet-chart#valuefill) and [`valueHeight`](../api/bullet-chart#valueheight) properties of the bullet chart. Also, you can bind the color for the actual bar from [`dataSource`](../api/bullet-chart#datasource) for the bullet chart using [`valueFill`](../api/bullet-chart#valuefill) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/Chart-types/area.md b/chart-sdk/javascript/charts/Chart-types/area.md index 5dcb33c0d..722de0728 100644 --- a/chart-sdk/javascript/charts/Chart-types/area.md +++ b/chart-sdk/javascript/charts/Chart-types/area.md @@ -1,14 +1,13 @@ --- layout: post -title: Area Chart in JavaScript Charts | Syncfusion +title: Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Area Chart in JavaScript Charts +# Area Chart in JavaScript Chart ## Area diff --git a/chart-sdk/javascript/charts/Chart-types/bar.md b/chart-sdk/javascript/charts/Chart-types/bar.md index f300a5b62..34bc5711f 100644 --- a/chart-sdk/javascript/charts/Chart-types/bar.md +++ b/chart-sdk/javascript/charts/Chart-types/bar.md @@ -1,14 +1,13 @@ --- layout: post -title: Bar Chart in JavaScript Charts | Syncfusion +title: Bar Chart in JavaScript Chart | Syncfusion description: Learn here all about Bar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Bar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bar Chart in JavaScript Charts +# Bar Chart in JavaScript Chart ## Bar diff --git a/chart-sdk/javascript/charts/Chart-types/box-whisker.md b/chart-sdk/javascript/charts/Chart-types/box-whisker.md index cb859acc5..e99e6fcb2 100644 --- a/chart-sdk/javascript/charts/Chart-types/box-whisker.md +++ b/chart-sdk/javascript/charts/Chart-types/box-whisker.md @@ -1,15 +1,14 @@ --- layout: post -title: Box and Whiskerk Chart in JavaScript Charts | Syncfusion +title: Box and Whiskerk Chart in JavaScript Chart | Syncfusion description: Learn here all about Box and Whisker in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Box and Whisker -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Box and Whisker Chart in JavaScript Charts +# Box and Whisker Chart in JavaScript Chart ## Box and Whisker diff --git a/chart-sdk/javascript/charts/Chart-types/bubble.md b/chart-sdk/javascript/charts/Chart-types/bubble.md index 8f9d65c80..041389b92 100644 --- a/chart-sdk/javascript/charts/Chart-types/bubble.md +++ b/chart-sdk/javascript/charts/Chart-types/bubble.md @@ -1,14 +1,13 @@ --- layout: post -title: Bubble Chart in JavaScript Charts | Syncfusion +title: Bubble Chart in JavaScript Chart | Syncfusion description: Learn here all about Bubble in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Bubble -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bubble Chart in JavaScript Charts +# Bubble Chart in JavaScript Chart ## Bubble diff --git a/chart-sdk/javascript/charts/Chart-types/candle.md b/chart-sdk/javascript/charts/Chart-types/candle.md index 37b009a3a..d4488729b 100644 --- a/chart-sdk/javascript/charts/Chart-types/candle.md +++ b/chart-sdk/javascript/charts/Chart-types/candle.md @@ -1,15 +1,14 @@ --- layout: post -title: Candle Chart in JavaScript Charts | Syncfusion +title: Candle Chart in JavaScript Chart | Syncfusion description: Learn here all about Candle in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Candle -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Candle Chart in JavaScript Charts +# Candle Chart in JavaScript Chart ## Candle diff --git a/chart-sdk/javascript/charts/Chart-types/column.md b/chart-sdk/javascript/charts/Chart-types/column.md index a9bc1f930..83093abab 100644 --- a/chart-sdk/javascript/charts/Chart-types/column.md +++ b/chart-sdk/javascript/charts/Chart-types/column.md @@ -1,14 +1,13 @@ --- layout: post -title: Column Chart in JavaScript Charts | Syncfusion +title: Column Chart in JavaScript Chart | Syncfusion description: Learn here all about Column in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Column -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Column Chart in JavaScript Charts +# Column Chart in JavaScript Chart ## Column diff --git a/chart-sdk/javascript/charts/Chart-types/error-bar.md b/chart-sdk/javascript/charts/Chart-types/error-bar.md index 27181742f..a77baf7ed 100644 --- a/chart-sdk/javascript/charts/Chart-types/error-bar.md +++ b/chart-sdk/javascript/charts/Chart-types/error-bar.md @@ -1,14 +1,13 @@ --- layout: post -title: Error Bar Chart in JavaScript Charts | Syncfusion +title: Error Bar Chart in JavaScript Chart | Syncfusion description: Learn here all about Error Bar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Error Bar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Error Bar Chart in JavaScript Charts +# Error Bar Chart in JavaScript Chart ## Error Bar diff --git a/chart-sdk/javascript/charts/Chart-types/high-low-open-close.md b/chart-sdk/javascript/charts/Chart-types/high-low-open-close.md index 145f2edee..ad00402be 100644 --- a/chart-sdk/javascript/charts/Chart-types/high-low-open-close.md +++ b/chart-sdk/javascript/charts/Chart-types/high-low-open-close.md @@ -1,15 +1,14 @@ --- layout: post -title: High Low Open Close Chart in JavaScript Charts | Syncfusion +title: High Low Open Close Chart in JavaScript Chart | Syncfusion description: Learn here all about High Low Open Close in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: High Low Open Close -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# High Low Open Close Chart in JavaScript Charts +# High Low Open Close Chart in JavaScript Chart ## High Low Open Close diff --git a/chart-sdk/javascript/charts/Chart-types/high-low.md b/chart-sdk/javascript/charts/Chart-types/high-low.md index fc9d3c5f1..127436ace 100644 --- a/chart-sdk/javascript/charts/Chart-types/high-low.md +++ b/chart-sdk/javascript/charts/Chart-types/high-low.md @@ -1,14 +1,13 @@ --- layout: post -title: High Low Chart in JavaScript Charts | Syncfusion +title: High Low Chart in JavaScript Chart | Syncfusion description: Learn here all about High Low in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: High Low -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# High Low Chart in JavaScript Charts +# High Low Chart in JavaScript Chart ## Hilo diff --git a/chart-sdk/javascript/charts/Chart-types/histogram.md b/chart-sdk/javascript/charts/Chart-types/histogram.md index df6ddc5ee..7292c3335 100644 --- a/chart-sdk/javascript/charts/Chart-types/histogram.md +++ b/chart-sdk/javascript/charts/Chart-types/histogram.md @@ -1,15 +1,14 @@ --- layout: post -title: Histogram Chart in JavaScript Charts | Syncfusion +title: Histogram Chart in JavaScript Chart | Syncfusion description: Learn here all about Histogram in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Histogram -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Histogram Chart in JavaScript Charts +# Histogram Chart in JavaScript Chart ## Histogram diff --git a/chart-sdk/javascript/charts/Chart-types/line.md b/chart-sdk/javascript/charts/Chart-types/line.md index b6bf1b1f2..19170553f 100644 --- a/chart-sdk/javascript/charts/Chart-types/line.md +++ b/chart-sdk/javascript/charts/Chart-types/line.md @@ -1,15 +1,14 @@ --- layout: post -title: Line Chart in JavaScript Charts | Syncfusion +title: Line Chart in JavaScript Chart | Syncfusion description: Learn here all about Line Chart in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Line Chart -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Line Chart in JavaScript Charts +# Line Chart in JavaScript Chart ## Line diff --git a/chart-sdk/javascript/charts/Chart-types/pare-to.md b/chart-sdk/javascript/charts/Chart-types/pare-to.md index ce80985cf..76ab2df21 100644 --- a/chart-sdk/javascript/charts/Chart-types/pare-to.md +++ b/chart-sdk/javascript/charts/Chart-types/pare-to.md @@ -1,15 +1,14 @@ --- layout: post -title: Pareto Chart in JavaScript Charts | Syncfusion +title: Pareto Chart in JavaScript Chart | Syncfusion description: Learn here all about Pareto in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Pareto -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Pareto Chart in JavaScript Charts +# Pareto Chart in JavaScript Chart ## Pareto diff --git a/chart-sdk/javascript/charts/Chart-types/polar.md b/chart-sdk/javascript/charts/Chart-types/polar.md index b31e5be20..ef427a81b 100644 --- a/chart-sdk/javascript/charts/Chart-types/polar.md +++ b/chart-sdk/javascript/charts/Chart-types/polar.md @@ -1,14 +1,13 @@ --- layout: post -title: Polar Chart in JavaScript Charts | Syncfusion +title: Polar Chart in JavaScript Chart | Syncfusion description: Learn here all about Polar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Polar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Polar Chart in JavaScript Charts +# Polar Chart in JavaScript Chart ## Polar Chart diff --git a/chart-sdk/javascript/charts/Chart-types/radar.md b/chart-sdk/javascript/charts/Chart-types/radar.md index a4ff17741..d3fcc17ff 100644 --- a/chart-sdk/javascript/charts/Chart-types/radar.md +++ b/chart-sdk/javascript/charts/Chart-types/radar.md @@ -1,14 +1,13 @@ --- layout: post -title: Radar Chart in JavaScript Charts | Syncfusion +title: Radar Chart in JavaScript Chart | Syncfusion description: Learn here all about Radar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Radar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Radar Chart in JavaScript Charts +# Radar Chart in JavaScript Chart ## Radar Chart diff --git a/chart-sdk/javascript/charts/Chart-types/range-area.md b/chart-sdk/javascript/charts/Chart-types/range-area.md index ec5b45937..7861ccc6d 100644 --- a/chart-sdk/javascript/charts/Chart-types/range-area.md +++ b/chart-sdk/javascript/charts/Chart-types/range-area.md @@ -1,15 +1,14 @@ --- layout: post -title: Range Area Chart in JavaScript Charts | Syncfusion +title: Range Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Range Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Range Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range Area Chart in JavaScript Charts +# Range Area Chart in JavaScript Chart ## Range Area diff --git a/chart-sdk/javascript/charts/Chart-types/range-column.md b/chart-sdk/javascript/charts/Chart-types/range-column.md index 0c6f4888a..c990daa25 100644 --- a/chart-sdk/javascript/charts/Chart-types/range-column.md +++ b/chart-sdk/javascript/charts/Chart-types/range-column.md @@ -1,14 +1,13 @@ --- layout: post -title: Range Column in JavaScript Chart control | Syncfusion +title: Range Column in JavaScript Chart | Syncfusion description: Learn here all about Range Column in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Range Column -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range Column Chart in JavaScript Charts +# Range Column Chart in JavaScript Chart ## Range Column diff --git a/chart-sdk/javascript/charts/Chart-types/range-step-area.md b/chart-sdk/javascript/charts/Chart-types/range-step-area.md index a0591d701..644235e12 100644 --- a/chart-sdk/javascript/charts/Chart-types/range-step-area.md +++ b/chart-sdk/javascript/charts/Chart-types/range-step-area.md @@ -1,15 +1,14 @@ --- layout: post -title: Range Step Area Chart in JavaScript Charts | Syncfusion +title: Range Step Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Range Step Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Range Step Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Range Step Area Chart in JavaScript Charts +# Range Step Area Chart in JavaScript Chart ## Range Step Area diff --git a/chart-sdk/javascript/charts/Chart-types/scatter.md b/chart-sdk/javascript/charts/Chart-types/scatter.md index 61fa59fa5..1796be257 100644 --- a/chart-sdk/javascript/charts/Chart-types/scatter.md +++ b/chart-sdk/javascript/charts/Chart-types/scatter.md @@ -1,14 +1,13 @@ --- layout: post -title: Scatter Chart in JavaScript Charts | Syncfusion +title: Scatter Chart in JavaScript Chart | Syncfusion description: Learn here all about Scatter in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Scatter -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Scatter Chart in JavaScript Charts +# Scatter Chart in JavaScript Chart ## Scatter Chart diff --git a/chart-sdk/javascript/charts/Chart-types/spline-area.md b/chart-sdk/javascript/charts/Chart-types/spline-area.md index c42e1437e..0bedccd83 100644 --- a/chart-sdk/javascript/charts/Chart-types/spline-area.md +++ b/chart-sdk/javascript/charts/Chart-types/spline-area.md @@ -1,15 +1,14 @@ --- layout: post -title: Spline Area Chart in JavaScript Charts | Syncfusion +title: Spline Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Spline Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Spline Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Spline Area Chart in JavaScript Charts +# Spline Area Chart in JavaScript Chart ## Spline Area diff --git a/chart-sdk/javascript/charts/Chart-types/spline-range-area.md b/chart-sdk/javascript/charts/Chart-types/spline-range-area.md index 11884e72d..f4392c508 100644 --- a/chart-sdk/javascript/charts/Chart-types/spline-range-area.md +++ b/chart-sdk/javascript/charts/Chart-types/spline-range-area.md @@ -1,14 +1,13 @@ --- layout: post -title: Spline Range Area Chart in JavaScript Charts | Syncfusion +title: Spline Range Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Spline Range Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Spline Range Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Spline Range Area Chart in JavaScript Charts +# Spline Range Area Chart in JavaScript Chart ## Spline Range Area diff --git a/chart-sdk/javascript/charts/Chart-types/spline.md b/chart-sdk/javascript/charts/Chart-types/spline.md index 6d056a2af..13d81883d 100644 --- a/chart-sdk/javascript/charts/Chart-types/spline.md +++ b/chart-sdk/javascript/charts/Chart-types/spline.md @@ -1,15 +1,14 @@ --- layout: post -title: Spline Chart in JavaScript Charts | Syncfusion +title: Spline Chart in JavaScript Chart | Syncfusion description: Learn here all about Spline in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Spline -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Spline Chart in JavaScript Charts +# Spline Chart in JavaScript Chart ## Spline diff --git a/chart-sdk/javascript/charts/Chart-types/stack-area.md b/chart-sdk/javascript/charts/Chart-types/stack-area.md index 19f68f2e9..ad2b45fdc 100644 --- a/chart-sdk/javascript/charts/Chart-types/stack-area.md +++ b/chart-sdk/javascript/charts/Chart-types/stack-area.md @@ -1,15 +1,14 @@ --- layout: post -title: Stacked Area Chart in JavaScript Charts | Syncfusion +title: Stacked Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Area Chart in JavaScript Charts +# Stacked Area Chart in JavaScript Chart ## Stacked Area diff --git a/chart-sdk/javascript/charts/Chart-types/stack-bar.md b/chart-sdk/javascript/charts/Chart-types/stack-bar.md index eaf486b3a..8c7834e3f 100644 --- a/chart-sdk/javascript/charts/Chart-types/stack-bar.md +++ b/chart-sdk/javascript/charts/Chart-types/stack-bar.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Bar Chart in JavaScript Charts | Syncfusion +title: Stacked Bar Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Bar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Bar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Bar Chart in JavaScript Charts +# Stacked Bar Chart in JavaScript Chart ## Stacked Bar diff --git a/chart-sdk/javascript/charts/Chart-types/stack-column.md b/chart-sdk/javascript/charts/Chart-types/stack-column.md index d721ab432..de28d387f 100644 --- a/chart-sdk/javascript/charts/Chart-types/stack-column.md +++ b/chart-sdk/javascript/charts/Chart-types/stack-column.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Column in JavaScript Charts | Syncfusion +title: Stacked Column in JavaScript Chart | Syncfusion description: Learn here all about Stacked Column in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Column -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Column Chart in JavaScript Charts +# Stacked Column Chart in JavaScript Chart ## Stacked Column diff --git a/chart-sdk/javascript/charts/Chart-types/stack-line.md b/chart-sdk/javascript/charts/Chart-types/stack-line.md index a952776de..ed5bd6211 100644 --- a/chart-sdk/javascript/charts/Chart-types/stack-line.md +++ b/chart-sdk/javascript/charts/Chart-types/stack-line.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Line Chart in JavaScript Charts | Syncfusion +title: Stacked Line Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Line in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Line -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Line Chart in JavaScript Charts +# Stacked Line Chart in JavaScript Chart ## Stacked Line diff --git a/chart-sdk/javascript/charts/Chart-types/stacked-area.md b/chart-sdk/javascript/charts/Chart-types/stacked-area.md index 0df9c9a63..5bc6085b2 100644 --- a/chart-sdk/javascript/charts/Chart-types/stacked-area.md +++ b/chart-sdk/javascript/charts/Chart-types/stacked-area.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Area Chart in JavaScript Charts | Syncfusion +title: Stacked Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Area Chart in JavaScript Charts +# Stacked Area Chart in JavaScript Chart ## 100% Stacked Area diff --git a/chart-sdk/javascript/charts/Chart-types/stacked-bar.md b/chart-sdk/javascript/charts/Chart-types/stacked-bar.md index db9e5df61..cdd261b6b 100644 --- a/chart-sdk/javascript/charts/Chart-types/stacked-bar.md +++ b/chart-sdk/javascript/charts/Chart-types/stacked-bar.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Bar Chart in JavaScript Charts | Syncfusion +title: Stacked Bar Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Bar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Bar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Bar Chart in JavaScript Charts +# Stacked Bar Chart in JavaScript Chart ## 100% Stacked Bar diff --git a/chart-sdk/javascript/charts/Chart-types/stacked-column.md b/chart-sdk/javascript/charts/Chart-types/stacked-column.md index f3a5ec4b7..a855561a1 100644 --- a/chart-sdk/javascript/charts/Chart-types/stacked-column.md +++ b/chart-sdk/javascript/charts/Chart-types/stacked-column.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Column Chart in JavaScript Charts | Syncfusion +title: Stacked Column Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Column in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Column -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Column Chart in JavaScript Charts +# Stacked Column Chart in JavaScript Chart ## 100% Stacked Column diff --git a/chart-sdk/javascript/charts/Chart-types/stacked-line.md b/chart-sdk/javascript/charts/Chart-types/stacked-line.md index 8e5e7bae9..6f21bff4e 100644 --- a/chart-sdk/javascript/charts/Chart-types/stacked-line.md +++ b/chart-sdk/javascript/charts/Chart-types/stacked-line.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Line Chart in JavaScript Charts | Syncfusion +title: Stacked Line Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Line in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Line -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Line Chart in JavaScript Charts +# Stacked Line Chart in JavaScript Chart ## 100% Stacked Line diff --git a/chart-sdk/javascript/charts/Chart-types/stacked-step-area.md b/chart-sdk/javascript/charts/Chart-types/stacked-step-area.md index 7e18742a8..b38d751e1 100644 --- a/chart-sdk/javascript/charts/Chart-types/stacked-step-area.md +++ b/chart-sdk/javascript/charts/Chart-types/stacked-step-area.md @@ -1,14 +1,13 @@ --- layout: post -title: Stacked Step Area Chart in JavaScript Charts | Syncfusion +title: Stacked Step Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Stacked Step Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacked Step Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacked Step Area Chart in JavaScript Charts +# Stacked Step Area Chart in JavaScript Chart ## Stacked Step Area diff --git a/chart-sdk/javascript/charts/Chart-types/step-area.md b/chart-sdk/javascript/charts/Chart-types/step-area.md index c91ed80de..74c17ff4b 100644 --- a/chart-sdk/javascript/charts/Chart-types/step-area.md +++ b/chart-sdk/javascript/charts/Chart-types/step-area.md @@ -1,14 +1,13 @@ --- layout: post -title: Step Area Chart in JavaScript Charts | Syncfusion +title: Step Area Chart in JavaScript Chart | Syncfusion description: Learn here all about Step Area in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Step Area -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Step Area Chart in JavaScript Charts +# Step Area Chart in JavaScript Chart ## Step Area diff --git a/chart-sdk/javascript/charts/Chart-types/step-line.md b/chart-sdk/javascript/charts/Chart-types/step-line.md index 6502d37f8..93bb0dba8 100644 --- a/chart-sdk/javascript/charts/Chart-types/step-line.md +++ b/chart-sdk/javascript/charts/Chart-types/step-line.md @@ -1,14 +1,13 @@ --- layout: post -title: Step Line Chart in JavaScript Charts | Syncfusion +title: Step Line Chart in JavaScript Chart | Syncfusion description: Learn here all about Step Line in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Step Line -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Step Line Chart in JavaScript Charts +# Step Line Chart in JavaScript Chart ## Step Line diff --git a/chart-sdk/javascript/charts/Chart-types/vertical-chart.md b/chart-sdk/javascript/charts/Chart-types/vertical-chart.md index 7a779b915..957dd6c59 100644 --- a/chart-sdk/javascript/charts/Chart-types/vertical-chart.md +++ b/chart-sdk/javascript/charts/Chart-types/vertical-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Vertical Chart in JavaScript Charts | Syncfusion +title: Vertical Chart in JavaScript Chart | Syncfusion description: Learn here all about Vertical Chart in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Vertical Chart -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Vertical Chart in JavaScript Charts +# Vertical Chart in JavaScript Chart ## Vertical Chart diff --git a/chart-sdk/javascript/charts/Chart-types/waterfall.md b/chart-sdk/javascript/charts/Chart-types/waterfall.md index edd0a3f11..c9c61ada0 100644 --- a/chart-sdk/javascript/charts/Chart-types/waterfall.md +++ b/chart-sdk/javascript/charts/Chart-types/waterfall.md @@ -1,14 +1,13 @@ --- layout: post -title: Waterfall Chart in JavaScript Charts | Syncfusion +title: Waterfall Chart in JavaScript Chart | Syncfusion description: Learn here all about Waterfall in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Waterfall -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Waterfall Chart in JavaScript Charts +# Waterfall Chart in JavaScript Chart ## Waterfall Chart diff --git a/chart-sdk/javascript/charts/accessibility.md b/chart-sdk/javascript/charts/accessibility.md index c0b0930f1..10dbbf202 100644 --- a/chart-sdk/javascript/charts/accessibility.md +++ b/chart-sdk/javascript/charts/accessibility.md @@ -1,15 +1,14 @@ --- layout: post -title: Accessibility in JavaScript Chart control | Syncfusion +title: Accessibility in JavaScript Chart | Syncfusion description: Learn here all about Accessibility in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Accessibility -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript Chart control +# Accessibility in JavaScript Chart The Chart control follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov), [Section 508](https://www.section508.gov), [WCAG 2.2](https://www.w3.org/TR/WCAG22), and relevant [WAI-ARIA](https://www.w3.org/TR/wai-aria#roles) roles. diff --git a/chart-sdk/javascript/charts/advanced-accessibility-configuration.md b/chart-sdk/javascript/charts/advanced-accessibility-configuration.md index 3d95b8422..f3d75ac32 100644 --- a/chart-sdk/javascript/charts/advanced-accessibility-configuration.md +++ b/chart-sdk/javascript/charts/advanced-accessibility-configuration.md @@ -1,27 +1,26 @@ --- layout: post -title: Accessibility customization in JavaScript Chart control | Syncfusion +title: Advanced accessibility in JavaScript Chart | Syncfusion description: Learn here all about Accessibility customization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Accessibility customization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility customization in JavaScript Chart control +# Advanced accessibility in JavaScript Chart The JavaScript Chart control visualizes data graphically and provides accessibility customization options to improve usability for people with disabilities. The primary accessibility attributes are described in this section. The chart control exposes attributes that enable accessibility customization, including: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the chart, improving support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the chart, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Allows the chart to receive focus, making it accessible via keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the chart, improving support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the chart, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Allows the chart to receive focus, making it accessible via keyboard navigation. * [`focusBorderColor`](../api/chart#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the chart is focused. * [`focusBorderMargin`](../api/chart#focusbordermargin) - Defines the margin around the focus border. * [`focusBorderWidth`](../api/chart#focusborderwidth) - Specifies the width of the focus border. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the chart element, enabling efficient keyboard navigation. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the chart element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -38,11 +37,11 @@ The chart control exposes attributes that enable accessibility customization, in The [`series`](../api/chart#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as: -* [`accessibilityDescription`](../api/chart/seriesAccessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. -* [`accessibilityDescriptionFormat`](../api/chart/seriesAccessibilityModel/#accessibilitydescriptionformat) - Specifies a format for the accessibility description of each point in the series, allowing dynamic content. The format string can include the placeholders such as ${series.name}, ${point.x}, ${point.y}, ${point.high}, etc. For example, the format "${series.name} : ${point.x}" displays the series name and x-value of the point in the accessibility description. Data point's values like high, low, open, and close are applicable based on the series types. -* [`accessibilityRole`](../api/chart/seriesAccessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/seriesAccessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. -* [`tabIndex`](../api/chart/seriesAccessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/seriesAccessibilityModel#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers. +* [`accessibilityDescriptionFormat`](../api/chart/seriesAccessibilityModel#accessibilitydescriptionformat) - Specifies a format for the accessibility description of each point in the series, allowing dynamic content. The format string can include the placeholders such as ${series.name}, ${point.x}, ${point.y}, ${point.high}, etc. For example, the format "${series.name} : ${point.x}" displays the series name and x-value of the point in the accessibility description. Data point's values like high, low, open, and close are applicable based on the series types. +* [`accessibilityRole`](../api/chart/seriesAccessibilityModel#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/seriesAccessibilityModel#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation. +* [`tabIndex`](../api/chart/seriesAccessibilityModel#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -57,12 +56,12 @@ The [`series`](../api/chart#series) supports the customization of accessibility ## Title and subtitle -In the JavaScript chart control, the [`titleStyle`](../api/chart/#titlestyle) and [`subTitleStyle`](../api/chart/#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](../api/chart/titleSettingsModel/#accessibility) properties in [`titleStyle`](../api/chart/#titlestyle) and [`subTitleStyle`](../api/chart/#subtitlestyle) can be customized for accessibility: +In the JavaScript chart control, the [`titleStyle`](../api/chart#titlestyle) and [`subTitleStyle`](../api/chart#subtitlestyle) attributes allow you to customize the accessibility of the chart's title and subtitle. The following [`accessibility`](../api/chart/titleSettingsModel#accessibility) properties in [`titleStyle`](../api/chart#titlestyle) and [`subTitleStyle`](../api/chart#subtitlestyle) can be customized for accessibility: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the chart title and subtitle, enhancing support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Enables or disables the keyboard navigation focus for the title and subtitle. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the chart title and subtitle, enhancing support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the chart title and subtitle, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Enables or disables the keyboard navigation focus for the title and subtitle. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the title and subtitle element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -77,12 +76,12 @@ In the JavaScript chart control, the [`titleStyle`](../api/chart/#titlestyle) an ## Annotations -The [`annotations`](../api/chart/#annotations) property allows you to add annotations to the chart in specific regions. The following [`accessibility`](../api/chart/chartAnnotationSettingsModel/#accessibility) properties in [`annotations`](../api/chart/#annotations) can be customized for accessibility: +The [`annotations`](../api/chart#annotations) property allows you to add annotations to the chart in specific regions. The following [`accessibility`](../api/chart/chartAnnotationSettingsModel#accessibility) properties in [`annotations`](../api/chart#annotations) can be customized for accessibility: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the annotation, enhancing support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the annotation, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Specifies whether annotations are focusable via keyboard navigation. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the annotation element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the annotation, enhancing support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the annotation, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Specifies whether annotations are focusable via keyboard navigation. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the annotation element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -97,12 +96,12 @@ The [`annotations`](../api/chart/#annotations) property allows you to add annota ## Trendline -The [`trendlines`](../api/chart#trendlinemodule) property allows you to display trends in the data. The following [`accessibility`](../api/chart/trendlineModel/#accessibility) properties in [`trendlines`](../api/chart#trendlinemodule) can be customized for accessibility: +The [`trendlines`](../api/chart#trendlinemodule) property allows you to display trends in the data. The following [`accessibility`](../api/chart/trendlineModel#accessibility) properties in [`trendlines`](../api/chart#trendlinemodule) can be customized for accessibility: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the trendline, enhancing support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the trendline, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Specifies whether trendlines are focusable via keyboard navigation. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the trendline element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the trendline, enhancing support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the trendline, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Specifies whether trendlines are focusable via keyboard navigation. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the trendline element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -117,12 +116,12 @@ The [`trendlines`](../api/chart#trendlinemodule) property allows you to display ## Zooming -The [`zoomSettings`](../api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](../api/chart/zoomSettingsModel/#accessibility) properties in [`zoomSettings`](../api/chart#zoomsettings) offer the parameters for accessibility customization: +The [`zoomSettings`](../api/chart#zoomsettings) attributes allow you to adjust the chart's zooming capability. The following [`accessibility`](../api/chart/zoomSettingsModel#accessibility) properties in [`zoomSettings`](../api/chart#zoomsettings) offer the parameters for accessibility customization: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the zoom toolkit items, enhancing support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Specifies whether zoom toolkit items are focusable via keyboard navigation. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the zooming element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the zoom toolkit items, enhancing support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the zoom toolkit items, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Specifies whether zoom toolkit items are focusable via keyboard navigation. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the zooming element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -137,12 +136,12 @@ The [`zoomSettings`](../api/chart#zoomsettings) attributes allow you to adjust t ## Technical indicators -The [`indicators`](../api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](../api/chart/technicalIndicatorModel/#accessibility) properties in [`indicators`](../api/chart#indicators) can be customized for accessibility: +The [`indicators`](../api/chart#indicators) property allows you to analyze the trends and patterns in the data. The following [`accessibility`](../api/chart/technicalIndicatorModel#accessibility) properties in [`indicators`](../api/chart#indicators) can be customized for accessibility: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the indicators, enhancing support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the indicators, helping screen readers to identify the element appropriately. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Specifies whether indicators are focusable via keyboard navigation. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the indicators element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the indicators, enhancing support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the indicators, helping screen readers to identify the element appropriately. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Specifies whether indicators are focusable via keyboard navigation. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the indicators element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -157,12 +156,12 @@ The [`indicators`](../api/chart#indicators) property allows you to analyze the t ## Legend -The [`legendSettings`](../api/chart#legendsettings) provide information about the series shown in the chart. The following [`accessibility`](../api/chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](../api/chart#legendsettings) can be used to alter the accessibility of the chart's legend: +The [`legendSettings`](../api/chart#legendsettings) provide information about the series shown in the chart. The following [`accessibility`](../api/chart/legendSettingsModel#accessibility) properties in [`legendSettings`](../api/chart#legendsettings) can be used to alter the accessibility of the chart's legend: -* [`accessibilityDescription`](../api/chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers. -* [`accessibilityRole`](../api/chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. -* [`focusable`](../api/chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation. -* [`tabIndex`](../api/chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. +* [`accessibilityDescription`](../api/chart/accessibilityModel#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers. +* [`accessibilityRole`](../api/chart/accessibilityModel#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context. +* [`focusable`](../api/chart/accessibilityModel#focusable) - Specifies whether legend items are focusable via keyboard navigation. +* [`tabIndex`](../api/chart/accessibilityModel#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/api-accumulationDistributionIndicator.md b/chart-sdk/javascript/charts/api-accumulationDistributionIndicator.md index 6d58095d3..16fe697c7 100644 --- a/chart-sdk/javascript/charts/api-accumulationDistributionIndicator.md +++ b/chart-sdk/javascript/charts/api-accumulationDistributionIndicator.md @@ -1,6 +1,6 @@ --- layout: post -title: Api accumulationDistributionIndicator in JavaScript Chart control | Syncfusion +title: Api accumulationDistributionIndicator in JavaScript Chart | Syncfusion description: Learn here all about Api accumulationDistributionIndicator in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Api accumulationDistributionIndicator @@ -9,7 +9,7 @@ documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Api accumulationDistributionIndicator in JavaScript Chart control +# Api accumulationDistributionIndicator in JavaScript Chart `AccumulationDistributionIndicator` module is used to render accumulation distribution indicator. diff --git a/chart-sdk/javascript/charts/axis-customization.md b/chart-sdk/javascript/charts/axis-customization.md index 2d8b95ce5..a976d22c9 100644 --- a/chart-sdk/javascript/charts/axis-customization.md +++ b/chart-sdk/javascript/charts/axis-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis customization in JavaScript Chart control | Syncfusion +title: Axis customization in JavaScript Chart | Syncfusion description: Learn here all about Axis customization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Axis customization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis customization in JavaScript Chart control +# Axis customization in JavaScript Chart ## Axis Crossing diff --git a/chart-sdk/javascript/charts/axis-labels.md b/chart-sdk/javascript/charts/axis-labels.md index 5c656f13c..bf545e5e6 100644 --- a/chart-sdk/javascript/charts/axis-labels.md +++ b/chart-sdk/javascript/charts/axis-labels.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis labels in JavaScript Chart control | Syncfusion +title: Axis labels in JavaScript Chart | Syncfusion description: Learn here all about Axis labels in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Axis labels -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis labels in JavaScript Chart control +# Axis labels in JavaScript Chart ## Smart axis labels diff --git a/chart-sdk/javascript/charts/axis.md b/chart-sdk/javascript/charts/axis.md index 8b1562ed8..56b7a8c34 100644 --- a/chart-sdk/javascript/charts/axis.md +++ b/chart-sdk/javascript/charts/axis.md @@ -1,16 +1,15 @@ --- layout: post -title: Axis in JavaScript Chart control | Syncfusion +title: Axis in JavaScript Chart | Syncfusion description: Learn here all about Axis in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Axis -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis in JavaScript Chart control +# Axis in JavaScript Chart Chart typically has two axis, which are used to measure and categorize data: a horizontal or primary x axis and a vertical or primary y axis. @@ -44,7 +43,7 @@ Category axis are used to represent, the string values instead of numbers. **Positioning Axis Labels** -By default, category labels are placed between the ticks in an axis, this can also be placed on ticks using [`labelPlacement`](../api/chart/axis/#labelplacement) property. +By default, category labels are placed between the ticks in an axis, this can also be placed on ticks using [`labelPlacement`](../api/chart/axis#labelplacement) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -57,7 +56,7 @@ By default, category labels are placed between the ticks in an axis, this can al {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/charts/axis-cs25" %} ->Note: To use category axis, we need to inject `Category` module using `Chart.Inject(Category)` method and set the [`valueType`](../api/chart/axis/#valuetype) of axis to Category. +>Note: To use category axis, we need to inject `Category` module using `Chart.Inject(Category)` method and set the [`valueType`](../api/chart/axis#valuetype) of axis to Category. ## Numeric Axis @@ -76,7 +75,7 @@ You can use numeric axis to represent numeric values of data in chart. By defaul **Customize Numeric Range** -Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using [`minimum`](../api/chart/axis/#minimum), [`maximum`](../api/chart/axis/#maximum) and [`interval`](../api/chart/axis/#interval) property of +Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of the axis using [`minimum`](../api/chart/axis#minimum), [`maximum`](../api/chart/axis#maximum) and [`interval`](../api/chart/axis#interval) property of the axis. {% tabs %} @@ -92,7 +91,7 @@ the axis. **Apply Padding to the Range** -Padding can be applied to the minimum and maximum extremes of an axis range by using the [`rangePadding`](../api/chart/axis/#rangepadding) property. Numeric axis supports the following types of padding. +Padding can be applied to the minimum and maximum extremes of an axis range by using the [`rangePadding`](../api/chart/axis#rangepadding) property. Numeric axis supports the following types of padding. * None * Round @@ -102,7 +101,7 @@ Padding can be applied to the minimum and maximum extremes of an axis range by u **Numeric - None** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `None`, minimum and maximum of the axis is based on the data. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -117,7 +116,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `None`, min **Numeric - Round** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -132,7 +131,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Round`, mi **Numeric - Additional** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -147,7 +146,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Additional **Numeric - Normal** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Normal`, padding is applied to the axis based on default range calculation. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `Normal`, padding is applied to the axis based on default range calculation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -162,7 +161,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Normal`, p **Numeric - Auto** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Auto`, horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `Auto`, horizontal numeric axis takes None as padding calculation, while the vertical numeric axis takes Normal as padding calculation. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -192,7 +191,7 @@ Date time axis uses date time scale and displays the date time values as axis la **Customizing Date Time Range** -Range of an axis will be calculated automatically based on the provided data, you can also customize the range of the axis using [`minimum`](../api/chart/axis/#minimum), [`maximum`](../api/chart/axis/#maximum) and [`interval`](../api/chart/axis/#interval) property of the axis. +Range of an axis will be calculated automatically based on the provided data, you can also customize the range of the axis using [`minimum`](../api/chart/axis#minimum), [`maximum`](../api/chart/axis#maximum) and [`interval`](../api/chart/axis#interval) property of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -207,7 +206,7 @@ Range of an axis will be calculated automatically based on the provided data, yo **Date Time Intervals** -Date time intervals can be customized by using the [`interval`](./../api/chart/axis/#interval) and [`intervalType`](../api/chart/axis/#intervaltype) properties of the axis. For example, when you set interval as 2 and intervalType as years, it considers 2 years as interval. +Date time intervals can be customized by using the [`interval`](./../api/chart/axis#interval) and [`intervalType`](../api/chart/axis#intervaltype) properties of the axis. For example, when you set interval as 2 and intervalType as years, it considers 2 years as interval. Datetime axis supports following interval types, * Auto @@ -231,7 +230,7 @@ Datetime axis supports following interval types, **Applying Padding to the Range** -Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](../api/chart/axis/#rangepadding) property. Date time axis supports the following types of padding, +Padding can be applied to the minimum and maximum extremes of the range by using the [`rangePadding`](../api/chart/axis#rangepadding) property. Date time axis supports the following types of padding, * None * Round @@ -239,7 +238,7 @@ Padding can be applied to the minimum and maximum extremes of the range by using **Datetime - None** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `None`, minimum and maximum of an axis is based on the data. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -254,7 +253,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `None`, min **Datetime - Round** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is 15th Jan, interval is 1 and the interval type is ‘month’, then the axis minimum will be Jan 1st. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is 15th Jan, interval is 1 and the interval type is ‘month’, then the axis minimum will be Jan 1st. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -269,7 +268,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Round`, mi **Datetime - Additional** -When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. +When the [`rangePadding`](../api/chart/axis#rangepadding) is set to `Additional`, interval of an axis will be padded to the minimum and maximum of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -282,7 +281,7 @@ When the [`rangePadding`](../api/chart/axis/#rangepadding) is set to `Additional {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/charts/axis-cs38" %} ->Note: To use datetime axis, we need to inject DateTime using `Chart.Inject(DateTime)` method and set the [`valueType`](../api/chart/axis/#valuetype) of axis to DateTime. +>Note: To use datetime axis, we need to inject DateTime using `Chart.Inject(DateTime)` method and set the [`valueType`](../api/chart/axis#valuetype) of axis to DateTime. @@ -305,7 +304,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat **Customize Logarithmic Range** -Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of an axis using [`minimum`](../api/chart/axis/#minimum),[`maximum`](../api/chart/axis/#maximum) and [`interval`](./../api/chart/axis/#interval) property of the axis. +Range of an axis, will be calculated automatically based on the provided data, you can also customize the range of an axis using [`minimum`](../api/chart/axis#minimum),[`maximum`](../api/chart/axis#maximum) and [`interval`](./../api/chart/axis#interval) property of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -320,7 +319,7 @@ Range of an axis, will be calculated automatically based on the provided data, y **Logarithmic Base** -Logarithmic base can be customized by using the [`logBase`](../api/chart/axis/#logbase) property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc. +Logarithmic base can be customized by using the [`logBase`](../api/chart/axis#logbase) property of the axis. For example when the logBase is 5, the axis values follows 5-2, 5-1, 50, 51, 52 etc. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -335,7 +334,7 @@ Logarithmic base can be customized by using the [`logBase`](../api/chart/axis/# **Logarithmic Interval** -Logarithmic axis interval can be customized by using the [`interval`](./../api/chart/axis/#interval) property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval is 1. +Logarithmic axis interval can be customized by using the [`interval`](./../api/chart/axis#interval) property of the axis. When the logarithmic base is 10 and logarithmic interval is 2, then the axis labels are placed at an interval of 102. The default value of the interval is 1. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -348,13 +347,13 @@ Logarithmic axis interval can be customized by using the [`interval`](./../api/c {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/charts/axis-cs42" %} ->Note: To use log axis, we need to inject `Logarithmic` using method `Chart.Inject(Logarithmic)` and set the [`valueType`](../api/chart/axis/#valuetype) of axis to `Logarithmic`. +>Note: To use log axis, we need to inject `Logarithmic` using method `Chart.Inject(Logarithmic)` and set the [`valueType`](../api/chart/axis#valuetype) of axis to `Logarithmic`. ## Inversed Axis -When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [`isInversed`](../api/chart/axis/#isinversed) to true. +When an axis is inversed, highest value of the axis comes closer to origin and vice versa. To place an axis in inversed manner set this property [`isInversed`](../api/chart/axis#isinversed) to true. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -371,7 +370,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v **Numeric Label Format** -Numeric labels can be formatted by using the [`labelFormat`](../api/chart/axis/#labelformat) property. Numeric labels supports all globalize format. +Numeric labels can be formatted by using the [`labelFormat`](../api/chart/axis#labelformat) property. Numeric labels supports all globalize format. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -446,7 +445,7 @@ The following table describes the result of applying some commonly used label fo **DateTime Label Format** -You can format and parse the date to all globalize format using [`labelFormat`](../api/chart/axis/#labelformat) property in an axis. +You can format and parse the date to all globalize format using [`labelFormat`](../api/chart/axis#labelformat) property in an axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -520,7 +519,7 @@ Axis also supports custom label format using placeholder like {value}°C, in w **Axis Title** -You can add a title to the axis using [`title`](../api/chart/axis/#title) property to provide quick information to the user about the data plotted in the axis. +You can add a title to the axis using [`title`](../api/chart/axis#title) property to provide quick information to the user about the data plotted in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -535,7 +534,7 @@ You can add a title to the axis using [`title`](../api/chart/axis/#title) proper **Label Customization** -The [`labelStyle`](../api/chart/axis/#labelstyle) property of an axis provides options to customize the `color`, `font-family`, `font-size` and `font-weight` of the axis labels. +The [`labelStyle`](../api/chart/axis#labelstyle) property of an axis provides options to customize the `color`, `font-family`, `font-size` and `font-weight` of the axis labels. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -550,7 +549,7 @@ The [`labelStyle`](../api/chart/axis/#labelstyle) property of an axis provides **Edge Label Placement** -Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](../api/chart/axis/#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. +Labels with long text at the edges of an axis may appear partially in the chart. To avoid this, use [`edgeLabelPlacement`](../api/chart/axis#edgelabelplacement) property in axis, which moves the label inside the chart area for better appearance or hides it. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -565,7 +564,7 @@ Labels with long text at the edges of an axis may appear partially in the chart. **Grid Lines Customization** -You can customize the `width`, `color` and `dashArray` of the minor and major grid lines, using [`majorGridLines`](../api/chart/axis/#majorgridlines) and [`minorGridLines`](../api/chart/axis/#minorgridlines) properties in the axis. +You can customize the `width`, `color` and `dashArray` of the minor and major grid lines, using [`majorGridLines`](../api/chart/axis#majorgridlines) and [`minorGridLines`](../api/chart/axis#minorgridlines) properties in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -580,7 +579,7 @@ You can customize the `width`, `color` and `dashArray` of the minor and maj **Tick Lines Customization** -You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](../api/chart/axis/#majorticklines) and [`minorTickLines`](../api/chart/axis/#minorticklines) properties in the axis. +You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](../api/chart/axis#majorticklines) and [`minorTickLines`](../api/chart/axis#minorticklines) properties in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -595,7 +594,7 @@ You can customize the  `width`, `color` and `size` of the minor and major **Place Axes at the Opposite Side** -To place an axis opposite from its original position, set [`opposedPosition`](../api/chart/axis/#opposedposition) property of the axis to true. +To place an axis opposite from its original position, set [`opposedPosition`](../api/chart/axis#opposedposition) property of the axis to true. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -625,7 +624,7 @@ In addition to primary X and Y axis, we can add n number of axis to the chart. S ## Smart Axis Labels -When the axis labels overlap with each other, you can use [`labelIntersectAction`](../api/chart/axis/#labelintersectaction) property in the axis, to place them smartly. +When the axis labels overlap with each other, you can use [`labelIntersectAction`](../api/chart/axis#labelintersectaction) property in the axis, to place them smartly. When setting `labelIntersectAction` as `Hide` diff --git a/chart-sdk/javascript/charts/category-axis.md b/chart-sdk/javascript/charts/category-axis.md index 4d1985823..1fbccef40 100644 --- a/chart-sdk/javascript/charts/category-axis.md +++ b/chart-sdk/javascript/charts/category-axis.md @@ -1,15 +1,14 @@ --- layout: post -title: Category axis in JavaScript Chart control | Syncfusion +title: Category axis in JavaScript Chart | Syncfusion description: Learn here all about Category axis in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Category axis -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Category axis in JavaScript Chart control +# Category axis in JavaScript Chart diff --git a/chart-sdk/javascript/charts/chart-annotations.md b/chart-sdk/javascript/charts/chart-annotations.md index 56bdeb0c8..487bd1e5d 100644 --- a/chart-sdk/javascript/charts/chart-annotations.md +++ b/chart-sdk/javascript/charts/chart-annotations.md @@ -1,15 +1,14 @@ --- layout: post -title: Chart annotations in JavaScript Chart control | Syncfusion +title: Annotations in JavaScript Chart | Syncfusion description: Learn here all about Chart annotations in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Chart annotations -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart annotations in JavaScript Chart control +# Annotations in JavaScript Chart 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. diff --git a/chart-sdk/javascript/charts/chart-appearance.md b/chart-sdk/javascript/charts/chart-appearance.md index fdc245c29..106b23187 100644 --- a/chart-sdk/javascript/charts/chart-appearance.md +++ b/chart-sdk/javascript/charts/chart-appearance.md @@ -1,15 +1,14 @@ --- layout: post -title: Chart appearance in JavaScript Chart control | Syncfusion +title: Appearance in JavaScript Chart | Syncfusion description: Learn here all about Chart appearance in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Chart appearance -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart appearance in JavaScript Chart control +# Appearance in JavaScript Chart ## Custom color palette diff --git a/chart-sdk/javascript/charts/chart-dimensions.md b/chart-sdk/javascript/charts/chart-dimensions.md index 3229e61f2..326f24874 100644 --- a/chart-sdk/javascript/charts/chart-dimensions.md +++ b/chart-sdk/javascript/charts/chart-dimensions.md @@ -1,15 +1,14 @@ --- layout: post -title: Chart dimensions in JavaScript Chart control | Syncfusion +title: Chart dimensions in JavaScript Chart | Syncfusion description: Learn here all about Chart dimensions in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Chart dimensions -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart dimensions in JavaScript Chart control +# Chart dimensions in JavaScript Chart ## Size for Container diff --git a/chart-sdk/javascript/charts/chart-print.md b/chart-sdk/javascript/charts/chart-print.md index 568db137c..d9ae96fbd 100644 --- a/chart-sdk/javascript/charts/chart-print.md +++ b/chart-sdk/javascript/charts/chart-print.md @@ -1,15 +1,14 @@ --- layout: post -title: Chart print in JavaScript Chart control | Syncfusion +title: Print and export in JavaScript Chart | Syncfusion description: Learn here all about Chart print in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Chart print -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart print in JavaScript Chart control +# Print and export in JavaScript Chart ## Print @@ -115,7 +114,7 @@ The chart can be exported as an image in the form of a base64 string by utilizin ## Excel export -You can export the rendered chart data to Excel in either `XLSX` or `CSV` format. The [`excelProperties`](../api/chart/iExportEventArgs/#excelproperties) property in the [`beforeExport`](../api/chart/iExportEventArgs/) event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths. +You can export the rendered chart data to Excel in either `XLSX` or `CSV` format. The [`excelProperties`](../api/chart/iExportEventArgs#excelproperties) property in the [`beforeExport`](../api/chart/iExportEventArgs) event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/chart-series.md b/chart-sdk/javascript/charts/chart-series.md index e6facc57d..765b60712 100644 --- a/chart-sdk/javascript/charts/chart-series.md +++ b/chart-sdk/javascript/charts/chart-series.md @@ -1,19 +1,18 @@ --- layout: post -title: Chart series in JavaScript Chart control | Syncfusion +title: Multiple series in JavaScript Chart | Syncfusion description: Learn here all about Chart series in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Chart series -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart series in JavaScript Chart control +# Multiple series in JavaScript Chart ## Multiple Series -You can add multiple series to the chart by using [`series`](../api/chart/seriesModel/) property. The series are rendered in the order as it is added to the series array. +You can add multiple series to the chart by using [`series`](../api/chart/seriesModel) property. The series are rendered in the order as it is added to the series array. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/cross-hair-and-track-ball.md b/chart-sdk/javascript/charts/cross-hair-and-track-ball.md index 77d2599fe..f6e646310 100644 --- a/chart-sdk/javascript/charts/cross-hair-and-track-ball.md +++ b/chart-sdk/javascript/charts/cross-hair-and-track-ball.md @@ -1,15 +1,14 @@ --- layout: post -title: Cross hair and track ball in JavaScript Chart control | Syncfusion +title: Crosshair and trackball in JavaScript Chart | Syncfusion description: Learn here all about Cross hair and track ball in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Cross hair and track ball -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Cross hair and track ball in JavaScript Chart control +# Crosshair and trackball in JavaScript Chart The crosshair feature displays vertical and horizontal guide lines that intersect at the mouse or touch position, helping to identify the corresponding axis values precisely. diff --git a/chart-sdk/javascript/charts/data-editing.md b/chart-sdk/javascript/charts/data-editing.md index 98f6deeb1..befcaf3e8 100644 --- a/chart-sdk/javascript/charts/data-editing.md +++ b/chart-sdk/javascript/charts/data-editing.md @@ -1,17 +1,16 @@ --- layout: post -title: Data editing in JavaScript Chart control | Syncfusion +title: Data editing in JavaScript Chart | Syncfusion description: Learn here all about Data editing in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Data editing -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data editing in JavaScript Chart control +# Data editing in JavaScript Chart ## Enable Data Editing diff --git a/chart-sdk/javascript/charts/data-labels.md b/chart-sdk/javascript/charts/data-labels.md index 8e190bae5..ba7407e8c 100644 --- a/chart-sdk/javascript/charts/data-labels.md +++ b/chart-sdk/javascript/charts/data-labels.md @@ -1,15 +1,14 @@ --- layout: post -title: Data labels in JavaScript Chart control | Syncfusion +title: Data labels in JavaScript Chart | Syncfusion description: Learn here all about Data labels in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Data labels -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data labels in JavaScript Chart control +# Data labels in JavaScript Chart 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`](../api/chart/dataLabelSettingsModel#visible-boolean) option to `true` in the `dataLabel` configuration. Labels automatically adjust to avoid overlapping and maintain readability. diff --git a/chart-sdk/javascript/charts/data-markers.md b/chart-sdk/javascript/charts/data-markers.md index 78caf3105..651bb3ea7 100644 --- a/chart-sdk/javascript/charts/data-markers.md +++ b/chart-sdk/javascript/charts/data-markers.md @@ -1,15 +1,14 @@ --- layout: post -title: Data markers in JavaScript Chart control | Syncfusion +title: Markers in JavaScript Chart | Syncfusion description: Learn here all about Data markers in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Data markers -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data markers in JavaScript Chart control +# Markers in JavaScript Chart Data markers are visual indicators placed at each data point on a series, helping to clearly identify and highlight individual values in your chart. Markers improve readability and accessibility, especially in line and area charts where data points may otherwise be unclear. Customize marker shape, color, size, and appearance to match your design requirements. diff --git a/chart-sdk/javascript/charts/date-time-axis.md b/chart-sdk/javascript/charts/date-time-axis.md index a8f19a816..10d69f57f 100644 --- a/chart-sdk/javascript/charts/date-time-axis.md +++ b/chart-sdk/javascript/charts/date-time-axis.md @@ -1,16 +1,15 @@ --- layout: post -title: Date time axis in JavaScript Chart control | Syncfusion +title: DateTime axis in JavaScript Chart | Syncfusion description: Learn here all about Date time axis in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Date time axis -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Date time axis in JavaScript Chart control +# DateTime axis in JavaScript Chart ## DateTime Axis diff --git a/chart-sdk/javascript/charts/dynamic-data-update.md b/chart-sdk/javascript/charts/dynamic-data-update.md index cc01bac7e..23c270702 100644 --- a/chart-sdk/javascript/charts/dynamic-data-update.md +++ b/chart-sdk/javascript/charts/dynamic-data-update.md @@ -1,15 +1,14 @@ --- layout: post -title: Dynamic data update in JavaScript Chart control | Syncfusion +title: Dynamic data update in JavaScript Chart | Syncfusion description: Learn here all about dynamic data update in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Dynamic Data Update -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic data update in JavaScript Chart control +# Dynamic data update in JavaScript Chart The JavaScript Chart control provides methods to dynamically modify data without requiring a full chart refresh. This enables real-time data visualization, interactive features, and responsive user experiences. Common scenarios include adding sensor readings, removing outdated data points, replacing entire datasets, and enabling click-based data manipulation. diff --git a/chart-sdk/javascript/charts/ej1-api-migration.md b/chart-sdk/javascript/charts/ej1-api-migration.md index bba8cfe2c..b549f4976 100644 --- a/chart-sdk/javascript/charts/ej1-api-migration.md +++ b/chart-sdk/javascript/charts/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 api migration in JavaScript Chart control | Syncfusion +title: Migration from Essential JS 1 in JavaScript Chart | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Ej1 api migration -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in JavaScript Chart control +# Migration from Essential JS 1 in JavaScript Chart This article describes the API migration process of the Chart component from Essential JS 1 to Essential JS 2. diff --git a/chart-sdk/javascript/charts/es5-getting-started.md b/chart-sdk/javascript/charts/es5-getting-started.md index 599b1dedf..90bce2c67 100644 --- a/chart-sdk/javascript/charts/es5-getting-started.md +++ b/chart-sdk/javascript/charts/es5-getting-started.md @@ -4,7 +4,6 @@ title: ES5 getting started with JavaScript Chart control | Syncfusion description: Check out and learn about ES5 getting started with JavaScript Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk Build your first Syncfusion JavaScript (ES5) application with a simple Chart control in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Chart from the CDN, initializes it with sample data, and renders an interactive chart. -> The `34.1.29` version segment in the CDN URLs is shown for reference. Replace it with the latest published version from the [Syncfusion EJ2 CDN](https://cdn.syncfusion.com/ej2/) when you start a new project. +> The `34.1.29` version segment in the CDN URLs is shown for reference. Replace it with the latest published version from the [Syncfusion EJ2 CDN](https://cdn.syncfusion.com/ej2) when you start a new project. ## Prerequisites diff --git a/chart-sdk/javascript/charts/feature-modules.md b/chart-sdk/javascript/charts/feature-modules.md index de350e292..05108ab02 100644 --- a/chart-sdk/javascript/charts/feature-modules.md +++ b/chart-sdk/javascript/charts/feature-modules.md @@ -1,15 +1,14 @@ --- layout: post -title: Module in JavaScript Chart control | Syncfusion +title: Feature modules in JavaScript Chart | Syncfusion description: Learn here all about Module in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Module -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Module in JavaScript Chart control +# Feature modules in JavaScript Chart The following available modules should be injected to extend the Chart's functionality. diff --git a/chart-sdk/javascript/charts/gradient.md b/chart-sdk/javascript/charts/gradient.md index c96050d51..b980d0f0d 100644 --- a/chart-sdk/javascript/charts/gradient.md +++ b/chart-sdk/javascript/charts/gradient.md @@ -1,16 +1,15 @@ --- layout: post -title: Gradient in JavaScript Chart control | Syncfusion +title: Gradient in JavaScript Chart | Syncfusion description: Learn here all about Gradient in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gradient -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gradient in JavaScript Chart control +# Gradient in JavaScript Chart diff --git a/chart-sdk/javascript/charts/how-to.md b/chart-sdk/javascript/charts/how-to.md index 2e08f324f..19f9371f2 100644 --- a/chart-sdk/javascript/charts/how-to.md +++ b/chart-sdk/javascript/charts/how-to.md @@ -58,7 +58,7 @@ To prevent the chart data label when the data value is 0, follow the given steps **Step 1**: -Get the point value and check whether the `args.point.y` value is zero or not by using the [`textRender`](https://ej2.syncfusion.com/documentation/api/chart/iTextRenderEventArgs/) event. If the value is zero, then set the `args.cancel` to true. +Get the point value and check whether the `args.point.y` value is zero or not by using the [`textRender`](https://ej2.syncfusion.com/documentation/api/chart/iTextRenderEventArgs) event. If the value is zero, then set the `args.cancel` to true. The output will appear as follows, @@ -75,14 +75,14 @@ The output will appear as follows, ## Format the tooltip value -Using [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/chart/iTooltipRenderEventArgs/) event, you can able to format the +Using [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/chart/iTooltipRenderEventArgs) event, you can able to format the datetime value instead of rendered value. To format the datetime value,please follow the steps below **Step 1**: -By using [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/chart/iTooltipRenderEventArgs/) event we can able to get the current point x value. Using this value to format the tooltip by using `formatDate` method. +By using [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/chart/iTooltipRenderEventArgs) event we can able to get the current point x value. Using this value to format the tooltip by using `formatDate` method. The output will appear as follows, @@ -122,13 +122,13 @@ To remove the new series from chart dynamically, pass the series index to the `r ## Display selected data for range selection -By using the [`dragComplete`](https://ej2.syncfusion.com/documentation/api/chart/iDragCompleteEventArgs/), you can get the selected data values for range selection. +By using the [`dragComplete`](https://ej2.syncfusion.com/documentation/api/chart/iDragCompleteEventArgs), you can get the selected data values for range selection. To display the selected data value, follow the given steps: **Step 1**: -Get the selected data point values and display the values through grid component by using the [`dragComplete`](https://ej2.syncfusion.com/documentation/api/chart/iDragCompleteEventArgs/) event. +Get the selected data point values and display the values through grid component by using the [`dragComplete`](https://ej2.syncfusion.com/documentation/api/chart/iDragCompleteEventArgs) event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -143,13 +143,13 @@ Get the selected data point values and display the values through grid component ## Customize the marker with different shape -By using the [`pointRender`](https://ej2.syncfusion.com/documentation/api/chart/iPointEventArgs/), you can customize the marker shape. +By using the [`pointRender`](https://ej2.syncfusion.com/documentation/api/chart/iPointEventArgs), you can customize the marker shape. To Customize the marker shape, follow the given steps: **Step 1**: -Customize the marker shape in each data point by using the [`pointRender`](https://ej2.syncfusion.com/documentation/api/chart/iPointEventArgs/) event. Using this event, you can set the `shape` value to the argument. +Customize the marker shape in each data point by using the [`pointRender`](https://ej2.syncfusion.com/documentation/api/chart/iPointEventArgs) event. Using this event, you can set the `shape` value to the argument. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -164,13 +164,13 @@ Customize the marker shape in each data point by using the [`pointRender`](https ## Customize each shape in legend -By using the [`legendRender`](https://ej2.syncfusion.com/documentation/api/chart/iLegendRenderEventArgs/), you can customize the legend shape. +By using the [`legendRender`](https://ej2.syncfusion.com/documentation/api/chart/iLegendRenderEventArgs), you can customize the legend shape. To Customize the legend shape, follow the given steps: **Step 1**: -Set the shape value for each legend using `args.shape` in [`legendRender`](https://ej2.syncfusion.com/documentation/api/chart/iLegendRenderEventArgs/) event. +Set the shape value for each legend using `args.shape` in [`legendRender`](https://ej2.syncfusion.com/documentation/api/chart/iLegendRenderEventArgs) event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -278,10 +278,10 @@ By using the grid’s `actionComplete` event and `getCurrentViewRecords` method, ## Show percentage value in pie tooltip -By using the [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/accumulation-chart/iAccTooltipRenderEventArgs/) event, you can show the percentage value for each point of pie series in tooltip. +By using the [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/accumulation-chart/iAccTooltipRenderEventArgs) event, you can show the percentage value for each point of pie series in tooltip. To show the percentage value in pie tooltip, follow the given steps: **Step 1**: -By using the [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/accumulation-chart/iAccTooltipRenderEventArgs/) event, you can get the `args.point.y` and `args.series.sumOfPoints` values. You can use these values to calculate the percentage value for each point of pie series. To display the percentage value in tooltip, use the `args.content` property. +By using the [`tooltipRender`](https://ej2.syncfusion.com/documentation/api/accumulation-chart/iAccTooltipRenderEventArgs) event, you can get the `args.point.y` and `args.series.sumOfPoints` values. You can use these values to calculate the percentage value for each point of pie series. To display the percentage value in tooltip, use the `args.content` property. diff --git a/chart-sdk/javascript/charts/how-to/add-series.md b/chart-sdk/javascript/charts/how-to/add-series.md index 313dbaa79..28baa3791 100644 --- a/chart-sdk/javascript/charts/how-to/add-series.md +++ b/chart-sdk/javascript/charts/how-to/add-series.md @@ -1,15 +1,14 @@ --- layout: post -title: Add series in JavaScript Chart control | Syncfusion +title: How to add or remove series in JavaScript Chart | Syncfusion description: Learn here all about Add series in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Add series -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Add series in JavaScript Chart control +# How to add or remove series in JavaScript Chart You can add or remove the chart series dynamically by using the `addSeries` or `removeSeries` method. diff --git a/chart-sdk/javascript/charts/how-to/axis-hide.md b/chart-sdk/javascript/charts/how-to/axis-hide.md index 59da7aca4..7ee0dbb76 100644 --- a/chart-sdk/javascript/charts/how-to/axis-hide.md +++ b/chart-sdk/javascript/charts/how-to/axis-hide.md @@ -1,17 +1,16 @@ --- layout: post -title: Axis hide in JavaScript Chart control | Syncfusion +title: How to hide axis on legend click in JavaScript Chart | Syncfusion description: Learn here all about Axis hide in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Axis hide -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis hide in JavaScript Chart control +# How to hide axis on legend click in JavaScript Chart -By using the [`chartMouseClick`](../../api/chart/chartModel/#chartmouseclick) event, you can hide the axis line through legend. +By using the [`chartMouseClick`](../../api/chart/chartModel#chartmouseclick) event, you can hide the axis line through legend. To hide the axis line through legend click, follow the given steps: @@ -19,7 +18,7 @@ To hide the axis line through legend click, follow the given steps: Create a chart with multiple axes. -By using the [`chartMouseClick`](../../api/chart/chartModel/#chartmousemove) event, you can get the legend's target ids. Using this event, you can also get the `yAxisName` of each axis, based on which you can hide the axis line when clicking the legend. +By using the [`chartMouseClick`](../../api/chart/chartModel#chartmousemove) event, you can get the legend's target ids. Using this event, you can also get the `yAxisName` of each axis, based on which you can hide the axis line when clicking the legend. The following code sample demonstrates the output. diff --git a/chart-sdk/javascript/charts/how-to/chart-tab.md b/chart-sdk/javascript/charts/how-to/chart-tab.md index 87b5f6432..2b6caa8f8 100644 --- a/chart-sdk/javascript/charts/how-to/chart-tab.md +++ b/chart-sdk/javascript/charts/how-to/chart-tab.md @@ -1,15 +1,14 @@ --- layout: post -title: Chart tab in JavaScript Chart control | Syncfusion +title: Chart tab in JavaScript Chart | Syncfusion description: Learn here all about Chart tab in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Chart tab -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart tab in JavaScript Chart control +# Chart tab in JavaScript Chart By using Tab control you can add the charts inside of the tab. Tab control contains content property. By setting container ID in content property, you can display chart in tab. diff --git a/chart-sdk/javascript/charts/how-to/clicked-data.md b/chart-sdk/javascript/charts/how-to/clicked-data.md index 17de86b34..21b33be50 100644 --- a/chart-sdk/javascript/charts/how-to/clicked-data.md +++ b/chart-sdk/javascript/charts/how-to/clicked-data.md @@ -1,15 +1,14 @@ --- layout: post -title: Clicked data in JavaScript Chart control | Syncfusion +title: How to get pie clicked data in JavaScript Chart | Syncfusion description: Learn here all about Clicked data in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Clicked data -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Clicked data in JavaScript Chart control +# How to get pie clicked data in JavaScript Chart By using the [`pointClick`](../../api/accumulation-chart#pointClick-emittypeIPointEventArgs) event, you can get the chart data of clicked area. diff --git a/chart-sdk/javascript/charts/how-to/data-label-template.md b/chart-sdk/javascript/charts/how-to/data-label-template.md index 2cb63eb39..304f51093 100644 --- a/chart-sdk/javascript/charts/how-to/data-label-template.md +++ b/chart-sdk/javascript/charts/how-to/data-label-template.md @@ -1,15 +1,14 @@ --- layout: post -title: Data label template in JavaScript Chart control | Syncfusion +title: How to use data label template in JavaScript Chart | Syncfusion description: Learn here all about Data label template in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Data label template -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Data label template in JavaScript Chart control +# How to use data label template in JavaScript Chart You can bind text and interior information for a point from dataSource other than x and y value. To change color for the background in the datalabel template, you can use `${point.text}`. diff --git a/chart-sdk/javascript/charts/how-to/dialog-chart.md b/chart-sdk/javascript/charts/how-to/dialog-chart.md index 24914d564..42ecbf7fd 100644 --- a/chart-sdk/javascript/charts/how-to/dialog-chart.md +++ b/chart-sdk/javascript/charts/how-to/dialog-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Dialog chart in JavaScript Chart control | Syncfusion +title: How to show chart in dialog in JavaScript Chart | Syncfusion description: Learn here all about Dialog chart in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Dialog chart -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dialog chart in JavaScript Chart control +# How to show chart in dialog in JavaScript Chart Using the `content` property of the dialog component, you can show the chart in dialog pop-up. diff --git a/chart-sdk/javascript/charts/how-to/dotted-line.md b/chart-sdk/javascript/charts/how-to/dotted-line.md index 9a1ec406d..47ccd5a3d 100644 --- a/chart-sdk/javascript/charts/how-to/dotted-line.md +++ b/chart-sdk/javascript/charts/how-to/dotted-line.md @@ -1,15 +1,14 @@ --- layout: post -title: Dotted line in JavaScript Chart control | Syncfusion +title: How to add dotted line in JavaScript Chart | Syncfusion description: Learn here all about Dotted line in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Dotted line -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dotted line in JavaScript Chart control +# How to add dotted line in JavaScript Chart By using `annotation`, you can add dotted lines in the chart. diff --git a/chart-sdk/javascript/charts/how-to/down-sampling.md b/chart-sdk/javascript/charts/how-to/down-sampling.md index 5bb6d1224..2ec55a497 100644 --- a/chart-sdk/javascript/charts/how-to/down-sampling.md +++ b/chart-sdk/javascript/charts/how-to/down-sampling.md @@ -1,21 +1,20 @@ --- layout: post -title: Down sampling in JavaScript Chart control | Syncfusion +title: How to downsample data in JavaScript Chart | Syncfusion description: Learn here all about Down sampling in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Down sampling -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Down sampling in JavaScript Chart control +# How to downsample data in JavaScript Chart Downsampling is the process of reducing the data rate. We have given a 2000 data points for chart. After applying downsampling algorithm, chart data points has been reduced and rendered with 400 data points. Downsampling data using the "Largest-Triangle-Three-Buckets algorithm"[`LTTB`](https://bl.ocks.org/FraserChapman/649f1aba28f6bc941d5c) which describes the point in the bucket that forms the largest triangle using the area of the triangles. This helps to reducing the number of points. -In Downsampling when we perform zooming, particular level of zoomed chart we can see the chart clearly with original data, so we can use original data for that level of zooming. This can be achieved by [`zoomComplete`](../../api/chart/#zoomcomplete) event. Refer the below sample for downsampling with zooming feature. +In Downsampling when we perform zooming, particular level of zoomed chart we can see the chart clearly with original data, so we can use original data for that level of zooming. This can be achieved by [`zoomComplete`](../../api/chart#zoomcomplete) event. Refer the below sample for downsampling with zooming feature. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/dynamic-chart.md b/chart-sdk/javascript/charts/how-to/dynamic-chart.md index cdd3da7ac..d98fd47f4 100644 --- a/chart-sdk/javascript/charts/how-to/dynamic-chart.md +++ b/chart-sdk/javascript/charts/how-to/dynamic-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Dynamic chart in JavaScript Chart control | Syncfusion +title: How to create a dynamic chart in JavaScript Chart | Syncfusion description: Learn here all about Dynamic chart in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Dynamic chart -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dynamic chart in JavaScript Chart control +# How to create a dynamic chart in JavaScript Chart By using html button, you can add the chart dynamically when click the button. diff --git a/chart-sdk/javascript/charts/how-to/exact-date.md b/chart-sdk/javascript/charts/how-to/exact-date.md index a97536ad9..d4ab6b180 100644 --- a/chart-sdk/javascript/charts/how-to/exact-date.md +++ b/chart-sdk/javascript/charts/how-to/exact-date.md @@ -1,15 +1,14 @@ --- layout: post -title: Exact date in JavaScript Chart control | Syncfusion +title: How to show exact date in JavaScript Chart | Syncfusion description: Learn here all about Exact date in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Exact date -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Exact date in JavaScript Chart control +# How to show exact date in JavaScript Chart By using button click you can show exact time or month after scrolling. Here we have changed `zooFactor` and `zoomPosition` based on time or month requirement. After scrolling you want show full month or full day data then you will customize the zoomFactor and zoomPosition of the chart and show exact time or month. diff --git a/chart-sdk/javascript/charts/how-to/footer.md b/chart-sdk/javascript/charts/how-to/footer.md index fcd5fd49e..76dba7747 100644 --- a/chart-sdk/javascript/charts/how-to/footer.md +++ b/chart-sdk/javascript/charts/how-to/footer.md @@ -1,15 +1,14 @@ --- layout: post -title: Footer in JavaScript Chart control | Syncfusion +title: How to add footer and watermark in JavaScript Chart | Syncfusion description: Learn here all about Footer in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Footer -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Footer in JavaScript Chart control +# How to add footer and watermark in JavaScript Chart By using `annotation`, you can place any html elements to chart in a desired view. diff --git a/chart-sdk/javascript/charts/how-to/grid-data-chart.md b/chart-sdk/javascript/charts/how-to/grid-data-chart.md index a1a0f0086..b2599d3c7 100644 --- a/chart-sdk/javascript/charts/how-to/grid-data-chart.md +++ b/chart-sdk/javascript/charts/how-to/grid-data-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Grid data chart in JavaScript Chart control | Syncfusion +title: How to visualize grid records in JavaScript Chart | Syncfusion description: Learn here all about Grid data chart in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Grid data chart -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grid data chart in JavaScript Chart control +# How to visualize grid records in JavaScript Chart You can visualize the data that returned by grid in chart. diff --git a/chart-sdk/javascript/charts/how-to/grid-data-pie.md b/chart-sdk/javascript/charts/how-to/grid-data-pie.md index dd22ce76b..f734c6c3b 100644 --- a/chart-sdk/javascript/charts/how-to/grid-data-pie.md +++ b/chart-sdk/javascript/charts/how-to/grid-data-pie.md @@ -1,15 +1,14 @@ --- layout: post -title: Grid data pie in JavaScript Chart control | Syncfusion +title: How to visualize grid records in pie chart in JavaScript Chart | Syncfusion description: Learn here all about Grid data pie in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Grid data pie -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Grid data pie in JavaScript Chart control +# How to visualize grid records in pie chart in JavaScript Chart You can visualize the filtered data that returned by grid in pie chart. diff --git a/chart-sdk/javascript/charts/how-to/hide-tool-tip.md b/chart-sdk/javascript/charts/how-to/hide-tool-tip.md index 210070625..389ee1c6b 100644 --- a/chart-sdk/javascript/charts/how-to/hide-tool-tip.md +++ b/chart-sdk/javascript/charts/how-to/hide-tool-tip.md @@ -1,23 +1,22 @@ --- layout: post -title: Hide tool tip in JavaScript Chart control | Syncfusion +title: How to hide tooltip in JavaScript Chart | Syncfusion description: Learn here all about Hide tool tip in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Hide tool tip -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Hide tool tip in JavaScript Chart control +# How to hide tooltip in JavaScript Chart -By using the [`tooltipRender`](../../api/chart/chartModel/#tooltiprender) event, you can cancel the tooltip for unselected series in the chart. +By using the [`tooltipRender`](../../api/chart/chartModel#tooltiprender) event, you can cancel the tooltip for unselected series in the chart. To hide the tooltip value in unselected series, follow the given steps: **Step 1**: -By using the [`tooltipRender`](../../api/chart/chartModel/#tooltiprender) event, you can get the series elements in the arguments. By using this argument we can compare whether seriesElementclasslist is deselected container or not. If it is true then we cancel the tooltip by setting the value for `args.cancel` as `true`. +By using the [`tooltipRender`](../../api/chart/chartModel#tooltiprender) event, you can get the series elements in the arguments. By using this argument we can compare whether seriesElementclasslist is deselected container or not. If it is true then we cancel the tooltip by setting the value for `args.cancel` as `true`. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/initial-scrollbar.md b/chart-sdk/javascript/charts/how-to/initial-scrollbar.md index d6e541ae2..2b9ff512d 100644 --- a/chart-sdk/javascript/charts/how-to/initial-scrollbar.md +++ b/chart-sdk/javascript/charts/how-to/initial-scrollbar.md @@ -1,17 +1,16 @@ --- layout: post -title: Initial scrollbar in JavaScript Chart control | Syncfusion +title: How to enable initial scrollbar in JavaScript Chart | Syncfusion description: Learn here all about Initial scrollbar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Initial scrollbar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Initial scrollbar in JavaScript Chart control +# How to enable initial scrollbar in JavaScript Chart -By setting `zoomFactor` in primaryXAxis and `isZoomed` value as `true` in [`load`](../../api/chart/chartModel/#load) event and `enableScrollbar` value as `true` in`zoomSettings`, you can make the scrollbar visible in initial rendering of chart. +By setting `zoomFactor` in primaryXAxis and `isZoomed` value as `true` in [`load`](../../api/chart/chartModel#load) event and `enableScrollbar` value as `true` in`zoomSettings`, you can make the scrollbar visible in initial rendering of chart. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/legend-customization.md b/chart-sdk/javascript/charts/how-to/legend-customization.md index ec28248c0..dc16b3995 100644 --- a/chart-sdk/javascript/charts/how-to/legend-customization.md +++ b/chart-sdk/javascript/charts/how-to/legend-customization.md @@ -1,23 +1,22 @@ --- layout: post -title: Legend customization in JavaScript Chart control | Syncfusion +title: How to customize legend in JavaScript Chart | Syncfusion description: Learn here all about Legend customization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Legend customization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend customization in JavaScript Chart control +# How to customize legend in JavaScript Chart -By using the [`legendRender`](../../api/chart/chartModel/#legendrender), you can customize the legend shape. +By using the [`legendRender`](../../api/chart/chartModel#legendrender), you can customize the legend shape. To Customize the legend shape, follow the given steps: **Step 1**: -Set the shape value for each legend using `args.shape` in [`legendRender`](../../api/chart/chartModel/#legendrender) event. +Set the shape value for each legend using `args.shape` in [`legendRender`](../../api/chart/chartModel#legendrender) event. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/legend-in-table.md b/chart-sdk/javascript/charts/how-to/legend-in-table.md index 763de1835..e78f59011 100644 --- a/chart-sdk/javascript/charts/how-to/legend-in-table.md +++ b/chart-sdk/javascript/charts/how-to/legend-in-table.md @@ -1,15 +1,14 @@ --- layout: post -title: Legend in table in JavaScript Chart control | Syncfusion +title: How to add legend in table in table in JavaScript Chart | Syncfusion description: Learn here all about Legend in table in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Legend in table -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in table in JavaScript Chart control +# How to add legend in table in table in JavaScript Chart The `annotation` property is used to add legend in table and the `multiLevelLabels` property is used to customize the axis label in table format. diff --git a/chart-sdk/javascript/charts/how-to/live-chart.md b/chart-sdk/javascript/charts/how-to/live-chart.md index 285d90732..7987d0929 100644 --- a/chart-sdk/javascript/charts/how-to/live-chart.md +++ b/chart-sdk/javascript/charts/how-to/live-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Live chart in JavaScript Chart control | Syncfusion +title: How to create a live chart in JavaScript Chart | Syncfusion description: Learn here all about Live chart in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Live chart -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Live chart in JavaScript Chart control +# How to create a live chart in JavaScript Chart You can update a chart with live data by using the set interval. diff --git a/chart-sdk/javascript/charts/how-to/marker-customization.md b/chart-sdk/javascript/charts/how-to/marker-customization.md index 554f3a0b0..7150e7521 100644 --- a/chart-sdk/javascript/charts/how-to/marker-customization.md +++ b/chart-sdk/javascript/charts/how-to/marker-customization.md @@ -1,23 +1,22 @@ --- layout: post -title: Marker customization in JavaScript Chart control | Syncfusion +title: How to customize markers in JavaScript Chart | Syncfusion description: Learn here all about Marker customization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Marker customization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Marker customization in JavaScript Chart control +# How to customize markers in JavaScript Chart -By using the [`pointRender`](../../api/chart/chartModel/#pointrender), you can customize the marker shape. +By using the [`pointRender`](../../api/chart/chartModel#pointrender), you can customize the marker shape. To Customize the marker shape, follow the given steps: **Step 1**: -Customize the marker shape in each data point by using the [`pointRender`](../../api/chart/chartModel/#pointrender) event. Using this event, you can set the `shape` value to the argument. +Customize the marker shape in each data point by using the [`pointRender`](../../api/chart/chartModel#pointrender) event. Using this event, you can set the `shape` value to the argument. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/percentage-tool-tip.md b/chart-sdk/javascript/charts/how-to/percentage-tool-tip.md index c7d046d31..fcf37d241 100644 --- a/chart-sdk/javascript/charts/how-to/percentage-tool-tip.md +++ b/chart-sdk/javascript/charts/how-to/percentage-tool-tip.md @@ -1,23 +1,22 @@ --- layout: post -title: Percentage tool tip in JavaScript Chart control | Syncfusion +title: How to show pie percentage in tooltip in JavaScript Chart | Syncfusion description: Learn here all about Percentage tool tip in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Percentage tool tip -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Percentage tool tip in JavaScript Chart control +# How to show pie percentage in tooltip in JavaScript Chart -By using the [`tooltipRender`](../../api/accumulation-chart/accumulationChartModel/#tooltiprender) event, you can show the percentage value for each point of pie series in tooltip. +By using the [`tooltipRender`](../../api/accumulation-chart/accumulationChartModel#tooltiprender) event, you can show the percentage value for each point of pie series in tooltip. To show the percentage value in pie tooltip, follow the given steps: **Step 1**: -By using the [`tooltipRender`](../../api/accumulation-chart/accumulationChartModel/#tooltiprender) event, you can get the `args.point.y` and `args.series.sumOfPoints` values. You can use these values to calculate the percentage value for each point of pie series. To display the percentage value in tooltip, use the `args.content` property. +By using the [`tooltipRender`](../../api/accumulation-chart/accumulationChartModel#tooltiprender) event, you can get the `args.point.y` and `args.series.sumOfPoints` values. You can use these values to calculate the percentage value for each point of pie series. To display the percentage value in tooltip, use the `args.content` property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/points-customization.md b/chart-sdk/javascript/charts/how-to/points-customization.md index 3bad5d14b..3d775c857 100644 --- a/chart-sdk/javascript/charts/how-to/points-customization.md +++ b/chart-sdk/javascript/charts/how-to/points-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Points customization in JavaScript Chart control | Syncfusion +title: How to customize points in JavaScript Chart | Syncfusion description: Learn here all about Points customization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Points customization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Points customization in JavaScript Chart control +# How to customize points in JavaScript Chart You can customize the series points with patterns by using the `pointColorMapping` property. diff --git a/chart-sdk/javascript/charts/how-to/prevent-data-label.md b/chart-sdk/javascript/charts/how-to/prevent-data-label.md index d1fc6ee06..a6ab4233d 100644 --- a/chart-sdk/javascript/charts/how-to/prevent-data-label.md +++ b/chart-sdk/javascript/charts/how-to/prevent-data-label.md @@ -1,21 +1,20 @@ --- layout: post -title: Prevent data label in JavaScript Chart control | Syncfusion +title: How to prevent data label in JavaScript Chart | Syncfusion description: Learn here all about Prevent data label in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Prevent data label -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Prevent data label in JavaScript Chart control +# How to prevent data label in JavaScript Chart To prevent the chart data label when the data value is 0, follow the given steps: **Step 1**: -Get the point value and check whether the `args.point.y` value is zero or not by using the [`textRender`](../../api/chart/chartModel/#textrender) event. If the value is zero, then set the `args.cancel` to true. +Get the point value and check whether the `args.point.y` value is zero or not by using the [`textRender`](../../api/chart/chartModel#textrender) event. If the value is zero, then set the `args.cancel` to true. The output will appear as follows, diff --git a/chart-sdk/javascript/charts/how-to/selected-data-grid.md b/chart-sdk/javascript/charts/how-to/selected-data-grid.md index d0b7262c9..bf1592cca 100644 --- a/chart-sdk/javascript/charts/how-to/selected-data-grid.md +++ b/chart-sdk/javascript/charts/how-to/selected-data-grid.md @@ -1,23 +1,22 @@ --- layout: post -title: Selected data grid in JavaScript Chart control | Syncfusion +title: How to display selected data in JavaScript Chart | Syncfusion description: Learn here all about Selected data grid in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Selected data grid -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selected data grid in JavaScript Chart control +# How to display selected data in JavaScript Chart -By using the [`dragComplete`](../../api/chart/chartModel/#dragcomplete), you can get the selected data values for range selection. +By using the [`dragComplete`](../../api/chart/chartModel#dragcomplete), you can get the selected data values for range selection. To display the selected data value, follow the given steps: **Step 1**: -Get the selected data point values and display the values through grid component by using the [`dragComplete`](../../api/chart/chartModel/#dragcomplete) event. +Get the selected data point values and display the values through grid component by using the [`dragComplete`](../../api/chart/chartModel#dragcomplete) event. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/how-to/series-visible.md b/chart-sdk/javascript/charts/how-to/series-visible.md index b7e0648bc..3d9f561e3 100644 --- a/chart-sdk/javascript/charts/how-to/series-visible.md +++ b/chart-sdk/javascript/charts/how-to/series-visible.md @@ -1,15 +1,14 @@ --- layout: post -title: Series visible in JavaScript Chart control | Syncfusion +title: How to show series on legend click in JavaScript Chart | Syncfusion description: Learn here all about Series visible in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Series visible -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series visible in JavaScript Chart control +# How to show series on legend click in JavaScript Chart By using the `chartMouseClick` event, you can show the series based on respective legend click. In this event, you can get the legend target id, using which you can get the current series index. Based on the index, you can set value of `visible` to `true` or `false`. diff --git a/chart-sdk/javascript/charts/how-to/stacking-total.md b/chart-sdk/javascript/charts/how-to/stacking-total.md index 220474a1c..c4284d141 100644 --- a/chart-sdk/javascript/charts/how-to/stacking-total.md +++ b/chart-sdk/javascript/charts/how-to/stacking-total.md @@ -1,15 +1,14 @@ --- layout: post -title: Stacking total in JavaScript Chart control | Syncfusion +title: How to display stacking series total in JavaScript Chart | Syncfusion description: Learn here all about Stacking total in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Stacking total -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Stacking total in JavaScript Chart control +# How to display stacking series total in JavaScript Chart By using the `annotation`, you can show any element in desired view. @@ -17,7 +16,7 @@ To show the total value in data points, follow the given steps: **Step 1**: -Define annotation for each x point in chart, now change the annotation value in chart by using the [`annotationRender`](../../api/chart/chartModel/#annotationrender) event. In this event, assign the stacked value of the last series to the annotation to show the total value of the +Define annotation for each x point in chart, now change the annotation value in chart by using the [`annotationRender`](../../api/chart/chartModel#annotationrender) event. In this event, assign the stacked value of the last series to the annotation to show the total value of the stacking series. {% tabs %} diff --git a/chart-sdk/javascript/charts/how-to/syn-pan.md b/chart-sdk/javascript/charts/how-to/syn-pan.md index 29d73083d..0025610fd 100644 --- a/chart-sdk/javascript/charts/how-to/syn-pan.md +++ b/chart-sdk/javascript/charts/how-to/syn-pan.md @@ -1,17 +1,16 @@ --- layout: post -title: Syn pan in JavaScript Chart control | Syncfusion +title: How to synchronize panning in JavaScript Chart | Syncfusion description: Learn here all about Syn pan in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Syn pan -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Syn pan in JavaScript Chart control +# How to synchronize panning in JavaScript Chart -Using the [`chartMouseMove`](../../api/chart/chartModel/#chartmousemove) event, you can achieve the synchronized panning between multiple charts. +Using the [`chartMouseMove`](../../api/chart/chartModel#chartmousemove) event, you can achieve the synchronized panning between multiple charts. To make a synchronized panning chart, follow the given steps: @@ -19,7 +18,7 @@ To make a synchronized panning chart, follow the given steps: Initially create two charts, and enable `zoomSettings` for both charts. -To use the [`chartMouseMove`](../../api/chart/chartModel/#chartmousemove) event, assign the first chart's `zoomFactor` and `zoomPosition` values to the second chart. Now, pan the first zoomed chart, and then the second chart will be panned automatically based on `zoomFactor` and `zoomPosition`. +To use the [`chartMouseMove`](../../api/chart/chartModel#chartmousemove) event, assign the first chart's `zoomFactor` and `zoomPosition` values to the second chart. Now, pan the first zoomed chart, and then the second chart will be panned automatically based on `zoomFactor` and `zoomPosition`. The following code sample demonstrates the output. diff --git a/chart-sdk/javascript/charts/how-to/threshold.md b/chart-sdk/javascript/charts/how-to/threshold.md index 65e7a8521..5fab62e1b 100644 --- a/chart-sdk/javascript/charts/how-to/threshold.md +++ b/chart-sdk/javascript/charts/how-to/threshold.md @@ -1,15 +1,14 @@ --- layout: post -title: Threshold in JavaScript Chart control | Syncfusion +title: How to add threshold in JavaScript Chart | Syncfusion description: Learn here all about Threshold in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Threshold -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Threshold in JavaScript Chart control +# How to add threshold in JavaScript Chart You can mark a threshold in chart by using the `stripline`. diff --git a/chart-sdk/javascript/charts/how-to/tool-tip-format.md b/chart-sdk/javascript/charts/how-to/tool-tip-format.md index e9bafb9ec..1888bff8b 100644 --- a/chart-sdk/javascript/charts/how-to/tool-tip-format.md +++ b/chart-sdk/javascript/charts/how-to/tool-tip-format.md @@ -1,23 +1,22 @@ --- layout: post -title: Tool tip format in JavaScript Chart control | Syncfusion +title: How to format tooltip in JavaScript Chart | Syncfusion description: Learn here all about Tool tip format in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Tool tip format -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip format in JavaScript Chart control +# How to format tooltip in JavaScript Chart -Using [`tooltipRender`](../../api/chart/chartModel/#tooltiprender) event, you can able to format the datetime value instead of rendered value. +Using [`tooltipRender`](../../api/chart/chartModel#tooltiprender) event, you can able to format the datetime value instead of rendered value. To format the datetime value,please follow the steps below **Step 1**: -By using [`tooltipRender`](../../api/chart/chartModel/#tooltiprender) event we can able to get the current point x value. Using this value to format the tooltip by using `formatDate` method. +By using [`tooltipRender`](../../api/chart/chartModel#tooltiprender) event we can able to get the current point x value. Using this value to format the tooltip by using `formatDate` method. The output will appear as follows, diff --git a/chart-sdk/javascript/charts/how-to/tool-tip-table.md b/chart-sdk/javascript/charts/how-to/tool-tip-table.md index 2a4041114..1dc5f4a4b 100644 --- a/chart-sdk/javascript/charts/how-to/tool-tip-table.md +++ b/chart-sdk/javascript/charts/how-to/tool-tip-table.md @@ -1,15 +1,14 @@ --- layout: post -title: Tool tip table in JavaScript Chart control | Syncfusion +title: How to show table in tooltip in JavaScript Chart | Syncfusion description: Learn here all about Tool tip table in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Tool tip table -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tool tip table in JavaScript Chart control +# How to show table in tooltip in JavaScript Chart You can show the tooltip as table by using template property in tooltip. diff --git a/chart-sdk/javascript/charts/internationalization.md b/chart-sdk/javascript/charts/internationalization.md index e1c264ca1..d65fb1215 100644 --- a/chart-sdk/javascript/charts/internationalization.md +++ b/chart-sdk/javascript/charts/internationalization.md @@ -1,15 +1,14 @@ --- layout: post -title: Internationalization in JavaScript Chart control | Syncfusion +title: Internationalization in JavaScript Chart | Syncfusion description: Learn here all about Internationalization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Internationalization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in JavaScript Chart control +# Internationalization in JavaScript Chart Chart provides support for internationalization for the following elements: diff --git a/chart-sdk/javascript/charts/legend.md b/chart-sdk/javascript/charts/legend.md index e9b6807e3..5f504dd51 100644 --- a/chart-sdk/javascript/charts/legend.md +++ b/chart-sdk/javascript/charts/legend.md @@ -1,16 +1,15 @@ --- layout: post -title: Legend in JavaScript Chart control | Syncfusion +title: Legend in JavaScript Chart | Syncfusion description: Learn here all about Legend in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Legend -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in JavaScript Chart control +# Legend in JavaScript Chart diff --git a/chart-sdk/javascript/charts/localization.md b/chart-sdk/javascript/charts/localization.md index c5c1f8431..35ad0776c 100644 --- a/chart-sdk/javascript/charts/localization.md +++ b/chart-sdk/javascript/charts/localization.md @@ -1,15 +1,14 @@ --- layout: post -title: Localization in JavaScript Chart control | Syncfusion +title: Localization in JavaScript Chart | Syncfusion description: Learn here all about Localization in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Localization -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Localization in JavaScript Chart control +# Localization in JavaScript Chart The localization library localizes the Chart's default text content. Static text used by chart features (for example, zoom toolbar labels) can be translated by providing a locale value and a translation object. diff --git a/chart-sdk/javascript/charts/logarithmic-axis.md b/chart-sdk/javascript/charts/logarithmic-axis.md index 75cb90062..8594acae9 100644 --- a/chart-sdk/javascript/charts/logarithmic-axis.md +++ b/chart-sdk/javascript/charts/logarithmic-axis.md @@ -1,15 +1,14 @@ --- layout: post -title: Logarithmic axis in JavaScript Chart control | Syncfusion +title: Logarithmic axis in JavaScript Chart | Syncfusion description: Learn here all about Logarithmic axis in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Logarithmic axis -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Logarithmic axis in JavaScript Chart control +# Logarithmic axis in JavaScript Chart diff --git a/chart-sdk/javascript/charts/multiple-panes.md b/chart-sdk/javascript/charts/multiple-panes.md index a644aa6e9..f486acb63 100644 --- a/chart-sdk/javascript/charts/multiple-panes.md +++ b/chart-sdk/javascript/charts/multiple-panes.md @@ -1,15 +1,14 @@ --- layout: post -title: Multiple panes in JavaScript Chart control | Syncfusion +title: Multiple panes in JavaScript Chart | Syncfusion description: Learn here all about Multiple panes in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Multiple panes -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Multiple panes in JavaScript Chart control +# Multiple panes in JavaScript Chart The chart area can be divided into multiple panes by defining rows and columns using the [`rows`](../api/chart/row) and [`columns`](../api/chart/column) collections. This feature is useful for displaying multiple related datasets within the same chart container while maintaining clear visual separation. diff --git a/chart-sdk/javascript/charts/numeric-axis.md b/chart-sdk/javascript/charts/numeric-axis.md index 2e3aba99f..02b748281 100644 --- a/chart-sdk/javascript/charts/numeric-axis.md +++ b/chart-sdk/javascript/charts/numeric-axis.md @@ -1,16 +1,15 @@ --- layout: post -title: Numeric axis in JavaScript Chart control | Syncfusion +title: Numeric axis in JavaScript Chart | Syncfusion description: Learn here all about Numeric axis in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Numeric axis -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Numeric axis in JavaScript Chart control +# Numeric axis in JavaScript Chart The [numeric axis](https://www.syncfusion.com/javascript-ui-controls/js-charts/chart-axis) is used to represent numeric values in a chart. By default, the `valueType` of an axis is set to `Double`, which is suitable for displaying continuous numerical data. diff --git a/chart-sdk/javascript/charts/polar-radar.md b/chart-sdk/javascript/charts/polar-radar.md index 6b529701e..8d124790e 100644 --- a/chart-sdk/javascript/charts/polar-radar.md +++ b/chart-sdk/javascript/charts/polar-radar.md @@ -1,20 +1,19 @@ --- layout: post -title: Polar radar in JavaScript Chart control | Syncfusion +title: Polar radar in JavaScript Chart | Syncfusion description: Learn here all about Polar radar in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Polar radar -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Polar radar in JavaScript Chart control +# Polar radar in JavaScript Chart ## Polar Chart -To render a polar series, use series [`type`](../api/chart/seriesModel/#type-string) as `Polar` and inject `PolarSeries` module using `Chart.Inject(PolarSeries)` method. +To render a polar series, use series [`type`](../api/chart/seriesModel#type-string) as `Polar` and inject `PolarSeries` module using `Chart.Inject(PolarSeries)` method. ### Draw Types @@ -22,9 +21,9 @@ Polar drawType property is used to change the series plotting type to line, colu **Line** -To render a line draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `Line` and inject `LineSeries` module using `Chart.Inject(LineSeries)` method. +To render a line draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `Line` and inject `LineSeries` module using `Chart.Inject(LineSeries)` method. -[`isClosed`](../api/chart/seriesModel/#isclosed-boolean) property specifies whether to join start and end point of a line series used in polar chart to form a closed path. Default value of isClosed is true. +[`isClosed`](../api/chart/seriesModel#isclosed-boolean) property specifies whether to join start and end point of a line series used in polar chart to form a closed path. Default value of isClosed is true. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -39,7 +38,7 @@ To render a line draw type, use series [`drawType`](../api/chart/seriesModel/#dr **Spline** -To render a spline draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `Spline` and inject `SplineSeries` module using `Chart.Inject(SplineSeries)` method. +To render a spline draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `Spline` and inject `SplineSeries` module using `Chart.Inject(SplineSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -54,7 +53,7 @@ To render a spline draw type, use series [`drawType`](../api/chart/seriesModel/# **Area** -To render a area draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `Area` and inject `AreaSeries` module using `Chart.Inject(AreaSeries)` method. +To render a area draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `Area` and inject `AreaSeries` module using `Chart.Inject(AreaSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -69,7 +68,7 @@ To render a area draw type, use series [`drawType`](../api/chart/seriesModel/#dr **Stacked Area** -To render a stacked area draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `StackingArea` and inject `StackingAreaSeries` moduleusing `Chart.Inject(StackingAreaSeries)` method. +To render a stacked area draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `StackingArea` and inject `StackingAreaSeries` moduleusing `Chart.Inject(StackingAreaSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -84,7 +83,7 @@ To render a stacked area draw type, use series [`drawType`](../api/chart/seriesM **Column** -To render a column draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `Column`. +To render a column draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `Column`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -99,7 +98,7 @@ To render a column draw type, use series [`drawType`](../api/chart/seriesModel/# **Stacked Column** -To render a stacked column draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `StackingColumn`. +To render a stacked column draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `StackingColumn`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -114,7 +113,7 @@ To render a stacked column draw type, use series [`drawType`](../api/chart/serie **Range Column** -To render a range column draw type, use series [`drawType`](../api/chart/seriesModel/#drawtype-string) as `RangeColumn`. +To render a range column draw type, use series [`drawType`](../api/chart/seriesModel#drawtype-string) as `RangeColumn`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -129,7 +128,7 @@ To render a range column draw type, use series [`drawType`](../api/chart/seriesM **Scatter** -To render a scatter draw type, use series [`DrawType`](../api/chart/seriesModel/#drawtype-string) as `Scatter` and inject `ScatterSeries` module using `Chart.Inject(ScatterSeries)` method. +To render a scatter draw type, use series [`DrawType`](../api/chart/seriesModel#drawtype-string) as `Scatter` and inject `ScatterSeries` module using `Chart.Inject(ScatterSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -144,7 +143,7 @@ To render a scatter draw type, use series [`DrawType`](../api/chart/seriesModel/ ## Radar Chart -To render a radar series, use series [`type`](../api/chart/seriesModel/#type-string) as `Radar` and inject `PolarSeries` module using `Chart.Inject(RadarSeries)` method. +To render a radar series, use series [`type`](../api/chart/seriesModel#type-string) as `Radar` and inject `PolarSeries` module using `Chart.Inject(RadarSeries)` method. ### Draw Type @@ -165,7 +164,7 @@ similar to Polar drawType, Radar draw property is used to change the series plot **Start Angle** -You can customize the start angle of the polar series using [`startAngle`](../api/chart/axis/#startangle-number) property. By default, `startAngle` is 0 degree. +You can customize the start angle of the polar series using [`startAngle`](../api/chart/axis#startangle-number) property. By default, `startAngle` is 0 degree. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -180,7 +179,7 @@ You can customize the start angle of the polar series using [`startAngle`](../ap **Coefficient in axis** -You can customize the radius of the polar series using [`coefficient`](../api/chart/axis/#coefficient-number) property. By default, `coefficient` is 100. +You can customize the radius of the polar series using [`coefficient`](../api/chart/axis#coefficient-number) property. By default, `coefficient` is 100. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -195,5 +194,5 @@ You can customize the radius of the polar series using [`coefficient`](../api/ch ## See Also -* [Data label](./data-labels/) -* [Tooltip](./tool-tip/) +* [Data label](./data-labels) +* [Tooltip](./tool-tip) diff --git a/chart-sdk/javascript/charts/render-methods.md b/chart-sdk/javascript/charts/render-methods.md index e240790ea..a900e6ed3 100644 --- a/chart-sdk/javascript/charts/render-methods.md +++ b/chart-sdk/javascript/charts/render-methods.md @@ -1,17 +1,16 @@ --- layout: post -title: Render methods in JavaScript Chart control | Syncfusion +title: Render methods in JavaScript Chart | Syncfusion description: Learn here all about Render methods in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Render methods -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Render methods in JavaScript Chart control +# Render methods in JavaScript Chart Chart uses following two rendering methods. diff --git a/chart-sdk/javascript/charts/selection.md b/chart-sdk/javascript/charts/selection.md index 49893baf4..b5178a215 100644 --- a/chart-sdk/javascript/charts/selection.md +++ b/chart-sdk/javascript/charts/selection.md @@ -1,16 +1,15 @@ --- layout: post -title: Selection in JavaScript Chart control | Syncfusion +title: Selection in JavaScript Chart | Syncfusion description: Learn here all about Selection in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Selection -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection in JavaScript Chart control +# Selection in JavaScript Chart The chart provides selection support for both series and individual data points when users interact with the chart using mouse clicks. diff --git a/chart-sdk/javascript/charts/series-labels.md b/chart-sdk/javascript/charts/series-labels.md index 1873f6507..312262a15 100644 --- a/chart-sdk/javascript/charts/series-labels.md +++ b/chart-sdk/javascript/charts/series-labels.md @@ -1,15 +1,14 @@ --- layout: post -title: Series label in JavaScript Chart control | Syncfusion +title: Series label in JavaScript Chart | Syncfusion description: Learn here all about Series label in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Series label -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Series label in JavaScript Chart control +# Series label in JavaScript Chart The series label displays the name of each series inline, positioned near the end of the series path or the last visible data point. This helps identify each series without referring to the legend. diff --git a/chart-sdk/javascript/charts/strip-line.md b/chart-sdk/javascript/charts/strip-line.md index 437fa996b..d09ed3312 100644 --- a/chart-sdk/javascript/charts/strip-line.md +++ b/chart-sdk/javascript/charts/strip-line.md @@ -1,16 +1,15 @@ --- layout: post -title: Strip line in JavaScript Chart control | Syncfusion +title: Stripline in JavaScript Chart | Syncfusion description: Learn here all about Strip line in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Strip line -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Strip line in JavaScript Chart control +# Stripline in JavaScript Chart diff --git a/chart-sdk/javascript/charts/synchronized-chart.md b/chart-sdk/javascript/charts/synchronized-chart.md index 20cb36804..60ea70647 100644 --- a/chart-sdk/javascript/charts/synchronized-chart.md +++ b/chart-sdk/javascript/charts/synchronized-chart.md @@ -1,15 +1,14 @@ --- layout: post -title: Synchronized Charts in JavaScript Chart control | Syncfusion +title: Synchronized Charts in JavaScript Chart | Syncfusion description: Learn here all about Synchronized Charts in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Synchronized charts -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Synchronized Charts in JavaScript Chart control +# Synchronized Charts in JavaScript Chart Synchronized charts allow multiple chart instances to share common interactions so that actions performed on one chart are reflected across the others. This approach is useful for comparing related datasets and analyzing trends consistently across multiple visualizations. diff --git a/chart-sdk/javascript/charts/technical-indicators.md b/chart-sdk/javascript/charts/technical-indicators.md index 8ef9ad341..a29c17e04 100644 --- a/chart-sdk/javascript/charts/technical-indicators.md +++ b/chart-sdk/javascript/charts/technical-indicators.md @@ -1,16 +1,15 @@ --- layout: post -title: Technical indicators in JavaScript Chart control | Syncfusion +title: Technical indicators in JavaScript Chart | Syncfusion description: Learn here all about Technical indicators in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Technical indicators -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Technical indicators in JavaScript Chart control +# Technical indicators in JavaScript Chart A technical indicator is a mathematical calculation based on historical price, volume, or open‑interest information that aims to forecast financial market direction. diff --git a/chart-sdk/javascript/charts/title-subtitle.md b/chart-sdk/javascript/charts/title-subtitle.md index ea52e61f2..90cdd6723 100644 --- a/chart-sdk/javascript/charts/title-subtitle.md +++ b/chart-sdk/javascript/charts/title-subtitle.md @@ -1,15 +1,14 @@ --- layout: post -title: Title in JavaScript Chart control | Syncfusion +title: Title and subtitle in JavaScript Chart | Syncfusion description: Learn here all about Title in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Title -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Chart title and subtitle in JavaScript Chart component +# Title and subtitle in JavaScript Chart component Chart titles and subtitles help provide context for the visualized data. The title typically indicates the main subject or metric represented in the chart, while the subtitle adds supporting details such as data sources, time ranges, or explanatory notes. Both elements can be customized in terms of position, alignment, and style to align with application design requirements. diff --git a/chart-sdk/javascript/charts/tool-tip.md b/chart-sdk/javascript/charts/tool-tip.md index 7bafcc71a..43c39e561 100644 --- a/chart-sdk/javascript/charts/tool-tip.md +++ b/chart-sdk/javascript/charts/tool-tip.md @@ -1,15 +1,14 @@ --- layout: post -title: Tooltip in JavaScript Chart control | Syncfusion +title: Tooltip in JavaScript Chart | Syncfusion description: Learn here all about Tooltip in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Tooltip -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in JavaScript Chart control +# Tooltip in JavaScript Chart diff --git a/chart-sdk/javascript/charts/trend-lines.md b/chart-sdk/javascript/charts/trend-lines.md index 99ae1b592..485c7648b 100644 --- a/chart-sdk/javascript/charts/trend-lines.md +++ b/chart-sdk/javascript/charts/trend-lines.md @@ -1,16 +1,15 @@ --- layout: post -title: Trend lines in JavaScript Chart control | Syncfusion +title: Trendlines in JavaScript Chart | Syncfusion description: Learn here all about Trend lines in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Trend lines -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Trend lines in JavaScript Chart control +# Trendlines in JavaScript Chart 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. diff --git a/chart-sdk/javascript/charts/understanding-chart.md b/chart-sdk/javascript/charts/understanding-chart.md index 97576d2c0..029e4b636 100644 --- a/chart-sdk/javascript/charts/understanding-chart.md +++ b/chart-sdk/javascript/charts/understanding-chart.md @@ -3,8 +3,7 @@ layout: post title: Understanding JavaScript Chart control | Syncfusion description: Learn here all about Understanding the Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Understanding -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/charts/user-interaction.md b/chart-sdk/javascript/charts/user-interaction.md index 0237c1b7a..a69f73305 100644 --- a/chart-sdk/javascript/charts/user-interaction.md +++ b/chart-sdk/javascript/charts/user-interaction.md @@ -1,16 +1,15 @@ --- layout: post -title: User interaction in JavaScript Chart control | Syncfusion +title: User Interaction in JavaScript Chart | Syncfusion description: Learn here all about User interaction in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: User interaction -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# User interaction in JavaScript Chart control +# User Interaction in JavaScript Chart @@ -22,7 +21,7 @@ Chart will display details about the points through tooltip, when the mouse is m **Enable Tooltip for Data Point** -By default, tooltip is not visible. Enable the tooltip by setting [`enable`](../api/chart/tooltipSettings/#enable) property to true and by injecting `Tooltip` module using `Chart.Inject(Tooltip)`. +By default, tooltip is not visible. Enable the tooltip by setting [`enable`](../api/chart/tooltipSettings#enable) property to true and by injecting `Tooltip` module using `Chart.Inject(Tooltip)`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -71,7 +70,7 @@ Any HTML elements can be displayed in the tooltip by using the ‘template’ pr **Customize the Appearance of Tooltip** -The [`fill`](../api/chart/tooltipSettings/#fill) and [`border`](../api/chart/tooltipSettings/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/chart/tooltipSettings/#textstyle) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](../api/chart/tooltipSettings#fill) and [`border`](../api/chart/tooltipSettings#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/chart/tooltipSettings#textstyle) property in the tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -90,9 +89,9 @@ The [`fill`](../api/chart/tooltipSettings/#fill) and [`border`](../api/chart/too Chart can be zoomed in three ways. -* Selection - By setting [`enableSelectionZooming`](../api/chart/zoomSettingsModel/#enableselectionzooming) property to true in `zoomSettings`, you can zoom the chart by using the rubber band selection. -* Mousewheel - By setting [`enableMouseWheelZooming`](../api/chart/zoomSettingsModel/#enablemousewheelzooming) property to true in `zoomSettings`, you can zoomin and zoomout the chart by scrolling the mouse wheel. -* Pinch - By setting [`enablePinchZooming`](../api/chart/zoomSettingsModel/#enablepinchzooming) property to true in `zoomSettings`, you can zoom the chart through pinch gesture in touch enabled devices. +* Selection - By setting [`enableSelectionZooming`](../api/chart/zoomSettingsModel#enableselectionzooming) property to true in `zoomSettings`, you can zoom the chart by using the rubber band selection. +* Mousewheel - By setting [`enableMouseWheelZooming`](../api/chart/zoomSettingsModel#enablemousewheelzooming) property to true in `zoomSettings`, you can zoomin and zoomout the chart by scrolling the mouse wheel. +* Pinch - By setting [`enablePinchZooming`](../api/chart/zoomSettingsModel#enablepinchzooming) property to true in `zoomSettings`, you can zoom the chart through pinch gesture in touch enabled devices. >Pinch zooming is supported only in browsers that support multi-touch gestures. Currently IE11, Chrome and Opera browsers support multi-touch in desktop devices. @@ -111,7 +110,7 @@ After zooming the chart, a zooming toolbar will appear with `zoom`,`zoomin`, `zo **Modes of Zooming** -The [`mode`](../api/chart/zoomSettingsModel/#mode) property in zoomSettings specifies whether the chart is allowed to scale along the horizontal axis or vertical axis. The default value of the mode is XY (both axis). +The [`mode`](../api/chart/zoomSettingsModel#mode) property in zoomSettings specifies whether the chart is allowed to scale along the horizontal axis or vertical axis. The default value of the mode is XY (both axis). There are three types of mode. @@ -132,7 +131,7 @@ There are three types of mode. **Customizing Zooming Toolbar** -By default, zoomin, zoomout, pan and reset buttons will be displayed for zoomed chart. You can customize to show your desire tools in the toolbar using [`toolbarItems`](../api/chart/zoomSettingsModel/#toolbaritems) property. +By default, zoomin, zoomout, pan and reset buttons will be displayed for zoomed chart. You can customize to show your desire tools in the toolbar using [`toolbarItems`](../api/chart/zoomSettingsModel#toolbaritems) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -153,7 +152,7 @@ Crosshair has a vertical and horizontal line to view the value of the axis at mo **Enable Crosshair** -Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettingsModel/#enable) property in the `crosshair`. Likewise tooltip label for an axis can be enabled by using [`enable`](../api/chart/crosshairTooltipModel/#enable) property of `crosshairTooltip` in the corresponding axis. +Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettingsModel#enable) property in the `crosshair`. Likewise tooltip label for an axis can be enabled by using [`enable`](../api/chart/crosshairTooltipModel#enable) property of `crosshairTooltip` in the corresponding axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -168,7 +167,7 @@ Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettin **Customization** -The [`fill`](../api/chart/crosshairTooltipModel/#fill) and [`textStyle`](../api/chart/crosshairTooltipModel/#textstyle) prop property of the `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`](../api/chart/crosshairSettingsModel/#line) property in the crosshair. +The [`fill`](../api/chart/crosshairTooltipModel#fill) and [`textStyle`](../api/chart/crosshairTooltipModel#textstyle) prop property of the `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`](../api/chart/crosshairSettingsModel#line) property in the crosshair. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -188,8 +187,8 @@ The [`fill`](../api/chart/crosshairTooltipModel/#fill) and [`textStyle`](../api/ 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, we need to inject `Crosshair` module and `Tooltip` module using `Chart.Inject(Crosshair, Tooltip)`. -Trackball can be enabled by setting the [`enable`](../api/chart/crosshairSettingsModel/#enable) property of the crosshair to true and -[`shared`](../api/chart/tooltipSettingsModel/#shared) property in `tooltip` to true in chart. +Trackball can be enabled by setting the [`enable`](../api/chart/crosshairSettingsModel#enable) property of the crosshair to true and +[`shared`](../api/chart/tooltipSettingsModel#shared) property in `tooltip` to true in chart. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -271,7 +270,7 @@ To fetch a collection of data under a particular region, you have to set `select * DragX - Allow us to select data with respect to horizontal axis. * DragY - Allow us to select data with respect to vertical axis. -The selected data’s are returned as an array collection in the [`dragComplete`](../api/chart/chartModel/#dragcomplete) event. +The selected data’s are returned as an array collection in the [`dragComplete`](../api/chart/chartModel#dragcomplete) event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -286,7 +285,7 @@ The selected data’s are returned as an array collection in the [`dragComplete` **Selection Type** -You can select multiple points or series, by enabling the [`isMultiSelect`](../api/chart/chartModel/#ismultiselect) +You can select multiple points or series, by enabling the [`isMultiSelect`](../api/chart/chartModel#ismultiselect) property. {% tabs %} @@ -302,7 +301,7 @@ property. **Customizing Selection Style** -You can apply custom style to selected points or series with [`selectionStyle`](../api/chart/series/#selectionstyle) property. +You can apply custom style to selected points or series with [`selectionStyle`](../api/chart/series#selectionstyle) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -317,7 +316,7 @@ You can apply custom style to selected points or series with [`selectionStyle`]( **Selection on Load** -You can able to select a point or series programmatically on a chart using [`selectedDataIndexes`](../api/chart/chartModel/#selecteddataindexes) property. +You can able to select a point or series programmatically on a chart using [`selectedDataIndexes`](../api/chart/chartModel#selecteddataindexes) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/charts/working-with-data.md b/chart-sdk/javascript/charts/working-with-data.md index d56c07fdd..d851cdfc5 100644 --- a/chart-sdk/javascript/charts/working-with-data.md +++ b/chart-sdk/javascript/charts/working-with-data.md @@ -1,16 +1,15 @@ --- layout: post -title: Working with data in JavaScript Chart control | Syncfusion +title: Working with data in JavaScript Chart | Syncfusion description: Learn here all about Working with data in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Working with data -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in JavaScript Chart control +# Working with data in JavaScript Chart The JavaScript Chart control supports multiple data binding approaches to suit different application scenarios. Data can be bound from local JSON arrays, dynamically loaded on demand with lazy loading, or fetched from remote services using various adaptor patterns. This guide covers all available data binding methods, helping you choose the right approach for your use case based on data size, performance requirements, and backend architecture. diff --git a/chart-sdk/javascript/charts/zooming.md b/chart-sdk/javascript/charts/zooming.md index f2dd0a926..85473be95 100644 --- a/chart-sdk/javascript/charts/zooming.md +++ b/chart-sdk/javascript/charts/zooming.md @@ -1,15 +1,14 @@ --- layout: post -title: Zooming in JavaScript Chart control | Syncfusion +title: Zooming in JavaScript Chart | Syncfusion description: Learn here all about Zooming in Syncfusion JavaScript Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Zooming -publishingplatform: chart-sdk +control: Chart documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Zooming in JavaScript Chart control +# Zooming in JavaScript Chart ## Enable zooming diff --git a/chart-sdk/javascript/circular-gauge/accessibility.md b/chart-sdk/javascript/circular-gauge/accessibility.md index 188b838f0..313020d12 100644 --- a/chart-sdk/javascript/circular-gauge/accessibility.md +++ b/chart-sdk/javascript/circular-gauge/accessibility.md @@ -1,16 +1,15 @@ --- layout: post -title: Accessibility in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Accessibility in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Accessibility in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Accessibility -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript Circular gauge control +# Accessibility in JavaScript Circular Gauge The Circular Gauge control follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/javascript/circular-gauge/ej1-api-migration.md b/chart-sdk/javascript/circular-gauge/ej1-api-migration.md index 49082b837..d02c29ee8 100644 --- a/chart-sdk/javascript/circular-gauge/ej1-api-migration.md +++ b/chart-sdk/javascript/circular-gauge/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 api migration in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Ej1 api migration in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Ej1 api migration in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Ej1 api migration -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in JavaScript Circular gauge control +# Ej1 api migration in JavaScript Circular Gauge This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/javascript/circular-gauge/es5-getting-started.md b/chart-sdk/javascript/circular-gauge/es5-getting-started.md index e20f124b4..8778c40b2 100644 --- a/chart-sdk/javascript/circular-gauge/es5-getting-started.md +++ b/chart-sdk/javascript/circular-gauge/es5-getting-started.md @@ -4,7 +4,6 @@ title: ES5 getting started with JavaScript Circular Gauge control | Syncfusion description: Create and configure your first Syncfusion JavaScript ES5 Circular Gauge using CDN resources, sample data, and pointer settings. platform: chart-sdk control: Circular Gauge -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/circular-gauge/gauge-animation.md b/chart-sdk/javascript/circular-gauge/gauge-animation.md index 9966be059..f7002fa79 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-animation.md +++ b/chart-sdk/javascript/circular-gauge/gauge-animation.md @@ -4,7 +4,6 @@ title: Animation in JavaScript Circular Gauge control | Syncfusion description: Learn here all about animation in the Syncfusion JavaScript Circular Gauge control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Circular Gauge -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/circular-gauge/gauge-annotations.md b/chart-sdk/javascript/circular-gauge/gauge-annotations.md index 133a6a1a7..91d5061d8 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-annotations.md +++ b/chart-sdk/javascript/circular-gauge/gauge-annotations.md @@ -1,21 +1,20 @@ --- layout: post -title: Gauge annotations in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge annotations in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Annotations in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge annotations in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge annotations -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge annotations in JavaScript Circular gauge control +# Annotations in JavaScript Circular Gauge Annotations are used to mark a specific area of interest in the gauge with texts, shapes or images. ## Content -You can place any custom element on the axis area by assigning the id of the element to [`content`](../api/circular-gauge/annotation/#content-string) property of [`annotation`](../api/circular-gauge/annotation) object. +You can place any custom element on the axis area by assigning the id of the element to [`content`](../api/circular-gauge/annotation#content-string) property of [`annotation`](../api/circular-gauge/annotation) object. >Note: To use annotation feature, we need to inject `Annotations` module using `CircularGauge.Inject(Annotations)` method. @@ -32,7 +31,7 @@ You can place any custom element on the axis area by assigning the id of the ele ## Position -Annotation can be placed around the axis by using [`radius`](../api/circular-gauge/annotation/#radius-string) and [`angle`](../api/circular-gauge/annotation/#angle-number) property. +Annotation can be placed around the axis by using [`radius`](../api/circular-gauge/annotation#radius-string) and [`angle`](../api/circular-gauge/annotation#angle-number) property. For example, if the angle is 90 degree and the radius is 110%, then the annotation, will be placed at the right side of the axis. Radius of the annotation takes value either in pixel or percentage. By setting value in percentage, annotation gets its position with respect to its axis radius. @@ -65,4 +64,4 @@ As the annotation allows you to place any custom element, we can initialize a ga ## See also -* [Tooltip for Annotation](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction/#tooltip-for-annotation) \ No newline at end of file +* [Tooltip for Annotation](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction#tooltip-for-annotation) \ No newline at end of file diff --git a/chart-sdk/javascript/circular-gauge/gauge-appearance.md b/chart-sdk/javascript/circular-gauge/gauge-appearance.md index e7dc5a2ef..18a65db56 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-appearance.md +++ b/chart-sdk/javascript/circular-gauge/gauge-appearance.md @@ -1,20 +1,19 @@ --- layout: post -title: Gauge appearance in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge appearance in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Appearance in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge appearance in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge appearance -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge appearance in JavaScript Circular gauge control +# Appearance in JavaScript Circular Gauge ## Gauge Title -Circular gauge can be given a title by using [`title`](../api/circular-gauge/#title-string) property, to show the information about the gauge. -Title can be customized by using [`titleStyle`](../api/circular-gauge/#titlestyle-fontmodel) property in gauge. +Circular gauge can be given a title by using [`title`](../api/circular-gauge#title-string) property, to show the information about the gauge. +Title can be customized by using [`titleStyle`](../api/circular-gauge#titlestyle-fontmodel) property in gauge. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -29,9 +28,9 @@ Title can be customized by using [`titleStyle`](../api/circular-gauge/#titlestyl ## Gauge Position -Gauge can be positioned anywhere in the container with the help of [`centerX`](../api/circular-gauge/#centerx-string) and [`centerY`](../api/circular-gauge/#centery-string) property and it accepts values either in percentage or in pixels. -The default value of the [`centerX`](../api/circular-gauge/#centerx-string) and -[`centerY`](../api/circular-gauge/#centery-string) property is 50%, which means gauge will get rendered to the centre of the container. +Gauge can be positioned anywhere in the container with the help of [`centerX`](../api/circular-gauge#centerx-string) and [`centerY`](../api/circular-gauge#centery-string) property and it accepts values either in percentage or in pixels. +The default value of the [`centerX`](../api/circular-gauge#centerx-string) and +[`centerY`](../api/circular-gauge#centery-string) property is 50%, which means gauge will get rendered to the centre of the container. **In Pixel** @@ -51,7 +50,7 @@ You can set the mid point of the gauge in pixel as demonstrated below, **In Percentage** By setting the value in percentage, gauge gets its mid point with respect to its plot area. -For example, when the [`centerX`](../api/circular-gauge/#centerx-string) value as '0%' and [`centerY`](../api/circular-gauge/#centery-string) value is ‘50%’, gauge will get positioned at the top left corner of the plot area. +For example, when the [`centerX`](../api/circular-gauge#centerx-string) value as '0%' and [`centerY`](../api/circular-gauge#centery-string) value is ‘50%’, gauge will get positioned at the top left corner of the plot area. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -68,7 +67,7 @@ For example, when the [`centerX`](../api/circular-gauge/#centerx-string) value a **Customize the gauge background** -Using [`background`](../api/circular-gauge/#background-string) and [`border`](../api/circular-gauge/#border-bordermodel) properties, you can change the background color and border of the circular gauge. +Using [`background`](../api/circular-gauge#background-string) and [`border`](../api/circular-gauge#border-bordermodel) properties, you can change the background color and border of the circular gauge. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -83,7 +82,7 @@ Using [`background`](../api/circular-gauge/#background-string) and [`border`](.. **Gauge Margin** -You can set margin for gauge from its container through [`margin`](../api/circular-gauge/#margin-marginmodel) property. +You can set margin for gauge from its container through [`margin`](../api/circular-gauge#margin-marginmodel) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/circular-gauge/gauge-axes.md b/chart-sdk/javascript/circular-gauge/gauge-axes.md index be71949c9..e8013f376 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-axes.md +++ b/chart-sdk/javascript/circular-gauge/gauge-axes.md @@ -1,22 +1,21 @@ --- layout: post -title: Gauge axes in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge axes in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Axes in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge axes in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge axes -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge axes in JavaScript Circular gauge control +# Axes in JavaScript Circular Gauge By default, gauge will be displayed with an axis. Each axis contains its own ranges, pointers and annotation. ## Axis Customization You can customize the width and color of an axis line by using [`lineStyle`](../api/circular-gauge/line) property. -Background for an axis can be customized by using [`background`](../api/circular-gauge/axis/#background-string) +Background for an axis can be customized by using [`background`](../api/circular-gauge/axis#background-string) property. {% tabs %} @@ -32,7 +31,7 @@ property. ## Angles and Direction -Circular gauge axis can sweep from 0 to 360 degrees. By default start angle of an axis is 200 degree and end angle is 160 degree and you can customize this option by using [`startAngle`](../api/circular-gauge/axis/#startangle-number) and [`endAngle`](../api/circular-gauge/axis/#endangle-number) +Circular gauge axis can sweep from 0 to 360 degrees. By default start angle of an axis is 200 degree and end angle is 160 degree and you can customize this option by using [`startAngle`](../api/circular-gauge/axis#startangle-number) and [`endAngle`](../api/circular-gauge/axis#endangle-number) property. {% tabs %} @@ -46,7 +45,7 @@ property. {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/circular-gauge/gauge-axes-cs2" %} -The [`direction`](../api/circular-gauge/axis/#direction-string) property enables you to render the gauge axis either in `ClockWise` or in `AntiClockWise` direction. +The [`direction`](../api/circular-gauge/axis#direction-string) property enables you to render the gauge axis either in `ClockWise` or in `AntiClockWise` direction. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -62,7 +61,7 @@ The [`direction`](../api/circular-gauge/axis/#direction-string) property enable ## Axis Radius By default, radius of an axis is calculated based on the available size. -You can customize this, by using [`radius`](../api/circular-gauge/axis/#radius-string) property. +You can customize this, by using [`radius`](../api/circular-gauge/axis#radius-string) property. It takes value either in `percentage` or in `pixel`. **In Pixel** @@ -98,9 +97,9 @@ For example, when the radius is ‘50%’, gauge renders to half of the availabl ## Ticks -You can customize the [`height`](../api/circular-gauge/tickModel/#color-string), -[`color`](../api/circular-gauge/tickModel/#color-string) and [`width`](../api/circular-gauge/tickModel/#width-number) of major ticks and minor ticks by using [`majorTicks`](../api/circular-gauge/axis/#majorticks-tickmodel) and [`minorTicks`](../api/circular-gauge/axis/#minorticks-tickmodel) property. -By default, [`interval`](../api/circular-gauge/tickModel/#interval-number) for +You can customize the [`height`](../api/circular-gauge/tickModel#color-string), +[`color`](../api/circular-gauge/tickModel#color-string) and [`width`](../api/circular-gauge/tickModel#width-number) of major ticks and minor ticks by using [`majorTicks`](../api/circular-gauge/axis#majorticks-tickmodel) and [`minorTicks`](../api/circular-gauge/axis#minorticks-tickmodel) property. +By default, [`interval`](../api/circular-gauge/tickModel#interval-number) for `majorTicks` will be calculated automatically and also you can customize the interval for major and minor ticks using `interval` property. {% tabs %} @@ -116,8 +115,8 @@ By default, [`interval`](../api/circular-gauge/tickModel/#interval-number) for **Tick Position** -Both minor and major ticks can be moved by using [`offset`](../api/circular-gauge/tickModel/#offset-number) and [`position`](../api/circular-gauge/tickModel/#position-string) property. The [`offset`](../api/circular-gauge/tickModel/#offset-number) defines the distance between the axis and ticks. -By default, offset value is 0. The [`position`](../api/circular-gauge/tickModel/#position-string) will place the ticks either inside or outside of the axis. +Both minor and major ticks can be moved by using [`offset`](../api/circular-gauge/tickModel#offset-number) and [`position`](../api/circular-gauge/tickModel#position-string) property. The [`offset`](../api/circular-gauge/tickModel#offset-number) defines the distance between the axis and ticks. +By default, offset value is 0. The [`position`](../api/circular-gauge/tickModel#position-string) will place the ticks either inside or outside of the axis. By default, ticks will be placed `inside` the axis. {% tabs %} @@ -133,7 +132,7 @@ By default, ticks will be placed `inside` the axis. ## Labels -Labels of an axis can be customized by using [`font`](../api/circular-gauge/labelModel/#font-fontmodel) property in [`labelStyle`](../api/circular-gauge/axis/#labelstyle-labelmodel) options. +Labels of an axis can be customized by using [`font`](../api/circular-gauge/labelModel#font-fontmodel) property in [`labelStyle`](../api/circular-gauge/axis#labelstyle-labelmodel) options. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -148,10 +147,10 @@ Labels of an axis can be customized by using [`font`](../api/circular-gauge/labe **Label Position** -Labels can be moved by using [`offset`](../api/circular-gauge/labelModel/#offset-number) or [`position`](../api/circular-gauge/labelModel/#position-string) property. -The [`offset`](../api/circular-gauge/labelModel/#offset-number) defines the distance between the labels and ticks. +Labels can be moved by using [`offset`](../api/circular-gauge/labelModel#offset-number) or [`position`](../api/circular-gauge/labelModel#position-string) property. +The [`offset`](../api/circular-gauge/labelModel#offset-number) defines the distance between the labels and ticks. By default, offset value is 0. -The [`position`](../api/circular-gauge/labelModel/#position-string) will place the labels either inside or outside of the axis. +The [`position`](../api/circular-gauge/labelModel#position-string) will place the labels either inside or outside of the axis. By default, labels will be placed `inside` the axis. {% tabs %} @@ -182,7 +181,7 @@ If the last label is not in the visible range, it will be hidden by default. If **Auto Angle** -Labels can be swept along the axis angle by enabling [`autoAngle`](../api/circular-gauge/labelModel/#autoangle-boolean) property. +Labels can be swept along the axis angle by enabling [`autoAngle`](../api/circular-gauge/labelModel#autoangle-boolean) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -198,7 +197,7 @@ Labels can be swept along the axis angle by enabling [`autoAngle`](../api/circul **Smart Labels** When an axis makes a complete circle, then the first and last label of the axis will get overlap with each other. -In this scenario, you can either hide 1st or last label using [`hiddenLabel`](../api/circular-gauge/labelModel/#hiddenlabel-string) property. +In this scenario, you can either hide 1st or last label using [`hiddenLabel`](../api/circular-gauge/labelModel#hiddenlabel-string) property. When `hiddenLabel` value is `First`,then the 1st label will be hidden and when the `hiddenLabel` value is 'Last', then the last label will be hidden. @@ -215,7 +214,7 @@ When `hiddenLabel` value is `First`,then the 1st label will be hidden and when t **Label Format** -Axis labels can be formatted by using [`format`](../api/circular-gauge/labelModel/#format-string) property in [`labelStyle`](../api/circular-gauge/label) and its supports all globalize format. +Axis labels can be formatted by using [`format`](../api/circular-gauge/labelModel#format-string) property in [`labelStyle`](../api/circular-gauge/label) and its supports all globalize format. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -319,7 +318,7 @@ When the axis labels overlap with each other, you can hide the intersected lab ## Minimum and Maximum -The [`minimum`](../api/circular-gauge/axis/#minimum-number) and [`maximum`](../api/circular-gauge/axis/#maximum-number) properties +The [`minimum`](../api/circular-gauge/axis#minimum-number) and [`maximum`](../api/circular-gauge/axis#maximum-number) properties enables you to customize the start and end values of an axis. {% tabs %} diff --git a/chart-sdk/javascript/circular-gauge/gauge-dimensions.md b/chart-sdk/javascript/circular-gauge/gauge-dimensions.md index 984f73314..c65f5a23b 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-dimensions.md +++ b/chart-sdk/javascript/circular-gauge/gauge-dimensions.md @@ -1,16 +1,15 @@ --- layout: post -title: Gauge dimensions in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge dimensions in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Dimensions in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge dimensions in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge dimensions -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge dimensions in JavaScript Circular gauge control +# Dimensions in JavaScript Circular Gauge ## Size for Container @@ -35,7 +34,7 @@ Circular gauge can render to its container size. You can set the size via inline ## Size for Circular Gauge -You can also set size for the gauge directly through [`width`](../api/circular-gauge/#width-string) and [`height`](../api/circular-gauge/#height-string) properties. +You can also set size for the gauge directly through [`width`](../api/circular-gauge#width-string) and [`height`](../api/circular-gauge#height-string) properties. **In Pixel** diff --git a/chart-sdk/javascript/circular-gauge/gauge-legend.md b/chart-sdk/javascript/circular-gauge/gauge-legend.md index 5f1bd5776..7d36b5313 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-legend.md +++ b/chart-sdk/javascript/circular-gauge/gauge-legend.md @@ -1,15 +1,14 @@ --- layout: post -title: Gauge legend in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge legend in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Legend in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge legend in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge legend -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge legend in JavaScript Circular gauge control +# Legend in JavaScript Circular Gauge Legend provides valuable information for interpreting what the circular gauge axis range displays, and they can be represented in various colors, shapes, and other identifiers based on the data. It gives a breakdown of what each symbol represents in the axis range of circular gauge. @@ -142,7 +141,7 @@ By default, paging will be enabled if the legend items exceed the legend bounds. ## Legend text customization -You can customize the legend text using [`legendText`](../api/circular-gauge/range/#legendtext) property in `ranges`. +You can customize the legend text using [`legendText`](../api/circular-gauge/range#legendtext) property in `ranges`. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/circular-gauge/gauge-pointers.md b/chart-sdk/javascript/circular-gauge/gauge-pointers.md index ce4e19ca7..915fc9cf0 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-pointers.md +++ b/chart-sdk/javascript/circular-gauge/gauge-pointers.md @@ -1,18 +1,17 @@ --- layout: post -title: Gauge pointers in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge pointers in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Aointers in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge pointers in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge pointers -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge pointers in JavaScript Circular gauge control +# Aointers in JavaScript Circular Gauge -Pointers are used to indicate values on the axis. Value of the pointer can be modified using the [`value`](../api/circular-gauge/pointer/#value-number) property. +Pointers are used to indicate values on the axis. Value of the pointer can be modified using the [`value`](../api/circular-gauge/pointer#value-number) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -25,12 +24,12 @@ Pointers are used to indicate values on the axis. Value of the pointer can be mo {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/circular-gauge/gauge-pointers-cs1" %} -Gauge supports 3 types of pointers such as `Needle`, `RangeBar` and `Marker`. You can choose any one of the pointer by using [`type`](../api/circular-gauge/pointer/#type-string) property. +Gauge supports 3 types of pointers such as `Needle`, `RangeBar` and `Marker`. You can choose any one of the pointer by using [`type`](../api/circular-gauge/pointer#type-string) property. ## Needle Pointers -A needle pointer contains three parts, a needle, a cap / knob and a tail. The length of the needle can be customized by using [`radius`](../api/circular-gauge/pointer/#radius-string) property. The length of the tail can be -customized by using [`length`](../api/circular-gauge/needleTailModel/#length-string) property. The radius of the cap can be customized by using [`radius`](../api/circular-gauge/capModel/#radius-number) in cap object. The needle and tail +A needle pointer contains three parts, a needle, a cap / knob and a tail. The length of the needle can be customized by using [`radius`](../api/circular-gauge/pointer#radius-string) property. The length of the tail can be +customized by using [`length`](../api/circular-gauge/needleTailModel#length-string) property. The radius of the cap can be customized by using [`radius`](../api/circular-gauge/capModel#radius-number) in cap object. The needle and tail length takes value either in `percentage` or `pixel`. {% tabs %} @@ -47,8 +46,8 @@ length takes value either in `percentage` or `pixel`. **Customization** -Needle color and width can be customized by using [`color`](../api/circular-gauge/pointer/#color-string) and [`pointerWidth`](../api/circular-gauge/pointer/#pointerwidth-number) property. -Cap and tails can be customized by using [`cap`](../api/circular-gauge/pointer/#cap-capmodel) and [`needleTail`](../api/circular-gauge/pointer/#needletail-needletailmodel) object. +Needle color and width can be customized by using [`color`](../api/circular-gauge/pointer#color-string) and [`pointerWidth`](../api/circular-gauge/pointer#pointerwidth-number) property. +Cap and tails can be customized by using [`cap`](../api/circular-gauge/pointer#cap-capmodel) and [`needleTail`](../api/circular-gauge/pointer#needletail-needletailmodel) object. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -61,7 +60,7 @@ Cap and tails can be customized by using [`cap`](../api/circular-gauge/pointer/# {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/circular-gauge/gauge-pointers-cs3" %} -The appearance of the needle pointer can be customized by using [`needleStartWidth`](../api/circular-gauge/pointer/#needlestartwidth) and [`needleEndWidth`](../api/circular-gauge/pointer/#needleendwidth). +The appearance of the needle pointer can be customized by using [`needleStartWidth`](../api/circular-gauge/pointer#needlestartwidth) and [`needleEndWidth`](../api/circular-gauge/pointer#needleendwidth). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -93,7 +92,7 @@ RangeBar starts from the beginning of the gauge and ends at the pointer value. **Customization** RangeBar can be customized in terms of color, border and thickness by using -[`color`](../api/circular-gauge/pointer/#color-string), [`border`](../api/circular-gauge/pointer/#border-bordermodel) and [`pointerWidth`](../api/circular-gauge/pointer/#pointerwidth-number) property. +[`color`](../api/circular-gauge/pointer#color-string), [`border`](../api/circular-gauge/pointer#border-bordermodel) and [`pointerWidth`](../api/circular-gauge/pointer#pointerwidth-number) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -123,14 +122,14 @@ The start and end pointers of range bar in the circular gauge are rounded to for ## Marker Pointer -Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using [`markerShape`](../api/circular-gauge/pointer/#markershape-string) property in pointer. Gauge supports the below marker shape. +Different type of marker shape can be used to mark the pointer value in axis. You can change the marker shape using [`markerShape`](../api/circular-gauge/pointer#markershape-string) property in pointer. Gauge supports the below marker shape. * Circle * Rectangle * Triangle * InvertedTriangle * Diamond -We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting [`markerShape`](../api/circular-gauge/pointer/#markershape-string) to Image and assigning  image path to [`imageUrl`](../api/circular-gauge/pointer/#imageurl-string) in pointer. +We can use image instead of rendering marker shape to denote the pointer value. It can be achieved by setting [`markerShape`](../api/circular-gauge/pointer#markershape-string) to Image and assigning  image path to [`imageUrl`](../api/circular-gauge/pointer#imageurl-string) in pointer. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -146,10 +145,10 @@ We can use image instead of rendering marker shape to denote the pointer value. **Customization** The marker can be customized in terms of color, border, width and height by using -[`color`](../api/circular-gauge/pointer/#color-string), -[`border`](../api/circular-gauge/pointer/#border-bordermodel), -[`markerWidth`](../api/circular-gauge/pointer/#markerwidth-number) and -[`markerHeight`](../api/circular-gauge/pointer/#markerheight-number) property in +[`color`](../api/circular-gauge/pointer#color-string), +[`border`](../api/circular-gauge/pointer#border-bordermodel), +[`markerWidth`](../api/circular-gauge/pointer#markerwidth-number) and +[`markerHeight`](../api/circular-gauge/pointer#markerheight-number) property in [`pointer`](../api/circular-gauge/pointer). {% tabs %} @@ -165,7 +164,7 @@ The marker can be customized in terms of color, border, width and height by usin ## Dragging pointer -The pointers can be dragged along the axis line by clicking and dragging them. To enable or disable the drag functionality for all pointers across all axes, use the [enablePointerDrag](../api/circular-gauge/circularGaugeModel/#enablepointerdrag) property. When this property is set to **true**, all pointers can be dynamically adjusted by dragging. Setting it to **false** keeps all pointers fixed in their specified positions. +The pointers can be dragged along the axis line by clicking and dragging them. To enable or disable the drag functionality for all pointers across all axes, use the [enablePointerDrag](../api/circular-gauge/circularGaugeModel#enablepointerdrag) property. When this property is set to **true**, all pointers can be dynamically adjusted by dragging. Setting it to **false** keeps all pointers fixed in their specified positions. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -180,7 +179,7 @@ The pointers can be dragged along the axis line by clicking and dragging them. T ### Enabling drag functionality for a specific pointer -To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](../api/circular-gauge/pointerModel/#enabledrag) property in the required pointer model. +To enable or disable the drag functionality for specific pointers along the axis line, use the [enableDrag](../api/circular-gauge/pointerModel#enabledrag) property in the required pointer model. >When the `enableDrag` property is enabled for any individual pointer model, the `enablePointerDrag` property becomes ineffective. @@ -215,9 +214,9 @@ In addition to the default pointer, you can add n number of pointer to an axis b ## Animation Pointer will get animate on loading the gauge, this can be handled by using -[`animation`](../api/circular-gauge/pointer/#animation-animationmodel) property in pointer. -The [`enable`](../api/circular-gauge/animationModel/#enable-boolean) property in animation allows you to enable or disable the animation. -The [`duration`](../api/circular-gauge/animationModel/#duration-number) property specify the duration of the animation in milliseconds. +[`animation`](../api/circular-gauge/pointer#animation-animationmodel) property in pointer. +The [`enable`](../api/circular-gauge/animationModel#enable-boolean) property in animation allows you to enable or disable the animation. +The [`duration`](../api/circular-gauge/animationModel#duration-number) property specify the duration of the animation in milliseconds. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -239,7 +238,7 @@ Gradient support allows to add multiple colors in the ranges and pointers of the ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`startValue`](../api/circular-gauge/linearGradient/#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](../api/circular-gauge/linearGradient/#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/linearGradient/#colorstop) property. +Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient can be set using the [`startValue`](../api/circular-gauge/linearGradient#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](../api/circular-gauge/linearGradient#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/linearGradient#colorstop) property. The linear gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample. @@ -256,7 +255,7 @@ The linear gradient can be applied to all pointer types like marker, range bar a ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](../api/circular-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](../api/circular-gauge/radialGradient/#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/radialGradient/#colorstop) property. +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](../api/circular-gauge/radialGradient#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](../api/circular-gauge/radialGradient#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/radialGradient#colorstop) property. The radial gradient can be applied to all pointer types like marker, range bar and needle. To do so, follow the below code sample. diff --git a/chart-sdk/javascript/circular-gauge/gauge-print-and-export.md b/chart-sdk/javascript/circular-gauge/gauge-print-and-export.md index 8296b938e..c20405c6f 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-print-and-export.md +++ b/chart-sdk/javascript/circular-gauge/gauge-print-and-export.md @@ -1,20 +1,19 @@ --- layout: post -title: Gauge print and export in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge print and export in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Print and Export in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge print and export in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge print and export -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge print and export in JavaScript Circular gauge control +# Print and Export in JavaScript Circular Gauge ## Print -To use the print functionality, we should set the [`allowPrint`](../api/circular-gauge/#allowprint) property to **true**. The rendered circular gauge can be printed directly from the browser by calling the method [`print`](../api/circular-gauge/#print). +To use the print functionality, we should set the [`allowPrint`](../api/circular-gauge#allowprint) property to **true**. The rendered circular gauge can be printed directly from the browser by calling the method [`print`](../api/circular-gauge#print). {% tabs %} @@ -32,7 +31,7 @@ To use the print functionality, we should set the [`allowPrint`](../api/circular ### Image Export -To use the image export functionality, we should set the [`allowImageExport`](../api/circular-gauge/#allowimageexport) property to **true**. The rendered circular gauge can be exported as an image using the [`export`](../api/circular-gauge/#export) method. The method requires two parameters: image type and file name. The circular gauge can be exported as an image in the following formats. +To use the image export functionality, we should set the [`allowImageExport`](../api/circular-gauge#allowimageexport) property to **true**. The rendered circular gauge can be exported as an image using the [`export`](../api/circular-gauge#export) method. The method requires two parameters: image type and file name. The circular gauge can be exported as an image in the following formats. * JPEG * PNG @@ -49,7 +48,7 @@ To use the image export functionality, we should set the [`allowImageExport`](.. {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/circular-gauge/gauge-export-cs1" %} -We can get the image file as base64 string for the JPEG and PNG formats. The circular gauge can be exported to image as a base64 string using the [`export`](../api/circular-gauge/#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string. +We can get the image file as base64 string for the JPEG and PNG formats. The circular gauge can be exported to image as a base64 string using the [`export`](../api/circular-gauge#export) method. There are four parameters required: image type, file name, orientation of the exported PDF document which must be set as **null** for image export and finally **allowDownload** which should be set as **false** to return base64 string. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -64,7 +63,7 @@ We can get the image file as base64 string for the JPEG and PNG formats. The cir ### PDF Export -To use the PDF export functionality, we should set the [`allowPdfExport`](../api/circular-gauge/#allowpdfexport) property to **true**. The rendered circular gauge can be exported as PDF using the [`export`](../api/circular-gauge/#export) method. The [`export`](../api/circular-gauge/#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and "0" indicates portrait and "1" indicates landscape. +To use the PDF export functionality, we should set the [`allowPdfExport`](../api/circular-gauge#allowpdfexport) property to **true**. The rendered circular gauge can be exported as PDF using the [`export`](../api/circular-gauge#export) method. The [`export`](../api/circular-gauge#export) method requires three parameters: file type, file name and orientation of the PDF document. The orientation setting is optional and "0" indicates portrait and "1" indicates landscape. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/circular-gauge/gauge-ranges.md b/chart-sdk/javascript/circular-gauge/gauge-ranges.md index db26cc932..11ee763cf 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-ranges.md +++ b/chart-sdk/javascript/circular-gauge/gauge-ranges.md @@ -1,22 +1,21 @@ --- layout: post -title: Gauge ranges in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge ranges in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Ranges in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge ranges in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge ranges -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge ranges in JavaScript Circular gauge control +# Ranges in JavaScript Circular Gauge -You can categories certain interval on gauge axis using [`ranges`](../api/circular-gauge/range/#properties) property. +You can categories certain interval on gauge axis using [`ranges`](../api/circular-gauge/range#properties) property. ## Start and End -Start and end value of a range in an axis can be customized by using [`start`](../api/circular-gauge/range/#start-number) and [`end`](../api/circular-gauge/range/#end-number) properties. +Start and end value of a range in an axis can be customized by using [`start`](../api/circular-gauge/range#start-number) and [`end`](../api/circular-gauge/range#end-number) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -31,7 +30,7 @@ Start and end value of a range in an axis can be customized by using [`start`](. ## Customization -Color and thickness of the range can be customized by using [`color`](../api/circular-gauge/range/#color-string),[`startWidth`](../api/circular-gauge/range/#startwidth-number) and [`endWidth`](../api/circular-gauge/range/#endwidth-number) property. +Color and thickness of the range can be customized by using [`color`](../api/circular-gauge/range#color-string),[`startWidth`](../api/circular-gauge/range#startwidth-number) and [`endWidth`](../api/circular-gauge/range#endwidth-number) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -46,7 +45,7 @@ Color and thickness of the range can be customized by using [`color`](../api/cir ## Radius -You can place the range inside or outside of the axis by using [`radius`](../api/circular-gauge/range/#radius-string) property. The radius of the range can takes value either in percentage or in pixels. By default, ranges +You can place the range inside or outside of the axis by using [`radius`](../api/circular-gauge/range#radius-string) property. The radius of the range can takes value either in percentage or in pixels. By default, ranges take 100% of the axis radius. **In Pixel** @@ -81,7 +80,7 @@ By setting value in percentage, range gets its dimension with respect to its axi ## Dragging Range -The ranges can be dragged over the axis line by clicking and dragging the same. To enable or disable the range drag, use the [`enableRangeDrag`](../api/circular-gauge/circularGaugeModel/#enablerangedrag) property. +The ranges can be dragged over the axis line by clicking and dragging the same. To enable or disable the range drag, use the [`enableRangeDrag`](../api/circular-gauge/circularGaugeModel#enablerangedrag) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -136,7 +135,7 @@ Gradient support allows to add multiple colors in the ranges and pointers of the ### Linear Gradient -Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the [`startValue`](../api/circular-gauge/linearGradient/#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](../api/circular-gauge/linearGradient/#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/linearGradient/#colorstop) property. +Using linear gradient, colors will be applied in a linear progression. The start value of the linear gradient will be set using the [`startValue`](../api/circular-gauge/linearGradient#startvalue) property. The end value of the linear gradient will be set using the [`endValue`](../api/circular-gauge/linearGradient#endvalue) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/linearGradient#colorstop) property. To apply linear gradient to the range, follow the below code sample. @@ -153,7 +152,7 @@ To apply linear gradient to the range, follow the below code sample. ### Radial Gradient -Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](../api/circular-gauge/radialGradient/#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](../api/circular-gauge/radialGradient/#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/radialGradient/#colorstop) property. +Using radial gradient, colors will be applied in circular progression. The inner circle position of the radial gradient will be set using the [`innerPosition`](../api/circular-gauge/radialGradient#innerposition) property. The outer circle position of the radial gradient can be set using the [`outerPosition`](../api/circular-gauge/radialGradient#outerposition) property. The color stop values such as color, opacity and offset are set using [`colorStop`](../api/circular-gauge/radialGradient#colorstop) property. To apply radial gradient to the range, follow the below code sample. @@ -170,4 +169,4 @@ To apply radial gradient to the range, follow the below code sample. ## See also -* [Tooltip for Ranges](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction/#tooltip-for-ranges) \ No newline at end of file +* [Tooltip for Ranges](https://ej2.syncfusion.com/documentation/circular-gauge/gauge-user-interaction#tooltip-for-ranges) \ No newline at end of file diff --git a/chart-sdk/javascript/circular-gauge/gauge-user-interaction.md b/chart-sdk/javascript/circular-gauge/gauge-user-interaction.md index 59364a5e7..bc109a327 100644 --- a/chart-sdk/javascript/circular-gauge/gauge-user-interaction.md +++ b/chart-sdk/javascript/circular-gauge/gauge-user-interaction.md @@ -1,16 +1,15 @@ --- layout: post -title: Gauge user interaction in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge user interaction in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: User Interaction in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Gauge user interaction in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Gauge user interaction -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge user interaction in JavaScript Circular gauge control +# User Interaction in JavaScript Circular Gauge ## Tooltip for pointers @@ -18,7 +17,7 @@ Circular gauge will displays the pointer details through [tooltip](../api/circul **Enable Tooltip** -By default, tooltip is not visible. Enable the tooltip by setting [`enable`](../api/circular-gauge/tooltipSettings/#enable-boolean) property to true and injecting `GaugeTooltip` module using `CircularGauge.Inject(GaugeTooltip)` method. +By default, tooltip is not visible. Enable the tooltip by setting [`enable`](../api/circular-gauge/tooltipSettings#enable-boolean) property to true and injecting `GaugeTooltip` module using `CircularGauge.Inject(GaugeTooltip)` method. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -33,7 +32,7 @@ By default, tooltip is not visible. Enable the tooltip by setting [`enable`](../ **Template** -Any HTML elements can be displayed in the tooltip by using the [`template`](../api/circular-gauge/tooltipSettings/#template-string) property of the tooltip. +Any HTML elements can be displayed in the tooltip by using the [`template`](../api/circular-gauge/tooltipSettings#template-string) property of the tooltip. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -104,7 +103,7 @@ The following code example shows the tooltip for the ranges and annotation. ## Pointer Drag Pointers can be dragged over the axis value. This can be achieved by clicking and dragging the pointer. To enable or disable the pointer drag, you can use -[`enablePointerDrag`](../api/circular-gauge/#enablepointerdrag-boolean) property. +[`enablePointerDrag`](../api/circular-gauge#enablepointerdrag-boolean) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/circular-gauge/how-to/arc-gauge.md b/chart-sdk/javascript/circular-gauge/how-to/arc-gauge.md index 2ca0391d8..ebaa487f7 100644 --- a/chart-sdk/javascript/circular-gauge/how-to/arc-gauge.md +++ b/chart-sdk/javascript/circular-gauge/how-to/arc-gauge.md @@ -1,15 +1,14 @@ --- layout: post -title: Arc Gauge in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Arc Gauge in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: How to create an arc gauge in JavaScript Circular Gauge | Syncfusion +description: Learn how to create an arc gauge in the Syncfusion JavaScript Circular Gauge by customizing the startAngle and endAngle properties. platform: chart-sdk -control: Arc Gauge -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# JavaScript Arc gauge control +# How to create an arc gauge in JavaScript Circular Gauge An arc gauge in a Circular Gauge can be created by setting the startAngle and endAngle properties. These angles define the portion of the circle to be displayed as the gauge arc. diff --git a/chart-sdk/javascript/circular-gauge/how-to/gauge-range.md b/chart-sdk/javascript/circular-gauge/how-to/gauge-range.md index be64010de..3d9a6ba39 100644 --- a/chart-sdk/javascript/circular-gauge/how-to/gauge-range.md +++ b/chart-sdk/javascript/circular-gauge/how-to/gauge-range.md @@ -1,15 +1,14 @@ --- layout: post -title: Gauge range in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Gauge range in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: How to add a range to the Circular Gauge dynamically | Syncfusion +description: Learn how to add a range to the Circular Gauge dynamically on a button click by pushing new ranges to the axes collection. platform: chart-sdk -control: Gauge range -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Gauge range in JavaScript Circular gauge control +# How to add a range to the Circular Gauge dynamically ## Add a range to the circular gauge dynamically diff --git a/chart-sdk/javascript/circular-gauge/internationalization.md b/chart-sdk/javascript/circular-gauge/internationalization.md index 51dac98b8..3f62b390d 100644 --- a/chart-sdk/javascript/circular-gauge/internationalization.md +++ b/chart-sdk/javascript/circular-gauge/internationalization.md @@ -1,28 +1,27 @@ --- layout: post -title: Internationalization in JavaScript Circular gauge control | Syncfusion -description: Learn here all about Internationalization in Syncfusion JavaScript Circular gauge control of Syncfusion Essential JS 2 and more. +title: Internationalization in JavaScript Circular Gauge | Syncfusion +description: Learn here all about Internationalization in Syncfusion JavaScript Circular Gauge of Syncfusion Essential JS 2 and more. platform: chart-sdk -control: Internationalization -publishingplatform: chart-sdk +control: Circular Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Internationalization in JavaScript Circular gauge control +# Internationalization in JavaScript Circular Gauge Circular Gauge provides internationalization support for below elements. * Axis Labels * Tooltip -For more information about number formatter, you can refer [internationalization](https://ej2.syncfusion.com/documentation/common/internationalization/). +For more information about number formatter, you can refer [internationalization](https://ej2.syncfusion.com/documentation/common/internationalization). ## Globalization Globalization is the process of designing and developing a control that works in different cultures/locales. -Internationalization library is used to globalize number in the Circular Gauge using [format](../api/circular-gauge/label/#format-string) property in [labelStyle](../api/circular-gauge/label). +Internationalization library is used to globalize number in the Circular Gauge using [format](../api/circular-gauge/label#format-string) property in [labelStyle](../api/circular-gauge/label). **Numeric Format** @@ -41,7 +40,7 @@ In the below example, axis labels are globalized to **EUR**. ## Right-to-left -Circular Gauge can render its elements from right to left, which improves the user experience for certain language users. To do so, set the [enableRtl](../api/circular-gauge/#enablertl) property to **true**. When this property is enabled, elements such as the tooltip and legend will be rendered from right to left. Meanwhile, the axis can be rendered from right to left by setting the [direction](../api/circular-gauge/axis/#direction) property to **AntiClockWise**. For more information on axis, click [here](../circular-gauge/gauge-axes/#angles-and-direction). +Circular Gauge can render its elements from right to left, which improves the user experience for certain language users. To do so, set the [enableRtl](../api/circular-gauge#enablertl) property to **true**. When this property is enabled, elements such as the tooltip and legend will be rendered from right to left. Meanwhile, the axis can be rendered from right to left by setting the [direction](../api/circular-gauge/axis#direction) property to **AntiClockWise**. For more information on axis, click [here](../circular-gauge/gauge-axes#angles-and-direction). The following example illustrates the right to left rendering of the Circular Gauge. diff --git a/chart-sdk/javascript/heatmap-chart/accessibility.md b/chart-sdk/javascript/heatmap-chart/accessibility.md index 506da8aef..c1b29ca54 100644 --- a/chart-sdk/javascript/heatmap-chart/accessibility.md +++ b/chart-sdk/javascript/heatmap-chart/accessibility.md @@ -1,15 +1,14 @@ --- layout: post -title: Accessibility in JavaScript HeatMap chart control | Syncfusion -description: Learn here all about Accessibility in Syncfusion JavaScript HeatMap chart control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript HeatMap Chart | Syncfusion +description: Learn how the JavaScript HeatMap Chart supports WCAG 2.2, Section 508, screen readers, color contrast, and keyboard navigation for accessible apps. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript HeatMap chart control +# Accessibility in JavaScript HeatMap Chart The HeatMap control follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/javascript/heatmap-chart/appearance.md b/chart-sdk/javascript/heatmap-chart/appearance.md index c41b7316e..2104fe996 100644 --- a/chart-sdk/javascript/heatmap-chart/appearance.md +++ b/chart-sdk/javascript/heatmap-chart/appearance.md @@ -1,15 +1,14 @@ --- layout: post -title: Appearance in JavaScript HeatMap chart control | Syncfusion -description: Learn here all about Appearance in Syncfusion JavaScript HeatMap chart control of Syncfusion Essential JS 2 and more. +title: Appearance in JavaScript HeatMap Chart | Syncfusion +description: Customize JavaScript HeatMap Chart cell borders, background, margins, title, data labels, templates, and text style to match your application design. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Appearance in JavaScript HeatMap chart control +# Appearance in JavaScript HeatMap Chart ## Cell customization @@ -17,7 +16,7 @@ You can customize the cell by using the [cellSettings](../api/heatmap/cellSettin ### Border -Change the width, color, and radius of the heat map cells by using the [border](../api/heatmap/cellSettings/#border) property. +Change the width, color, and radius of the heat map cells by using the [border](../api/heatmap/cellSettings#border) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -32,7 +31,7 @@ Change the width, color, and radius of the heat map cells by using the [border]( ### Cell highlighting -Enable or disable the cell highlighting while hovering over the heat map cells by using the [enableCellHighlighting](../api/heatmap/cellSettings/#enablecellhighlighting) property. +Enable or disable the cell highlighting while hovering over the heat map cells by using the [enableCellHighlighting](../api/heatmap/cellSettings#enablecellhighlighting) property. >Note: The cell highlighting only works in a SVG rendering mode. @@ -49,7 +48,7 @@ Enable or disable the cell highlighting while hovering over the heat map cells b ### Color gradient mode -The [colorGradientMode](../api/heatmap/paletteSettingsModel/#colorgradientmode) property can be used to set the minimum and maximum values for colors based on row and column. Three types of color gradient modes are available. +The [colorGradientMode](../api/heatmap/paletteSettingsModel#colorgradientmode) property can be used to set the minimum and maximum values for colors based on row and column. Three types of color gradient modes are available. * **Table**: The minimum and maximum value colors calculated for overall data. * **Row**: The minimum and maximum value colors calculated for each row of data. @@ -70,7 +69,7 @@ The [colorGradientMode](../api/heatmap/paletteSettingsModel/#colorgradientmode) ## Background color -The background color of the HeatMap can be customized using the [backgroundColor](../api/heatmap/#backgroundcolor) property. +The background color of the HeatMap can be customized using the [backgroundColor](../api/heatmap#backgroundcolor) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -85,7 +84,7 @@ The background color of the HeatMap can be customized using the [backgroundColor ## Margin -Set the margin for the HeatMap from its container by using the [margin](../api/heatmap/#margin) property. +Set the margin for the HeatMap from its container by using the [margin](../api/heatmap#margin) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -100,7 +99,7 @@ Set the margin for the HeatMap from its container by using the [margin](../api/h ## Title -The title is used to provide a quick information about the data plotted in HeatMap. The [text](../api/heatmap/title/#text) property is used to set the title for the HeatMap. The text style of the title can be customized by using the [textStyle](../api/heatmap/title/#textstyle) property. +The title is used to provide a quick information about the data plotted in HeatMap. The [text](../api/heatmap/title#text) property is used to set the title for the HeatMap. The text style of the title can be customized by using the [textStyle](../api/heatmap/title#textstyle) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -115,7 +114,7 @@ The title is used to provide a quick information about the data plotted in HeatM ## Data label -The visibility of data labels can be toggled using the [showLabel](../api/heatmap/cellSettings/#showlabel) property. By default, the data labels will be visible. +The visibility of data labels can be toggled using the [showLabel](../api/heatmap/cellSettings#showlabel) property. By default, the data labels will be visible. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -130,7 +129,7 @@ The visibility of data labels can be toggled using the [showLabel](../api/heatma ### Customize the data label -The label displayed in the HeatMap cell can be changed using the [cellRender](../api/heatmap/#cellrender) event. +The label displayed in the HeatMap cell can be changed using the [cellRender](../api/heatmap#cellrender) event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -145,7 +144,7 @@ The label displayed in the HeatMap cell can be changed using the [cellRender](.. ### Text style -The text attributes of the data label such as font-family, font-size, and color can be customized using the [textStyle](../api/heatmap/cellSettings/#textstyle) in the [cellSettings](../api/heatmap/#cellsettings) property. +The text attributes of the data label such as font-family, font-size, and color can be customized using the [textStyle](../api/heatmap/cellSettings#textstyle) in the [cellSettings](../api/heatmap#cellsettings) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -160,7 +159,7 @@ The text attributes of the data label such as font-family, font-size, and color ### Format -The format of the data label, such as currency, decimal, percent etc. can be changed using [format](../api/heatmap/cellSettings/#format) property. +The format of the data label, such as currency, decimal, percent etc. can be changed using [format](../api/heatmap/cellSettings#format) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -175,7 +174,7 @@ The format of the data label, such as currency, decimal, percent etc. can be cha ### Template -Any HTML elements can be added as a template in the data labels by using the [labelTemplate](../api/heatmap/cellSettings/#labeltemplate) property of [cellSettings](../api/heatmap/cellSettings) in the HeatMap. +Any HTML elements can be added as a template in the data labels by using the [labelTemplate](../api/heatmap/cellSettings#labeltemplate) property of [cellSettings](../api/heatmap/cellSettings) in the HeatMap. The following examples show various data binding methods in the HeatMap using the `labelTemplate` property. @@ -249,4 +248,4 @@ The following example demonstrates how to add a data label template for JSON cel ## See Also -* [To customize the appearance of tool tip](./tooltip/#customize-the-appearance-of-tooltip) +* [To customize the appearance of tool tip](./tooltip#customize-the-appearance-of-tooltip) diff --git a/chart-sdk/javascript/heatmap-chart/axis.md b/chart-sdk/javascript/heatmap-chart/axis.md index 5c6479639..cc001ee8b 100644 --- a/chart-sdk/javascript/heatmap-chart/axis.md +++ b/chart-sdk/javascript/heatmap-chart/axis.md @@ -1,22 +1,21 @@ --- layout: post -title: Axis in JavaScript HeatMap chart control | Syncfusion -description: Learn here all about axis in Syncfusion JavaScript HeatMap chart control of Syncfusion Essential JS 2 and more. +title: Axis in JavaScript HeatMap Chart | Syncfusion +description: Configure X and Y axes in the JavaScript HeatMap Chart with category, numeric, or date-time types, plus inversed, opposed, multilevel, and formatted labels. platform: chart-sdk control: Axis -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Axis in JavaScript HeatMap chart control +# Axis in JavaScript HeatMap Chart HeatMap consists of two axes namely, X-axis and Y-axis that displays the row headers and column headers to plot the data points respectively. You can define the type, format, and other customizing options for both axes in the HeatMap. ## Types -There are three different axis types available in the HeatMap, which defines the data type of the axis labels. You can define the axis type by using the [valueType](../api/heatmap/axis/#valuetype) property in the HeatMap. +There are three different axis types available in the HeatMap, which defines the data type of the axis labels. You can define the axis type by using the [valueType](../api/heatmap/axis#valuetype) property in the HeatMap. ### Category axis @@ -50,7 +49,7 @@ Numeric axis type is used to represent the numeric values in axis labels. ### Date-time axis -Date-time axis type is used to represent the date-time values in axis labels with a specific format. In date-time axis, you can define the start and end date/time using the [minimum](../api/heatmap/axis/#minimum) and [maximum](../api/heatmap/axis/#maximum) properties. +Date-time axis type is used to represent the date-time values in axis labels with a specific format. In date-time axis, you can define the start and end date/time using the [minimum](../api/heatmap/axis#minimum) and [maximum](../api/heatmap/axis#maximum) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -65,7 +64,7 @@ Date-time axis type is used to represent the date-time values in axis labels wit ## Inversed axis -HeatMap supports inversing the axis origin for both axes, where the axis labels are placed in an inversed manner. You can enable axis inversing by enabling the [isInversed](../api/heatmap/axis/#isinversed) property. +HeatMap supports inversing the axis origin for both axes, where the axis labels are placed in an inversed manner. You can enable axis inversing by enabling the [isInversed](../api/heatmap/axis#isinversed) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -80,7 +79,7 @@ HeatMap supports inversing the axis origin for both axes, where the axis labels ## Opposed axis -In HeatMap, you can place the axis label in an opposite position of its default axis label position by using the [opposedPosition](../api/heatmap/axis/#opposedposition) property. +In HeatMap, you can place the axis label in an opposite position of its default axis label position by using the [opposedPosition](../api/heatmap/axis#opposedposition) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -112,15 +111,15 @@ You can add axis labels to the HeatMap and format those labels using the [xAxis] ### Customizing the text style -The text style of the axis labels can be customized using the following options available in the [textStyle](../api/heatmap/axisModel/#textstyle) property. +The text style of the axis labels can be customized using the following options available in the [textStyle](../api/heatmap/axisModel#textstyle) property. -* [color](../api/heatmap/fontModel/#color) - It is used to change the text color of the axis labels. -* [fontFamily](../api/heatmap/fontModel/#fontfamily) - It is used to change the font family of the axis labels. -* [fontStyle](../api/heatmap/fontModel/#fontstyle) - It is used to change the font style of the axis labels. -* [fontWeight](../api/heatmap/fontModel/#fontweight) - It is used to change the font weight of the axis labels. -* [size](../api/heatmap/fontModel/#size) - It is used to change the font size of the axis labels. -* [textAlignment](../api/heatmap/fontModel/#textalignment) - It is used to position and align the axis labels. This property allows you to specify values such as **Near**, **Center**, and **Far**. -* [textOverflow](../api/heatmap/fontModel/#textoverflow) - When the axis label exceeds the intended space, this property is used to trim or wrap it. This property takes values such as **None**, **Trim**, and **Wrap**. +* [color](../api/heatmap/fontModel#color) - It is used to change the text color of the axis labels. +* [fontFamily](../api/heatmap/fontModel#fontfamily) - It is used to change the font family of the axis labels. +* [fontStyle](../api/heatmap/fontModel#fontstyle) - It is used to change the font style of the axis labels. +* [fontWeight](../api/heatmap/fontModel#fontweight) - It is used to change the font weight of the axis labels. +* [size](../api/heatmap/fontModel#size) - It is used to change the font size of the axis labels. +* [textAlignment](../api/heatmap/fontModel#textalignment) - It is used to position and align the axis labels. This property allows you to specify values such as **Near**, **Center**, and **Far**. +* [textOverflow](../api/heatmap/fontModel#textoverflow) - When the axis label exceeds the intended space, this property is used to trim or wrap it. This property takes values such as **None**, **Trim**, and **Wrap**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -150,7 +149,7 @@ Axis labels with line breaks improve the readability of the HeatMap by splitting ### Customizing labels when intersecting with other labels -When the axis labels intersect, [labelIntersectAction](../api/heatmap/axisModel/#labelintersectaction) property is used to handle the intersection. The `labelIntersectAction` property can take the following values. +When the axis labels intersect, [labelIntersectAction](../api/heatmap/axisModel#labelintersectaction) property is used to handle the intersection. The `labelIntersectAction` property can take the following values. * **None** - It specifies that no action is taken when the axis labels intersect. * **Trim** - It specifies to trim the axis labels when they intersect. @@ -172,7 +171,7 @@ The below example demonstrates to trim the axis labels by using the `labelInters ### Rotating labels -The axis labels can be rotated to the desired angles by using the [labelRotation](../api/heatmap/axisModel/#labelrotation) property. +The axis labels can be rotated to the desired angles by using the [labelRotation](../api/heatmap/axisModel#labelrotation) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -187,7 +186,7 @@ The axis labels can be rotated to the desired angles by using the [labelRotation ### Label formatting -HeatMap supports formatting the axis labels by using the [labelFormat](../api/heatmap/axis/#labelformat) property. Using this property, you can customize the axis label by global string format ('P', 'C', etc) or customized format like '{value}°C'. +HeatMap supports formatting the axis labels by using the [labelFormat](../api/heatmap/axis#labelformat) property. Using this property, you can customize the axis label by global string format ('P', 'C', etc) or customized format like '{value}°C'. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -202,7 +201,7 @@ HeatMap supports formatting the axis labels by using the [labelFormat](../api/he ## Axis intervals -In HeatMap, you can define an interval between the axis labels using the [interval](../api/heatmap/axis/#interval) property. In date-time axis, you can change the interval mode by using the [intervalType](../api/heatmap/axis/#intervaltype) property. The date-time axis supports the following interval types: +In HeatMap, you can define an interval between the axis labels using the [interval](../api/heatmap/axis#interval) property. In date-time axis, you can change the interval mode by using the [intervalType](../api/heatmap/axis#intervaltype) property. The date-time axis supports the following interval types: * Years * Months @@ -223,7 +222,7 @@ In HeatMap, you can define an interval between the axis labels using the [interv ## Axis label increment -Axis label increment in the HeatMap is used to display the axis labels with regular interval values in numeric and date-time axes. The labels will be displayed with tick gaps when you set the label interval. But, to achieve the same behavior without tick gaps, use the label increment. You can set the axis label increment using the [increment](../api/heatmap/axis/#increment) property and the default value of this property is **1**. +Axis label increment in the HeatMap is used to display the axis labels with regular interval values in numeric and date-time axes. The labels will be displayed with tick gaps when you set the label interval. But, to achieve the same behavior without tick gaps, use the label increment. You can set the axis label increment using the [increment](../api/heatmap/axis#increment) property and the default value of this property is **1**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -238,7 +237,7 @@ Axis label increment in the HeatMap is used to display the axis labels with regu ## Limiting labels in date-time axis -You can display the axis labels at specific time intervals along with the date-time axis using the [showLabelOn](../api/heatmap/axis/#showlabelon) property. This property supports the following types: +You can display the axis labels at specific time intervals along with the date-time axis using the [showLabelOn](../api/heatmap/axis#showlabelon) property. This property supports the following types: * None: Displays the axis labels based on the `intervalType` and `interval` property of the axis. This type is default value of the `showLabelOn` property. * Years: Displays the axis labels on every year between given date-time range. @@ -259,16 +258,16 @@ You can display the axis labels at specific time intervals along with the date-t ## Multilevel Labels -Multilevel labels are used to classify a group of axis labels as a single category, which is then displayed with a label. By using [multiLevelLabels](../api/heatmap/axis/#multilevellabels), you can add multiple levels on top of the axis labels. +Multilevel labels are used to classify a group of axis labels as a single category, which is then displayed with a label. By using [multiLevelLabels](../api/heatmap/axis#multilevellabels), you can add multiple levels on top of the axis labels. -To divide and group the axis labels, you can use `multiLevelLabels` property. The starting and ending indexes of the axis labels can be set using the [start](../api/heatmap/multiLevelCategoriesModel/#start) and [end](../api/heatmap/multiLevelCategoriesModel/#end) properties in the [categories](../api/heatmap/multiLevelCategoriesModel/). The [text](../api/heatmap/multiLevelCategoriesModel/#text) property can be used to specify a name for the grouped axis labels. +To divide and group the axis labels, you can use `multiLevelLabels` property. The starting and ending indexes of the axis labels can be set using the [start](../api/heatmap/multiLevelCategoriesModel#start) and [end](../api/heatmap/multiLevelCategoriesModel#end) properties in the [categories](../api/heatmap/multiLevelCategoriesModel). The [text](../api/heatmap/multiLevelCategoriesModel#text) property can be used to specify a name for the grouped axis labels. The multilevel labels can be customized by using the following properties. -* [overflow](../api/heatmap/multiLevelLabels/#overflow) - It is used to trim or wrap the multilevel labels when the label overflows the intended space. NOTE: This property is only for x-axis. -* [alignment](../api/heatmap/multiLevelLabels/#alignment) - It is used to place and align the multilevel labels. -* [maximumTextWidth](../api/heatmap/multiLevelCategoriesModel/#maximumtextwidth) - It is used to set the maximum width of the text. When the text length exceeds the maximum text width, the overflow action will be performed. -* [textStyle](../api/heatmap/multiLevelLabels/#textstyle) - It is used to customize the font style of the multilevel labels. -* [border](../api/heatmap/multiLevelLabels/#border) - It is used to customize the border of the multilevel labels displayed in the x-axis and y-axis. +* [overflow](../api/heatmap/multiLevelLabels#overflow) - It is used to trim or wrap the multilevel labels when the label overflows the intended space. NOTE: This property is only for x-axis. +* [alignment](../api/heatmap/multiLevelLabels#alignment) - It is used to place and align the multilevel labels. +* [maximumTextWidth](../api/heatmap/multiLevelCategoriesModel#maximumtextwidth) - It is used to set the maximum width of the text. When the text length exceeds the maximum text width, the overflow action will be performed. +* [textStyle](../api/heatmap/multiLevelLabels#textstyle) - It is used to customize the font style of the multilevel labels. +* [border](../api/heatmap/multiLevelLabels#border) - It is used to customize the border of the multilevel labels displayed in the x-axis and y-axis. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/heatmap-chart/bubble-heatmap.md b/chart-sdk/javascript/heatmap-chart/bubble-heatmap.md index 853615461..86f2f1701 100644 --- a/chart-sdk/javascript/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/javascript/heatmap-chart/bubble-heatmap.md @@ -1,26 +1,25 @@ --- layout: post -title: Bubble heatmap in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Bubble heatmap in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Bubble heatmap in JavaScript HeatMap Chart | Syncfusion +description: Render JavaScript HeatMap Chart data points as bubbles with size, color, sector, or combined size-and-color attributes for richer visualizations. platform: chart-sdk control: Bubble heatmap -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Bubble heatmap in JavaScript Heatmap chart control +# Bubble heatmap in JavaScript HeatMap Chart Data points represent the data source values with **gradient** or **fixed** colors in the HeatMap. You can customize the appearance of these data points by changing the `color` and `size` attributes. -The data points can be represented in color fill or bubble shape by defining the [tileType](../api/heatmap/cellSettings/#tiletype) property. +The data points can be represented in color fill or bubble shape by defining the [tileType](../api/heatmap/cellSettings#tiletype) property. By default, the data points are color filled with gradient or fixed colors and this depiction of data points is defined as `Rect` in the `tileType` property. -The cell customizations and color mapping for rect tile type is defined in [appearance](./appearance/) and [palette](./palette/) sections in detail. +The cell customizations and color mapping for rect tile type is defined in [appearance](./appearance) and [palette](./palette) sections in detail. ## Bubble types -The data points can be represented in the bubble along with its attributes by setting the [tileType](../api/heatmap/cellSettings/#tiletype) property to **Bubble**. +The data points can be represented in the bubble along with its attributes by setting the [tileType](../api/heatmap/cellSettings#tiletype) property to **Bubble**. In bubble HeatMap, you can display the data points with bubble size, bubble colors, and sector attributes of the bubble. @@ -28,9 +27,9 @@ In bubble HeatMap, you can display the data points with bubble size, bubble colo In this bubble HeatMap type, the size factor of the bubble is used to denote the data variations. The radius of the bubble varies according to data values. -By default, the bubble with small size denotes the data value with small magnitude and the larger bubble size denotes the data value with larger magnitude. This behavior can be inversed by using the [isInversedBubbleSize](../api/heatmap/cellSettings/#isinversedbubblesize) property. +By default, the bubble with small size denotes the data value with small magnitude and the larger bubble size denotes the data value with larger magnitude. This behavior can be inversed by using the [isInversedBubbleSize](../api/heatmap/cellSettings#isinversedbubblesize) property. -To render a bubble HeatMap with size series, set the [bubbleType](../api/heatmap/cellSettings/#bubbletype) property to **Size**. +To render a bubble HeatMap with size series, set the [bubbleType](../api/heatmap/cellSettings#bubbletype) property to **Size**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -47,7 +46,7 @@ To render a bubble HeatMap with size series, set the [bubbleType](../api/heatmap In HeatMap, defined with this tile type, the data points will be represented with same sized bubbles and the data value variations are represented with the bubble colors. -To represent the data points with variations in bubble colors, set the [bubbleType](../api/heatmap/cellSettings/#bubbletype) property to **Color**. +To represent the data points with variations in bubble colors, set the [bubbleType](../api/heatmap/cellSettings#bubbletype) property to **Color**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -64,7 +63,7 @@ To represent the data points with variations in bubble colors, set the [bubbleTy In this bubble HeatMap type, the sector of the bubble decides the magnitude of data point. If the sector is large, then the data point value will be high. -To render the data points with bubble sector, set the [bubbleType](../api/heatmap/cellSettings/#bubbletype) property to **Sector**. +To render the data points with bubble sector, set the [bubbleType](../api/heatmap/cellSettings#bubbletype) property to **Sector**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -79,7 +78,7 @@ To render the data points with bubble sector, set the [bubbleType](../api/heatma ### Combining size and color bubble types -In this bubble HeatMap type, size and color of the bubble represents the data value variation. To render this bubble HeatMap type, set the [bubbleType](../api/heatmap/cellSettings/#bubbletype) property to **SizeAndColor**. +In this bubble HeatMap type, size and color of the bubble represents the data value variation. To render this bubble HeatMap type, set the [bubbleType](../api/heatmap/cellSettings#bubbletype) property to **SizeAndColor**. The following examples demonstrate different data binding with the **SizeAndColor** bubble type set in the HeatMap. @@ -160,7 +159,7 @@ The following example illustrates how to render a bubble HeatMap with different **Binding size and color values from datasource** -The size and color of the bubbles in the **SizeAndColor** bubble HeatMap type can be customized by binding the datasource field name that holds the size and color values to the [size](../api/heatmap/bubbleDataModel/#size) and [color](../api/heatmap/bubbleDataModel/#color) properties in the [bubbleDataMapping](../api/heatmap/dataModel/#bubbledatamapping). +The size and color of the bubbles in the **SizeAndColor** bubble HeatMap type can be customized by binding the datasource field name that holds the size and color values to the [size](../api/heatmap/bubbleDataModel#size) and [color](../api/heatmap/bubbleDataModel#color) properties in the [bubbleDataMapping](../api/heatmap/dataModel#bubbledatamapping). >The `bubbleDataMapping` supports only for the JSON data with cell adaptor type. diff --git a/chart-sdk/javascript/heatmap-chart/dimensions.md b/chart-sdk/javascript/heatmap-chart/dimensions.md index e81dbd866..b103ce830 100644 --- a/chart-sdk/javascript/heatmap-chart/dimensions.md +++ b/chart-sdk/javascript/heatmap-chart/dimensions.md @@ -1,15 +1,14 @@ --- layout: post -title: Dimensions in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Dimensions in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Dimensions in JavaScript HeatMap Chart | Syncfusion +description: Set the JavaScript HeatMap Chart width and height in pixels or as a percentage of its container for responsive layouts. platform: chart-sdk control: Dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Dimensions in JavaScript Heatmap chart control +# Dimensions in JavaScript HeatMap Chart ## Size for container @@ -23,7 +22,7 @@ Heat map can be rendered to its container size. You can set the size through inl ## Size for heat map -You can set the size of heat map directly by using the [width](../api/heatmap/#width) and [height](../api/heatmap/#height) properties. +You can set the size of heat map directly by using the [width](../api/heatmap#width) and [height](../api/heatmap#height) properties. ## In Pixel diff --git a/chart-sdk/javascript/heatmap-chart/ej1-api-migration.md b/chart-sdk/javascript/heatmap-chart/ej1-api-migration.md index 2405aaf0a..9a72af4fb 100644 --- a/chart-sdk/javascript/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/javascript/heatmap-chart/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 api migration in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Ej1 api migration in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Ej1 api migration in JavaScript HeatMap Chart | Syncfusion +description: Migrate Essential JS 1 HeatMap properties, events, and member mappings to their JavaScript HeatMap Chart equivalents in Essential JS 2. platform: chart-sdk control: Ej1 api migration -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Ej1 api migration in JavaScript Heatmap chart control +# Ej1 api migration in JavaScript HeatMap Chart This article describes the API migration process of heat map component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/javascript/heatmap-chart/events.md b/chart-sdk/javascript/heatmap-chart/events.md index a04477286..10fd1b533 100644 --- a/chart-sdk/javascript/heatmap-chart/events.md +++ b/chart-sdk/javascript/heatmap-chart/events.md @@ -1,21 +1,20 @@ --- layout: post -title: Events in JavaScript HeatMap chart control | Syncfusion -description: Learn here all about events in Syncfusion JavaScript HeatMap chart control of Syncfusion Essential JS 2 and more. +title: Events in JavaScript HeatMap Chart | Syncfusion +description: Handle cellClick, cellDoubleClick, cellRender, cellSelected, created, legendRender, load, loaded, resized, and tooltipRender events in JavaScript HeatMap Chart. platform: chart-sdk control: Events -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Events in JavaScript HeatMap chart control +# Events in JavaScript HeatMap Chart This section describes the HeatMap chart control event, which occurs when the required actions are performed. ## cellClick -When you click on a HeatMap cell, the [cellClick](../api/heatmap/#cellclick/) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iCellClickEventArgs/). +When you click on a HeatMap cell, the [cellClick](../api/heatmap#cellclick) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iCellClickEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -30,7 +29,7 @@ When you click on a HeatMap cell, the [cellClick](../api/heatmap/#cellclick/) ev ## cellDoubleClick -When you double click on a HeatMap cell, the [cellDoubleClick](../api/heatmap/#celldoubleclick/) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iCellClickEventArgs/). +When you double click on a HeatMap cell, the [cellDoubleClick](../api/heatmap#celldoubleclick) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iCellClickEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -45,7 +44,7 @@ When you double click on a HeatMap cell, the [cellDoubleClick](../api/heatmap/#c ## cellRender -The [cellRender](../api/heatmap/#cellrender) event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer [here](../api/heatmap/iCellEventArgs/). +The [cellRender](../api/heatmap#cellrender) event will be triggered before each HeatMap cell is rendered. To know more about arguments of this event, refer [here](../api/heatmap/iCellEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -60,7 +59,7 @@ The [cellRender](../api/heatmap/#cellrender) event will be triggered before each ## cellSelected -When single or multiple cells in the HeatMap are selected, the [cellSelected](../api/heatmap/#cellselected/) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iSelectedEventArgs/). +When single or multiple cells in the HeatMap are selected, the [cellSelected](../api/heatmap#cellselected) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iSelectedEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -75,7 +74,7 @@ When single or multiple cells in the HeatMap are selected, the [cellSelected](.. ## created -Once HeatMap has been completely rendered, the [created](../api/heatmap/#created) event is triggered. +Once HeatMap has been completely rendered, the [created](../api/heatmap#created) event is triggered. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -90,7 +89,7 @@ Once HeatMap has been completely rendered, the [created](../api/heatmap/#created ## legendRender -The [legendRender](../api/heatmap/#legendrender/) event is triggered before the legend is rendered. To know more about arguments of this event, refer [here](../api/heatmap/iLegendRenderEventArgs/). +The [legendRender](../api/heatmap#legendrender) event is triggered before the legend is rendered. To know more about arguments of this event, refer [here](../api/heatmap/iLegendRenderEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -105,7 +104,7 @@ The [legendRender](../api/heatmap/#legendrender/) event is triggered before the ## load -The [load](../api/heatmap/#load) event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer [here](../api/heatmap/iLoadedEventArgs/). +The [load](../api/heatmap#load) event is triggered before the HeatMap is rendered. To know more about arguments of this event, refer [here](../api/heatmap/iLoadedEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -120,7 +119,7 @@ The [load](../api/heatmap/#load) event is triggered before the HeatMap is render ## loaded -Once HeatMap is loaded, the [loaded](../api/heatmap/#loaded/) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iLoadedEventArgs/). +Once HeatMap is loaded, the [loaded](../api/heatmap#loaded) event is triggered. To know more about arguments of this event, refer [here](../api/heatmap/iLoadedEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -135,7 +134,7 @@ Once HeatMap is loaded, the [loaded](../api/heatmap/#loaded/) event is triggered ## resized -When the window is resized, the [resized](../api/heatmap/#resized/) event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer [here](../api/heatmap/iResizeEventArgs/). +When the window is resized, the [resized](../api/heatmap#resized) event is triggered to notify the resize of the HeatMap. To know more about arguments of this event, refer [here](../api/heatmap/iResizeEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -150,7 +149,7 @@ When the window is resized, the [resized](../api/heatmap/#resized/) event is tri ## tooltipRender -The [tooltipRender](../api/heatmap/#tooltiprender/) event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer [here](../api/heatmap/iTooltipEventArgs/). +The [tooltipRender](../api/heatmap#tooltiprender) event is triggered before the tooltip is rendered on the HeatMap cell. To know more about arguments of this event, refer [here](../api/heatmap/iTooltipEventArgs). {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/heatmap-chart/getting-started.md b/chart-sdk/javascript/heatmap-chart/getting-started.md index 8933c46d1..5aac809ae 100644 --- a/chart-sdk/javascript/heatmap-chart/getting-started.md +++ b/chart-sdk/javascript/heatmap-chart/getting-started.md @@ -4,7 +4,6 @@ title: ES5 getting started with JavaScript HeatMap component | Syncfusion description: Learn how to create and configure a Syncfusion JavaScript ES5 HeatMap component using CDN resources and data binding. platform: chart-sdk control: HeatMap -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/heatmap-chart/how-to/legend-customization.md b/chart-sdk/javascript/heatmap-chart/how-to/legend-customization.md index cf2e3db73..16c87d1e8 100644 --- a/chart-sdk/javascript/heatmap-chart/how-to/legend-customization.md +++ b/chart-sdk/javascript/heatmap-chart/how-to/legend-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Legend customization in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Legend customization in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: How to customize legend labels in JavaScript HeatMap Chart | Syncfusion +description: Customize or hide JavaScript HeatMap Chart legend labels by handling the legendRender client-side event to change label text on the fly. platform: chart-sdk control: Legend customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend customization in JavaScript Heatmap chart control +# How to customize legend labels in JavaScript HeatMap Chart You can change the legend label using the `legendRender` client-side event. You can also hide the legend label using this client-side event. diff --git a/chart-sdk/javascript/heatmap-chart/how-to/tooltip-template.md b/chart-sdk/javascript/heatmap-chart/how-to/tooltip-template.md index aa60072e1..56442650f 100644 --- a/chart-sdk/javascript/heatmap-chart/how-to/tooltip-template.md +++ b/chart-sdk/javascript/heatmap-chart/how-to/tooltip-template.md @@ -1,15 +1,14 @@ --- layout: post -title: Tooltip template in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Tooltip template in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: How to create a table in JavaScript HeatMap Chart | Syncfusion +description: Build a custom table-style tooltip for the JavaScript HeatMap Chart using an HTML template bound to xValue, yValue, and value in the tooltipRender event. platform: chart-sdk control: Tooltip template -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip template in JavaScript Heatmap chart control +# How to create a table in JavaScript HeatMap Chart You can show a tooltip as a table using the `template` property in `tooltipSettings`. diff --git a/chart-sdk/javascript/heatmap-chart/legend.md b/chart-sdk/javascript/heatmap-chart/legend.md index 1d84aea19..27e19d9af 100644 --- a/chart-sdk/javascript/heatmap-chart/legend.md +++ b/chart-sdk/javascript/heatmap-chart/legend.md @@ -1,17 +1,16 @@ --- layout: post -title: Legend in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Legend in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Legend in JavaScript HeatMap Chart | Syncfusion +description: Enable gradient or list legends in the JavaScript HeatMap Chart with placement, alignment, dimensions, paging, smart labels, and selection toggling. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Legend in JavaScript Heatmap chart control +# Legend in JavaScript HeatMap Chart -The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](../api/heatmap/legendSettings/#visible) property to **true** and injecting the `Legend` module using the `HeatMap.Inject(Legend)`. +The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](../api/heatmap/legendSettings#visible) property to **true** and injecting the `Legend` module using the `HeatMap.Inject(Legend)`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -31,7 +30,7 @@ Heat map supports two legend types: Gradient and list type. * Gradient: This is a continuous color legend with smooth color transition between palette color values. * List: List is a fixed color legend. Each palette color information is shown separately in the list item. -You can change the legend type by using the [type](../api/heatmap/paletteSettings/#type) property in the `paletteSettings` property. +You can change the legend type by using the [type](../api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -46,7 +45,7 @@ You can change the legend type by using the [type](../api/heatmap/paletteSetting ## Placement -You can place the legend at left, right, top, or bottom to the heat map layout by using the [position](../api/heatmap/legendSettings/#position)property. The legend is positioned at the right to the heat map by default. +You can place the legend at left, right, top, or bottom to the heat map layout by using the [position](../api/heatmap/legendSettings#position)property. The legend is positioned at the right to the heat map by default. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -61,7 +60,7 @@ You can place the legend at left, right, top, or bottom to the heat map layout b ## Alignment -You can align the legend as center, far, or near to the heat map using the [alignment](../api/heatmap/legendSettings/#alignment) property. +You can align the legend as center, far, or near to the heat map using the [alignment](../api/heatmap/legendSettings#alignment) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -76,7 +75,7 @@ You can align the legend as center, far, or near to the heat map using the [alig ## Legend dimensions -You can change the legend dimensions with values in pixels or percentage by using the [width](../api/heatmap/legendSettings/#width) and [height](../api/heatmap/legendSettings/#height) properties. +You can change the legend dimensions with values in pixels or percentage by using the [width](../api/heatmap/legendSettings#width) and [height](../api/heatmap/legendSettings#height) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -108,9 +107,9 @@ Paging is available only for the list type legend in the heat map, and it can be ## Smart Legend -Smart legend is another way of showing list type legend with responsiveness and readability, when the palette has more number of items. You can enable this smart legend by using the [enableSmartLegend](../api/heatmap/legendSettings/#enablesmartlegend) property when the palette type is set to **Fixed**. +Smart legend is another way of showing list type legend with responsiveness and readability, when the palette has more number of items. You can enable this smart legend by using the [enableSmartLegend](../api/heatmap/legendSettings#enablesmartlegend) property when the palette type is set to **Fixed**. -In smart legend, you can change the display type of legend labels by using the [labelDisplayType](../api/heatmap/legendSettings/#labeldisplaytype) property. +In smart legend, you can change the display type of legend labels by using the [labelDisplayType](../api/heatmap/legendSettings#labeldisplaytype) property. The following are the legend label display types: * All: Displays all labels in the legend. @@ -130,7 +129,7 @@ The following are the legend label display types: ## Legend Selection -In the HeatMap, the legend selection is used to toggle the visibility of cell for view the specific range value. You can enable the legend selection using [toggleVisibility](../api/heatmap/legendSettings/#togglevisibility). +In the HeatMap, the legend selection is used to toggle the visibility of cell for view the specific range value. You can enable the legend selection using [toggleVisibility](../api/heatmap/legendSettings#togglevisibility). {% tabs %} {% highlight js tabtitle="index.js" %} @@ -145,7 +144,7 @@ In the HeatMap, the legend selection is used to toggle the visibility of cell fo ## Legend Title -The legend title displays a specific information about the legend. You can enable the legend title by setting the [title](../api/heatmap/legendSettings/#title) property by providing the text and customizing the legend title text style using the [textStyle](../api/heatmap/legendSettings/titleModel/#textStyle) property. +The legend title displays a specific information about the legend. You can enable the legend title by setting the [title](../api/heatmap/legendSettings#title) property by providing the text and customizing the legend title text style using the [textStyle](../api/heatmap/legendSettings/titleModel#textStyle) property. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/heatmap-chart/palette.md b/chart-sdk/javascript/heatmap-chart/palette.md index acd7ec9ba..5e41fab85 100644 --- a/chart-sdk/javascript/heatmap-chart/palette.md +++ b/chart-sdk/javascript/heatmap-chart/palette.md @@ -1,17 +1,16 @@ --- layout: post -title: Palette in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Palette in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Palette in JavaScript HeatMap Chart | Syncfusion +description: Apply gradient or fixed color palettes to the JavaScript HeatMap Chart cells, with custom color stops, ranges, and labels for the legend. platform: chart-sdk control: Palette -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Palette in JavaScript Heatmap chart control +# Palette in JavaScript HeatMap Chart -In heat map, each data point is displayed as a cell with applied color based on the data value. The palette in the heat map is used to define the color range for cells and gradient type for colors. You can define the colors either in RGB or hex codes using the [color](../api/heatmap/paletteCollection/#color) property in the `palette`. The defined colors are applied to the cell background based on the palette type and cell value. +In heat map, each data point is displayed as a cell with applied color based on the data value. The palette in the heat map is used to define the color range for cells and gradient type for colors. You can define the colors either in RGB or hex codes using the [color](../api/heatmap/paletteCollection#color) property in the `palette`. The defined colors are applied to the cell background based on the palette type and cell value. ## Palette types @@ -19,7 +18,7 @@ You can display the heat map cells either in gradient colors or fixed colors. ### Gradient -The smooth transition between the given palette colors can be applied for the heat map cells based on value. The heat map calculates all the gradient colors between the start and end colors for all distinct data values. Default start color and end color will be considered for gradient calculation, if the colors are not defined. The palette type must be defined as **Gradient** for the [type](../api/heatmap/paletteSettings/#type) property in `paletteSettings` property. +The smooth transition between the given palette colors can be applied for the heat map cells based on value. The heat map calculates all the gradient colors between the start and end colors for all distinct data values. Default start color and end color will be considered for gradient calculation, if the colors are not defined. The palette type must be defined as **Gradient** for the [type](../api/heatmap/paletteSettings#type) property in `paletteSettings` property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -34,7 +33,7 @@ The smooth transition between the given palette colors can be applied for the he ### Fixed -In fixed palette type, solid colors are applied to the heat map cells. The data values can be grouped based on the number of colors defined for the heat map. The palette type should be defined as **Fixed** for the [type](../api/heatmap/paletteSettings/#type) property in the `paletteSettings` property. +In fixed palette type, solid colors are applied to the heat map cells. The data values can be grouped based on the number of colors defined for the heat map. The palette type should be defined as **Fixed** for the [type](../api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -49,7 +48,7 @@ In fixed palette type, solid colors are applied to the heat map cells. The data ## Defining color stops -You can define the colors ranges or color stops for data values in both gradient and fixed palette types. You need to define the data value in the `value` property for `palette` property to calculate the color stops. The heat map automatically calculates the color stops if the `value` property is is not defined. The [label](../api/heatmap/paletteCollection/#label) property is used to provide the additional information about the color that is to be displayed in the legend. If the label is not provided, the [value](../api/heatmap/paletteCollection/#value) is displayed in the legend. The labels can be automatically calculated based on data values, if both the values and labels are not defined. +You can define the colors ranges or color stops for data values in both gradient and fixed palette types. You need to define the data value in the `value` property for `palette` property to calculate the color stops. The heat map automatically calculates the color stops if the `value` property is is not defined. The [label](../api/heatmap/paletteCollection#label) property is used to provide the additional information about the color that is to be displayed in the legend. If the label is not provided, the [value](../api/heatmap/paletteCollection#value) is displayed in the legend. The labels can be automatically calculated based on data values, if both the values and labels are not defined. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -98,4 +97,4 @@ You can change the color mode of the cells to fixed or gradient mode using the [ ## See Also -* [How to enable smart legend](./legend/#smart-legend) +* [How to enable smart legend](./legend#smart-legend) diff --git a/chart-sdk/javascript/heatmap-chart/rendering-mode.md b/chart-sdk/javascript/heatmap-chart/rendering-mode.md index 27b2ebac2..0c934a17c 100644 --- a/chart-sdk/javascript/heatmap-chart/rendering-mode.md +++ b/chart-sdk/javascript/heatmap-chart/rendering-mode.md @@ -1,18 +1,17 @@ --- layout: post -title: Rendering mode in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Rendering mode in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Rendering mode in JavaScript HeatMap Chart | Syncfusion +description: Switch the JavaScript HeatMap Chart rendering between SVG, Canvas, or automatic mode to optimize performance for large or small datasets. platform: chart-sdk control: Rendering mode -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Rendering mode in JavaScript Heatmap chart control +# Rendering mode in JavaScript HeatMap Chart Heat map can be displayed using **Canvas** or **Scalable Vector Graphics (SVG)** rendering logic to improve the initial load performance and scalability. Heat map can also be automatically switched between **Canvas** and **SVG** modes based on dataset size. You can enable this mode by -setting the [renderingMode](../api/heatmap/#renderingmode) property as **Auto**. +setting the [renderingMode](../api/heatmap#renderingmode) property as **Auto**. > If the `Auto` mode is enabled in the heat map and there are more than 10,000 data points, then the heat map will be rendered in a `Canvas` mode; Otherwise, the heat map will be rendered in a `SVG` mode. diff --git a/chart-sdk/javascript/heatmap-chart/selection.md b/chart-sdk/javascript/heatmap-chart/selection.md index 8789974be..21ca6e6f5 100644 --- a/chart-sdk/javascript/heatmap-chart/selection.md +++ b/chart-sdk/javascript/heatmap-chart/selection.md @@ -1,17 +1,16 @@ --- layout: post -title: Selection in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Selection in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Selection in JavaScript HeatMap Chart | Syncfusion +description: Enable single or multiple cell selection in the JavaScript HeatMap Chart with mouse, touch, and keyboard interactions and clear selection support. platform: chart-sdk control: Selection -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Selection in JavaScript Heatmap chart control +# Selection in JavaScript HeatMap Chart -In the HeatMap, the cell selection is used to select single or multiple HeatMap cells at runtime and get the selected cell details using the [cellSelected](../api/heatmap/#cellselected) event. You can enable the cell selection using the [allowSelection](../api/heatmap/#allowselection) property. +In the HeatMap, the cell selection is used to select single or multiple HeatMap cells at runtime and get the selected cell details using the [cellSelected](../api/heatmap#cellselected) event. You can enable the cell selection using the [allowSelection](../api/heatmap#allowselection) property. The HeatMap cells can be selected using the following interactions, as shown in the table below. @@ -34,7 +33,7 @@ The HeatMap cells can be selected using the following interactions, as shown in ## Enable single cell selection -In the HeatMap, the [enableMultiSelect](../api/heatmap/#enablemultiselect) property is used to allow single cell selection. When you set the `enableMultiSelect` property to **false**, only one cell is selected. By default, `enableMultiSelect` property is set to **true**. +In the HeatMap, the [enableMultiSelect](../api/heatmap#enablemultiselect) property is used to allow single cell selection. When you set the `enableMultiSelect` property to **false**, only one cell is selected. By default, `enableMultiSelect` property is set to **true**. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/heatmap-chart/tooltip.md b/chart-sdk/javascript/heatmap-chart/tooltip.md index 92dda668c..3258b1efc 100644 --- a/chart-sdk/javascript/heatmap-chart/tooltip.md +++ b/chart-sdk/javascript/heatmap-chart/tooltip.md @@ -1,21 +1,20 @@ --- layout: post -title: Tooltip in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Tooltip in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Tooltip in JavaScript HeatMap Chart | Syncfusion +description: Show default, templated, or styled tooltips on the JavaScript HeatMap Chart by configuring the tooltip module and tooltipRender event. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Tooltip in JavaScript Heatmap chart control +# Tooltip in JavaScript HeatMap Chart Tooltip is used to provide the details of the heat map cell, and this can be displayed, while hovering the cursor over the cell or performing tap action in touch devices. ## Default Tooltip -You can enable the tooltip by setting the [showTooltip](../api/heatmap/#showtooltip) property to **true** and injecting the `Tooltip` module using the `HeatMap.Inject(Tooltip)`. +You can enable the tooltip by setting the [showTooltip](../api/heatmap#showtooltip) property to **true** and injecting the `Tooltip` module using the `HeatMap.Inject(Tooltip)`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -30,7 +29,7 @@ You can enable the tooltip by setting the [showTooltip](../api/heatmap/#showtool ## Tooltip template -In heat map, you can customize the tooltip using the [tooltipRender](../api/heatmap/#tooltiprender) client-side event. +In heat map, you can customize the tooltip using the [tooltipRender](../api/heatmap#tooltiprender) client-side event. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -45,7 +44,7 @@ In heat map, you can customize the tooltip using the [tooltipRender](../api/heat ## Customize the appearance of Tooltip -The [fill](../api/heatmap/tooltipSettings/#fill) and [border](../api/heatmap/tooltipSettings/#border) properties are used to customize the background color and border of the tooltip respectively. The [textStyle](../api/heatmap/tooltipSettings/#textStyle) property in the tooltip is used to customize the font of the tooltip text. +The [fill](../api/heatmap/tooltipSettings#fill) and [border](../api/heatmap/tooltipSettings#border) properties are used to customize the background color and border of the tooltip respectively. The [textStyle](../api/heatmap/tooltipSettings#textStyle) property in the tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/heatmap-chart/working-with-data.md b/chart-sdk/javascript/heatmap-chart/working-with-data.md index 7d4cac907..24fb55e5b 100644 --- a/chart-sdk/javascript/heatmap-chart/working-with-data.md +++ b/chart-sdk/javascript/heatmap-chart/working-with-data.md @@ -1,15 +1,14 @@ --- layout: post -title: Working with data in JavaScript Heatmap chart control | Syncfusion -description: Learn here all about Working with data in Syncfusion JavaScript Heatmap chart control of Syncfusion Essential JS 2 and more. +title: Working with data in JavaScript HeatMap Chart | Syncfusion +description: Bind data to the JavaScript HeatMap Chart from JSON objects or two-dimensional arrays using array or cell adaptors with nested data mapping support. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Working with data in JavaScript Heatmap chart control +# Working with data in JavaScript HeatMap Chart Heat map visualizes the JSON data and two-dimensional array data. Using the data adaptor support, data can be bound to the heat map. @@ -27,7 +26,7 @@ Heat map supports the following types of data binding with the adaptor support. ### Array - table binding This data type is a collection of one dimensional array objects, at which each inner array contains data points for an X-axis data label. -This is the default data binding type for heat map. You can also directly bind the array object to the [dataSource](../api/heatmap/#datasource) property. +This is the default data binding type for heat map. You can also directly bind the array object to the [dataSource](../api/heatmap#datasource) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -42,7 +41,7 @@ This is the default data binding type for heat map. You can also directly bind t ### Array - cell binding -This data type is a collection of array objects that contain information about the row index, column index, and data value for each cell. You can bind the data to heat map by using the [data](../api/heatmap/data/#data) property in the [dataSource](../api/heatmap/#datasource) and setting the [adaptorType](../api/heatmap/data/#adaptortype) property to **Cell**. +This data type is a collection of array objects that contain information about the row index, column index, and data value for each cell. You can bind the data to heat map by using the [data](../api/heatmap/data#data) property in the [dataSource](../api/heatmap#datasource) and setting the [adaptorType](../api/heatmap/data#adaptortype) property to **Cell**. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ This data type is a collection of array objects that contain information about t ### JSON data - table binding In JSON table data binding, each JSON object contains an X-axis data point as row header and all the corresponding Y-axis data values. -You can bind the JSON table data to the heat map using the [data](../api/heatmap/data/#data) property in [dataSource](../api/heatmap/#datasource). To achieve this, you should enable the [isJsonData](../api/heatmap/data/#isjsondata) property and define the [adaptorType](../api/heatmap/data/#adaptortype)property as **Table**. The [xDataMapping](../api/heatmap/data/#xdatamapping) property is used to map the row header in JSON data. +You can bind the JSON table data to the heat map using the [data](../api/heatmap/data#data) property in [dataSource](../api/heatmap#datasource). To achieve this, you should enable the [isJsonData](../api/heatmap/data#isjsondata) property and define the [adaptorType](../api/heatmap/data#adaptortype)property as **Table**. The [xDataMapping](../api/heatmap/data#xdatamapping) property is used to map the row header in JSON data. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -73,7 +72,7 @@ You can bind the JSON table data to the heat map using the [data](../api/heatmap ### JSON data - Cell binding -In JSON cell data binding, each JSON object consists a value for each cell along with a mapping value for row and column. You can bind the JSON cell data having information for each cell to the heat map using the [data](../api/heatmap/data/#data) property in [dataSource](../api/heatmap/#datasource). To achieve this, you should define the [adaptorType](../api/heatmap/data/#adaptortype) property as **Cell**, and enable the [isJsonData](../api/heatmap/data/#isjsondata) property. Now, map the fields of data by using the [valueMapping](../api/heatmap/data/#valuemapping), [xDataMapping](../api/heatmap/data/#xdatamapping) and [yDataMapping](../api/heatmap/data/#ydatamapping) properties. +In JSON cell data binding, each JSON object consists a value for each cell along with a mapping value for row and column. You can bind the JSON cell data having information for each cell to the heat map using the [data](../api/heatmap/data#data) property in [dataSource](../api/heatmap#datasource). To achieve this, you should define the [adaptorType](../api/heatmap/data#adaptortype) property as **Cell**, and enable the [isJsonData](../api/heatmap/data#isjsondata) property. Now, map the fields of data by using the [valueMapping](../api/heatmap/data#valuemapping), [xDataMapping](../api/heatmap/data#xdatamapping) and [yDataMapping](../api/heatmap/data#ydatamapping) properties. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -88,7 +87,7 @@ In JSON cell data binding, each JSON object consists a value for each cell along ## Empty points -The data points that use the **null** or **undefined** or empty string as value are considered as empty points. Empty data points are ignored and not displayed in the heat map, and these points are rendered with default palette. You can customize the empty data point color value using the [emptyPointColor](../api/heatmap/paletteSettings/#emptypointcolor) property. +The data points that use the **null** or **undefined** or empty string as value are considered as empty points. Empty data points are ignored and not displayed in the heat map, and these points are rendered with default palette. You can customize the empty data point color value using the [emptyPointColor](../api/heatmap/paletteSettings#emptypointcolor) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -103,7 +102,7 @@ The data points that use the **null** or **undefined** or empty string as value ## Binding nested JSON data -In complex data binding, you can bind the nested JSON data to the data points in the heat map. The nested data can be mapped using the [xDataMapping](../api/heatmap/data/#xdatamapping), [yDataMapping](../api/heatmap/data/#ydatamapping), [valueMapping](../api/heatmap/data/#valuemapping) and [bubbleDataMapping](../api/heatmap/data/#bubbledatamapping) properties as string value concatenated by a dot. +In complex data binding, you can bind the nested JSON data to the data points in the heat map. The nested data can be mapped using the [xDataMapping](../api/heatmap/data#xdatamapping), [yDataMapping](../api/heatmap/data#ydatamapping), [valueMapping](../api/heatmap/data#valuemapping) and [bubbleDataMapping](../api/heatmap/data#bubbledatamapping) properties as string value concatenated by a dot. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -118,4 +117,4 @@ In complex data binding, you can bind the nested JSON data to the data points in ## See Also -* [To bind data for bubble heat map with size and color attributes](./bubble-heatmap/#binding-data-for-bubble-heat-map-with-size-and-color-attributes) +* [To bind data for bubble heat map with size and color attributes](./bubble-heatmap#binding-data-for-bubble-heat-map-with-size-and-color-attributes) diff --git a/chart-sdk/javascript/linear-gauge/accessibility.md b/chart-sdk/javascript/linear-gauge/accessibility.md index 8410fa943..0976dc7e8 100644 --- a/chart-sdk/javascript/linear-gauge/accessibility.md +++ b/chart-sdk/javascript/linear-gauge/accessibility.md @@ -1,15 +1,14 @@ --- layout: post -title: Accessibility in JavaScript Linear Gauge control | Syncfusion -description: Learn here all about Accessibility in Syncfusion JavaScript Linear Gauge control of Syncfusion Essential JS 2 and more. +title: Accessibility in JavaScript Linear Gauge | Syncfusion +description: Learn about the accessibility features of the JavaScript Linear Gauge, including ARIA attributes, screen reader support, and WCAG compliance. platform: chart-sdk -control: Accessibility -publishingplatform: chart-sdk +control: Linear Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Accessibility in JavaScript Linear Gauge control +# Accessibility in JavaScript Linear Gauge The Linear Gauge control follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/javascript/linear-gauge/animation.md b/chart-sdk/javascript/linear-gauge/animation.md index 519ffbecf..eccecfd98 100644 --- a/chart-sdk/javascript/linear-gauge/animation.md +++ b/chart-sdk/javascript/linear-gauge/animation.md @@ -1,15 +1,14 @@ --- layout: post -title: Animation in JavaScript Linear Gauge control | Syncfusion -description: Learn here all about animation in the Syncfusion JavaScript Linear Gauge control of Syncfusion Essential JS 2 and more. +title: Animation in JavaScript Linear Gauge | Syncfusion +description: Animate the elements of the JavaScript Linear Gauge, including axis lines, ticks, labels, ranges, pointers, and annotations. platform: chart-sdk control: Linear Gauge -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Animation in JavaScript Linear Gauge control +# Animation in JavaScript Linear Gauge All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [animationDuration](../api/linear-gauge#animationduration) property. The animation for the Linear Gauge is enabled when the `animationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the control. If the `animationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the control will behave in the following order. diff --git a/chart-sdk/javascript/linear-gauge/annotations.md b/chart-sdk/javascript/linear-gauge/annotations.md index a8171f689..c6ae6c1f1 100644 --- a/chart-sdk/javascript/linear-gauge/annotations.md +++ b/chart-sdk/javascript/linear-gauge/annotations.md @@ -1,21 +1,20 @@ --- layout: post -title: Annotations in JavaScript Linear gauge control | Syncfusion -description: Learn here all about Annotations in Syncfusion JavaScript Linear gauge control of Syncfusion Essential JS 2 and more. +title: Annotations in JavaScript Linear Gauge | Syncfusion +description: Add text, image, or HTML annotations to the Syncfusion JavaScript Linear Gauge and customize position, alignment, and z-index. platform: chart-sdk -control: Annotations -publishingplatform: chart-sdk +control: Linear Gauge documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- -# Annotations in JavaScript Linear gauge control +# Annotations in JavaScript Linear Gauge Annotations are used to mark the specific area of interest in the Linear Gauge with text, HTML elements, or images. Any number of annotations can be added to the Linear Gauge component. ## Adding annotation -To render the custom HTML elements in the Linear Gauge component, use the [`content`](../api/linear-gauge/annotation/#content) property in the [`annotations`](../api/linear-gauge/annotation). The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area. +To render the custom HTML elements in the Linear Gauge component, use the [`content`](../api/linear-gauge/annotation#content) property in the [`annotations`](../api/linear-gauge/annotation). The annotation can be rendered either by specifying the id of the element or specifying the code to create a new element that needs to be displayed in the gauge area. ```