diff --git a/chart-sdk/angular/bullet-chart/axis-customization.md b/chart-sdk/angular/bullet-chart/axis-customization.md index a443478f0..a56c7f5fa 100644 --- a/chart-sdk/angular/bullet-chart/axis-customization.md +++ b/chart-sdk/angular/bullet-chart/axis-customization.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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..db0a48931 100644 --- a/chart-sdk/angular/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/angular/bullet-chart/bullet-chart-dimensions.md @@ -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..6781fa84a 100644 --- a/chart-sdk/angular/bullet-chart/comparative-bar.md +++ b/chart-sdk/angular/bullet-chart/comparative-bar.md @@ -11,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Comparative bar in Angular Bullet chart component -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..cfb63b587 100644 --- a/chart-sdk/angular/bullet-chart/customization.md +++ b/chart-sdk/angular/bullet-chart/customization.md @@ -13,7 +13,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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..733847704 100644 --- a/chart-sdk/angular/bullet-chart/data-binding.md +++ b/chart-sdk/angular/bullet-chart/data-binding.md @@ -15,7 +15,7 @@ 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..937fa4bf3 100644 --- a/chart-sdk/angular/bullet-chart/data-label.md +++ b/chart-sdk/angular/bullet-chart/data-label.md @@ -11,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Data label in Angular Bullet chart component -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/ranges.md b/chart-sdk/angular/bullet-chart/ranges.md index 00a9b96fc..42a9aeffa 100644 --- a/chart-sdk/angular/bullet-chart/ranges.md +++ b/chart-sdk/angular/bullet-chart/ranges.md @@ -11,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Ranges in Angular Bullet chart component -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/tool-tip.md b/chart-sdk/angular/bullet-chart/tool-tip.md index 7d00a934a..ec6a18398 100644 --- a/chart-sdk/angular/bullet-chart/tool-tip.md +++ b/chart-sdk/angular/bullet-chart/tool-tip.md @@ -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..7ffae57a0 100644 --- a/chart-sdk/angular/bullet-chart/value-bar.md +++ b/chart-sdk/angular/bullet-chart/value-bar.md @@ -11,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Value bar in Angular Bullet chart component -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/heatmap-chart/appearance.md b/chart-sdk/angular/heatmap-chart/appearance.md index c2306ede0..5e0d20208 100644 --- a/chart-sdk/angular/heatmap-chart/appearance.md +++ b/chart-sdk/angular/heatmap-chart/appearance.md @@ -12,11 +12,11 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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. diff --git a/chart-sdk/angular/heatmap-chart/bubble-heatmap.md b/chart-sdk/angular/heatmap-chart/bubble-heatmap.md index bdcad1454..562ef691d 100644 --- a/chart-sdk/angular/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/angular/heatmap-chart/bubble-heatmap.md @@ -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. diff --git a/chart-sdk/angular/heatmap-chart/dimensions.md b/chart-sdk/angular/heatmap-chart/dimensions.md index 548590cd8..507198bf9 100644 --- a/chart-sdk/angular/heatmap-chart/dimensions.md +++ b/chart-sdk/angular/heatmap-chart/dimensions.md @@ -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/events.md b/chart-sdk/angular/heatmap-chart/events.md index 6f229f92a..17347bc49 100644 --- a/chart-sdk/angular/heatmap-chart/events.md +++ b/chart-sdk/angular/heatmap-chart/events.md @@ -14,7 +14,7 @@ This section describes the HeatMap chart event, which occurs when the required a ## 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/how-to/legend-customization.md b/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md index 4e2aad09c..9d76b6683 100644 --- a/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md +++ b/chart-sdk/angular/heatmap-chart/how-to/legend-customization.md @@ -22,4 +22,4 @@ You can change the legend label using the `legendRender` client-side event. You {% endhighlight %} {% endtabs %} -{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/heatmap-chart/how-to/legend-label-customization-cs1" %} \ No newline at end of file +{% previewsample "https://help.syncfusion.com/samples/chart-sdk/angular/heatmap-chart/how-to/legend-label-customization-cs1" %} diff --git a/chart-sdk/angular/heatmap-chart/rendering-mode.md b/chart-sdk/angular/heatmap-chart/rendering-mode.md index 3a78d1e82..279ce7d6e 100644 --- a/chart-sdk/angular/heatmap-chart/rendering-mode.md +++ b/chart-sdk/angular/heatmap-chart/rendering-mode.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Rendering mode in Angular Heatmap chart component -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..2b3ce892a 100644 --- a/chart-sdk/angular/heatmap-chart/selection.md +++ b/chart-sdk/angular/heatmap-chart/selection.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Selection in Angular HeatMap chart component -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..537380060 100644 --- a/chart-sdk/angular/heatmap-chart/title.md +++ b/chart-sdk/angular/heatmap-chart/title.md @@ -1,7 +1,7 @@ --- layout: post title: Title in Angular Heatmap chart component | Syncfusion -description: Learn here all about Title in Syncfusion Angular Heatmap chart component of Syncfusion Essential JS 2 and more. +description: Add HeatMap titles in the Syncfusion Angular HeatMap Chart component to improve data visualization and chart readability. platform: chart-sdk control: Title documentation: ug diff --git a/chart-sdk/angular/heatmap-chart/working-with-data.md b/chart-sdk/angular/heatmap-chart/working-with-data.md index 8747c056d..a0d78c3e4 100644 --- a/chart-sdk/angular/heatmap-chart/working-with-data.md +++ b/chart-sdk/angular/heatmap-chart/working-with-data.md @@ -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/sparkline-charts/sparkline-dimension.md b/chart-sdk/angular/sparkline-charts/sparkline-dimension.md index 0896d66b4..1f6d0b328 100644 --- a/chart-sdk/angular/sparkline-charts/sparkline-dimension.md +++ b/chart-sdk/angular/sparkline-charts/sparkline-dimension.md @@ -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/special-points-customization.md b/chart-sdk/angular/sparkline-charts/special-points-customization.md index 983b674a5..8e243c96a 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 diff --git a/chart-sdk/angular/stock-charts/accessibility.md b/chart-sdk/angular/stock-chart/accessibility.md similarity index 100% rename from chart-sdk/angular/stock-charts/accessibility.md rename to chart-sdk/angular/stock-chart/accessibility.md diff --git a/chart-sdk/angular/stock-charts/appearance.md b/chart-sdk/angular/stock-chart/appearance.md similarity index 84% rename from chart-sdk/angular/stock-charts/appearance.md rename to chart-sdk/angular/stock-chart/appearance.md index d79636b47..205894243 100644 --- a/chart-sdk/angular/stock-charts/appearance.md +++ b/chart-sdk/angular/stock-chart/appearance.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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-chart/axis-customization.md similarity index 76% rename from chart-sdk/angular/stock-charts/axis-customization.md rename to chart-sdk/angular/stock-chart/axis-customization.md index 2b8d7928c..7d4aa255e 100644 --- a/chart-sdk/angular/stock-charts/axis-customization.md +++ b/chart-sdk/angular/stock-chart/axis-customization.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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-chart/axis-types.md similarity index 90% rename from chart-sdk/angular/stock-charts/axis-types.md rename to chart-sdk/angular/stock-chart/axis-types.md index a66858cfc..5320ddec8 100644 --- a/chart-sdk/angular/stock-charts/axis-types.md +++ b/chart-sdk/angular/stock-chart/axis-types.md @@ -13,7 +13,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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-chart/chart-dimensions.md similarity index 92% rename from chart-sdk/angular/stock-charts/chart-dimensions.md rename to chart-sdk/angular/stock-chart/chart-dimensions.md index 3ec311443..1e6bea693 100644 --- a/chart-sdk/angular/stock-charts/chart-dimensions.md +++ b/chart-sdk/angular/stock-chart/chart-dimensions.md @@ -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-chart/cross-hair.md similarity index 100% rename from chart-sdk/angular/stock-charts/cross-hair.md rename to chart-sdk/angular/stock-chart/cross-hair.md diff --git a/chart-sdk/angular/stock-charts/export-print.md b/chart-sdk/angular/stock-chart/export-print.md similarity index 100% rename from chart-sdk/angular/stock-charts/export-print.md rename to chart-sdk/angular/stock-chart/export-print.md diff --git a/chart-sdk/angular/stock-charts/getting-started.md b/chart-sdk/angular/stock-chart/getting-started.md similarity index 100% rename from chart-sdk/angular/stock-charts/getting-started.md rename to chart-sdk/angular/stock-chart/getting-started.md diff --git a/chart-sdk/angular/stock-charts/gradient.md b/chart-sdk/angular/stock-chart/gradient.md similarity index 100% rename from chart-sdk/angular/stock-charts/gradient.md rename to chart-sdk/angular/stock-chart/gradient.md diff --git a/chart-sdk/angular/stock-charts/how-to/live-data.md b/chart-sdk/angular/stock-chart/how-to/live-data.md similarity index 100% rename from chart-sdk/angular/stock-charts/how-to/live-data.md rename to chart-sdk/angular/stock-chart/how-to/live-data.md diff --git a/chart-sdk/angular/stock-charts/internationalization.md b/chart-sdk/angular/stock-chart/internationalization.md similarity index 100% rename from chart-sdk/angular/stock-charts/internationalization.md rename to chart-sdk/angular/stock-chart/internationalization.md diff --git a/chart-sdk/angular/stock-charts/legend.md b/chart-sdk/angular/stock-chart/legend.md similarity index 100% rename from chart-sdk/angular/stock-charts/legend.md rename to chart-sdk/angular/stock-chart/legend.md diff --git a/chart-sdk/angular/stock-charts/localization.md b/chart-sdk/angular/stock-chart/localization.md similarity index 94% rename from chart-sdk/angular/stock-charts/localization.md rename to chart-sdk/angular/stock-chart/localization.md index 8078c446a..d457c1a27 100644 --- a/chart-sdk/angular/stock-charts/localization.md +++ b/chart-sdk/angular/stock-chart/localization.md @@ -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/react/documentation/common/globalization/localization) {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/period-selector.md b/chart-sdk/angular/stock-chart/period-selector.md similarity index 78% rename from chart-sdk/angular/stock-charts/period-selector.md rename to chart-sdk/angular/stock-chart/period-selector.md index 9516f7f3b..7abf7dbd0 100644 --- a/chart-sdk/angular/stock-charts/period-selector.md +++ b/chart-sdk/angular/stock-chart/period-selector.md @@ -14,7 +14,7 @@ The period selector allows to select a range with specified periods. By default ## 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-chart/range-selector.md similarity index 93% rename from chart-sdk/angular/stock-charts/range-selector.md rename to chart-sdk/angular/stock-chart/range-selector.md index 535eef400..c493c138d 100644 --- a/chart-sdk/angular/stock-charts/range-selector.md +++ b/chart-sdk/angular/stock-chart/range-selector.md @@ -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-chart/series-types.md similarity index 71% rename from chart-sdk/angular/stock-charts/series-types.md rename to chart-sdk/angular/stock-chart/series-types.md index e12a5581d..7867f2dd7 100644 --- a/chart-sdk/angular/stock-charts/series-types.md +++ b/chart-sdk/angular/stock-chart/series-types.md @@ -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-chart/stock-events.md similarity index 100% rename from chart-sdk/angular/stock-charts/stock-events.md rename to chart-sdk/angular/stock-chart/stock-events.md diff --git a/chart-sdk/angular/stock-charts/technical-indicators.md b/chart-sdk/angular/stock-chart/technical-indicators.md similarity index 100% rename from chart-sdk/angular/stock-charts/technical-indicators.md rename to chart-sdk/angular/stock-chart/technical-indicators.md diff --git a/chart-sdk/angular/stock-charts/tool-tip.md b/chart-sdk/angular/stock-chart/tool-tip.md similarity index 85% rename from chart-sdk/angular/stock-charts/tool-tip.md rename to chart-sdk/angular/stock-chart/tool-tip.md index 6a4be4ab0..ea0e385b1 100644 --- a/chart-sdk/angular/stock-charts/tool-tip.md +++ b/chart-sdk/angular/stock-chart/tool-tip.md @@ -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-chart/trend-lines.md similarity index 87% rename from chart-sdk/angular/stock-charts/trend-lines.md rename to chart-sdk/angular/stock-chart/trend-lines.md index baeedd5f2..866080dae 100644 --- a/chart-sdk/angular/stock-charts/trend-lines.md +++ b/chart-sdk/angular/stock-chart/trend-lines.md @@ -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-chart/working-with-data.md similarity index 83% rename from chart-sdk/angular/stock-charts/working-with-data.md rename to chart-sdk/angular/stock-chart/working-with-data.md index b6ae11814..cf7a3030a 100644 --- a/chart-sdk/angular/stock-charts/working-with-data.md +++ b/chart-sdk/angular/stock-chart/working-with-data.md @@ -15,7 +15,7 @@ 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/asp-net-core/bullet-chart/accessibility.md b/chart-sdk/asp-net-core/bullet-chart/accessibility.md index 32bc002a2..f01174fb0 100644 --- a/chart-sdk/asp-net-core/bullet-chart/accessibility.md +++ b/chart-sdk/asp-net-core/bullet-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Bullet Chart Component description: Learn here all about Accessibility in Syncfusion ASP Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/axis-customization.md b/chart-sdk/asp-net-core/bullet-chart/axis-customization.md index bf1ff4d18..4e371aeb5 100644 --- a/chart-sdk/asp-net-core/bullet-chart/axis-customization.md +++ b/chart-sdk/asp-net-core/bullet-chart/axis-customization.md @@ -4,7 +4,6 @@ title: Axis Customization in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Axis Customization in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis Customization -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/asp-net-core/bullet-chart/bullet-chart-dimensions.md index 587595a18..e0139cb90 100644 --- a/chart-sdk/asp-net-core/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/asp-net-core/bullet-chart/bullet-chart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Bullet Chart Dimensions in ASP.NET Core Bullet Chart Component | Syncfusion +title: Dimensions in ASP.NET Core Bullet Chart | Syncfusion description: Learn here all about Bullet Chart Dimensions in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bullet Chart Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/comparative-bar.md b/chart-sdk/asp-net-core/bullet-chart/comparative-bar.md index 645a98ef9..03a4f6464 100644 --- a/chart-sdk/asp-net-core/bullet-chart/comparative-bar.md +++ b/chart-sdk/asp-net-core/bullet-chart/comparative-bar.md @@ -4,7 +4,6 @@ title: Comparative Bar in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Comparative Bar in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Comparative Bar -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/customization.md b/chart-sdk/asp-net-core/bullet-chart/customization.md index f17f0dc75..ece8e033b 100644 --- a/chart-sdk/asp-net-core/bullet-chart/customization.md +++ b/chart-sdk/asp-net-core/bullet-chart/customization.md @@ -4,7 +4,6 @@ title: Customization in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Customization in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customization -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/data-binding.md b/chart-sdk/asp-net-core/bullet-chart/data-binding.md index ac6dc38d6..07093b09f 100644 --- a/chart-sdk/asp-net-core/bullet-chart/data-binding.md +++ b/chart-sdk/asp-net-core/bullet-chart/data-binding.md @@ -4,7 +4,6 @@ title: Data Binding in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Data Binding in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Binding -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/data-label.md b/chart-sdk/asp-net-core/bullet-chart/data-label.md index e0aec67b6..48f54ca51 100644 --- a/chart-sdk/asp-net-core/bullet-chart/data-label.md +++ b/chart-sdk/asp-net-core/bullet-chart/data-label.md @@ -4,7 +4,6 @@ title: Data Label in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Data Label in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Label -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/getting-started.md b/chart-sdk/asp-net-core/bullet-chart/getting-started.md index 522ef2c64..dc5b3c411 100644 --- a/chart-sdk/asp-net-core/bullet-chart/getting-started.md +++ b/chart-sdk/asp-net-core/bullet-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET Core Bullet Charts Control |Syncfusion description: Check out and learn about getting started with ASP.NET Core Bullets Chart control of Essential JS 2 and more details. platform: chart-sdk control: Bullet Charts -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/ranges.md b/chart-sdk/asp-net-core/bullet-chart/ranges.md index 67565a13a..e14bc98a8 100644 --- a/chart-sdk/asp-net-core/bullet-chart/ranges.md +++ b/chart-sdk/asp-net-core/bullet-chart/ranges.md @@ -4,7 +4,6 @@ title: Ranges in ASP.NET Core Bullet Chart Control | Syncfusion description: Learn all about Ranges in Syncfusion ASP.NET Core Bullet Chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ranges -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/title.md b/chart-sdk/asp-net-core/bullet-chart/title.md index 5de15cf4e..a3a76d423 100644 --- a/chart-sdk/asp-net-core/bullet-chart/title.md +++ b/chart-sdk/asp-net-core/bullet-chart/title.md @@ -4,7 +4,6 @@ title: Title in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Title in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/tool-tip.md b/chart-sdk/asp-net-core/bullet-chart/tool-tip.md index 7070f238c..d61db6006 100644 --- a/chart-sdk/asp-net-core/bullet-chart/tool-tip.md +++ b/chart-sdk/asp-net-core/bullet-chart/tool-tip.md @@ -4,7 +4,6 @@ title: Tooltip in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Tooltip in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/bullet-chart/value-bar.md b/chart-sdk/asp-net-core/bullet-chart/value-bar.md index 6d15bf441..c52a9a81b 100644 --- a/chart-sdk/asp-net-core/bullet-chart/value-bar.md +++ b/chart-sdk/asp-net-core/bullet-chart/value-bar.md @@ -4,7 +4,6 @@ title: Value Bar in ASP.NET Core Bullet Chart Component | Syncfusion description: Learn here all about Value Bar in Syncfusion ASP.NET Core Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Value Bar -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/accessibility.md b/chart-sdk/asp-net-core/heatmap-chart/accessibility.md index 87612eae1..06d1a0099 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/accessibility.md +++ b/chart-sdk/asp-net-core/heatmap-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion ASP.NET Core HeatMap chart component description: Learn here all about Accessibility in Syncfusion ASP.NET Core HeatMap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/appearance.md b/chart-sdk/asp-net-core/heatmap-chart/appearance.md index d070a7cd4..0b950b900 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/appearance.md +++ b/chart-sdk/asp-net-core/heatmap-chart/appearance.md @@ -4,7 +4,6 @@ title: Appearance in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Appearance in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/axis.md b/chart-sdk/asp-net-core/heatmap-chart/axis.md index 8c6b8ddaa..b6e4ccb1a 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/axis.md +++ b/chart-sdk/asp-net-core/heatmap-chart/axis.md @@ -4,7 +4,6 @@ title: Axis in Syncfusion ASP.NET Core HeatMap Chart Component description: Learn here all about axis in Syncfusion ASP.NET Core HeatMap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/bubble-heatmap.md b/chart-sdk/asp-net-core/heatmap-chart/bubble-heatmap.md index dd4cd9a00..e20050ecf 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/asp-net-core/heatmap-chart/bubble-heatmap.md @@ -4,7 +4,6 @@ title: Bubble Heatmap in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Bubble Heatmap in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bubble Heatmap -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/dimensions.md b/chart-sdk/asp-net-core/heatmap-chart/dimensions.md index f4e53e5c4..2994a9364 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/dimensions.md +++ b/chart-sdk/asp-net-core/heatmap-chart/dimensions.md @@ -4,7 +4,6 @@ title: Dimensions in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Dimensions in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/ej1-api-migration.md b/chart-sdk/asp-net-core/heatmap-chart/ej1-api-migration.md index de6922be6..bc4e583a8 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/asp-net-core/heatmap-chart/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 Api Migration in ASP.NET Core Heatmap Chart Component +title: Ej1 Api Migration in ASP.NET Core Heatmap Chart | Syncfusion description: Learn here all about Ej1 Api Migration in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 Api Migration -publishingplatform: chart-sdk documentation: ug --- -# Migration from Essential® JS 1 +# EJ1 API migration in ASP.NET Core 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/asp-net-core/heatmap-chart/events.md b/chart-sdk/asp-net-core/heatmap-chart/events.md index 5bca0bf4a..0efaf4d1c 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/events.md +++ b/chart-sdk/asp-net-core/heatmap-chart/events.md @@ -4,7 +4,6 @@ title: Events in Syncfusion ASP.NET Core HeatMap Chart Component description: Learn here all about Events in Syncfusion ASP.NET Core HeatMap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Events -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/getting-started.md b/chart-sdk/asp-net-core/heatmap-chart/getting-started.md index ebdefe1eb..ec71774e9 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/getting-started.md +++ b/chart-sdk/asp-net-core/heatmap-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET Core HeatMap Chart Control | Syncfusion description: Check out and learn about getting started with ASP.NET Core HeatMap Chart control of Essential JS 2 and more details. platform: chart-sdk control: HeatMap Chart -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/how-to/legend-label-customization.md b/chart-sdk/asp-net-core/heatmap-chart/how-to/legend-label-customization.md index da5065a38..ea7a04d7a 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/how-to/legend-label-customization.md +++ b/chart-sdk/asp-net-core/heatmap-chart/how-to/legend-label-customization.md @@ -1,10 +1,9 @@ --- layout: post -title: Legend Label Customization in ASP.NET Core Heatmap Chart Component +title: Legend Label Customization in ASP.NET Core Heatmap Chart | Syncfusion description: Learn here all about Legend Label Customization in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend Label Customization -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/how-to/tooltip-template.md b/chart-sdk/asp-net-core/heatmap-chart/how-to/tooltip-template.md index e27d00f9f..e24bc8a8b 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/how-to/tooltip-template.md +++ b/chart-sdk/asp-net-core/heatmap-chart/how-to/tooltip-template.md @@ -1,10 +1,9 @@ --- layout: post -title: Tooltip Template in ASP.NET Core Heatmap Chart Component +title: Tooltip Template in ASP.NET Core Heatmap Chart | Syncfusion description: Learn here all about Tooltip Template in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip Template -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif b/chart-sdk/asp-net-core/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif index b8fa215cc..8edcb111a 100644 Binary files a/chart-sdk/asp-net-core/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif and b/chart-sdk/asp-net-core/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif differ diff --git a/chart-sdk/asp-net-core/heatmap-chart/legend.md b/chart-sdk/asp-net-core/heatmap-chart/legend.md index 9ca7abdb0..11288565d 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/legend.md +++ b/chart-sdk/asp-net-core/heatmap-chart/legend.md @@ -4,7 +4,6 @@ title: Legend in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Legend in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/overview.md b/chart-sdk/asp-net-core/heatmap-chart/overview.md index a567ca71c..4a48d0380 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/overview.md +++ b/chart-sdk/asp-net-core/heatmap-chart/overview.md @@ -1,15 +1,14 @@ --- layout: post -title: Overview in ASP.NET Core Heatmap Chart Component +title: Overview in ASP.NET Core Heatmap Chart | Syncfusion description: Learn here all about Overview in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Index -publishingplatform: chart-sdk documentation: ug --- -# Overview +# Overview in ASP.NET Core HeatMap Chart The HeatMap control is used to visualize a two-dimensional data in which the values are represented in gradient or fixed colors. diff --git a/chart-sdk/asp-net-core/heatmap-chart/palette.md b/chart-sdk/asp-net-core/heatmap-chart/palette.md index 90ba0fb73..77bf9a71e 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/palette.md +++ b/chart-sdk/asp-net-core/heatmap-chart/palette.md @@ -4,7 +4,6 @@ title: Palette in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Palette in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Palette -publishingplatform: chart-sdk documentation: ug --- @@ -64,4 +63,4 @@ You can define the colors ranges or color stops for data values in both gradient ## See Also -* [How to enable smart legend](./legend/#smart-legend) +* [How to enable smart legend](./legend#smart-legend) diff --git a/chart-sdk/asp-net-core/heatmap-chart/rendering-mode.md b/chart-sdk/asp-net-core/heatmap-chart/rendering-mode.md index 0eefbead4..f1102db35 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/rendering-mode.md +++ b/chart-sdk/asp-net-core/heatmap-chart/rendering-mode.md @@ -4,7 +4,6 @@ title: Rendering Mode in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Rendering Mode in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Rendering Mode -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/selection.md b/chart-sdk/asp-net-core/heatmap-chart/selection.md index 08d107df3..32fe35dd7 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/selection.md +++ b/chart-sdk/asp-net-core/heatmap-chart/selection.md @@ -4,7 +4,6 @@ title: Selection in Syncfusion ASP.NET Core HeatMap Chart Component description: Learn here all about Selection in Syncfusion ASP.NET Core HeatMap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selection -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/tooltip.md b/chart-sdk/asp-net-core/heatmap-chart/tooltip.md index 5efbd5556..2dcc91827 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/tooltip.md +++ b/chart-sdk/asp-net-core/heatmap-chart/tooltip.md @@ -4,7 +4,6 @@ title: Tooltip in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Tooltip in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/heatmap-chart/working-with-data.md b/chart-sdk/asp-net-core/heatmap-chart/working-with-data.md index 86d83ff2a..fbe51f23d 100644 --- a/chart-sdk/asp-net-core/heatmap-chart/working-with-data.md +++ b/chart-sdk/asp-net-core/heatmap-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working With Data in Syncfusion ASP.NET Core Heatmap Chart Component description: Learn here all about Working With Data in Syncfusion ASP.NET Core Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working With Data -publishingplatform: chart-sdk documentation: ug --- @@ -116,4 +115,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/asp-net-core/smith-chart/accessibility.md b/chart-sdk/asp-net-core/smith-chart/accessibility.md index f67b8f4b6..a960f2cca 100644 --- a/chart-sdk/asp-net-core/smith-chart/accessibility.md +++ b/chart-sdk/asp-net-core/smith-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Smith Chart Component description: Learn here all about Accessibility in Syncfusion ASP Core Smith Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/smith-chart/getting-started.md b/chart-sdk/asp-net-core/smith-chart/getting-started.md index a3dcec578..581890a8b 100644 --- a/chart-sdk/asp-net-core/smith-chart/getting-started.md +++ b/chart-sdk/asp-net-core/smith-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET Core Smith Chart Control | Syncfusion description: Check out and learn about getting started with ASP.NET Core Smith Chart control of Essential JS 2 and more details. platform: chart-sdk control: Smith Chart -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/smith-chart/overview.md b/chart-sdk/asp-net-core/smith-chart/overview.md index f8eebb73e..fcfe60fad 100644 --- a/chart-sdk/asp-net-core/smith-chart/overview.md +++ b/chart-sdk/asp-net-core/smith-chart/overview.md @@ -1,15 +1,14 @@ --- layout: post -title: Overview in ASP.NET Core Smithchart Component +title: Overview in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Overview in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Index -publishingplatform: chart-sdk documentation: ug --- -# Overview +# Overview in ASP.NET Core Smith Chart The Smith chart control is one of the most useful data visualization tools for high frequency circuit applications. It contains two sets of circles to plot the parameters of transmission lines. diff --git a/chart-sdk/asp-net-core/smith-chart/smithchart-axis.md b/chart-sdk/asp-net-core/smith-chart/smithchart-axis.md index 04e621585..bc11e3d86 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-axis.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-axis.md @@ -4,7 +4,6 @@ title: Smithchart Axis in ASP.NET Core Smithchart Control | Syncfusion description: Learn here all about Smithchart Axis in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Axis -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/smith-chart/smithchart-dimensions.md b/chart-sdk/asp-net-core/smith-chart/smithchart-dimensions.md index 4ffec4422..a55a293c4 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-dimensions.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Smithchart Dimensions in ASP.NET Core Smithchart Component +title: Dimensions in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Smithchart Dimensions in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/smith-chart/smithchart-legend.md b/chart-sdk/asp-net-core/smith-chart/smithchart-legend.md index 9fa877103..b13eff16d 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-legend.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-legend.md @@ -1,17 +1,16 @@ --- layout: post -title: Smithchart Legend in ASP.NET Core Smithchart Component +title: Smithchart Legend in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Smithchart Legend in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Legend -publishingplatform: chart-sdk documentation: ug --- -# Legend +# Legend in ASP.NET Core 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/asp-net-core/smith-chart/smithchart-marker.md b/chart-sdk/asp-net-core/smith-chart/smithchart-marker.md index 2f3d3b4cb..e5b5837c3 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-marker.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-marker.md @@ -1,17 +1,16 @@ --- layout: post -title: Smithchart Marker in ASP.NET Core Smithchart Component +title: Smithchart Marker in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Smithchart Marker in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Marker -publishingplatform: chart-sdk documentation: ug --- -# Marker & Datalabels +# Marker & Datalabels in ASP.NET Core 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/asp-net-core/smith-chart/smithchart-print.md b/chart-sdk/asp-net-core/smith-chart/smithchart-print.md index c82e4219f..56e6c717f 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-print.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-print.md @@ -1,15 +1,14 @@ --- layout: post -title: Smithchart Print in ASP.NET Core Smithchart Component +title: Print in ASP.NET Core Smithchart Component | Syncfusion description: Learn here all about Smithchart Print in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Print -publishingplatform: chart-sdk documentation: ug --- -# Print and Export +# Print and Export in ASP.NET Core Smith Chart ## Print diff --git a/chart-sdk/asp-net-core/smith-chart/smithchart-series.md b/chart-sdk/asp-net-core/smith-chart/smithchart-series.md index 6d146cb75..c45aff889 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-series.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-series.md @@ -1,15 +1,14 @@ --- layout: post -title: Smithchart Series in ASP.NET Core Smithchart Component +title: Series in ASP.NET Core Smithchart Component | Syncfusion description: Learn here all about Smithchart Series in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Series -publishingplatform: chart-sdk documentation: ug --- -# Series +# Series in ASP.NET Core 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/asp-net-core/smith-chart/smithchart-tooltip.md b/chart-sdk/asp-net-core/smith-chart/smithchart-tooltip.md index 7675bd556..ee181b670 100644 --- a/chart-sdk/asp-net-core/smith-chart/smithchart-tooltip.md +++ b/chart-sdk/asp-net-core/smith-chart/smithchart-tooltip.md @@ -1,10 +1,9 @@ --- layout: post -title: Smithchart Tooltip in ASP.NET Core Smithchart Control +title: Tooltip in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Smithchart Tooltip in Syncfusion ASP.NET Core Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Tooltip -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/smith-chart/title-subtitle.md b/chart-sdk/asp-net-core/smith-chart/title-subtitle.md index 33818217b..b6d1911ea 100644 --- a/chart-sdk/asp-net-core/smith-chart/title-subtitle.md +++ b/chart-sdk/asp-net-core/smith-chart/title-subtitle.md @@ -1,15 +1,14 @@ --- layout: post -title: Title Subtitle in ASP.NET Core Smithchart Component +title: Title Subtitle in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Title Subtitle in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title Subtitle -publishingplatform: chart-sdk documentation: ug --- -# Title and Subtitle +# Title and Subtitle in ASP.NET Core Smith Chart ## Enable title diff --git a/chart-sdk/asp-net-core/smith-chart/working-with-data.md b/chart-sdk/asp-net-core/smith-chart/working-with-data.md index 6ac14e47f..d283119dd 100644 --- a/chart-sdk/asp-net-core/smith-chart/working-with-data.md +++ b/chart-sdk/asp-net-core/smith-chart/working-with-data.md @@ -1,15 +1,14 @@ --- layout: post -title: Working With Data in ASP.NET Core Smithchart Component +title: Working With Data in ASP.NET Core Smithchart | Syncfusion description: Learn here all about Working With Data in Syncfusion ASP.NET Core Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working With Data -publishingplatform: chart-sdk documentation: ug --- -# Working with Data +# Working with Data in ASP.NET Core 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. diff --git a/chart-sdk/asp-net-core/sparkline-charts/accessibility.md b/chart-sdk/asp-net-core/sparkline-charts/accessibility.md index b0f24bff5..8d5d7e83a 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/accessibility.md +++ b/chart-sdk/asp-net-core/sparkline-charts/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Sparkline Component description: Learn here all about Accessibility in Syncfusion ASP Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/sparkline-charts/appearance.md b/chart-sdk/asp-net-core/sparkline-charts/appearance.md index 5195c675f..e7beb92ab 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/appearance.md +++ b/chart-sdk/asp-net-core/sparkline-charts/appearance.md @@ -1,15 +1,14 @@ --- layout: post -title: Appearance in ASP.NET Core Sparkline Component +title: Appearance in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Appearance in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug --- -# Appearance +# Appearance in ASP.NET Core Sparkline Charts The appearance of the sparkline can be customized using margin, container Area border, and container Area background. diff --git a/chart-sdk/asp-net-core/sparkline-charts/axis-customization.md b/chart-sdk/asp-net-core/sparkline-charts/axis-customization.md index 27d5f4f7c..be8a386c9 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/axis-customization.md +++ b/chart-sdk/asp-net-core/sparkline-charts/axis-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Customization in ASP.NET Core Sparkline Component +title: Axis Customization in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Axis Customization in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis Customization -publishingplatform: chart-sdk documentation: ug --- -# Axis Customization +# Axis Customization in ASP.NET Core Sparkline You can customize axis value types and min and max values of the sparkline. diff --git a/chart-sdk/asp-net-core/sparkline-charts/data-labels.md b/chart-sdk/asp-net-core/sparkline-charts/data-labels.md index 92af4de26..046da0033 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/data-labels.md +++ b/chart-sdk/asp-net-core/sparkline-charts/data-labels.md @@ -1,15 +1,14 @@ --- layout: post -title: Data Labels in ASP.NET Core Sparkline Component +title: Data Labels in ASP.NET Core Sparkline | SYncfusion description: Learn here all about Data Labels in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Labels -publishingplatform: chart-sdk documentation: ug --- -# Data Labels +# Data Labels in ASP.NET Core Sparkline Charts Data labels are used to display values of data points to improve the readability. diff --git a/chart-sdk/asp-net-core/sparkline-charts/ej1-api-migration.md b/chart-sdk/asp-net-core/sparkline-charts/ej1-api-migration.md index fbc0a8ec5..40bf715f8 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/ej1-api-migration.md +++ b/chart-sdk/asp-net-core/sparkline-charts/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 Api Migration in ASP.NET Core Sparkline Component +title: Ej1 Api Migration in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Ej1 Api Migration in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 Api Migration -publishingplatform: chart-sdk documentation: ug --- -# Migration from Essential® JS 1 +# EJ1 API migration in ASP.NET Core Sparkline This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/asp-net-core/sparkline-charts/getting-started.md b/chart-sdk/asp-net-core/sparkline-charts/getting-started.md index a5a37edf8..973364d87 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/getting-started.md +++ b/chart-sdk/asp-net-core/sparkline-charts/getting-started.md @@ -4,7 +4,6 @@ title: Get Started with ASP.NET Core Sparkline Charts Control | Syncfusion description: Check out and learn about getting started with ASP.NET Core Sparkline Charts control of Essential JS 2 and more details. platform: chart-sdk control: Sparkline Charts -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/sparkline-charts/localization.md b/chart-sdk/asp-net-core/sparkline-charts/localization.md index f6bddd37f..ec671b17a 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/localization.md +++ b/chart-sdk/asp-net-core/sparkline-charts/localization.md @@ -1,15 +1,14 @@ --- layout: post -title: Localization in ASP.NET Core Sparkline Component +title: Localization in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Localization in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization -publishingplatform: chart-sdk documentation: ug --- -# Localization +# Localization in ASP.NET Core Sparkline Charts 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/asp-net-core/sparkline-charts/marker.md b/chart-sdk/asp-net-core/sparkline-charts/marker.md index c597b71e6..48003f117 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/marker.md +++ b/chart-sdk/asp-net-core/sparkline-charts/marker.md @@ -1,15 +1,14 @@ --- layout: post -title: Marker in ASP.NET Core Sparkline Component +title: Marker in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Marker in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Marker -publishingplatform: chart-sdk documentation: ug --- -# Markers +# Markers in ASP.NET Core Sparkline Charts This section explains how to add markers to the sparklines. diff --git a/chart-sdk/asp-net-core/sparkline-charts/overview.md b/chart-sdk/asp-net-core/sparkline-charts/overview.md index cf603a2db..9c3cf0a71 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/overview.md +++ b/chart-sdk/asp-net-core/sparkline-charts/overview.md @@ -1,15 +1,14 @@ --- layout: post -title: Overview in ASP.NET Core Sparkline Component +title: Overview in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Overview in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Index -publishingplatform: chart-sdk documentation: ug --- -# Overview +# Overview in ASP.NET Core Sparkline Charts The Sparkline is a very small chart; it is drawn without axes or coordinates. This presents a common shape of data in a simple and highly condensed way. The sparklines are easy to interpret, and convey more information to users by visualizing data in a small amount of space. diff --git a/chart-sdk/asp-net-core/sparkline-charts/range-band.md b/chart-sdk/asp-net-core/sparkline-charts/range-band.md index 7ae77e3df..03db62842 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/range-band.md +++ b/chart-sdk/asp-net-core/sparkline-charts/range-band.md @@ -1,15 +1,14 @@ --- layout: post -title: Range Band in ASP.NET Core Sparkline Component +title: Range Band in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Range Band in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range Band -publishingplatform: chart-sdk documentation: ug --- -# Range Band +# Range Band in ASP.NET Core Sparkline Charts This section explains how to customize the sparkline with multiple range bands. diff --git a/chart-sdk/asp-net-core/sparkline-charts/sparkline-dimensions.md b/chart-sdk/asp-net-core/sparkline-charts/sparkline-dimensions.md index bb2c3c004..ca1a6e754 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/asp-net-core/sparkline-charts/sparkline-dimensions.md @@ -1,15 +1,14 @@ --- layout: post -title: Sparkline Dimensions in ASP.NET Core Sparkline Component +title: Sparkline Dimensions in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Sparkline Dimensions in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline Dimensions -publishingplatform: chart-sdk documentation: ug --- -# Sparkline Dimensions +# Dimensions in ASP.NET Core Sparkline Charts ## Size for container diff --git a/chart-sdk/asp-net-core/sparkline-charts/sparkline-types.md b/chart-sdk/asp-net-core/sparkline-charts/sparkline-types.md index ac3f10109..a52f64d59 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/sparkline-types.md +++ b/chart-sdk/asp-net-core/sparkline-charts/sparkline-types.md @@ -1,15 +1,14 @@ --- layout: post -title: Sparkline Types in ASP.NET Core Sparkline Component +title: Sparkline Types in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Sparkline Types in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline Types -publishingplatform: chart-sdk documentation: ug --- -# Sparkline Types +# Types in ASP.NET Core Sparkline Charts 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/asp-net-core/sparkline-charts/special-points-customization.md b/chart-sdk/asp-net-core/sparkline-charts/special-points-customization.md index 6bea68cb2..69ae1bfdd 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/special-points-customization.md +++ b/chart-sdk/asp-net-core/sparkline-charts/special-points-customization.md @@ -1,10 +1,9 @@ --- layout: post -title: Special Points Customization in ASP.NET Core Sparkline Component +title: Special Points Customization in ASP.NET Core Sparkline | Syncfusion description: Learn here all about Special Points Customization in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Special Points Customization -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/sparkline-charts/user-interaction.md b/chart-sdk/asp-net-core/sparkline-charts/user-interaction.md index 695739d0a..b54e21ff0 100644 --- a/chart-sdk/asp-net-core/sparkline-charts/user-interaction.md +++ b/chart-sdk/asp-net-core/sparkline-charts/user-interaction.md @@ -4,7 +4,6 @@ title: User Interaction in ASP.NET Core Syncfusion Sparkline Component description: Learn here all about User Interaction in Syncfusion ASP.NET Core Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: User Interaction -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/accessibility.md b/chart-sdk/asp-net-core/stock-chart/accessibility.md similarity index 99% rename from chart-sdk/asp-net-core/stock-charts/accessibility.md rename to chart-sdk/asp-net-core/stock-chart/accessibility.md index c7226f95a..9ace69d9d 100644 --- a/chart-sdk/asp-net-core/stock-charts/accessibility.md +++ b/chart-sdk/asp-net-core/stock-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Stock Chart Component description: Learn here all about Accessibility in Syncfusion ASP Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/appearance.md b/chart-sdk/asp-net-core/stock-chart/appearance.md similarity index 93% rename from chart-sdk/asp-net-core/stock-charts/appearance.md rename to chart-sdk/asp-net-core/stock-chart/appearance.md index 02485d8bd..bb1a4c6de 100644 --- a/chart-sdk/asp-net-core/stock-charts/appearance.md +++ b/chart-sdk/asp-net-core/stock-chart/appearance.md @@ -1,15 +1,14 @@ --- layout: post -title: Appearance in ASP.NET Core Stock Chart Component +title: Appearance in ASP.NET Core Stock Chart Component | Syncfusion description: Learn here all about Appearance in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug --- -# Appearance +# Appearance in in ASP.NET Core Stock Chart ## Stock Chart Title @@ -62,4 +61,4 @@ Changing theme will affect background color,gridlines,tooltip colors and appeara ## See Also -* [Axis Customization](./axis-customization/) +* [Axis Customization](./axis-customization) diff --git a/chart-sdk/asp-net-core/stock-charts/axis-customization.md b/chart-sdk/asp-net-core/stock-chart/axis-customization.md similarity index 97% rename from chart-sdk/asp-net-core/stock-charts/axis-customization.md rename to chart-sdk/asp-net-core/stock-chart/axis-customization.md index f858ca9d6..4cb4751ea 100644 --- a/chart-sdk/asp-net-core/stock-charts/axis-customization.md +++ b/chart-sdk/asp-net-core/stock-chart/axis-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Customization in ASP.NET Core Stock Chart Component +title: Axis Customization in ASP.NET Core Stock Chart Component | Syncfusion description: Learn here all about Axis Customization in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis Customization -publishingplatform: chart-sdk documentation: ug --- -# Axis Customization +# Axis Customization in ASP.NET Core Stock chart diff --git a/chart-sdk/asp-net-core/stock-charts/axis-types.md b/chart-sdk/asp-net-core/stock-chart/axis-types.md similarity index 94% rename from chart-sdk/asp-net-core/stock-charts/axis-types.md rename to chart-sdk/asp-net-core/stock-chart/axis-types.md index fa00be7dc..0a2fc1618 100644 --- a/chart-sdk/asp-net-core/stock-charts/axis-types.md +++ b/chart-sdk/asp-net-core/stock-chart/axis-types.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Types in ASP.NET Core Stock Chart Component +title: Axis Types in ASP.NET Core Stock Chart Component | Syncfusion description: Learn here all about Axis Types in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis types -publishingplatform: chart-sdk documentation: ug --- -# Axis types +# Axis types in ASP.NET Core Stock chart ## DateTime axis @@ -60,4 +59,4 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat ## See also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/asp-net-core/stock-charts/chart-dimensions.md b/chart-sdk/asp-net-core/stock-chart/chart-dimensions.md similarity index 95% rename from chart-sdk/asp-net-core/stock-charts/chart-dimensions.md rename to chart-sdk/asp-net-core/stock-chart/chart-dimensions.md index 9cf463b56..d69410021 100644 --- a/chart-sdk/asp-net-core/stock-charts/chart-dimensions.md +++ b/chart-sdk/asp-net-core/stock-chart/chart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Chart Dimensions in ASP.NET Core Stock Chart Component +title: Chart Dimensions in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Chart Dimensions in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/cross-hair.md b/chart-sdk/asp-net-core/stock-chart/cross-hair.md similarity index 99% rename from chart-sdk/asp-net-core/stock-charts/cross-hair.md rename to chart-sdk/asp-net-core/stock-chart/cross-hair.md index 199195f00..6bb303ad6 100644 --- a/chart-sdk/asp-net-core/stock-charts/cross-hair.md +++ b/chart-sdk/asp-net-core/stock-chart/cross-hair.md @@ -4,12 +4,11 @@ title: Cross Hair in ASP.NET Core Syncfusion Stock Chart Component description: Learn here all about Cross Hair in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Cross Hair -publishingplatform: chart-sdk documentation: ug --- -# Add Crosshair +# Add Crosshair in ASP.NET Core 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/asp-net-core/stock-charts/export-print.md b/chart-sdk/asp-net-core/stock-chart/export-print.md similarity index 92% rename from chart-sdk/asp-net-core/stock-charts/export-print.md rename to chart-sdk/asp-net-core/stock-chart/export-print.md index 5e7342795..c8010d50c 100644 --- a/chart-sdk/asp-net-core/stock-charts/export-print.md +++ b/chart-sdk/asp-net-core/stock-chart/export-print.md @@ -1,15 +1,14 @@ --- layout: post -title: Export Print in ASP.NET Core Stock Chart Component +title: Export Print in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Export Print in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Export Print -publishingplatform: chart-sdk documentation: ug --- -# Print and Export +# Print and Export in ASP.NET Core 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/asp-net-core/stock-charts/getting-started.md b/chart-sdk/asp-net-core/stock-chart/getting-started.md similarity index 99% rename from chart-sdk/asp-net-core/stock-charts/getting-started.md rename to chart-sdk/asp-net-core/stock-chart/getting-started.md index 24fbb3086..62129350d 100644 --- a/chart-sdk/asp-net-core/stock-charts/getting-started.md +++ b/chart-sdk/asp-net-core/stock-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET Core Stock Chart Control | Syncfusion description: Check out and learn about getting started with ASP.NET Core Stock Chart control of Essential JS 2 and more details. platform: chart-sdk control: Stock Chart -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/gradient.md b/chart-sdk/asp-net-core/stock-chart/gradient.md similarity index 98% rename from chart-sdk/asp-net-core/stock-charts/gradient.md rename to chart-sdk/asp-net-core/stock-chart/gradient.md index fe85d6ec6..3ac6aa6df 100644 --- a/chart-sdk/asp-net-core/stock-charts/gradient.md +++ b/chart-sdk/asp-net-core/stock-chart/gradient.md @@ -1,10 +1,9 @@ --- layout: post -title: Gradient in ASP.NET Core Stock Chart Component +title: Gradient in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Gradient in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Gradient -publishingplatform: chart-sdk documentation: ug --- @@ -23,6 +22,8 @@ Gradients can be applied to: The gradient can be defined in the `@{ }` Razor code block or dynamically configured in the `load` event of the chart. +## Linear gradient + A linear gradient blends color along a straight path from a defined start point to an end point. Configure it by adding `LinearGradient` inside the target element (Series, Trendlines or Indicators) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `X1`, `Y1`, `X2` and `Y2` properties. The gradient color stop values such as `Offset`, `Color`, `Opacity`, `Lighten` and `Brighten` are set using the `ChartGradientColorStop` property. The linear gradient properties are: diff --git a/chart-sdk/asp-net-core/stock-chart/images/nodatatemplate-stockchart.png b/chart-sdk/asp-net-core/stock-chart/images/nodatatemplate-stockchart.png new file mode 100644 index 000000000..be2ed590b Binary files /dev/null and b/chart-sdk/asp-net-core/stock-chart/images/nodatatemplate-stockchart.png differ diff --git a/chart-sdk/asp-net-core/stock-charts/images/stockchart-control.webp b/chart-sdk/asp-net-core/stock-chart/images/stockchart-control.webp similarity index 100% rename from chart-sdk/asp-net-core/stock-charts/images/stockchart-control.webp rename to chart-sdk/asp-net-core/stock-chart/images/stockchart-control.webp diff --git a/chart-sdk/asp-net-core/stock-charts/images/stockchart.webp b/chart-sdk/asp-net-core/stock-chart/images/stockchart.webp similarity index 100% rename from chart-sdk/asp-net-core/stock-charts/images/stockchart.webp rename to chart-sdk/asp-net-core/stock-chart/images/stockchart.webp diff --git a/chart-sdk/asp-net-core/stock-charts/legend.md b/chart-sdk/asp-net-core/stock-chart/legend.md similarity index 99% rename from chart-sdk/asp-net-core/stock-charts/legend.md rename to chart-sdk/asp-net-core/stock-chart/legend.md index b95d5c4fc..b632ad772 100644 --- a/chart-sdk/asp-net-core/stock-charts/legend.md +++ b/chart-sdk/asp-net-core/stock-chart/legend.md @@ -4,7 +4,6 @@ title: Syncfusion ASP.NET Core Stock Chart Legend Component description: Learn here all about Legend in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/period-selector.md b/chart-sdk/asp-net-core/stock-chart/period-selector.md similarity index 98% rename from chart-sdk/asp-net-core/stock-charts/period-selector.md rename to chart-sdk/asp-net-core/stock-chart/period-selector.md index 699c70131..0507cf662 100644 --- a/chart-sdk/asp-net-core/stock-charts/period-selector.md +++ b/chart-sdk/asp-net-core/stock-chart/period-selector.md @@ -4,7 +4,6 @@ title: Period Selector in ASP.NET Core Stock Chart Control | Syncfusion description: Learn here all about Period Selector in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Period Selector -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/range-selector.md b/chart-sdk/asp-net-core/stock-chart/range-selector.md similarity index 90% rename from chart-sdk/asp-net-core/stock-charts/range-selector.md rename to chart-sdk/asp-net-core/stock-chart/range-selector.md index cdc73c5e6..ef3181193 100644 --- a/chart-sdk/asp-net-core/stock-charts/range-selector.md +++ b/chart-sdk/asp-net-core/stock-chart/range-selector.md @@ -1,19 +1,18 @@ --- layout: post -title: Range Selector in ASP.NET Core Stock Chart Component +title: Range Selector in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Range Selector in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range Selector -publishingplatform: chart-sdk documentation: ug --- -# Range selector +# Range selector in ASP.NET Core Stock chart The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart. -# Selecting Range +## Selecting Range 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. diff --git a/chart-sdk/asp-net-core/stock-charts/series-types.md b/chart-sdk/asp-net-core/stock-chart/series-types.md similarity index 96% rename from chart-sdk/asp-net-core/stock-charts/series-types.md rename to chart-sdk/asp-net-core/stock-chart/series-types.md index fc0ce0d02..aafeb3182 100644 --- a/chart-sdk/asp-net-core/stock-charts/series-types.md +++ b/chart-sdk/asp-net-core/stock-chart/series-types.md @@ -1,10 +1,9 @@ --- layout: post -title: Series Types in ASP.NET Core Stock Chart Component +title: Series Types in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Series Types in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series Types -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/stock-events.md b/chart-sdk/asp-net-core/stock-chart/stock-events.md similarity index 92% rename from chart-sdk/asp-net-core/stock-charts/stock-events.md rename to chart-sdk/asp-net-core/stock-chart/stock-events.md index fd7ecebc6..1242a4c1d 100644 --- a/chart-sdk/asp-net-core/stock-charts/stock-events.md +++ b/chart-sdk/asp-net-core/stock-chart/stock-events.md @@ -1,16 +1,15 @@ --- layout: post -title: Stock Events in ASP.NET Core Stock Chart Component +title: Stock Events in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Stock Events in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Stock Events -publishingplatform: chart-sdk documentation: ug --- -# Stock Events +# Stock Events in ASP.NET Core Stock chart Stock Events visualizes stockevents in stockchart. 'SplineSeries' is used to represent selected data value. You can customize the specific data value using `stockEvents` event. diff --git a/chart-sdk/asp-net-core/stock-charts/technical-indicators.md b/chart-sdk/asp-net-core/stock-chart/technical-indicators.md similarity index 99% rename from chart-sdk/asp-net-core/stock-charts/technical-indicators.md rename to chart-sdk/asp-net-core/stock-chart/technical-indicators.md index bc674c536..0abb4e1b0 100644 --- a/chart-sdk/asp-net-core/stock-charts/technical-indicators.md +++ b/chart-sdk/asp-net-core/stock-chart/technical-indicators.md @@ -4,7 +4,6 @@ title: Technical Indicators in ASP.NET Core Stock Chart Control | Syncfusion description: Learn here all about Technical Indicators in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Technical Indicators -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/tool-tip.md b/chart-sdk/asp-net-core/stock-chart/tool-tip.md similarity index 97% rename from chart-sdk/asp-net-core/stock-charts/tool-tip.md rename to chart-sdk/asp-net-core/stock-chart/tool-tip.md index b92cbbc5c..dd564770a 100644 --- a/chart-sdk/asp-net-core/stock-charts/tool-tip.md +++ b/chart-sdk/asp-net-core/stock-chart/tool-tip.md @@ -1,15 +1,14 @@ --- layout: post -title: Tool Tip in ASP.NET Core Stock Chart Component +title: Tool Tip in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Tool Tip in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool Tip -publishingplatform: chart-sdk documentation: ug --- -# Tooltip +# Tooltip in ASP.NET Core Stock chart diff --git a/chart-sdk/asp-net-core/stock-charts/trend-lines.md b/chart-sdk/asp-net-core/stock-chart/trend-lines.md similarity index 99% rename from chart-sdk/asp-net-core/stock-charts/trend-lines.md rename to chart-sdk/asp-net-core/stock-chart/trend-lines.md index 64bd51ddf..3cc138bf6 100644 --- a/chart-sdk/asp-net-core/stock-charts/trend-lines.md +++ b/chart-sdk/asp-net-core/stock-chart/trend-lines.md @@ -4,7 +4,6 @@ title: Trend Lines in ASP.NET Core Stock Chart Control | Syncfusion description: Learn here all about Trend Lines in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Trend Lines -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-core/stock-charts/working-with-data.md b/chart-sdk/asp-net-core/stock-chart/working-with-data.md similarity index 92% rename from chart-sdk/asp-net-core/stock-charts/working-with-data.md rename to chart-sdk/asp-net-core/stock-chart/working-with-data.md index 8d7e5f58b..50cde8eef 100644 --- a/chart-sdk/asp-net-core/stock-charts/working-with-data.md +++ b/chart-sdk/asp-net-core/stock-chart/working-with-data.md @@ -1,17 +1,16 @@ --- layout: post -title: Working With Data in ASP.NET Core Stock Chart Component +title: Working With Data in ASP.NET Core Stock Chart | Syncfusion description: Learn here all about Working With Data in Syncfusion ASP.NET Core Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working With Data -publishingplatform: chart-sdk documentation: ug --- -# Working with Data +# Working with Data in ASP.NET Core Stock chart Chart can visualise data bound from local or remote data. @@ -46,4 +45,4 @@ When no data is available to render in the stock chart, the `noDataTemplate` pro ## See Also -* [Series Types](./series-types/) +* [Series Types](./series-types) diff --git a/chart-sdk/asp-net-core/stock-charts/images/nodatatemplate-stockchart.png b/chart-sdk/asp-net-core/stock-charts/images/nodatatemplate-stockchart.png deleted file mode 100644 index f38a9de7a..000000000 Binary files a/chart-sdk/asp-net-core/stock-charts/images/nodatatemplate-stockchart.png and /dev/null differ diff --git a/chart-sdk/asp-net-mvc/bullet-chart/accessibility.md b/chart-sdk/asp-net-mvc/bullet-chart/accessibility.md index 4736bb001..60f18b76d 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/accessibility.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Bullet Chart Component description: Learn here all about Accessibility in Syncfusion ASP MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/bullet-chart/axis-customization.md b/chart-sdk/asp-net-mvc/bullet-chart/axis-customization.md index d3f9f099d..10732b0ad 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/axis-customization.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/axis-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Customization in ASP.NET MVC Bullet Chart Component +title: Axis Customization in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Axis Customization in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis Customization -publishingplatform: chart-sdk documentation: ug --- -# Axis customization +# Axis customization in ASP.NET MVC Bullet chart ## MajorTickLines and MinorTickLines customization diff --git a/chart-sdk/asp-net-mvc/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/asp-net-mvc/bullet-chart/bullet-chart-dimensions.md index a5eb84fb9..488ff4ba4 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/bullet-chart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Bullet Chart Dimensions in ASP.NET MVC Bullet Chart Component +title: Dimensions in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Bullet Chart Dimensions in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bullet Chart Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/bullet-chart/comparative-bar.md b/chart-sdk/asp-net-mvc/bullet-chart/comparative-bar.md index 093632d73..b206b163f 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/comparative-bar.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/comparative-bar.md @@ -1,15 +1,14 @@ --- layout: post -title: Comparative Bar in ASP.NET MVC Bullet Chart Component +title: Comparative Bar in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Comparative Bar in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Comparative Bar -publishingplatform: chart-sdk documentation: ug --- -# Target bar +# Target bar in ASP.NET MVC 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://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.charts.bulletchart.html#Syncfusion_EJ2_Charts_BulletChart_TargetField) should be mapped to the appropriate field from the datasource. diff --git a/chart-sdk/asp-net-mvc/bullet-chart/customization.md b/chart-sdk/asp-net-mvc/bullet-chart/customization.md index f57cc13e4..471e3e754 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/customization.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Customization in ASP.NET MVC Bullet Chart Component +title: Customization in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Customization in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customization -publishingplatform: chart-sdk documentation: ug --- -# Customization +# Customization in ASP.NET MVC Bullet Chart ## Orientation diff --git a/chart-sdk/asp-net-mvc/bullet-chart/data-binding.md b/chart-sdk/asp-net-mvc/bullet-chart/data-binding.md index 7c08ec834..1f667ff0d 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/data-binding.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/data-binding.md @@ -1,15 +1,14 @@ --- layout: post -title: Data Binding in ASP.NET MVC Bullet Chart Component +title: Data Binding in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Data Binding in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Binding -publishingplatform: chart-sdk documentation: ug --- -# Working with data +# Working with data in ASP.NET MVC Bullet Chart Bullet Chart can visualise data bound from local or remote data. diff --git a/chart-sdk/asp-net-mvc/bullet-chart/data-label.md b/chart-sdk/asp-net-mvc/bullet-chart/data-label.md index 00248ab29..d6fd4febc 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/data-label.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/data-label.md @@ -1,15 +1,14 @@ --- layout: post -title: Data Label in ASP.NET MVC Bullet Chart Component +title: Data Label in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Data Label in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Label -publishingplatform: chart-sdk documentation: ug --- -# Data label +# Data label in ASP.NET MVC 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://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.BulletChart.html#Syncfusion_EJ2_Charts_BulletChart_DataLabel) setting's [`Enable`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.BulletChartBulletDataLabel.html#Syncfusion_EJ2_Charts_BulletChartBulletDataLabel_Enable) property to **true**. diff --git a/chart-sdk/asp-net-mvc/bullet-chart/getting-started.md b/chart-sdk/asp-net-mvc/bullet-chart/getting-started.md index c335a0c3e..db8ffeb7a 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/getting-started.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET MVC Bullet Chart Control | Syncfusion description: Check out and learn about getting started with ASP.NET MVC Bullet Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/bullet-chart/ranges.md b/chart-sdk/asp-net-mvc/bullet-chart/ranges.md index a212118de..8358e755f 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/ranges.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/ranges.md @@ -1,15 +1,14 @@ --- layout: post -title: Ranges in ASP.NET MVC Bullet Chart Component +title: Ranges in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Ranges in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ranges -publishingplatform: chart-sdk documentation: ug --- -# Ranges +# Ranges in ASP.NET MVC 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://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Range.html#Syncfusion_EJ2_Charts_Range_End) property in [`Ranges`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.BulletChart.html#Syncfusion_EJ2_Charts_BulletChart_Ranges). The [`Minimum`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.BulletChart.html#Syncfusion_EJ2_Charts_BulletChart_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/asp-net-mvc/bullet-chart/title.md b/chart-sdk/asp-net-mvc/bullet-chart/title.md index f3eb8a9f5..15535906d 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/title.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/title.md @@ -1,15 +1,14 @@ --- layout: post -title: Title in ASP.NET MVC Bullet Chart Component +title: Title in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Title in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title -publishingplatform: chart-sdk documentation: ug --- -# Title and subtitle +# Title and subtitle in ASP.NET MVC Bullet Chart ## Title diff --git a/chart-sdk/asp-net-mvc/bullet-chart/tool-tip.md b/chart-sdk/asp-net-mvc/bullet-chart/tool-tip.md index be0f996b5..fe7c6c1a2 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/tool-tip.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/tool-tip.md @@ -1,15 +1,14 @@ --- layout: post -title: Tooltip in ASP.NET MVC Bullet Chart Component +title: Tooltip in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Tooltip in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug --- -# Tooltip +# Tooltip in ASP.NET MVC 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. diff --git a/chart-sdk/asp-net-mvc/bullet-chart/value-bar.md b/chart-sdk/asp-net-mvc/bullet-chart/value-bar.md index de18eb0a7..d3ca4a089 100644 --- a/chart-sdk/asp-net-mvc/bullet-chart/value-bar.md +++ b/chart-sdk/asp-net-mvc/bullet-chart/value-bar.md @@ -1,15 +1,14 @@ --- layout: post -title: Value Bar in ASP.NET MVC Bullet Chart Component +title: Value Bar in ASP.NET MVC Bullet Chart | Syncfusion description: Learn here all about Value Bar in Syncfusion ASP.NET MVC Bullet Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Value Bar -publishingplatform: chart-sdk documentation: ug --- -# Actual bar +# Actual bar in ASP.NET MVC 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://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.charts.bulletchart.html#Syncfusion_EJ2_Charts_BulletChart_ValueField) should be mapped to the appropriate field from the data source. diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/accessibility.md b/chart-sdk/asp-net-mvc/heatmap-chart/accessibility.md index fe98e1bc7..916798ebd 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/accessibility.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion ASP.NET MVC HeatMap chart component description: Learn here all about Accessibility in Syncfusion ASP.NET MVC HeatMap chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/appearance.md b/chart-sdk/asp-net-mvc/heatmap-chart/appearance.md index b3e25a6da..305189a45 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/appearance.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/appearance.md @@ -4,7 +4,6 @@ title: Appearance in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Appearance in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/axis.md b/chart-sdk/asp-net-mvc/heatmap-chart/axis.md index aa9308886..3be4384a7 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/axis.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/axis.md @@ -4,7 +4,6 @@ title: Axis in Syncfusion ASP.NET MVC HeatMap Chart Component description: Learn here all about axis in Syncfusion ASP.NET MVC HeatMap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/bubble-heatmap.md b/chart-sdk/asp-net-mvc/heatmap-chart/bubble-heatmap.md index a05119f1c..385ad8a42 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/bubble-heatmap.md @@ -4,7 +4,6 @@ title: Bubble Heatmap in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Bubble Heatmap in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bubble Heatmap -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/dimensions.md b/chart-sdk/asp-net-mvc/heatmap-chart/dimensions.md index 41f20c071..c4df83b55 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/dimensions.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/dimensions.md @@ -4,7 +4,6 @@ title: Dimensions in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Dimensions in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/ej1-api-migration.md b/chart-sdk/asp-net-mvc/heatmap-chart/ej1-api-migration.md index 87bd9637d..e686ee1e6 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 Api Migration in ASP.NET MVC Heatmap Chart Component +title: Ej1 Api Migration in ASP.NET MVC Heatmap Chart | Syncfusion description: Learn here all about Ej1 Api Migration in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 Api Migration -publishingplatform: chart-sdk documentation: ug --- -# Migration from Essential® JS 1 +# EJ1 API migration in ASP.NET MVC 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/asp-net-mvc/heatmap-chart/events.md b/chart-sdk/asp-net-mvc/heatmap-chart/events.md index c0a807a44..0e6fd758b 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/events.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/events.md @@ -4,7 +4,6 @@ title: Events in Syncfusion ASP.NET MVC HeatMap Chart Component description: Learn here all about Events in Syncfusion ASP.NET MVC HeatMap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Events -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/getting-started.md b/chart-sdk/asp-net-mvc/heatmap-chart/getting-started.md index 22e6fc96c..932409097 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/getting-started.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET MVC HeatMap Chart Control | Syncfusion description: Check out and learn about getting started with the ASP.NET MVC HeatMap Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/how-to/legend-label-customization.md b/chart-sdk/asp-net-mvc/heatmap-chart/how-to/legend-label-customization.md index 3150d85ec..7cd7cc8a6 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/how-to/legend-label-customization.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/how-to/legend-label-customization.md @@ -1,10 +1,9 @@ --- layout: post -title: Legend Label Customization in ASP.NET MVC Heatmap Chart Component +title: Legend Label Customization in ASP.NET MVC Heatmap Chart | Syncfusion description: Learn here all about Legend Label Customization in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend Label Customization -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/how-to/tooltip-template.md b/chart-sdk/asp-net-mvc/heatmap-chart/how-to/tooltip-template.md index a43a86b77..23fc42fdf 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/how-to/tooltip-template.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/how-to/tooltip-template.md @@ -1,10 +1,9 @@ --- layout: post -title: Tooltip Template in ASP.NET MVC Heatmap Chart Component +title: Tooltip Template in ASP.NET MVC Heatmap Chart | Syncfusion description: Learn here all about Tooltip Template in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip Template -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif b/chart-sdk/asp-net-mvc/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif index b8fa215cc..8edcb111a 100644 Binary files a/chart-sdk/asp-net-mvc/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif and b/chart-sdk/asp-net-mvc/heatmap-chart/images/selection/heatmap-chart-clear-selection.gif differ diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/legend.md b/chart-sdk/asp-net-mvc/heatmap-chart/legend.md index bfb63e858..f9c66a8d8 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/legend.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/legend.md @@ -4,7 +4,6 @@ title: Legend in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Legend in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/overview.md b/chart-sdk/asp-net-mvc/heatmap-chart/overview.md index 80edfd64f..aa74f2e17 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/overview.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/overview.md @@ -1,15 +1,14 @@ --- layout: post -title: Overview in ASP.NET MVC Heatmap Chart Component +title: Overview in ASP.NET MVC Heatmap Chart | Syncfusion description: Learn here all about Overview in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Index -publishingplatform: chart-sdk documentation: ug --- -# Overview +# Overview in ASP.NET MVC HeatMap Chart The HeatMap control is used to visualize a two-dimensional data in which the values are represented in gradient or fixed colors. diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/palette.md b/chart-sdk/asp-net-mvc/heatmap-chart/palette.md index a4d8bfde5..f72db3e4b 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/palette.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/palette.md @@ -4,7 +4,6 @@ title: Palette in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Palette in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Palette -publishingplatform: chart-sdk documentation: ug --- @@ -64,4 +63,4 @@ You can define the colors ranges or color stops for data values in both gradient ## See Also -* [How to enable smart legend](./legend/#smart-legend) +* [How to enable smart legend](./legend#smart-legend) diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/rendering-mode.md b/chart-sdk/asp-net-mvc/heatmap-chart/rendering-mode.md index a00d5a635..8ecb908f2 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/rendering-mode.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/rendering-mode.md @@ -4,7 +4,6 @@ title: Rendering Mode in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Rendering Mode in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Rendering Mode -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/selection.md b/chart-sdk/asp-net-mvc/heatmap-chart/selection.md index 8fe20377f..0b3a6d41b 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/selection.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/selection.md @@ -4,7 +4,6 @@ title: Selection in Syncfusion ASP.NET MVC HeatMap Chart Component description: Learn here all about Selection in Syncfusion ASP.NET MVC HeatMap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selection -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/tooltip.md b/chart-sdk/asp-net-mvc/heatmap-chart/tooltip.md index b79d35c67..e6a5d6970 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/tooltip.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/tooltip.md @@ -4,7 +4,6 @@ title: Tooltip in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Tooltip in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/heatmap-chart/working-with-data.md b/chart-sdk/asp-net-mvc/heatmap-chart/working-with-data.md index ac0e4bf12..a28fb019a 100644 --- a/chart-sdk/asp-net-mvc/heatmap-chart/working-with-data.md +++ b/chart-sdk/asp-net-mvc/heatmap-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working With Data in Syncfusion ASP.NET MVC Heatmap Chart Component description: Learn here all about Working With Data in Syncfusion ASP.NET MVC Heatmap Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working With Data -publishingplatform: chart-sdk documentation: ug --- @@ -116,4 +115,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/asp-net-mvc/smith-chart/accessibility.md b/chart-sdk/asp-net-mvc/smith-chart/accessibility.md index 034470df5..e63fbf6b0 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/accessibility.md +++ b/chart-sdk/asp-net-mvc/smith-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Smith Chart Component description: Learn here all about Accessibility in Syncfusion ASP MVC Smith Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/smith-chart/getting-started.md b/chart-sdk/asp-net-mvc/smith-chart/getting-started.md index 87b2084fa..4c85afa57 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/getting-started.md +++ b/chart-sdk/asp-net-mvc/smith-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET MVC SmithChart Control | Syncfusion description: Check out and learn about getting started with ASP.NET MVC SmithChart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/smith-chart/overview.md b/chart-sdk/asp-net-mvc/smith-chart/overview.md index 8579ebc85..4b99a3763 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/overview.md +++ b/chart-sdk/asp-net-mvc/smith-chart/overview.md @@ -1,15 +1,14 @@ --- layout: post -title: Overview in ASP.NET MVC Smithchart Component +title: Overview in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Overview in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Index -publishingplatform: chart-sdk documentation: ug --- -# Overview +# Overview in ASP.NET MVC SmithChart Control The Smith chart control is one of the most useful data visualization tools for high frequency circuit applications. It contains two sets of circles to plot the parameters of transmission lines. diff --git a/chart-sdk/asp-net-mvc/smith-chart/smithchart-axis.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-axis.md index be2b2dfd2..831216a18 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-axis.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-axis.md @@ -4,7 +4,6 @@ title: Smithchart Axis in ASP.NET MVC Smithchart Control | Syncfusion description: Learn here all about Smithchart Axis in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Axis -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/smith-chart/smithchart-dimensions.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-dimensions.md index c70eaca34..8374e5e93 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-dimensions.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Smithchart Dimensions in ASP.NET MVC Smithchart Component +title: Dimensions in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Smithchart Dimensions in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/smith-chart/smithchart-legend.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-legend.md index ef90f6a34..8f19d4efb 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-legend.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-legend.md @@ -1,17 +1,16 @@ --- layout: post -title: Smithchart Legend in ASP.NET MVC Smithchart Component +title: Legend in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Smithchart Legend in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Legend -publishingplatform: chart-sdk documentation: ug --- -# Legend +# Legend in ASP.NET MVC Smithchart 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/asp-net-mvc/smith-chart/smithchart-marker.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-marker.md index bc4802f2c..5f9b26340 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-marker.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-marker.md @@ -1,17 +1,16 @@ --- layout: post -title: Smithchart Marker in ASP.NET MVC Smithchart Component +title: Smithchart Marker in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Smithchart Marker in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Marker -publishingplatform: chart-sdk documentation: ug --- -# Marker & Datalabels +# Marker & Datalabels in ASP.NET MVC Smithchart 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/asp-net-mvc/smith-chart/smithchart-print.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-print.md index e75ef2771..63f4d237d 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-print.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-print.md @@ -1,15 +1,14 @@ --- layout: post -title: Smithchart Print in ASP.NET MVC Smithchart Component +title: Smithchart Print in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Smithchart Print in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Print -publishingplatform: chart-sdk documentation: ug --- -# Print and Export +# Print and Export in ASP.NET MVC Smithchart ## Print diff --git a/chart-sdk/asp-net-mvc/smith-chart/smithchart-series.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-series.md index c4f30e4df..adbc87cd0 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-series.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-series.md @@ -1,15 +1,14 @@ --- layout: post -title: Smithchart Series in ASP.NET MVC Smithchart Component +title: Series in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Smithchart Series in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Series -publishingplatform: chart-sdk documentation: ug --- -# Series +# Series in ASP.NET MVC Smithchart 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/asp-net-mvc/smith-chart/smithchart-tooltip.md b/chart-sdk/asp-net-mvc/smith-chart/smithchart-tooltip.md index 35b070d74..4e6ee8561 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/smithchart-tooltip.md +++ b/chart-sdk/asp-net-mvc/smith-chart/smithchart-tooltip.md @@ -1,15 +1,14 @@ --- layout: post -title: Smithchart Tooltip in ASP.NET MVC Smithchart Component +title: Smithchart Tooltip in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Smithchart Tooltip in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smithchart Tooltip -publishingplatform: chart-sdk documentation: ug --- -# Tooltip +# Tooltip in ASP.NET MVC Smithchart Smithchart will display details about the points through tooltip, when the mouse is moved over the point. By default, tooltip is disabled. To enable the tooltip for smithchart, you need to import and inject TooltipRender module from chart. And also set the property visible as true, in tooltip settings. You can customize the tooltip's visibility and appearance differently each series in the smithchart. diff --git a/chart-sdk/asp-net-mvc/smith-chart/title-subtitle.md b/chart-sdk/asp-net-mvc/smith-chart/title-subtitle.md index f997b505b..1d1a6f9fe 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/title-subtitle.md +++ b/chart-sdk/asp-net-mvc/smith-chart/title-subtitle.md @@ -1,15 +1,14 @@ --- layout: post -title: Title Subtitle in ASP.NET MVC Smithchart Component +title: Title and Subtitle in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Title Subtitle in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title Subtitle -publishingplatform: chart-sdk documentation: ug --- -# Title and Subtitle +# Title and Subtitle in ASP.NET MVC Smithchart ## Enable title diff --git a/chart-sdk/asp-net-mvc/smith-chart/working-with-data.md b/chart-sdk/asp-net-mvc/smith-chart/working-with-data.md index 54465040e..b8190aadd 100644 --- a/chart-sdk/asp-net-mvc/smith-chart/working-with-data.md +++ b/chart-sdk/asp-net-mvc/smith-chart/working-with-data.md @@ -1,15 +1,14 @@ --- layout: post -title: Working With Data in ASP.NET MVC Smithchart Component +title: Working With Data in ASP.NET MVC Smithchart | Syncfusion description: Learn here all about Working With Data in Syncfusion ASP.NET MVC Smithchart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working With Data -publishingplatform: chart-sdk documentation: ug --- -# Working with Data +# Working with Data in ASP.NET MVC Smithchart 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. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/accessibility.md b/chart-sdk/asp-net-mvc/sparkline-charts/accessibility.md index 830fa871f..d6c90874e 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/accessibility.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Sparkline Component description: Learn here all about Accessibility in Syncfusion ASP MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/appearance.md b/chart-sdk/asp-net-mvc/sparkline-charts/appearance.md index 9819c5d07..83eb6038d 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/appearance.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/appearance.md @@ -1,15 +1,14 @@ --- layout: post -title: Appearance in ASP.NET MVC Sparkline Component +title: Appearance in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Appearance in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug --- -# Appearance +# Appearance in ASP.NET MVC Sparkline The appearance of the sparkline can be customized using margin, container Area border, and container Area background. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/axis-customization.md b/chart-sdk/asp-net-mvc/sparkline-charts/axis-customization.md index 8ec71bf80..c721b8045 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/axis-customization.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/axis-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Customization in ASP.NET MVC Sparkline Component +title: Axis Customization in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Axis Customization in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis Customization -publishingplatform: chart-sdk documentation: ug --- -# Axis Customization +# Axis Customization in ASP.NET MVC Sparkline Charts You can customize axis value types and min and max values of the sparkline. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/data-labels.md b/chart-sdk/asp-net-mvc/sparkline-charts/data-labels.md index 5b37d646c..58b3bae9a 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/data-labels.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/data-labels.md @@ -1,15 +1,14 @@ --- layout: post -title: Data Labels in ASP.NET MVC Sparkline Component +title: Data Labels in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Data Labels in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data Labels -publishingplatform: chart-sdk documentation: ug --- -# Data Labels +# Data Labels in ASP.NET MVC Sparkline Data labels are used to display values of data points to improve the readability. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/ej1-api-migration.md b/chart-sdk/asp-net-mvc/sparkline-charts/ej1-api-migration.md index 902423122..7118131c0 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/ej1-api-migration.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/ej1-api-migration.md @@ -1,15 +1,14 @@ --- layout: post -title: Ej1 Api Migration in ASP.NET MVC Sparkline Component +title: Ej1 Api Migration in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Ej1 Api Migration in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 Api Migration -publishingplatform: chart-sdk documentation: ug --- -# Migration from Essential® JS 1 +# EJ1 API migration in ASP.NET MVC Sparkline This article describes the API migration process of Accordion component from Essential® JS 1 to Essential® JS 2. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/getting-started.md b/chart-sdk/asp-net-mvc/sparkline-charts/getting-started.md index 26fe98b58..645fcc8f0 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/getting-started.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET MVC Sparkline Control | Syncfusion description: Check out and learn about getting started with ASP.NET MVC Sparkline control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/localization.md b/chart-sdk/asp-net-mvc/sparkline-charts/localization.md index efbdee4cb..3e8e14157 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/localization.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/localization.md @@ -1,15 +1,14 @@ --- layout: post -title: Localization in ASP.NET MVC Sparkline Component +title: Localization in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Localization in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization -publishingplatform: chart-sdk documentation: ug --- -# Localization +# Localization in ASP.NET MVC 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/asp-net-mvc/sparkline-charts/marker.md b/chart-sdk/asp-net-mvc/sparkline-charts/marker.md index b22496c1f..54a7dcc60 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/marker.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/marker.md @@ -1,15 +1,14 @@ --- layout: post -title: Marker in ASP.NET MVC Sparkline Component +title: Marker in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Marker in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Marker -publishingplatform: chart-sdk documentation: ug --- -# Markers +# Markers in ASP.NET MVC Sparkline This section explains how to add markers to the sparklines. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/overview.md b/chart-sdk/asp-net-mvc/sparkline-charts/overview.md index b28fe6701..4c77c9049 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/overview.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/overview.md @@ -1,15 +1,14 @@ --- layout: post -title: Overview in ASP.NET MVC Sparkline Component +title: Overview in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Overview in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Index -publishingplatform: chart-sdk documentation: ug --- -# Overview +# Overview in ASP.NET MVC Sparkline The Sparkline is a very small chart; it is drawn without axes or coordinates. This presents a common shape of data in a simple and highly condensed way. The sparklines are easy to interpret, and convey more information to users by visualizing data in a small amount of space. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/range-band.md b/chart-sdk/asp-net-mvc/sparkline-charts/range-band.md index 25ccb8d2a..cde6268b0 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/range-band.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/range-band.md @@ -1,15 +1,14 @@ --- layout: post -title: Range Band in ASP.NET MVC Sparkline Component +title: Range Band in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Range Band in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range Band -publishingplatform: chart-sdk documentation: ug --- -# Range Band +# Range Band in ASP.NET MVC Sparkline This section explains how to customize the sparkline with multiple range bands. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-dimensions.md b/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-dimensions.md index 08e5b1968..48965841f 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-dimensions.md @@ -1,15 +1,14 @@ --- layout: post -title: Sparkline Dimensions in ASP.NET MVC Sparkline Component +title: Dimensions in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Sparkline Dimensions in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline Dimensions -publishingplatform: chart-sdk documentation: ug --- -# Sparkline Dimensions +# Sparkline Dimensions in ASP.NET MVC ## Size for container diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-types.md b/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-types.md index 72ba50596..f94d136df 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-types.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/sparkline-types.md @@ -1,15 +1,14 @@ --- layout: post -title: Sparkline Types in ASP.NET MVC Sparkline Component +title: Types in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Sparkline Types in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline Types -publishingplatform: chart-sdk documentation: ug --- -# Sparkline Types +# Types in ASP.NET MVC 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/asp-net-mvc/sparkline-charts/special-points-customization.md b/chart-sdk/asp-net-mvc/sparkline-charts/special-points-customization.md index 7098f7370..7ac2d89e4 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/special-points-customization.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/special-points-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Special Points Customization in ASP.NET MVC Sparkline Component +title: Special Points Customization in ASP.NET MVC Sparkline | Syncfusion description: Learn here all about Special Points Customization in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Special Points Customization -publishingplatform: chart-sdk documentation: ug --- -# Special points customization +# Special points customization in ASP.NET MVC Sparkline You can customize the points by initializing the point colors. The customization options allows to differentiate the [`start`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~StartPointColor.html), [`end`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~EndPointColor.html), [`positive`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~HighPointColor.html), [`negative`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~NegativePointColor.html), and [`low`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2~Syncfusion.EJ2.Charts.Sparkline~LowPointColor.html) points. This customization is only applicable for line, column, and area type sparklines. diff --git a/chart-sdk/asp-net-mvc/sparkline-charts/user-interaction.md b/chart-sdk/asp-net-mvc/sparkline-charts/user-interaction.md index 15d545764..db9840450 100644 --- a/chart-sdk/asp-net-mvc/sparkline-charts/user-interaction.md +++ b/chart-sdk/asp-net-mvc/sparkline-charts/user-interaction.md @@ -4,7 +4,6 @@ title: User Interaction in ASP.NET MVC Syncfusion Sparkline Component description: Learn here all about User Interaction in Syncfusion ASP.NET MVC Sparkline component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: User Interaction -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/accessibility.md b/chart-sdk/asp-net-mvc/stock-chart/accessibility.md similarity index 99% rename from chart-sdk/asp-net-mvc/stock-charts/accessibility.md rename to chart-sdk/asp-net-mvc/stock-chart/accessibility.md index 1c7f3758c..1535ee42d 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/accessibility.md +++ b/chart-sdk/asp-net-mvc/stock-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in Syncfusion Stock Chart Component description: Learn here all about Accessibility in Syncfusion ASP MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/appearance.md b/chart-sdk/asp-net-mvc/stock-chart/appearance.md similarity index 93% rename from chart-sdk/asp-net-mvc/stock-charts/appearance.md rename to chart-sdk/asp-net-mvc/stock-chart/appearance.md index b180a31b1..5ac7a029c 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/appearance.md +++ b/chart-sdk/asp-net-mvc/stock-chart/appearance.md @@ -1,15 +1,14 @@ --- layout: post -title: Appearance in ASP.NET MVC Stock Chart Component +title: Appearance in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Appearance in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug --- -# Appearance +# Appearance in ASP.NET MVC Stock chart ## Stock Chart Title @@ -62,4 +61,4 @@ Changing theme will affect background color,gridlines,tooltip colors and appeara ## See Also -* [Axis Customization](./axis-customization/) +* [Axis Customization](./axis-customization) diff --git a/chart-sdk/asp-net-mvc/stock-charts/axis-customization.md b/chart-sdk/asp-net-mvc/stock-chart/axis-customization.md similarity index 98% rename from chart-sdk/asp-net-mvc/stock-charts/axis-customization.md rename to chart-sdk/asp-net-mvc/stock-chart/axis-customization.md index 2a90f28b9..aaaf44257 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/axis-customization.md +++ b/chart-sdk/asp-net-mvc/stock-chart/axis-customization.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Customization in ASP.NET MVC Stock Chart Component +title: Axis Customization in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Axis Customization in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis Customization -publishingplatform: chart-sdk documentation: ug --- -# Axis Customization +# Axis Customization in ASP.NET MVC Stock chart diff --git a/chart-sdk/asp-net-mvc/stock-charts/axis-types.md b/chart-sdk/asp-net-mvc/stock-chart/axis-types.md similarity index 94% rename from chart-sdk/asp-net-mvc/stock-charts/axis-types.md rename to chart-sdk/asp-net-mvc/stock-chart/axis-types.md index 17f3eeb57..71193a3a1 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/axis-types.md +++ b/chart-sdk/asp-net-mvc/stock-chart/axis-types.md @@ -1,15 +1,14 @@ --- layout: post -title: Axis Types in ASP.NET MVC Stock Chart Component +title: Axis Types in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Axis Types in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis types -publishingplatform: chart-sdk documentation: ug --- -# Axis types +# Axis types in ASP.NET MVC Stock chart ## DateTime axis @@ -60,4 +59,4 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat ## See also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/asp-net-mvc/stock-charts/chart-dimensions.md b/chart-sdk/asp-net-mvc/stock-chart/chart-dimensions.md similarity index 95% rename from chart-sdk/asp-net-mvc/stock-charts/chart-dimensions.md rename to chart-sdk/asp-net-mvc/stock-chart/chart-dimensions.md index dbffecc86..a32a2f09d 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/chart-dimensions.md +++ b/chart-sdk/asp-net-mvc/stock-chart/chart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Chart Dimensions in ASP.NET MVC Stock Chart Component +title: Chart Dimensions in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Chart Dimensions in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart Dimensions -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/cross-hair.md b/chart-sdk/asp-net-mvc/stock-chart/cross-hair.md similarity index 99% rename from chart-sdk/asp-net-mvc/stock-charts/cross-hair.md rename to chart-sdk/asp-net-mvc/stock-chart/cross-hair.md index 92aa1077c..7f61fd18a 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/cross-hair.md +++ b/chart-sdk/asp-net-mvc/stock-chart/cross-hair.md @@ -4,12 +4,11 @@ title: Cross Hair in ASP.NET MVC Syncfusion Stock Chart Component description: Learn here all about Cross Hair in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Cross Hair -publishingplatform: chart-sdk documentation: ug --- -# Add Crosshair +# Add Crosshair in ASP.NET MVC 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/asp-net-mvc/stock-charts/export-print.md b/chart-sdk/asp-net-mvc/stock-chart/export-print.md similarity index 92% rename from chart-sdk/asp-net-mvc/stock-charts/export-print.md rename to chart-sdk/asp-net-mvc/stock-chart/export-print.md index 61428af4c..bf6f168ae 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/export-print.md +++ b/chart-sdk/asp-net-mvc/stock-chart/export-print.md @@ -1,15 +1,14 @@ --- layout: post -title: Export Print in ASP.NET MVC Stock Chart Component +title: Export Print in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Export Print in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Export Print -publishingplatform: chart-sdk documentation: ug --- -# Print and Export +# Print and Export in ASP.NET MVC 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/asp-net-mvc/stock-charts/getting-started.md b/chart-sdk/asp-net-mvc/stock-chart/getting-started.md similarity index 99% rename from chart-sdk/asp-net-mvc/stock-charts/getting-started.md rename to chart-sdk/asp-net-mvc/stock-chart/getting-started.md index f3b460936..741fd6fe5 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/getting-started.md +++ b/chart-sdk/asp-net-mvc/stock-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting Started with ASP.NET MVC Stock Chart Control | Syncfusion description: Check out and learn about getting started with ASP.NET MVC Stock Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting Started -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/gradient.md b/chart-sdk/asp-net-mvc/stock-chart/gradient.md similarity index 98% rename from chart-sdk/asp-net-mvc/stock-charts/gradient.md rename to chart-sdk/asp-net-mvc/stock-chart/gradient.md index 85ebd9968..e2cec7b9c 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/gradient.md +++ b/chart-sdk/asp-net-mvc/stock-chart/gradient.md @@ -1,10 +1,9 @@ --- layout: post -title: Gradient in ASP.NET MVC Stock Chart Component +title: Gradient in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Gradient in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Gradient -publishingplatform: chart-sdk documentation: ug --- @@ -23,6 +22,8 @@ Gradients can be applied to: The gradient can be defined in the `@{ }` Razor code block or dynamically configured in the `load` event of the chart. +## Linear Gradient + A linear gradient blends color along side a straight path from a defined start point to an end point. Configure it by adding `LinearGradient` inside the target element (Series, Trendlines or Indicators) and define one or more color stops that control how colors transition across the gradient. Set the start and end positions of the gradient using `X1`, `Y1`, `X2` and `Y2` properties. The gradient color stop values such as `Offset`, `Color`, `Opacity`, `Lighten` and `Brighten` are set using the `ChartGradientColorStop` property. The linear gradient properties are: diff --git a/chart-sdk/asp-net-mvc/stock-chart/images/nodatatemplate-stockchart.png b/chart-sdk/asp-net-mvc/stock-chart/images/nodatatemplate-stockchart.png new file mode 100644 index 000000000..be2ed590b Binary files /dev/null and b/chart-sdk/asp-net-mvc/stock-chart/images/nodatatemplate-stockchart.png differ diff --git a/chart-sdk/asp-net-mvc/stock-charts/images/stockchart-control.png b/chart-sdk/asp-net-mvc/stock-chart/images/stockchart-control.png similarity index 100% rename from chart-sdk/asp-net-mvc/stock-charts/images/stockchart-control.png rename to chart-sdk/asp-net-mvc/stock-chart/images/stockchart-control.png diff --git a/chart-sdk/asp-net-mvc/stock-charts/images/stockchart.png b/chart-sdk/asp-net-mvc/stock-chart/images/stockchart.png similarity index 100% rename from chart-sdk/asp-net-mvc/stock-charts/images/stockchart.png rename to chart-sdk/asp-net-mvc/stock-chart/images/stockchart.png diff --git a/chart-sdk/asp-net-mvc/stock-charts/legend.md b/chart-sdk/asp-net-mvc/stock-chart/legend.md similarity index 99% rename from chart-sdk/asp-net-mvc/stock-charts/legend.md rename to chart-sdk/asp-net-mvc/stock-chart/legend.md index 8b4635152..0c4a5ea6a 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/legend.md +++ b/chart-sdk/asp-net-mvc/stock-chart/legend.md @@ -4,7 +4,6 @@ title: Syncfusion ASP.NET MVC Stock Chart Legend Component description: Learn here all about Legend in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/period-selector.md b/chart-sdk/asp-net-mvc/stock-chart/period-selector.md similarity index 94% rename from chart-sdk/asp-net-mvc/stock-charts/period-selector.md rename to chart-sdk/asp-net-mvc/stock-chart/period-selector.md index 3fa91468d..a7faf4f1f 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/period-selector.md +++ b/chart-sdk/asp-net-mvc/stock-chart/period-selector.md @@ -1,15 +1,14 @@ --- layout: post -title: Period Selector in ASP.NET MVC Stock Chart Component +title: Period Selector in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Period Selector in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Period Selector -publishingplatform: chart-sdk documentation: ug --- -# Period selector +# Period selector in ASP.NET MVC Stock chart The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart. diff --git a/chart-sdk/asp-net-mvc/stock-charts/range-selector.md b/chart-sdk/asp-net-mvc/stock-chart/range-selector.md similarity index 90% rename from chart-sdk/asp-net-mvc/stock-charts/range-selector.md rename to chart-sdk/asp-net-mvc/stock-chart/range-selector.md index e71584659..af39e250b 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/range-selector.md +++ b/chart-sdk/asp-net-mvc/stock-chart/range-selector.md @@ -1,19 +1,18 @@ --- layout: post -title: Range Selector in ASP.NET MVC Stock Chart Component +title: Range Selector in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Range Selector in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range Selector -publishingplatform: chart-sdk documentation: ug --- -# Range selector +# Range selector in ASP.NET MVC Stock chart The period selector allows to select a range with specified periods. By default the period selector is enabled in stock chart. -# Selecting Range +## Selecting Range 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. diff --git a/chart-sdk/asp-net-mvc/stock-charts/series-types.md b/chart-sdk/asp-net-mvc/stock-chart/series-types.md similarity index 96% rename from chart-sdk/asp-net-mvc/stock-charts/series-types.md rename to chart-sdk/asp-net-mvc/stock-chart/series-types.md index 66dd7dc65..3f2d04563 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/series-types.md +++ b/chart-sdk/asp-net-mvc/stock-chart/series-types.md @@ -1,10 +1,9 @@ --- layout: post -title: Series Types in ASP.NET MVC Stock Chart Component +title: Series Types in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Series Types in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series Types -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/stock-events.md b/chart-sdk/asp-net-mvc/stock-chart/stock-events.md similarity index 92% rename from chart-sdk/asp-net-mvc/stock-charts/stock-events.md rename to chart-sdk/asp-net-mvc/stock-chart/stock-events.md index acb528158..ffd0859d3 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/stock-events.md +++ b/chart-sdk/asp-net-mvc/stock-chart/stock-events.md @@ -1,16 +1,15 @@ --- layout: post -title: Stock Events in ASP.NET MVC Stock Chart Component +title: Stock Events in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Stock Events in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Stock Events -publishingplatform: chart-sdk documentation: ug --- -# Stock Events +# Stock Events in ASP.NET MVC Stock chart Stock Events visualizes stockevents in stockchart. 'SplineSeries' is used to represent selected data value. You can customize the specific data value using `StockEvents` event. diff --git a/chart-sdk/asp-net-mvc/stock-charts/technical-indicators.md b/chart-sdk/asp-net-mvc/stock-chart/technical-indicators.md similarity index 99% rename from chart-sdk/asp-net-mvc/stock-charts/technical-indicators.md rename to chart-sdk/asp-net-mvc/stock-chart/technical-indicators.md index 3980c6e8f..754bcb1c7 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/technical-indicators.md +++ b/chart-sdk/asp-net-mvc/stock-chart/technical-indicators.md @@ -4,7 +4,6 @@ title: Technical Indicators in ASP.NET MVC Stock Chart Component | Syncfusion description: Learn here all about Technical Indicators in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Technical Indicators -publishingplatform: chart-sdk documentation: ug --- diff --git a/chart-sdk/asp-net-mvc/stock-charts/tool-tip.md b/chart-sdk/asp-net-mvc/stock-chart/tool-tip.md similarity index 97% rename from chart-sdk/asp-net-mvc/stock-charts/tool-tip.md rename to chart-sdk/asp-net-mvc/stock-chart/tool-tip.md index 200578a72..e5f56656b 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/tool-tip.md +++ b/chart-sdk/asp-net-mvc/stock-chart/tool-tip.md @@ -1,15 +1,14 @@ --- layout: post -title: Tool Tip in ASP.NET MVC Stock Chart Component +title: Tooltip in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Tool Tip in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool Tip -publishingplatform: chart-sdk documentation: ug --- -# Tooltip +# Tooltip in ASP.NET MVC Stock chart diff --git a/chart-sdk/asp-net-mvc/stock-charts/trend-lines.md b/chart-sdk/asp-net-mvc/stock-chart/trend-lines.md similarity index 97% rename from chart-sdk/asp-net-mvc/stock-charts/trend-lines.md rename to chart-sdk/asp-net-mvc/stock-chart/trend-lines.md index 1f5e21c0f..e9ce42a80 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/trend-lines.md +++ b/chart-sdk/asp-net-mvc/stock-chart/trend-lines.md @@ -1,15 +1,14 @@ --- layout: post -title: Trend Lines in ASP.NET MVC Stock Chart Component +title: Trend Lines in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Trend Lines in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Trend Lines -publishingplatform: chart-sdk documentation: ug --- -# Trendlines +# Trendlines in ASP.NET MVC Stock chart Trendlines are used to show the direction and speed of price. diff --git a/chart-sdk/asp-net-mvc/stock-charts/working-with-data.md b/chart-sdk/asp-net-mvc/stock-chart/working-with-data.md similarity index 92% rename from chart-sdk/asp-net-mvc/stock-charts/working-with-data.md rename to chart-sdk/asp-net-mvc/stock-chart/working-with-data.md index 04fce7822..50b4e4e52 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/working-with-data.md +++ b/chart-sdk/asp-net-mvc/stock-chart/working-with-data.md @@ -1,17 +1,16 @@ --- layout: post -title: Working With Data in ASP.NET MVC Stock Chart Component +title: Working With Data in ASP.NET MVC Stock Chart | Syncfusion description: Learn here all about Working With Data in Syncfusion ASP.NET MVC Stock Chart component of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working With Data -publishingplatform: chart-sdk documentation: ug --- -# Working with Data +# Working with Data in ASP.NET MVC Stock chart Chart can visualise data bound from local or remote data. @@ -46,4 +45,4 @@ When no data is available to render in the stock chart, the `NoDataTemplate` pro ## See Also -* [Series Types](./series-types/) +* [Series Types](./series-types) diff --git a/chart-sdk/asp-net-mvc/stock-charts/images/nodatatemplate-stockchart.png b/chart-sdk/asp-net-mvc/stock-charts/images/nodatatemplate-stockchart.png deleted file mode 100644 index f38a9de7a..000000000 Binary files a/chart-sdk/asp-net-mvc/stock-charts/images/nodatatemplate-stockchart.png and /dev/null differ diff --git a/chart-sdk/javascript/bullet-chart/accessibility.md b/chart-sdk/javascript/bullet-chart/accessibility.md index 7ec4d4726..938cc239d 100644 --- a/chart-sdk/javascript/bullet-chart/accessibility.md +++ b/chart-sdk/javascript/bullet-chart/accessibility.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/axis-customization.md b/chart-sdk/javascript/bullet-chart/axis-customization.md index f7508ad12..27d09a94e 100644 --- a/chart-sdk/javascript/bullet-chart/axis-customization.md +++ b/chart-sdk/javascript/bullet-chart/axis-customization.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Axis customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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..ba368ab2c 100644 --- a/chart-sdk/javascript/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/javascript/bullet-chart/bullet-chart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Bullet chart dimensions in JavaScript Bullet chart control | Syncfusion +title: 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. platform: chart-sdk control: Bullet chart dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/comparative-bar.md b/chart-sdk/javascript/bullet-chart/comparative-bar.md index 886462236..a7ce0bce0 100644 --- a/chart-sdk/javascript/bullet-chart/comparative-bar.md +++ b/chart-sdk/javascript/bullet-chart/comparative-bar.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Comparative bar -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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..463e0123b 100644 --- a/chart-sdk/javascript/bullet-chart/customization.md +++ b/chart-sdk/javascript/bullet-chart/customization.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/data-binding.md b/chart-sdk/javascript/bullet-chart/data-binding.md index 4b3a7f020..ee1623101 100644 --- a/chart-sdk/javascript/bullet-chart/data-binding.md +++ b/chart-sdk/javascript/bullet-chart/data-binding.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Data binding -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/data-label.md b/chart-sdk/javascript/bullet-chart/data-label.md index c4d9dbf41..0af26d7d2 100644 --- a/chart-sdk/javascript/bullet-chart/data-label.md +++ b/chart-sdk/javascript/bullet-chart/data-label.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Data label -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/es5-getting-started.md b/chart-sdk/javascript/bullet-chart/es5-getting-started.md index 6c3de2977..a45545054 100644 --- a/chart-sdk/javascript/bullet-chart/es5-getting-started.md +++ b/chart-sdk/javascript/bullet-chart/es5-getting-started.md @@ -4,7 +4,6 @@ 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. 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..f54c45073 100644 --- a/chart-sdk/javascript/bullet-chart/ranges.md +++ b/chart-sdk/javascript/bullet-chart/ranges.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Ranges -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/title.md b/chart-sdk/javascript/bullet-chart/title.md index fd1ea1dd3..deeaa8665 100644 --- a/chart-sdk/javascript/bullet-chart/title.md +++ b/chart-sdk/javascript/bullet-chart/title.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Title -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/bullet-chart/tool-tip.md b/chart-sdk/javascript/bullet-chart/tool-tip.md index a2558ada4..7e0b5094f 100644 --- a/chart-sdk/javascript/bullet-chart/tool-tip.md +++ b/chart-sdk/javascript/bullet-chart/tool-tip.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Tool tip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays i ## 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..c3e9c15e6 100644 --- a/chart-sdk/javascript/bullet-chart/value-bar.md +++ b/chart-sdk/javascript/bullet-chart/value-bar.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Value bar -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -12,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Value bar in JavaScript Bullet chart control -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/heatmap-chart/accessibility.md b/chart-sdk/javascript/heatmap-chart/accessibility.md index 506da8aef..780072118 100644 --- a/chart-sdk/javascript/heatmap-chart/accessibility.md +++ b/chart-sdk/javascript/heatmap-chart/accessibility.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/heatmap-chart/appearance.md b/chart-sdk/javascript/heatmap-chart/appearance.md index c41b7316e..dac07642f 100644 --- a/chart-sdk/javascript/heatmap-chart/appearance.md +++ b/chart-sdk/javascript/heatmap-chart/appearance.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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/heatmaptitle#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..5213e6b4f 100644 --- a/chart-sdk/javascript/heatmap-chart/axis.md +++ b/chart-sdk/javascript/heatmap-chart/axis.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Axis -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -16,7 +15,7 @@ You can define the type, format, and other customizing options for both axes in ## 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..a19dcb13f 100644 --- a/chart-sdk/javascript/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/javascript/heatmap-chart/bubble-heatmap.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Bubble heatmap -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,14 +12,14 @@ domainurl: https://help.syncfusion.com/chart-sdk 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..a7250cd3f 100644 --- a/chart-sdk/javascript/heatmap-chart/dimensions.md +++ b/chart-sdk/javascript/heatmap-chart/dimensions.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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..972a60166 100644 --- a/chart-sdk/javascript/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/javascript/heatmap-chart/ej1-api-migration.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Ej1 api migration -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/heatmap-chart/events.md b/chart-sdk/javascript/heatmap-chart/events.md index a04477286..d55edb574 100644 --- a/chart-sdk/javascript/heatmap-chart/events.md +++ b/chart-sdk/javascript/heatmap-chart/events.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Events -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ This section describes the HeatMap chart control event, which occurs when the re ## 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..cb8e47fff 100644 --- a/chart-sdk/javascript/heatmap-chart/how-to/legend-customization.md +++ b/chart-sdk/javascript/heatmap-chart/how-to/legend-customization.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Legend customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- 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..0be07173b 100644 --- a/chart-sdk/javascript/heatmap-chart/how-to/tooltip-template.md +++ b/chart-sdk/javascript/heatmap-chart/how-to/tooltip-template.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Tooltip template -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/heatmap-chart/legend.md b/chart-sdk/javascript/heatmap-chart/legend.md index 1d84aea19..09a5b5717 100644 --- a/chart-sdk/javascript/heatmap-chart/legend.md +++ b/chart-sdk/javascript/heatmap-chart/legend.md @@ -4,14 +4,13 @@ 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. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- # Legend in JavaScript Heatmap chart control -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..ecc933cfc 100644 --- a/chart-sdk/javascript/heatmap-chart/palette.md +++ b/chart-sdk/javascript/heatmap-chart/palette.md @@ -4,14 +4,13 @@ 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. platform: chart-sdk control: Palette -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- # Palette in JavaScript Heatmap chart control -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..5449473a6 100644 --- a/chart-sdk/javascript/heatmap-chart/rendering-mode.md +++ b/chart-sdk/javascript/heatmap-chart/rendering-mode.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Rendering mode -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -12,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Rendering mode in JavaScript Heatmap chart control 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..88432b19c 100644 --- a/chart-sdk/javascript/heatmap-chart/selection.md +++ b/chart-sdk/javascript/heatmap-chart/selection.md @@ -4,14 +4,13 @@ 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. platform: chart-sdk control: Selection -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- # Selection in JavaScript Heatmap chart control -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..e74368080 100644 --- a/chart-sdk/javascript/heatmap-chart/tooltip.md +++ b/chart-sdk/javascript/heatmap-chart/tooltip.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ Tooltip is used to provide the details of the heat map cell, and this can be dis ## 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..c88385842 100644 --- a/chart-sdk/javascript/heatmap-chart/working-with-data.md +++ b/chart-sdk/javascript/heatmap-chart/working-with-data.md @@ -4,7 +4,6 @@ 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. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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/smith-chart/accessibility.md b/chart-sdk/javascript/smith-chart/accessibility.md index 007517590..6ef4231f1 100644 --- a/chart-sdk/javascript/smith-chart/accessibility.md +++ b/chart-sdk/javascript/smith-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in JavaScript Smithchart control | Syncfusion description: Learn here all about Accessibility in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/es5-getting-started.md b/chart-sdk/javascript/smith-chart/es5-getting-started.md index 5f4adb4a7..de24bb4ad 100644 --- a/chart-sdk/javascript/smith-chart/es5-getting-started.md +++ b/chart-sdk/javascript/smith-chart/es5-getting-started.md @@ -4,7 +4,6 @@ title: ES5 JavaScript Smith Chart control | Syncfusion description: Render an interactive Smith Chart with the Syncfusion JavaScript (ES5) library by adding a CDN script and writing a few lines of code. platform: chart-sdk control: Smith Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/getting-started.md b/chart-sdk/javascript/smith-chart/getting-started.md index 353bc8900..4e7b1b5aa 100644 --- a/chart-sdk/javascript/smith-chart/getting-started.md +++ b/chart-sdk/javascript/smith-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting started with JavaScript Smithchart control | Syncfusion description: Checkout and learn about Getting started with JavaScript Smithchart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Getting started -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-axis.md b/chart-sdk/javascript/smith-chart/smith-chart-axis.md index 5ca9a89ad..d04c6048d 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-axis.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-axis.md @@ -4,7 +4,6 @@ title: Smith chart axis in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart axis in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart axis -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-dimensions.md b/chart-sdk/javascript/smith-chart/smith-chart-dimensions.md index 834a4a05c..0e514d957 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-dimensions.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-dimensions.md @@ -4,7 +4,6 @@ title: Smith chart dimensions in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart dimensions in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-legend.md b/chart-sdk/javascript/smith-chart/smith-chart-legend.md index 8a1da7062..4e52bbd55 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-legend.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-legend.md @@ -4,7 +4,6 @@ title: Smith chart legend in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart legend in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-marker.md b/chart-sdk/javascript/smith-chart/smith-chart-marker.md index 5c9649b0f..8e95abf9f 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-marker.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-marker.md @@ -4,7 +4,6 @@ title: Smith chart marker in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart marker in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart marker -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-print.md b/chart-sdk/javascript/smith-chart/smith-chart-print.md index 4a9147a3b..0b00b0309 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-print.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-print.md @@ -4,7 +4,6 @@ title: Smith chart print in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart print in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart print -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-series.md b/chart-sdk/javascript/smith-chart/smith-chart-series.md index 437a3f6fe..94a85165f 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-series.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-series.md @@ -4,7 +4,6 @@ title: Smith chart series in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart series in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart series -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/smith-chart-tooltip.md b/chart-sdk/javascript/smith-chart/smith-chart-tooltip.md index 5d2eb0cfb..7a652775d 100644 --- a/chart-sdk/javascript/smith-chart/smith-chart-tooltip.md +++ b/chart-sdk/javascript/smith-chart/smith-chart-tooltip.md @@ -4,7 +4,6 @@ title: Smith chart tooltip in JavaScript Smithchart control | Syncfusion description: Learn here all about Smith chart tooltip in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/title-subtitle.md b/chart-sdk/javascript/smith-chart/title-subtitle.md index 1297fa2ae..f585bf3d9 100644 --- a/chart-sdk/javascript/smith-chart/title-subtitle.md +++ b/chart-sdk/javascript/smith-chart/title-subtitle.md @@ -4,7 +4,6 @@ title: Title subtitle in JavaScript Smithchart control | Syncfusion description: Learn here all about Title subtitle in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title subtitle -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/smith-chart/working-with-data.md b/chart-sdk/javascript/smith-chart/working-with-data.md index da26319ac..1fc0a2794 100644 --- a/chart-sdk/javascript/smith-chart/working-with-data.md +++ b/chart-sdk/javascript/smith-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working with data in JavaScript Smithchart control | Syncfusion description: Learn here all about Working with data in Syncfusion JavaScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/accessibility.md b/chart-sdk/javascript/sparkline-charts/accessibility.md index 7cda23cf7..d71a223af 100644 --- a/chart-sdk/javascript/sparkline-charts/accessibility.md +++ b/chart-sdk/javascript/sparkline-charts/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in JavaScript Sparkline control | Syncfusion description: Learn here all about Accessibility in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/appearance.md b/chart-sdk/javascript/sparkline-charts/appearance.md index c298f6af3..ec73a416b 100644 --- a/chart-sdk/javascript/sparkline-charts/appearance.md +++ b/chart-sdk/javascript/sparkline-charts/appearance.md @@ -4,7 +4,6 @@ title: Appearance in JavaScript Sparkline control | Syncfusion description: Learn here all about Appearance in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/axis-customization.md b/chart-sdk/javascript/sparkline-charts/axis-customization.md index 3d848c9ab..d763e995a 100644 --- a/chart-sdk/javascript/sparkline-charts/axis-customization.md +++ b/chart-sdk/javascript/sparkline-charts/axis-customization.md @@ -4,7 +4,6 @@ title: Axis customization in JavaScript Sparkline control | Syncfusion description: Learn here all about Axis customization in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/data-labels.md b/chart-sdk/javascript/sparkline-charts/data-labels.md index 7b9487c75..bdb71892e 100644 --- a/chart-sdk/javascript/sparkline-charts/data-labels.md +++ b/chart-sdk/javascript/sparkline-charts/data-labels.md @@ -4,7 +4,6 @@ title: Data labels in JavaScript Sparkline control | Syncfusion description: Learn here all about Data labels in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data labels -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/ej1-api-migration.md b/chart-sdk/javascript/sparkline-charts/ej1-api-migration.md index c4acec73a..a49661364 100644 --- a/chart-sdk/javascript/sparkline-charts/ej1-api-migration.md +++ b/chart-sdk/javascript/sparkline-charts/ej1-api-migration.md @@ -4,7 +4,6 @@ title: Ej1 api migration in JavaScript Sparkline control | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/es5-getting-started.md b/chart-sdk/javascript/sparkline-charts/es5-getting-started.md index dfafe37ac..a6250f50b 100644 --- a/chart-sdk/javascript/sparkline-charts/es5-getting-started.md +++ b/chart-sdk/javascript/sparkline-charts/es5-getting-started.md @@ -4,7 +4,6 @@ title: ES5 getting started with JavaScript Sparkline control | Syncfusion description: Check out and learn about ES5 getting started with JavaScript Sparkline control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Sparkline -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/localization.md b/chart-sdk/javascript/sparkline-charts/localization.md index a63461d92..92a031f62 100644 --- a/chart-sdk/javascript/sparkline-charts/localization.md +++ b/chart-sdk/javascript/sparkline-charts/localization.md @@ -4,7 +4,6 @@ title: Localization in JavaScript Sparkline control | Syncfusion description: Learn here all about Localization in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/marker.md b/chart-sdk/javascript/sparkline-charts/marker.md index e1bb05270..900623429 100644 --- a/chart-sdk/javascript/sparkline-charts/marker.md +++ b/chart-sdk/javascript/sparkline-charts/marker.md @@ -4,7 +4,6 @@ title: Marker in JavaScript Sparkline control | Syncfusion description: Learn here all about Marker in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Marker -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/range-band.md b/chart-sdk/javascript/sparkline-charts/range-band.md index 194227956..74b6fc072 100644 --- a/chart-sdk/javascript/sparkline-charts/range-band.md +++ b/chart-sdk/javascript/sparkline-charts/range-band.md @@ -4,7 +4,6 @@ title: Range band in JavaScript Sparkline control | Syncfusion description: Learn here all about Range band in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range band -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/sparkline-dimensions.md b/chart-sdk/javascript/sparkline-charts/sparkline-dimensions.md index 98833d30b..e58bf8152 100644 --- a/chart-sdk/javascript/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/javascript/sparkline-charts/sparkline-dimensions.md @@ -4,7 +4,6 @@ title: Sparkline dimensions in JavaScript Sparkline control | Syncfusion description: Learn here all about Sparkline dimensions in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -33,7 +32,7 @@ Sparkline can be rendered to its container size. You can set the size through in ## Size for sparkline -You can also set the size for sparkline directly using the [`width`](../../api/sparkline/#width-string) and [`height`](../../api/sparkline/#height-string) properties. +You can also set the size for sparkline directly using the [`width`](../../api/sparkline#width-string) and [`height`](../../api/sparkline#height-string) properties. **In pixel** diff --git a/chart-sdk/javascript/sparkline-charts/sparkline-types.md b/chart-sdk/javascript/sparkline-charts/sparkline-types.md index 99894dc87..15792e0c6 100644 --- a/chart-sdk/javascript/sparkline-charts/sparkline-types.md +++ b/chart-sdk/javascript/sparkline-charts/sparkline-types.md @@ -4,7 +4,6 @@ title: Sparkline types in JavaScript Sparkline control | Syncfusion description: Learn here all about Sparkline types in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline types -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/special-points-customization.md b/chart-sdk/javascript/sparkline-charts/special-points-customization.md index 85bc39351..df9260d85 100644 --- a/chart-sdk/javascript/sparkline-charts/special-points-customization.md +++ b/chart-sdk/javascript/sparkline-charts/special-points-customization.md @@ -4,7 +4,6 @@ title: Special points customization in JavaScript Sparkline | Syncfusion description: Learn here all about Special points customization in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Special points customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/sparkline-charts/user-interaction.md b/chart-sdk/javascript/sparkline-charts/user-interaction.md index 35664589f..6b0b66acb 100644 --- a/chart-sdk/javascript/sparkline-charts/user-interaction.md +++ b/chart-sdk/javascript/sparkline-charts/user-interaction.md @@ -4,7 +4,6 @@ title: User interaction in JavaScript Sparkline control | Syncfusion description: Learn here all about User interaction in Syncfusion JavaScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: User interaction -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/stock-charts/accessibility.md b/chart-sdk/javascript/stock-chart/accessibility.md similarity index 99% rename from chart-sdk/javascript/stock-charts/accessibility.md rename to chart-sdk/javascript/stock-chart/accessibility.md index 604718c35..f38771a8f 100644 --- a/chart-sdk/javascript/stock-charts/accessibility.md +++ b/chart-sdk/javascript/stock-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in JavaScript Stock chart control | Syncfusion description: Learn here all about Accessibility in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/stock-charts/appearance.md b/chart-sdk/javascript/stock-chart/appearance.md similarity index 84% rename from chart-sdk/javascript/stock-charts/appearance.md rename to chart-sdk/javascript/stock-chart/appearance.md index 5160945b1..27f1bd66b 100644 --- a/chart-sdk/javascript/stock-charts/appearance.md +++ b/chart-sdk/javascript/stock-chart/appearance.md @@ -4,7 +4,6 @@ title: Appearance in JavaScript Stock chart control | Syncfusion description: Learn here all about Appearance in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Stock Chart Title -Stock Chart can be given a title using [`title`](../api/stock-chart/#title) property, to show the information about the data plotted. +Stock Chart can be given a title using [`title`](../api/stock-chart#title) property, to show the information about the data plotted. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -47,7 +46,7 @@ The `textStyle` property of stock chart title provides options to customize the Changing Stock Chart theme will affect background color, grid lines, tooltip colors and appearance. -[`theme`](../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`](../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 js tabtitle="index.js" %} @@ -62,4 +61,4 @@ Changing Stock Chart theme will affect background color, grid lines, tooltip col ## See Also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/javascript/stock-charts/axis-customization.md b/chart-sdk/javascript/stock-chart/axis-customization.md similarity index 76% rename from chart-sdk/javascript/stock-charts/axis-customization.md rename to chart-sdk/javascript/stock-chart/axis-customization.md index 9c4776c51..5d7c47aca 100644 --- a/chart-sdk/javascript/stock-charts/axis-customization.md +++ b/chart-sdk/javascript/stock-chart/axis-customization.md @@ -4,7 +4,6 @@ title: Axis customization in JavaScript Stock chart control | Syncfusion description: Learn here all about Axis customization in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Axis Crossing -An axis can be positioned in the Stock Chart area using [`crossesAt`](../api/stock-chart/stockChartAxisModel/#crossesat) and [`crossesInAxis`] (../api/stock-chart/stockChartAxisModel/#crossesinaxis) properties. The [`crossesAt`](../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`](../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`](../api/stock-chart/stockChartAxisModel#crossesat) and [`crossesInAxis`] (../api/stock-chart/stockChartAxisModel#crossesinaxis) properties. The [`crossesAt`](../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`](../api/stock-chart/stockChartAxisModel#crossesinaxis) property specifies the axis name with which the axis line has to be crossed. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ An axis can be positioned in the Stock Chart area using [`crossesAt`](../api/sto ## Title -You can add a title to the axis using [`title`](../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`](../api/stock-chart/stockChartAxisModel/#titlestyle) property of the axis. +You can add a title to the axis using [`title`](../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`](../api/stock-chart/stockChartAxisModel#titlestyle) property of the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -43,7 +42,7 @@ You can add a title to the axis using [`title`](../api/stock-chart/stockChartAxi ## Tick Lines Customization -You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](../api/stock-chart/stockChartAxisModel/#majorticklines) and [`minorTickLines`](../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`](../api/stock-chart/stockChartAxisModel#majorticklines) and [`minorTickLines`](../api/stock-chart/stockChartAxisModel#minorticklines) properties in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,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`](../api/stock-chart/stockChartAxisModel/#majorgridlines) and [`minorGridLines`](../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`](../api/stock-chart/stockChartAxisModel#majorgridlines) and [`minorGridLines`](../api/stock-chart/stockChartAxisModel#minorgridlines) properties in the axis. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -73,7 +72,7 @@ You can customize the `width`, `color` and `dashArray` of the minor and maj ## Multiple Axis -In addition to primary X and Y axis, we can add n number of axis to the Stock Chart. Series can be associated with this [`axis`](../api/stock-chart/stockChartAxisModel), by mapping with axis's unique name. +In addition to primary X and Y axis, we can add n number of axis to the Stock Chart. Series can be associated with this [`axis`](../api/stock-chartstockChartAxisModel), by mapping with axis's unique name. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -91,7 +90,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`](../api/stock-chart/stockChartAxisModel/#isinversed) to true. +[`isInversed`](../api/stock-chart/stockChartAxisModel#isinversed) to true. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -106,7 +105,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`](../api/stock-chart/stockChartAxisModel/#opposedposition) property of the axis to true. +To place an axis opposite from its original position, set [`opposedPosition`](../api/stock-chart/stockChartAxisModel#opposedposition) property of the axis to true. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/axis-types.md b/chart-sdk/javascript/stock-chart/axis-types.md similarity index 82% rename from chart-sdk/javascript/stock-charts/axis-types.md rename to chart-sdk/javascript/stock-chart/axis-types.md index 5a25a37da..0ad9c9102 100644 --- a/chart-sdk/javascript/stock-charts/axis-types.md +++ b/chart-sdk/javascript/stock-chart/axis-types.md @@ -4,7 +4,6 @@ title: Axis types in JavaScript Stock chart control | Syncfusion description: Learn here all about Axis types in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis types -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -14,7 +13,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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`](../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`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -27,11 +26,11 @@ 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/stock-chart/getting-started-cs10" %} ->Note: To use this axis, we need to inject DateTime using `StockChart.Inject(DateTime)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTime`. +>Note: To use this axis, we need to inject DateTime using `StockChart.Inject(DateTime)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. ## DateTimeCategory axis -DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the [`valueType`](../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`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -44,13 +43,13 @@ DateTimeCategory axis in the stock chart is used to display only business days. {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/stock-chart/getting-started-cs38" %} ->Note: To use this axis, we need to inject DateTimeCategory using `StockChart.Inject(DateTimeCategory)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTimeCategory`. +>Note: To use this axis, we need to inject DateTimeCategory using `StockChart.Inject(DateTimeCategory)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. ## Logarithmic axis -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`](../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`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -63,8 +62,8 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/stock-chart/getting-started-cs11" %} ->Note: To use this axis, we need to inject Logarithmic using `StockChart.Inject(Logarithmic)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel/#valuetype) of axis to `Logarithmic`. +>Note: To use this axis, we need to inject Logarithmic using `StockChart.Inject(Logarithmic)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. ## See also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/javascript/stock-charts/chart-dimensions.md b/chart-sdk/javascript/stock-chart/chart-dimensions.md similarity index 95% rename from chart-sdk/javascript/stock-charts/chart-dimensions.md rename to chart-sdk/javascript/stock-chart/chart-dimensions.md index dd266e4fd..9416ba53b 100644 --- a/chart-sdk/javascript/stock-charts/chart-dimensions.md +++ b/chart-sdk/javascript/stock-chart/chart-dimensions.md @@ -4,7 +4,6 @@ title: Chart dimensions in JavaScript Stock chart control | Syncfusion description: Learn here all about Chart dimensions in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -32,7 +31,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`](../api/stock-chart/#width) and [`height`](../api/stock-chart/#height) properties. +You can also set size for chart directly through [`width`](../api/stock-chart#width) and [`height`](../api/stock-chart#height) properties. **In Pixel** diff --git a/chart-sdk/javascript/stock-charts/cross-hair.md b/chart-sdk/javascript/stock-chart/cross-hair.md similarity index 83% rename from chart-sdk/javascript/stock-charts/cross-hair.md rename to chart-sdk/javascript/stock-chart/cross-hair.md index f1135ac66..2e76f97df 100644 --- a/chart-sdk/javascript/stock-charts/cross-hair.md +++ b/chart-sdk/javascript/stock-chart/cross-hair.md @@ -4,7 +4,6 @@ title: Cross hair in JavaScript Stock chart control | Syncfusion description: Learn here all about Cross hair in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Cross hair -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,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`](../api/chart/crosshairSettingsModel/#enable) property in the `crosshair`. +Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettingsModel#enable) property in the `crosshair`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -28,7 +27,7 @@ Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettin ## Tooltip for axis -Tooltip label for an axis can be enabled by using [`enable`](../api/chart/crosshairTooltipModel/#enable) property of `crosshairTooltip` in the corresponding axis. +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" %} @@ -43,7 +42,7 @@ Tooltip label for an axis can be enabled by using [`enable`](../api/chart/cross ## Customization -The [`fill`](../api/chart/crosshairTooltipModel/#fill) and [`textStyle`](../api/chart/crosshairTooltipModel/#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`](../api/chart/crosshairSettingsModel/#line) property in the crosshair. +The [`fill`](../api/chart/crosshairTooltipModel#fill) and [`textStyle`](../api/chart/crosshairTooltipModel#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`](../api/chart/crosshairSettingsModel#line) property in the crosshair. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -58,7 +57,7 @@ The [`fill`](../api/chart/crosshairTooltipModel/#fill) and [`textStyle`](../api/ **Snap to data** -Enabling the [`snapToData`](../api/chart/crosshairSettingsModel/#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. +Enabling the [`snapToData`](../api/chart/crosshairSettingsModel#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/es5-getting-started.md b/chart-sdk/javascript/stock-chart/es5-getting-started.md similarity index 99% rename from chart-sdk/javascript/stock-charts/es5-getting-started.md rename to chart-sdk/javascript/stock-chart/es5-getting-started.md index 8f1af8786..65ff38343 100644 --- a/chart-sdk/javascript/stock-charts/es5-getting-started.md +++ b/chart-sdk/javascript/stock-chart/es5-getting-started.md @@ -4,7 +4,6 @@ title: Getting started with JavaScript Stock Chart control | Syncfusion description: Check out and learn about Getting started with JavaScript Stock Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Stock Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/stock-charts/export-print.md b/chart-sdk/javascript/stock-chart/export-print.md similarity index 98% rename from chart-sdk/javascript/stock-charts/export-print.md rename to chart-sdk/javascript/stock-chart/export-print.md index ad2c041df..2be78a302 100644 --- a/chart-sdk/javascript/stock-charts/export-print.md +++ b/chart-sdk/javascript/stock-chart/export-print.md @@ -4,7 +4,6 @@ title: Export print in JavaScript Stock chart control | Syncfusion description: Learn here all about Export print in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Export print -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/stock-charts/gradient.md b/chart-sdk/javascript/stock-chart/gradient.md similarity index 99% rename from chart-sdk/javascript/stock-charts/gradient.md rename to chart-sdk/javascript/stock-chart/gradient.md index 4fd181a48..edd083e4e 100644 --- a/chart-sdk/javascript/stock-charts/gradient.md +++ b/chart-sdk/javascript/stock-chart/gradient.md @@ -4,7 +4,6 @@ title: Gradient in JavaScript Stock chart control | Syncfusion description: Learn here all about Gradient in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Gradient -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/stock-charts/images/stockchart.png b/chart-sdk/javascript/stock-chart/images/stockchart.png similarity index 100% rename from chart-sdk/javascript/stock-charts/images/stockchart.png rename to chart-sdk/javascript/stock-chart/images/stockchart.png diff --git a/chart-sdk/javascript/stock-charts/legend.md b/chart-sdk/javascript/stock-chart/legend.md similarity index 75% rename from chart-sdk/javascript/stock-charts/legend.md rename to chart-sdk/javascript/stock-chart/legend.md index c88d13f95..38911d1fd 100644 --- a/chart-sdk/javascript/stock-charts/legend.md +++ b/chart-sdk/javascript/stock-chart/legend.md @@ -4,7 +4,6 @@ title: Legend in JavaScript Stock chart control | Syncfusion description: Learn here all about Legend in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,11 +14,11 @@ domainurl: https://help.syncfusion.com/chart-sdk -Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [`visible`](../api/stock-chart/legendSettings/#visible) option in the [`legendSettings`](../api/stock-chart/legendSettings/). +Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [`visible`](../api/stock-chart/legendSettings#visible) option in the [`legendSettings`](../api/stock-chart/legendSettings). ## Position and Alignment -By using the [`position`](../api/stock-chart/legendSettings/#position) property, legend can be placed at `Left`, `Right`, `Top`, `Bottom` or `Custom` of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. +By using the [`position`](../api/stock-chart/legendSettings#position) property, legend can be placed at `Left`, `Right`, `Top`, `Bottom` or `Custom` of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -32,7 +31,7 @@ By using the [`position`](../api/stock-chart/legendSettings/#position) property, {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/javascript/stock-chart/legend-cs1" %} -[`Custom`](../api/stock-chart/legendSettings/#position) position is used to position the legend anywhere in the Stock Chart using x, y coordinates. +[`Custom`](../api/stock-chart/legendSettings#position) position is used to position the legend anywhere in the Stock Chart using x, y coordinates. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -47,7 +46,7 @@ By using the [`position`](../api/stock-chart/legendSettings/#position) property, **Legend Alignment** -The legend can be align as `Center`, `Far` or `Near` to the Stock Chart using [`alignment`](../api/stock-chart/legendSettings/#alignment) property. +The legend can be align as `Center`, `Far` or `Near` to the Stock Chart using [`alignment`](../api/stock-chart/legendSettings#alignment) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -62,7 +61,7 @@ The legend can be align as `Center`, `Far` or `Near` to the Stock Chart using [` ## Customization -To change the legend icon shape, [`legendShape`](../api/stock-chart/stockSeries/#legendshape-string) property in the [`series`](../api/stock-chart/stockSeries/) can be used. By default legend icon shape is `seriesType`. +To change the legend icon shape, [`legendShape`](../api/stock-chart/stockSeries#legendshape-string) property in the [`series`](../api/stock-chart/stockSeries) can be used. By default legend icon shape is `seriesType`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -77,7 +76,7 @@ To change the legend icon shape, [`legendShape`](../api/stock-chart/stockSeries/ **Legend Size** -By default, legend takes 20% - 25% of the Stock Chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the width vertically, while placing on left or right position of the Stock Chart. The default legend size can be changed by using the [`width`](../api/stock-chart/legendSettings/#width) and [`height`](../api/stock-chart/legendSettings/#height) property of the `legendSettings`. +By default, legend takes 20% - 25% of the Stock Chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the width vertically, while placing on left or right position of the Stock Chart. The default legend size can be changed by using the [`width`](../api/stock-chart/legendSettings#width) and [`height`](../api/stock-chart/legendSettings#height) property of the `legendSettings`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -92,7 +91,7 @@ By default, legend takes 20% - 25% of the Stock Chart's height horizontally, whe **Legend Item Size** -The size of the legend items can customized by using the [`shapeHeight`](../api/stock-chart/legendSettings/#shapeheight) and [`shapeWidth`](../api/stock-chart/legendSettings/#shapewidth) property. +The size of the legend items can customized by using the [`shapeHeight`](../api/stock-chart/legendSettings#shapeheight) and [`shapeWidth`](../api/stock-chart/legendSettings#shapewidth) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -122,7 +121,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa ## Legend Title -The title for legend can be set using [`title`](../api/stock-chart/legendSettings/#title) property in `legendSettings`. Customize the [`fontStyle`](../api/stock-chart/stockChartFont/#fontstyle), [`size`](../api/stock-chart/stockChartFont/#size), [`fontWeight`](../api/stock-chart/stockChartFont/#fontweight), [`color`](../api/stock-chart/stockChartFont/#color), [`textAlignment`](../api/stock-chart/stockChartFont/#textalignment), [`fontFamily`](../api/stock-chart/stockChartFont/#fontfamily), [`opacity`](../api/stock-chart/stockChartFont/#opacity) and [`textOverflow`](../api/stock-chart/stockChartFont/#textoverflow) of legend title. [`titlePosition`](../api/stock-chart/legendSettings/#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. [`maximumTitleWidth`](../api/stock-chart/legendSettings/#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. +The title for legend can be set using [`title`](../api/stock-chart/legendSettings#title) property in `legendSettings`. Customize the [`fontStyle`](../api/stock-chart/stockChartFont#fontstyle), [`size`](../api/stock-chart/stockChartFont#size), [`fontWeight`](../api/stock-chart/stockChartFont#fontweight), [`color`](../api/stock-chart/stockChartFont#color), [`textAlignment`](../api/stock-chart/stockChartFont#textalignment), [`fontFamily`](../api/stock-chart/stockChartFont#fontfamily), [`opacity`](../api/stock-chart/stockChartFont#opacity) and [`textOverflow`](../api/stock-chart/stockChartFont#textoverflow) of legend title. [`titlePosition`](../api/stock-chart/legendSettings#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. [`maximumTitleWidth`](../api/stock-chart/legendSettings#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/period-selector.md b/chart-sdk/javascript/stock-chart/period-selector.md similarity index 74% rename from chart-sdk/javascript/stock-charts/period-selector.md rename to chart-sdk/javascript/stock-chart/period-selector.md index df17f4e70..c65ade002 100644 --- a/chart-sdk/javascript/stock-charts/period-selector.md +++ b/chart-sdk/javascript/stock-chart/period-selector.md @@ -4,7 +4,6 @@ title: Period selector in JavaScript Stock chart control | Syncfusion description: Learn here all about Period selector in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Period selector -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ The period selector allows to select a range with specified periods. By default ## Periods -Periods is an array of objects that allows users to specify the range of [`periods`](../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`](../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 +39,7 @@ Periods is an array of objects that allows users to specify the range of [`perio ## Visibility of period selector -The [`enablePeriodSelector`](../api/stock-chart/stockChartModel/#enableperiodselector) property allows users to toggle the visibility of period selector. +The [`enablePeriodSelector`](../api/stock-chart/stockChartModel#enableperiodselector) property allows users to toggle the visibility of period selector. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/range-selector.md b/chart-sdk/javascript/stock-chart/range-selector.md similarity index 89% rename from chart-sdk/javascript/stock-charts/range-selector.md rename to chart-sdk/javascript/stock-chart/range-selector.md index 67f170fc3..85a8d0916 100644 --- a/chart-sdk/javascript/stock-charts/range-selector.md +++ b/chart-sdk/javascript/stock-chart/range-selector.md @@ -4,7 +4,6 @@ title: Range selector in JavaScript Stock chart control | Syncfusion description: Learn here all about Range selector in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range selector -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -17,7 +16,7 @@ The left and right thumb of RangeNavigator are used to indicate the selected ran * By tapping on the labels. * By setting the start and end through Date Range button. -Following code example shows the [`enableSelector`](../api/stock-chart/stockChartModel/#enableselector) property allows users to toggle the visibility of range selector. +Following code example shows the [`enableSelector`](../api/stock-chart/stockChartModel#enableselector) property allows users to toggle the visibility of range selector. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/series-types.md b/chart-sdk/javascript/stock-chart/series-types.md similarity index 65% rename from chart-sdk/javascript/stock-charts/series-types.md rename to chart-sdk/javascript/stock-chart/series-types.md index e5f400b74..4c656a476 100644 --- a/chart-sdk/javascript/stock-charts/series-types.md +++ b/chart-sdk/javascript/stock-chart/series-types.md @@ -4,7 +4,6 @@ title: Series types in JavaScript Stock chart control | Syncfusion description: Learn here all about Series types in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series types -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -17,27 +16,27 @@ Essential JS 2 StockChart supports 6 major types of series namely `Line`, `Splin ## Line -To render a line series, use series [`type`](../api/stock-chart/stockSeriesModel/#type-string) as `Line` and inject `LineSeries` module using `StockChart.Inject(LineSeries)` method. +To render a line series, use series [`type`](../api/stock-chart/stockSeriesModel#type-string) as `Line` and inject `LineSeries` module using `StockChart.Inject(LineSeries)` method. ## Spline -To render a spline series, use series [`type`](../api/stock-chart/stockSeriesModel/#type-string) as `Spline` and inject `SplineSeries` module using `StockChart.Inject(SplineSeries)` method. +To render a spline series, use series [`type`](../api/stock-chart/stockSeriesModel#type-string) as `Spline` and inject `SplineSeries` module using `StockChart.Inject(SplineSeries)` method. ## Hilo -To render a hilo series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `Hilo` and inject `HiloSeries` module using `StockChart.Inject(HiloSeries)` method. +To render a hilo series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `Hilo` and inject `HiloSeries` module using `StockChart.Inject(HiloSeries)` method. ## HiloOpenClose -To render a hiloOpenClose series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` module using `StockChart.Inject(HiloOpenCloseSeries)` method. +To render a hiloOpenClose series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` module using `StockChart.Inject(HiloOpenCloseSeries)` method. ## HollowCandle -To render a hollowcandle series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. +To render a hollowcandle series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. ## Candle -To render a candle series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `Candle` and inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. +To render a candle series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `Candle` and inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/stock-events.md b/chart-sdk/javascript/stock-chart/stock-events.md similarity index 96% rename from chart-sdk/javascript/stock-charts/stock-events.md rename to chart-sdk/javascript/stock-chart/stock-events.md index 33a3acda4..1f0691f84 100644 --- a/chart-sdk/javascript/stock-charts/stock-events.md +++ b/chart-sdk/javascript/stock-chart/stock-events.md @@ -4,7 +4,6 @@ title: Stock events in JavaScript Stock chart control | Syncfusion description: Learn here all about Stock events in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Stock events -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -44,4 +43,4 @@ By default, stock events will be showed for all series. Now, you can set the sto ## 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/javascript/stock-charts/summary.md b/chart-sdk/javascript/stock-chart/summary.md similarity index 97% rename from chart-sdk/javascript/stock-charts/summary.md rename to chart-sdk/javascript/stock-chart/summary.md index bf75dfc77..2b5dd1ace 100644 --- a/chart-sdk/javascript/stock-charts/summary.md +++ b/chart-sdk/javascript/stock-chart/summary.md @@ -4,7 +4,6 @@ title: Summary in JavaScript Stock chart control | Syncfusion description: Learn here all about Summary in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Summary -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/javascript/stock-charts/technical-indicators.md b/chart-sdk/javascript/stock-chart/technical-indicators.md similarity index 67% rename from chart-sdk/javascript/stock-charts/technical-indicators.md rename to chart-sdk/javascript/stock-chart/technical-indicators.md index 9f2ce491d..44a8fea04 100644 --- a/chart-sdk/javascript/stock-charts/technical-indicators.md +++ b/chart-sdk/javascript/stock-chart/technical-indicators.md @@ -4,7 +4,6 @@ title: Technical indicators in JavaScript Stock chart control | Syncfusion description: Learn here all about Technical indicators in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Technical indicators -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -18,48 +17,48 @@ StockChart supports 10 types of technical indicators namely `Accumulation Distri ## Accumulation Distribution -Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `AccumulationDistribution` and inject -`AccumulationDistributionIndicator` module using `StockChart.Inject(AccumulationDistributionIndicator)`. To calculate the signal line [`volume`](../api/stock-chart/stockChartIndicator/#volume) field is additionally added with `dataSource`. +Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `AccumulationDistribution` and inject +`AccumulationDistributionIndicator` module using `StockChart.Inject(AccumulationDistributionIndicator)`. To calculate the signal line [`volume`](../api/stock-chart/stockChartIndicator#volume) field is additionally added with `dataSource`. ## Average True Range (ATR) ATR measures the stock volatility by comparing the current value with the previous value. To render a Average True Range (ATR) Indicator, -use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Atr` and inject `AtrIndicator` module using `StockChart.Inject(AtrIndicator)`. +use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Atr` and inject `AtrIndicator` module using `StockChart.Inject(AtrIndicator)`. ## Exponential Moving Average (EMA) -Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Ema` and inject `EmaIndicator` module using `StockChart.Inject(EmaIndicator)`. +Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Ema` and inject `EmaIndicator` module using `StockChart.Inject(EmaIndicator)`. ## Momentum -Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Momentum`and inject `MomentumIndicator` module using `StockChart.Inject(MomentumIndicator)` method. Momentum indicator will be represented by two lines (upperLine, signalLine).In momentum indicator the upperBand value is always renders at the value 100. +Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Momentum`and inject `MomentumIndicator` module using `StockChart.Inject(MomentumIndicator)` method. Momentum indicator will be represented by two lines (upperLine, signalLine).In momentum indicator the upperBand value is always renders at the value 100. ## Moving Average Convergence Divergence (MACD) -MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Macd` and inject `MacdIndicator` module using `StockChart.Inject(MacdIndicator)`.MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line. +MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Macd` and inject `MacdIndicator` module using `StockChart.Inject(MacdIndicator)`.MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line. ## Relative Strength Index (RSI) -RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Rsi` and inject `RsiIndicator` module using `StockChart.Inject(Rsindicator)`.RSI indicator will be represented -by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [`overBought`](../api/stock-chart/stockChartIndicator/#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator/#oversold) properties of indicator and the signalLine is calculated by RSI formula. +RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Rsi` and inject `RsiIndicator` module using `StockChart.Inject(Rsindicator)`.RSI indicator will be represented +by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [`overBought`](../api/stock-chart/stockChartIndicator#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator#oversold) properties of indicator and the signalLine is calculated by RSI formula. ## Simple Moving Average (SMA) -Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Sma` and inject `SmaIndicator` module using `StockChart.Inject(SmaIndicator)`. +Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Sma` and inject `SmaIndicator` module using `StockChart.Inject(SmaIndicator)`. ## Stochastic -It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Stochastic` and inject `StochasticIndicator` module using `StockChart.Inject(StochasticIndicator)` method. -stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand value is customized by [`overBought`](../api/stock-chart/stockChartIndicator/#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator/#oversold) properties of indicators and the periodLine and signalLine is render based on stochastic formula. +It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Stochastic` and inject `StochasticIndicator` module using `StockChart.Inject(StochasticIndicator)` method. +stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand value is customized by [`overBought`](../api/stock-chart/stockChartIndicator#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator#oversold) properties of indicators and the periodLine and signalLine is render based on stochastic formula. ## Triangular Moving Average (TMA) -Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Tma` and inject `TmaIndicator` module using `StockChart.Inject(TmaIndicator)`. +Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Tma` and inject `TmaIndicator` module using `StockChart.Inject(TmaIndicator)`. ## Bollinger Band -A StockChart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `BollingerBand` and inject `BollingerBands` module using `StockChart.Inject(BollingerBands)` method. Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine). -The default values of the Bollinger Band [`period`](../api/stock-chart/stockChartIndicator/#period) is 14 and [`standardDeviations`](../api/stock-chart/stockChartIndicator/#standarddeviation) is 2. +A StockChart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `BollingerBand` and inject `BollingerBands` module using `StockChart.Inject(BollingerBands)` method. Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine). +The default values of the Bollinger Band [`period`](../api/stock-chart/stockChartIndicator#period) is 14 and [`standardDeviations`](../api/stock-chart/stockChartIndicator#standarddeviation) is 2. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/tool-tip.md b/chart-sdk/javascript/stock-chart/tool-tip.md similarity index 83% rename from chart-sdk/javascript/stock-charts/tool-tip.md rename to chart-sdk/javascript/stock-chart/tool-tip.md index 73230e2f7..b1b22b217 100644 --- a/chart-sdk/javascript/stock-charts/tool-tip.md +++ b/chart-sdk/javascript/stock-chart/tool-tip.md @@ -4,7 +4,6 @@ title: Tool tip in JavaScript Stock chart control | Syncfusion description: Learn here all about Tool tip in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool tip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -17,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`](../api/chart/tooltipSettings/#enable) property to true and by injecting [`Tooltip`](../api/stock-chart/stockChartModel/#tooltip) module using `StockChart.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`](../api/stock-chart/stockChartModel#tooltip) module using `StockChart.Inject(Tooltip)`. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -51,7 +50,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`](../api/stock-chart/stockTooltipSettings/#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`](../api/stock-chart/stockTooltipSettings#position) property. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -66,7 +65,7 @@ By default, the tooltip is positioned at the left side of the stock chart. You c ## Customize the appearance of the tooltip -The [`fill`](../api/chart/tooltipSettingsModel/#fill) and [`border`](../api/chart/tooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/chart/tooltipSettingsModel/#textStyle) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](../api/chart/tooltipSettingsModel#fill) and [`border`](../api/chart/tooltipSettingsModel#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/chart/tooltipSettingsModel#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/stock-charts/trend-lines.md b/chart-sdk/javascript/stock-chart/trend-lines.md similarity index 80% rename from chart-sdk/javascript/stock-charts/trend-lines.md rename to chart-sdk/javascript/stock-chart/trend-lines.md index 333205b03..d19d83e6e 100644 --- a/chart-sdk/javascript/stock-charts/trend-lines.md +++ b/chart-sdk/javascript/stock-chart/trend-lines.md @@ -4,7 +4,6 @@ title: Trend lines in JavaScript Stock chart control | Syncfusion description: Learn here all about Trend lines in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Trend lines -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -18,27 +17,27 @@ 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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Linear` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel#type) as `Linear` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Exponential` and inject +To render a exponential trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Exponential` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Logarithmic` and inject +To render a logarithmic trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Logarithmic` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. ## Polynomial A polynomial trendline is a curved line that is used when data fluctuates. -To render a polynomial trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel/#type) as `Polynomial` and inject +To render a polynomial trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Polynomial` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. `polynomialOrder` used to define the polynomial value. @@ -47,13 +46,13 @@ To render a polynomial trendline, use trendline [`type`](../api/stock-chart/stoc 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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Power` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. +To render a power trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Power` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel/#type) as `MovingAverage` and inject +To render a moving average trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `MovingAverage` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. `period` property defines the period to find the moving average. @@ -71,7 +70,7 @@ To render a moving average trendline, use trendline [`type`](../api/stock-chart/ **Customization of Trendline** -The [`fill`](../api/stock-chart/stockChartTrendlineModel/#fill) and [`width`](../api/stock-chart/stockChartTrendlineModel/#width) properties are used to customize the appearance of the trendline. +The [`fill`](../api/stock-chart/stockChartTrendlineModel#fill) and [`width`](../api/stock-chart/stockChartTrendlineModel#width) properties are used to customize the appearance of the trendline. {% tabs %} {% highlight js tabtitle="index.js" %} diff --git a/chart-sdk/javascript/stock-charts/working-with-data.md b/chart-sdk/javascript/stock-chart/working-with-data.md similarity index 93% rename from chart-sdk/javascript/stock-charts/working-with-data.md rename to chart-sdk/javascript/stock-chart/working-with-data.md index 043fc3b68..48ed18048 100644 --- a/chart-sdk/javascript/stock-charts/working-with-data.md +++ b/chart-sdk/javascript/stock-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working with data in JavaScript Stock chart control | Syncfusion description: Learn here all about Working with data in Syncfusion JavaScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -16,7 +15,7 @@ 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`](../api/stock-chart/stockSeriesModel/#datasource) property in series. +You can bind a simple JSON data to the chart using [`dataSource`](../api/stock-chart/stockSeriesModel#datasource) property in series. {% tabs %} {% highlight js tabtitle="index.js" %} @@ -46,4 +45,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/react/heatmap-chart/dimensions.md b/chart-sdk/react/heatmap-chart/dimensions.md index be696683c..f775b436d 100644 --- a/chart-sdk/react/heatmap-chart/dimensions.md +++ b/chart-sdk/react/heatmap-chart/dimensions.md @@ -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/react/documentation/api/heatmap/#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap/#height) properties. +You can set the size of heat map directly by using the [width](https://ej2.syncfusion.com/react/documentation/api/heatmap#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap#height) properties. ## In pixel diff --git a/chart-sdk/react/heatmap-chart/legend.md b/chart-sdk/react/heatmap-chart/legend.md index 79f9251e4..7954af8d6 100644 --- a/chart-sdk/react/heatmap-chart/legend.md +++ b/chart-sdk/react/heatmap-chart/legend.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Legend in React Heatmap chart component -The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#visible) property to **true** and injecting the `Legend` module into the `services`. +The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#visible) property to **true** and injecting the `Legend` module into the `services`. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -30,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](https://ej2.syncfusion.com/react/documentation/api/heatmap/paletteSettings/#type) property in the `paletteSettings` property. +You can change the legend type by using the [type](https://ej2.syncfusion.com/react/documentation/api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -45,7 +45,7 @@ You can change the legend type by using the [type](https://ej2.syncfusion.com/re ## Placement -You can place the legend at left, right, top, or bottom to the heat map layout by using the [position](https://ej2.syncfusion.com/react/documentation/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](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#position) property. The legend is positioned at the right to the heat map by default. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -60,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](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#alignment) property. +You can align the legend as center, far, or near to the heat map using the [alignment](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#alignment) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -75,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](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#height) properties. +You can change the legend dimensions with values in pixels or percentage by using the[width](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#width) and [height](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#height) properties. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -105,9 +105,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](https://ej2.syncfusion.com/react/documentation/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](https://ej2.syncfusion.com/react/documentation/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](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#labeldisplaytype) property. +In smart legend, you can change the display type of legend labels by using the [labelDisplayType](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#labeldisplaytype) property. The following are the legend label display types: * All: Displays all labels in the legend. @@ -127,7 +127,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 viewing the specific range value. You can enable the legend selection using the [toggleVisibility](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#togglevisibility) property. +In the HeatMap, the legend selection is used to toggle the visibility of cell for viewing the specific range value. You can enable the legend selection using the [toggleVisibility](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#togglevisibility) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} @@ -142,7 +142,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](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/#title) property by providing the text and customizing the legend title text style using the [textStyle](https://ej2.syncfusion.com/react/documentation/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](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings#title) property by providing the text and customizing the legend title text style using the [textStyle](https://ej2.syncfusion.com/react/documentation/api/heatmap/legendSettings/titleModel#textStyle) property. {% tabs %} {% highlight js tabtitle="index.jsx" %} diff --git a/chart-sdk/react/heatmap-chart/rendering-mode.md b/chart-sdk/react/heatmap-chart/rendering-mode.md index f9a17d4a1..23fc8eb46 100644 --- a/chart-sdk/react/heatmap-chart/rendering-mode.md +++ b/chart-sdk/react/heatmap-chart/rendering-mode.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Rendering mode in React Heatmap chart component -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/react/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/react/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/react/sparkline-charts/sparkline-dimensions.md b/chart-sdk/react/sparkline-charts/sparkline-dimensions.md index 245f24d65..c532f47dd 100644 --- a/chart-sdk/react/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/react/sparkline-charts/sparkline-dimensions.md @@ -36,7 +36,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`](../sparkline/#width-string) and [`height`](https://ej2.syncfusion.com/react/documentation/api/sparkline/#height-string) properties. +You can also set the size for sparkline directly using the [`width`](../sparkline#width-string) and [`height`](https://ej2.syncfusion.com/react/documentation/api/sparkline#height-string) properties. **In pixel** diff --git a/chart-sdk/react/stock-charts/accessibility.md b/chart-sdk/react/stock-chart/accessibility.md similarity index 100% rename from chart-sdk/react/stock-charts/accessibility.md rename to chart-sdk/react/stock-chart/accessibility.md diff --git a/chart-sdk/react/stock-charts/appearance.md b/chart-sdk/react/stock-chart/appearance.md similarity index 100% rename from chart-sdk/react/stock-charts/appearance.md rename to chart-sdk/react/stock-chart/appearance.md diff --git a/chart-sdk/react/stock-charts/axis-customization.md b/chart-sdk/react/stock-chart/axis-customization.md similarity index 100% rename from chart-sdk/react/stock-charts/axis-customization.md rename to chart-sdk/react/stock-chart/axis-customization.md diff --git a/chart-sdk/react/stock-charts/axis-types.md b/chart-sdk/react/stock-chart/axis-types.md similarity index 100% rename from chart-sdk/react/stock-charts/axis-types.md rename to chart-sdk/react/stock-chart/axis-types.md diff --git a/chart-sdk/react/stock-charts/chart-dimensions.md b/chart-sdk/react/stock-chart/chart-dimensions.md similarity index 100% rename from chart-sdk/react/stock-charts/chart-dimensions.md rename to chart-sdk/react/stock-chart/chart-dimensions.md diff --git a/chart-sdk/react/stock-charts/cross-hair.md b/chart-sdk/react/stock-chart/cross-hair.md similarity index 100% rename from chart-sdk/react/stock-charts/cross-hair.md rename to chart-sdk/react/stock-chart/cross-hair.md diff --git a/chart-sdk/react/stock-charts/export-print.md b/chart-sdk/react/stock-chart/export-print.md similarity index 100% rename from chart-sdk/react/stock-charts/export-print.md rename to chart-sdk/react/stock-chart/export-print.md diff --git a/chart-sdk/react/stock-charts/getting-started.md b/chart-sdk/react/stock-chart/getting-started.md similarity index 100% rename from chart-sdk/react/stock-charts/getting-started.md rename to chart-sdk/react/stock-chart/getting-started.md diff --git a/chart-sdk/react/stock-charts/gradient.md b/chart-sdk/react/stock-chart/gradient.md similarity index 100% rename from chart-sdk/react/stock-charts/gradient.md rename to chart-sdk/react/stock-chart/gradient.md diff --git a/chart-sdk/react/stock-charts/images/stock-chart.png b/chart-sdk/react/stock-chart/images/stock-chart.png similarity index 100% rename from chart-sdk/react/stock-charts/images/stock-chart.png rename to chart-sdk/react/stock-chart/images/stock-chart.png diff --git a/chart-sdk/react/stock-charts/legend.md b/chart-sdk/react/stock-chart/legend.md similarity index 100% rename from chart-sdk/react/stock-charts/legend.md rename to chart-sdk/react/stock-chart/legend.md diff --git a/chart-sdk/react/stock-charts/period-selector.md b/chart-sdk/react/stock-chart/period-selector.md similarity index 100% rename from chart-sdk/react/stock-charts/period-selector.md rename to chart-sdk/react/stock-chart/period-selector.md diff --git a/chart-sdk/react/stock-charts/range-selector.md b/chart-sdk/react/stock-chart/range-selector.md similarity index 100% rename from chart-sdk/react/stock-charts/range-selector.md rename to chart-sdk/react/stock-chart/range-selector.md diff --git a/chart-sdk/react/stock-charts/series-types.md b/chart-sdk/react/stock-chart/series-types.md similarity index 100% rename from chart-sdk/react/stock-charts/series-types.md rename to chart-sdk/react/stock-chart/series-types.md diff --git a/chart-sdk/react/stock-charts/stock-events.md b/chart-sdk/react/stock-chart/stock-events.md similarity index 100% rename from chart-sdk/react/stock-charts/stock-events.md rename to chart-sdk/react/stock-chart/stock-events.md diff --git a/chart-sdk/react/stock-charts/technical-indicators.md b/chart-sdk/react/stock-chart/technical-indicators.md similarity index 100% rename from chart-sdk/react/stock-charts/technical-indicators.md rename to chart-sdk/react/stock-chart/technical-indicators.md diff --git a/chart-sdk/react/stock-charts/tool-tip.md b/chart-sdk/react/stock-chart/tool-tip.md similarity index 100% rename from chart-sdk/react/stock-charts/tool-tip.md rename to chart-sdk/react/stock-chart/tool-tip.md diff --git a/chart-sdk/react/stock-charts/trend-lines.md b/chart-sdk/react/stock-chart/trend-lines.md similarity index 100% rename from chart-sdk/react/stock-charts/trend-lines.md rename to chart-sdk/react/stock-chart/trend-lines.md diff --git a/chart-sdk/react/stock-charts/working-with-data.md b/chart-sdk/react/stock-chart/working-with-data.md similarity index 100% rename from chart-sdk/react/stock-charts/working-with-data.md rename to chart-sdk/react/stock-chart/working-with-data.md diff --git a/chart-sdk/typescript/bullet-chart/accessibility.md b/chart-sdk/typescript/bullet-chart/accessibility.md index 04710d97e..e9e38ef57 100644 --- a/chart-sdk/typescript/bullet-chart/accessibility.md +++ b/chart-sdk/typescript/bullet-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in TypeScript Bullet chart control | Syncfusion description: Learn here all about Accessibility in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/bullet-chart/axis-customization.md b/chart-sdk/typescript/bullet-chart/axis-customization.md index 665473655..bd275180b 100644 --- a/chart-sdk/typescript/bullet-chart/axis-customization.md +++ b/chart-sdk/typescript/bullet-chart/axis-customization.md @@ -4,7 +4,6 @@ title: Axis customization in TypeScript Bullet chart control | Syncfusion description: Learn here all about Axis customization in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/typescript/bullet-chart/bullet-chart-dimensions.md index dfd2a8575..02229c3f6 100644 --- a/chart-sdk/typescript/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/typescript/bullet-chart/bullet-chart-dimensions.md @@ -1,10 +1,9 @@ --- layout: post -title: Bullet chart dimensions in TypeScript Bullet chart control | Syncfusion +title: Dimensions in TypeScript Bullet chart control | Syncfusion description: Learn here all about Bullet chart dimensions in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bullet chart dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/bullet-chart/comparative-bar.md b/chart-sdk/typescript/bullet-chart/comparative-bar.md index 44ecdba43..9028c4f30 100644 --- a/chart-sdk/typescript/bullet-chart/comparative-bar.md +++ b/chart-sdk/typescript/bullet-chart/comparative-bar.md @@ -4,7 +4,6 @@ title: Comparative bar in TypeScript Bullet chart control | Syncfusion description: Learn here all about Comparative bar in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Comparative bar -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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/typescript/bullet-chart/customization.md b/chart-sdk/typescript/bullet-chart/customization.md index cff2e24b0..2e1a32f36 100644 --- a/chart-sdk/typescript/bullet-chart/customization.md +++ b/chart-sdk/typescript/bullet-chart/customization.md @@ -4,7 +4,6 @@ title: Customization in TypeScript Bullet chart control | Syncfusion description: Learn here all about Customization in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/bullet-chart/data-binding.md b/chart-sdk/typescript/bullet-chart/data-binding.md index 827c6f383..c0ef5c6f4 100644 --- a/chart-sdk/typescript/bullet-chart/data-binding.md +++ b/chart-sdk/typescript/bullet-chart/data-binding.md @@ -4,7 +4,6 @@ title: Data binding in TypeScript Bullet chart control | Syncfusion description: Learn here all about Data binding in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data binding -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/bullet-chart/data-label.md b/chart-sdk/typescript/bullet-chart/data-label.md index cf95f0615..6379b01b5 100644 --- a/chart-sdk/typescript/bullet-chart/data-label.md +++ b/chart-sdk/typescript/bullet-chart/data-label.md @@ -4,7 +4,6 @@ title: Data label in TypeScript Bullet chart control | Syncfusion description: Learn here all about Data label in Syncfusion TypeScript Bullet chart control 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 --- diff --git a/chart-sdk/typescript/bullet-chart/getting-started.md b/chart-sdk/typescript/bullet-chart/getting-started.md index 322977534..3d0ccfdb0 100644 --- a/chart-sdk/typescript/bullet-chart/getting-started.md +++ b/chart-sdk/typescript/bullet-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting started with TypeScript Bullet Chart control | Syncfusion description: Check out and learn about Getting started with TypeScript Bullet Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Bullet Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -19,7 +18,7 @@ This document explains how to create a simple Bullet Chart and configure its fea Before you begin, ensure you have the following installed on your machine: -* [Node.js](https://nodejs.org/) (v14.15.0 or higher) +* Node.js * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) * [Git](https://git-scm.com/) for cloning the quickstart repository * A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result diff --git a/chart-sdk/typescript/bullet-chart/ranges.md b/chart-sdk/typescript/bullet-chart/ranges.md index 2373c1d64..6106170ee 100644 --- a/chart-sdk/typescript/bullet-chart/ranges.md +++ b/chart-sdk/typescript/bullet-chart/ranges.md @@ -4,7 +4,6 @@ title: Ranges in TypeScript Bullet chart control | Syncfusion description: Learn here all about Ranges in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ranges -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/bullet-chart/title.md b/chart-sdk/typescript/bullet-chart/title.md index d8a1df223..bfc9cd201 100644 --- a/chart-sdk/typescript/bullet-chart/title.md +++ b/chart-sdk/typescript/bullet-chart/title.md @@ -4,7 +4,6 @@ title: Title in TypeScript Bullet chart control | Syncfusion description: Learn here all about Title in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/bullet-chart/tool-tip.md b/chart-sdk/typescript/bullet-chart/tool-tip.md index 4b73a0041..ff967f67a 100644 --- a/chart-sdk/typescript/bullet-chart/tool-tip.md +++ b/chart-sdk/typescript/bullet-chart/tool-tip.md @@ -4,7 +4,6 @@ title: Tool tip in TypeScript Bullet chart control | Syncfusion description: Learn here all about Tool tip in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool tip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays i ## 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/typescript/bullet-chart/value-bar.md b/chart-sdk/typescript/bullet-chart/value-bar.md index e6e27f69f..f66643963 100644 --- a/chart-sdk/typescript/bullet-chart/value-bar.md +++ b/chart-sdk/typescript/bullet-chart/value-bar.md @@ -4,7 +4,6 @@ title: Value bar in TypeScript Bullet chart control | Syncfusion description: Learn here all about Value bar in Syncfusion TypeScript Bullet chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Value bar -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -12,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Value bar in TypeScript Bullet chart control -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/heatmap-chart/accessibility.md b/chart-sdk/typescript/heatmap-chart/accessibility.md index 710379d28..3378ebe3b 100644 --- a/chart-sdk/typescript/heatmap-chart/accessibility.md +++ b/chart-sdk/typescript/heatmap-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in TypeScript HeatMap chart control | Syncfusion description: Learn here all about Accessibility in Syncfusion TypeScript HeatMap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/appearance.md b/chart-sdk/typescript/heatmap-chart/appearance.md index cae8cd53e..8a75a0db7 100644 --- a/chart-sdk/typescript/heatmap-chart/appearance.md +++ b/chart-sdk/typescript/heatmap-chart/appearance.md @@ -4,7 +4,6 @@ title: Appearance in TypeScript HeatMap chart control | Syncfusion description: Learn here all about Appearance in Syncfusion TypeScript HeatMap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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/typescript/heatmap-chart/axis.md b/chart-sdk/typescript/heatmap-chart/axis.md index e57fb8404..066ca08ea 100644 --- a/chart-sdk/typescript/heatmap-chart/axis.md +++ b/chart-sdk/typescript/heatmap-chart/axis.md @@ -4,7 +4,6 @@ title: Axis in TypeScript HeatMap chart control | Syncfusion description: Learn here all about axis in Syncfusion TypeScript HeatMap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/bubble-heatmap.md b/chart-sdk/typescript/heatmap-chart/bubble-heatmap.md index b30372d8a..e4d773957 100644 --- a/chart-sdk/typescript/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/typescript/heatmap-chart/bubble-heatmap.md @@ -4,7 +4,6 @@ title: Bubble heatmap in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Bubble heatmap in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Bubble heatmap -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,14 +12,14 @@ domainurl: https://help.syncfusion.com/chart-sdk 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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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/typescript/heatmap-chart/dimensions.md b/chart-sdk/typescript/heatmap-chart/dimensions.md index 900cede65..1e80e7250 100644 --- a/chart-sdk/typescript/heatmap-chart/dimensions.md +++ b/chart-sdk/typescript/heatmap-chart/dimensions.md @@ -4,7 +4,6 @@ title: Dimensions in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Dimensions in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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/typescript/heatmap-chart/ej1-api-migration.md b/chart-sdk/typescript/heatmap-chart/ej1-api-migration.md index 02ff6d181..f11186993 100644 --- a/chart-sdk/typescript/heatmap-chart/ej1-api-migration.md +++ b/chart-sdk/typescript/heatmap-chart/ej1-api-migration.md @@ -4,7 +4,6 @@ title: Ej1 api migration in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/events.md b/chart-sdk/typescript/heatmap-chart/events.md index 53d0bb258..35764face 100644 --- a/chart-sdk/typescript/heatmap-chart/events.md +++ b/chart-sdk/typescript/heatmap-chart/events.md @@ -4,7 +4,6 @@ title: Events in TypeScript HeatMap chart control | Syncfusion description: Learn here all about events in Syncfusion TypeScript HeatMap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Events -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ This section describes the HeatMap chart control event, which occurs when the re ## 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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/heatmap-chart/getting-started.md b/chart-sdk/typescript/heatmap-chart/getting-started.md index 0b301cb61..3a5f29d82 100644 --- a/chart-sdk/typescript/heatmap-chart/getting-started.md +++ b/chart-sdk/typescript/heatmap-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting started with TypeScript HeatMap component | Syncfusion description: Create and configure a Syncfusion JavaScript HeatMap in TypeScript using the Essential JS 2 webpack quickstart project. platform: chart-sdk control: HeatMap -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/how-to/legend-customization.md b/chart-sdk/typescript/heatmap-chart/how-to/legend-customization.md index 88af932ee..5de132692 100644 --- a/chart-sdk/typescript/heatmap-chart/how-to/legend-customization.md +++ b/chart-sdk/typescript/heatmap-chart/how-to/legend-customization.md @@ -4,7 +4,6 @@ title: Legend customization in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Legend customization in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/how-to/tooltip-template.md b/chart-sdk/typescript/heatmap-chart/how-to/tooltip-template.md index 86d0c3479..e12c724f5 100644 --- a/chart-sdk/typescript/heatmap-chart/how-to/tooltip-template.md +++ b/chart-sdk/typescript/heatmap-chart/how-to/tooltip-template.md @@ -4,7 +4,6 @@ title: Tooltip template in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Tooltip template in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip template -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/legend.md b/chart-sdk/typescript/heatmap-chart/legend.md index 9a3537a57..58c6335e7 100644 --- a/chart-sdk/typescript/heatmap-chart/legend.md +++ b/chart-sdk/typescript/heatmap-chart/legend.md @@ -4,14 +4,13 @@ title: Legend in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Legend in Syncfusion TypeScript Heatmap chart control 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 TypeScript Heatmap chart control -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/heatmap-chart/palette.md b/chart-sdk/typescript/heatmap-chart/palette.md index f48f5f1ed..5e185acd2 100644 --- a/chart-sdk/typescript/heatmap-chart/palette.md +++ b/chart-sdk/typescript/heatmap-chart/palette.md @@ -4,7 +4,6 @@ title: Palette in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Palette in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Palette -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/heatmap-chart/rendering-mode.md b/chart-sdk/typescript/heatmap-chart/rendering-mode.md index 2ee5cc576..a8a6333f7 100644 --- a/chart-sdk/typescript/heatmap-chart/rendering-mode.md +++ b/chart-sdk/typescript/heatmap-chart/rendering-mode.md @@ -4,7 +4,6 @@ title: Rendering mode in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Rendering mode in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Rendering mode -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -12,7 +11,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Rendering mode in TypeScript Heatmap chart control 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/typescript/heatmap-chart/selection.md b/chart-sdk/typescript/heatmap-chart/selection.md index 693fee9fe..2c50271ab 100644 --- a/chart-sdk/typescript/heatmap-chart/selection.md +++ b/chart-sdk/typescript/heatmap-chart/selection.md @@ -4,14 +4,13 @@ title: Selection in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Selection in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Selection -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- # Selection in TypeScript Heatmap chart control -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 ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/heatmap-chart/tooltip.md b/chart-sdk/typescript/heatmap-chart/tooltip.md index fbcbc52f4..3b734572b 100644 --- a/chart-sdk/typescript/heatmap-chart/tooltip.md +++ b/chart-sdk/typescript/heatmap-chart/tooltip.md @@ -4,7 +4,6 @@ title: Tooltip in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Tooltip in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ Tooltip is used to provide the details of the heat map cell, and this can be dis ## 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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/heatmap-chart/working-with-data.md b/chart-sdk/typescript/heatmap-chart/working-with-data.md index b42fd3eb1..f28a093ae 100644 --- a/chart-sdk/typescript/heatmap-chart/working-with-data.md +++ b/chart-sdk/typescript/heatmap-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working with data in TypeScript Heatmap chart control | Syncfusion description: Learn here all about Working with data in Syncfusion TypeScript Heatmap chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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 ts tabtitle="index.ts" %} @@ -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/typescript/smith-chart/accessibility.md b/chart-sdk/typescript/smith-chart/accessibility.md index 69c0dbaa0..e3a7bbe98 100644 --- a/chart-sdk/typescript/smith-chart/accessibility.md +++ b/chart-sdk/typescript/smith-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in TypeScript Smithchart control | Syncfusion description: Learn here all about Accessibility in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/getting-started.md b/chart-sdk/typescript/smith-chart/getting-started.md index 90aa3e5ad..e900613f6 100644 --- a/chart-sdk/typescript/smith-chart/getting-started.md +++ b/chart-sdk/typescript/smith-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting started with TypeScript Smith Chart control | Syncfusion description: Create your first Smith Chart in TypeScript using Syncfusion Essential JS 2, with step-by-step setup and configuration guidance. platform: chart-sdk control: Smith Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-axis.md b/chart-sdk/typescript/smith-chart/smith-chart-axis.md index 8cfa43715..2a99876c3 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-axis.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-axis.md @@ -4,7 +4,6 @@ title: Smith chart axis in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart axis in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart axis -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-dimensions.md b/chart-sdk/typescript/smith-chart/smith-chart-dimensions.md index 7fd653ac2..2895dc693 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-dimensions.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-dimensions.md @@ -4,7 +4,6 @@ title: Smith chart dimensions in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart dimensions in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-legend.md b/chart-sdk/typescript/smith-chart/smith-chart-legend.md index 1eb905cca..3a36ef80e 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-legend.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-legend.md @@ -4,7 +4,6 @@ title: Smith chart legend in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart legend in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-marker.md b/chart-sdk/typescript/smith-chart/smith-chart-marker.md index f13584738..ba1fa4014 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-marker.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-marker.md @@ -4,7 +4,6 @@ title: Smith chart marker in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart marker in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart marker -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-print.md b/chart-sdk/typescript/smith-chart/smith-chart-print.md index 396a63fdf..a9a959e37 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-print.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-print.md @@ -4,7 +4,6 @@ title: Smith chart print in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart print in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart print -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-series.md b/chart-sdk/typescript/smith-chart/smith-chart-series.md index 36ea8b35c..ef517b4d7 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-series.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-series.md @@ -4,7 +4,6 @@ title: Smith chart series in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart series in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart series -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/smith-chart-tooltip.md b/chart-sdk/typescript/smith-chart/smith-chart-tooltip.md index c0d978931..80dcd0199 100644 --- a/chart-sdk/typescript/smith-chart/smith-chart-tooltip.md +++ b/chart-sdk/typescript/smith-chart/smith-chart-tooltip.md @@ -4,7 +4,6 @@ title: Smith chart tooltip in TypeScript Smithchart control | Syncfusion description: Learn here all about Smith chart tooltip in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Smith chart tooltip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/title-subtitle.md b/chart-sdk/typescript/smith-chart/title-subtitle.md index e5315dc2d..0272fe153 100644 --- a/chart-sdk/typescript/smith-chart/title-subtitle.md +++ b/chart-sdk/typescript/smith-chart/title-subtitle.md @@ -4,7 +4,6 @@ title: Title subtitle in TypeScript Smithchart control | Syncfusion description: Learn here all about Title subtitle in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Title subtitle -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/smith-chart/working-with-data.md b/chart-sdk/typescript/smith-chart/working-with-data.md index 04ef65eed..d8ef59c42 100644 --- a/chart-sdk/typescript/smith-chart/working-with-data.md +++ b/chart-sdk/typescript/smith-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working with data in TypeScript Smithchart control | Syncfusion description: Learn here all about Working with data in Syncfusion TypeScript Smithchart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/accessibility.md b/chart-sdk/typescript/sparkline-charts/accessibility.md index 67796b146..c191e3873 100644 --- a/chart-sdk/typescript/sparkline-charts/accessibility.md +++ b/chart-sdk/typescript/sparkline-charts/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in TypeScript Sparkline control | Syncfusion description: Learn here all about Accessibility in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/appearance.md b/chart-sdk/typescript/sparkline-charts/appearance.md index 1b4e864a8..b6f4db969 100644 --- a/chart-sdk/typescript/sparkline-charts/appearance.md +++ b/chart-sdk/typescript/sparkline-charts/appearance.md @@ -4,7 +4,6 @@ title: Appearance in TypeScript Sparkline control | Syncfusion description: Learn here all about Appearance in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/axis-customization.md b/chart-sdk/typescript/sparkline-charts/axis-customization.md index bb012217b..71efefe7a 100644 --- a/chart-sdk/typescript/sparkline-charts/axis-customization.md +++ b/chart-sdk/typescript/sparkline-charts/axis-customization.md @@ -4,7 +4,6 @@ title: Axis customization in TypeScript Sparkline control | Syncfusion description: Learn here all about Axis customization in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/data-labels.md b/chart-sdk/typescript/sparkline-charts/data-labels.md index ca12ea66f..d87c50dd4 100644 --- a/chart-sdk/typescript/sparkline-charts/data-labels.md +++ b/chart-sdk/typescript/sparkline-charts/data-labels.md @@ -4,7 +4,6 @@ title: Data labels in TypeScript Sparkline control | Syncfusion description: Learn here all about Data labels in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Data labels -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/ej1-api-migration.md b/chart-sdk/typescript/sparkline-charts/ej1-api-migration.md index a54255df6..fc17bbb92 100644 --- a/chart-sdk/typescript/sparkline-charts/ej1-api-migration.md +++ b/chart-sdk/typescript/sparkline-charts/ej1-api-migration.md @@ -4,7 +4,6 @@ title: Ej1 api migration in TypeScript Sparkline control | Syncfusion description: Learn here all about Ej1 api migration in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Ej1 api migration -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/getting-started.md b/chart-sdk/typescript/sparkline-charts/getting-started.md index 2515b9990..355a8e98f 100644 --- a/chart-sdk/typescript/sparkline-charts/getting-started.md +++ b/chart-sdk/typescript/sparkline-charts/getting-started.md @@ -4,7 +4,6 @@ title: Getting started with TypeScript Sparkline control | Syncfusion description: Check out and learn how to get started with the TypeScript Sparkline control in Syncfusion Essential JS 2. platform: chart-sdk control: Sparkline -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/localization.md b/chart-sdk/typescript/sparkline-charts/localization.md index d59413c72..84177475a 100644 --- a/chart-sdk/typescript/sparkline-charts/localization.md +++ b/chart-sdk/typescript/sparkline-charts/localization.md @@ -4,7 +4,6 @@ title: Localization in TypeScript Sparkline control | Syncfusion description: Learn here all about Localization in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Localization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/marker.md b/chart-sdk/typescript/sparkline-charts/marker.md index 6c8536a76..d998be77d 100644 --- a/chart-sdk/typescript/sparkline-charts/marker.md +++ b/chart-sdk/typescript/sparkline-charts/marker.md @@ -4,7 +4,6 @@ title: Marker in TypeScript Sparkline control | Syncfusion description: Learn here all about Marker in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Marker -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/range-band.md b/chart-sdk/typescript/sparkline-charts/range-band.md index d3abe6996..2d9c97d29 100644 --- a/chart-sdk/typescript/sparkline-charts/range-band.md +++ b/chart-sdk/typescript/sparkline-charts/range-band.md @@ -4,7 +4,6 @@ title: Range band in TypeScript Sparkline control | Syncfusion description: Learn here all about Range band in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range band -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/sparkline-dimensions.md b/chart-sdk/typescript/sparkline-charts/sparkline-dimensions.md index fec864ade..a0bce19c5 100644 --- a/chart-sdk/typescript/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/typescript/sparkline-charts/sparkline-dimensions.md @@ -4,7 +4,6 @@ title: Sparkline dimensions in TypeScript Sparkline control | Syncfusion description: Learn here all about Sparkline dimensions in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -34,7 +33,7 @@ Sparkline can be rendered to its container size. You can set the size through in ## Size for sparkline -You can also set the size for sparkline directly using the [`width`](../../api/sparkline/#width-string) and [`height`](../../api/sparkline/#height-string) properties. +You can also set the size for sparkline directly using the [`width`](../../api/sparkline#width-string) and [`height`](../../api/sparkline#height-string) properties. **In pixel** diff --git a/chart-sdk/typescript/sparkline-charts/sparkline-types.md b/chart-sdk/typescript/sparkline-charts/sparkline-types.md index fe7ed43ba..b73c44e29 100644 --- a/chart-sdk/typescript/sparkline-charts/sparkline-types.md +++ b/chart-sdk/typescript/sparkline-charts/sparkline-types.md @@ -4,7 +4,6 @@ title: Sparkline types in TypeScript Sparkline control | Syncfusion description: Learn here all about Sparkline types in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Sparkline types -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/special-points-customization.md b/chart-sdk/typescript/sparkline-charts/special-points-customization.md index 367e6da09..3ed267a8d 100644 --- a/chart-sdk/typescript/sparkline-charts/special-points-customization.md +++ b/chart-sdk/typescript/sparkline-charts/special-points-customization.md @@ -4,7 +4,6 @@ title: Special points customization in TypeScript Sparkline | Syncfusion description: Learn here all about Special points customization in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Special points customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/sparkline-charts/user-interaction.md b/chart-sdk/typescript/sparkline-charts/user-interaction.md index 71e10df34..b95a2efde 100644 --- a/chart-sdk/typescript/sparkline-charts/user-interaction.md +++ b/chart-sdk/typescript/sparkline-charts/user-interaction.md @@ -4,7 +4,6 @@ title: User interaction in TypeScript Sparkline control | Syncfusion description: Learn here all about User interaction in Syncfusion TypeScript Sparkline control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: User interaction -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/stock-charts/accessibility.md b/chart-sdk/typescript/stock-chart/accessibility.md similarity index 99% rename from chart-sdk/typescript/stock-charts/accessibility.md rename to chart-sdk/typescript/stock-chart/accessibility.md index e6220067f..696c9a704 100644 --- a/chart-sdk/typescript/stock-charts/accessibility.md +++ b/chart-sdk/typescript/stock-chart/accessibility.md @@ -4,7 +4,6 @@ title: Accessibility in TypeScript Stock chart control | Syncfusion description: Learn here all about Accessibility in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Accessibility -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/stock-charts/appearance.md b/chart-sdk/typescript/stock-chart/appearance.md similarity index 84% rename from chart-sdk/typescript/stock-charts/appearance.md rename to chart-sdk/typescript/stock-chart/appearance.md index e04264d45..462a38324 100644 --- a/chart-sdk/typescript/stock-charts/appearance.md +++ b/chart-sdk/typescript/stock-chart/appearance.md @@ -4,7 +4,6 @@ title: Appearance in TypeScript Stock chart control | Syncfusion description: Learn here all about Appearance in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Appearance -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Stock Chart Title -Stock Chart can be given a title using [`title`](../api/stock-chart/#title) property, to show the information about the data plotted. +Stock Chart can be given a title using [`title`](../api/stock-chart#title) property, to show the information about the data plotted. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -47,7 +46,7 @@ The `textStyle` property of stock chart title provides options to customize the Changing Stock Chart theme will affect background color, grid lines, tooltip colors and appearance. -[`theme`](../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`](../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="index.ts" %} @@ -62,4 +61,4 @@ Changing Stock Chart theme will affect background color, grid lines, tooltip col ## See Also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/typescript/stock-charts/axis-customization.md b/chart-sdk/typescript/stock-chart/axis-customization.md similarity index 78% rename from chart-sdk/typescript/stock-charts/axis-customization.md rename to chart-sdk/typescript/stock-chart/axis-customization.md index 1072a4dff..1fd9a6d0f 100644 --- a/chart-sdk/typescript/stock-charts/axis-customization.md +++ b/chart-sdk/typescript/stock-chart/axis-customization.md @@ -4,7 +4,6 @@ title: Axis customization in TypeScript Stock chart control | Syncfusion description: Learn here all about Axis customization in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis customization -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Axis Crossing -An axis can be positioned in the Stock Chart area using [`crossesAt`](../api/stock-chart/stockChartAxisModel/#crossesat) and [`crossesInAxis`] (../api/stock-chart/stockChartAxisModel/#crossesinaxis) properties. The [`crossesAt`](../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`](../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`](../api/stock-chart/stockChartAxisModel#crossesat) and [`crossesInAxis`] (../api/stock-chart/stockChartAxisModel#crossesinaxis) properties. The [`crossesAt`](../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`](../api/stock-chart/stockChartAxisModel#crossesinaxis) property specifies the axis name with which the axis line has to be crossed. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -28,7 +27,7 @@ An axis can be positioned in the Stock Chart area using [`crossesAt`](../api/sto ## Title -You can add a title to the axis using [`title`](../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`](../api/stock-chart/stockChartAxisModel/#titlestyle) property of the axis. +You can add a title to the axis using [`title`](../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`](../api/stock-chart/stockChartAxisModel#titlestyle) property of the axis. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -43,7 +42,7 @@ You can add a title to the axis using [`title`](../api/stock-chart/stockChartAxi ## Tick Lines Customization -You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](../api/stock-chart/stockChartAxisModel/#majorticklines) and [`minorTickLines`](../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`](../api/stock-chart/stockChartAxisModel#majorticklines) and [`minorTickLines`](../api/stock-chart/stockChartAxisModel#minorticklines) properties in the axis. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -58,7 +57,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`](../api/stock-chart/stockChartAxisModel/#majorgridlines) and [`minorGridLines`](../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`](../api/stock-chart/stockChartAxisModel#majorgridlines) and [`minorGridLines`](../api/stock-chart/stockChartAxisModel#minorgridlines) properties in the axis. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -91,7 +90,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`](../api/stock-chart/stockChartAxisModel/#isinversed) to true. +[`isInversed`](../api/stock-chart/stockChartAxisModel#isinversed) to true. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -106,7 +105,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`](../api/stock-chart/stockChartAxisModel/#opposedposition) property of the axis to true. +To place an axis opposite from its original position, set [`opposedPosition`](../api/stock-chart/stockChartAxisModel#opposedposition) property of the axis to true. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/axis-types.md b/chart-sdk/typescript/stock-chart/axis-types.md similarity index 82% rename from chart-sdk/typescript/stock-charts/axis-types.md rename to chart-sdk/typescript/stock-chart/axis-types.md index 66985e483..aba0a1a79 100644 --- a/chart-sdk/typescript/stock-charts/axis-types.md +++ b/chart-sdk/typescript/stock-chart/axis-types.md @@ -4,7 +4,6 @@ title: Axis types in TypeScript Stock chart control | Syncfusion description: Learn here all about Axis types in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Axis types -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -14,7 +13,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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`](../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`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -27,11 +26,11 @@ DateTime axis uses date time scale and displays the date time values as axis lab {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/typescript/stock-chart/getting-started-cs10" %} ->Note: To use this axis, we need to inject DateTime using `StockChart.Inject(DateTime)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTime`. +>Note: To use this axis, we need to inject DateTime using `StockChart.Inject(DateTime)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. ## DateTimeCategory axis -DateTimeCategory axis in the stock chart is used to display only business days. To use DateTimeCategory axis, set the [`valueType`](../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`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -44,13 +43,13 @@ DateTimeCategory axis in the stock chart is used to display only business days. {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/typescript/stock-chart/getting-started-cs38" %} ->Note: To use this axis, we need to inject DateTimeCategory using `StockChart.Inject(DateTimeCategory)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTimeCategory`. +>Note: To use this axis, we need to inject DateTimeCategory using `StockChart.Inject(DateTimeCategory)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. ## Logarithmic axis -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`](../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`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -63,8 +62,8 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/typescript/stock-chart/getting-started-cs11" %} ->Note: To use this axis, we need to inject Logarithmic using `StockChart.Inject(Logarithmic)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel/#valuetype) of axis to `Logarithmic`. +>Note: To use this axis, we need to inject Logarithmic using `StockChart.Inject(Logarithmic)` method and set the [`valueType`](../api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. ## See also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/typescript/stock-charts/chart-dimensions.md b/chart-sdk/typescript/stock-chart/chart-dimensions.md similarity index 95% rename from chart-sdk/typescript/stock-charts/chart-dimensions.md rename to chart-sdk/typescript/stock-chart/chart-dimensions.md index e1278882d..2e4412e02 100644 --- a/chart-sdk/typescript/stock-charts/chart-dimensions.md +++ b/chart-sdk/typescript/stock-chart/chart-dimensions.md @@ -4,7 +4,6 @@ title: Chart dimensions in TypeScript Stock chart control | Syncfusion description: Learn here all about Chart dimensions in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Chart dimensions -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -32,7 +31,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`](../api/stock-chart/#width) and [`height`](../api/stock-chart/#height) properties. +You can also set size for chart directly through [`width`](../api/stock-chart#width) and [`height`](../api/stock-chart#height) properties. **In Pixel** diff --git a/chart-sdk/typescript/stock-charts/cross-hair.md b/chart-sdk/typescript/stock-chart/cross-hair.md similarity index 83% rename from chart-sdk/typescript/stock-charts/cross-hair.md rename to chart-sdk/typescript/stock-chart/cross-hair.md index e4363de77..a949cb060 100644 --- a/chart-sdk/typescript/stock-charts/cross-hair.md +++ b/chart-sdk/typescript/stock-chart/cross-hair.md @@ -4,7 +4,6 @@ title: Cross hair in TypeScript Stock chart control | Syncfusion description: Learn here all about Cross hair in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Cross hair -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -13,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`](../api/chart/crosshairSettingsModel/#enable) property in the `crosshair`. +Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettingsModel#enable) property in the `crosshair`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -28,7 +27,7 @@ Crosshair lines can be enabled by using [`enable`](../api/chart/crosshairSettin ## Tooltip for axis -Tooltip label for an axis can be enabled by using [`enable`](../api/chart/crosshairTooltipModel/#enable) property of `crosshairTooltip` in the corresponding axis. +Tooltip label for an axis can be enabled by using [`enable`](../api/chart/crosshairTooltipModel#enable) property of `crosshairTooltip` in the corresponding axis. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -43,7 +42,7 @@ Tooltip label for an axis can be enabled by using [`enable`](../api/chart/cross ## Customization -The [`fill`](../api/chart/crosshairTooltipModel/#fill) and [`textStyle`](../api/chart/crosshairTooltipModel/#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`](../api/chart/crosshairSettingsModel/#line) property in the crosshair. +The [`fill`](../api/chart/crosshairTooltipModel#fill) and [`textStyle`](../api/chart/crosshairTooltipModel#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`](../api/chart/crosshairSettingsModel#line) property in the crosshair. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -58,7 +57,7 @@ The [`fill`](../api/chart/crosshairTooltipModel/#fill) and [`textStyle`](../api/ **Snap to data** -Enabling the [`snapToData`](../api/chart/crosshairSettingsModel/#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. +Enabling the [`snapToData`](../api/chart/crosshairSettingsModel#snaptodata) property in the crosshair aligns it with the nearest data point instead of following the exact mouse position. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/export-print.md b/chart-sdk/typescript/stock-chart/export-print.md similarity index 98% rename from chart-sdk/typescript/stock-charts/export-print.md rename to chart-sdk/typescript/stock-chart/export-print.md index 2914e2efc..b7be7846d 100644 --- a/chart-sdk/typescript/stock-charts/export-print.md +++ b/chart-sdk/typescript/stock-chart/export-print.md @@ -4,7 +4,6 @@ title: Export print in TypeScript Stock chart control | Syncfusion description: Learn here all about Export print in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Export print -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/stock-charts/getting-started.md b/chart-sdk/typescript/stock-chart/getting-started.md similarity index 99% rename from chart-sdk/typescript/stock-charts/getting-started.md rename to chart-sdk/typescript/stock-chart/getting-started.md index f8a9b7bd3..57235d7d9 100644 --- a/chart-sdk/typescript/stock-charts/getting-started.md +++ b/chart-sdk/typescript/stock-chart/getting-started.md @@ -4,7 +4,6 @@ title: Getting started with TypeScript Stock Chart control | Syncfusion description: Check out and learn about Getting started with TypeScript Stock Chart control of Syncfusion Essential JS 2 and more details. platform: chart-sdk control: Stock Chart -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -19,7 +18,7 @@ This document explains how to create a simple Stock Chart and configure its feat Before you begin, ensure you have the following installed on your machine: -* [Node.js](https://nodejs.org/) (v14.15.0 or higher) +* Node.js * [Visual Studio Code](https://code.visualstudio.com) (or any text editor) * [Git](https://git-scm.com/) for cloning the quickstart repository * A modern web browser (Chrome, Edge, Firefox, or Safari) to view the result diff --git a/chart-sdk/typescript/stock-charts/gradient.md b/chart-sdk/typescript/stock-chart/gradient.md similarity index 99% rename from chart-sdk/typescript/stock-charts/gradient.md rename to chart-sdk/typescript/stock-chart/gradient.md index 68703695a..8de60922b 100644 --- a/chart-sdk/typescript/stock-charts/gradient.md +++ b/chart-sdk/typescript/stock-chart/gradient.md @@ -4,7 +4,6 @@ title: Gradient in TypeScript Stock chart control | Syncfusion description: Learn here all about Gradient in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Gradient -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/stock-charts/images/stockchart.png b/chart-sdk/typescript/stock-chart/images/stockchart.png similarity index 100% rename from chart-sdk/typescript/stock-charts/images/stockchart.png rename to chart-sdk/typescript/stock-chart/images/stockchart.png diff --git a/chart-sdk/typescript/stock-charts/legend.md b/chart-sdk/typescript/stock-chart/legend.md similarity index 70% rename from chart-sdk/typescript/stock-charts/legend.md rename to chart-sdk/typescript/stock-chart/legend.md index a037a82b1..610059704 100644 --- a/chart-sdk/typescript/stock-charts/legend.md +++ b/chart-sdk/typescript/stock-chart/legend.md @@ -4,7 +4,6 @@ title: Legend in TypeScript Stock chart control | Syncfusion description: Learn here all about Legend in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Legend -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,11 +14,11 @@ domainurl: https://help.syncfusion.com/chart-sdk -Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [`visible`](../api/stock-chart/legendSettings/#visible) option in the [`legendSettings`](../api/stock-chart/legendSettings/). +Legend provides information about the series rendered in the Stock Chart. Legend can be added to a Stock Chart by enabling the [`visible`](../api/stock-chart/legendSettings#visible) option in the [`legendSettings`](../api/stock-chart/legendSettings). ## Position and Alignment -By using the [`position`](../api/stock-chart/legendSettings/#position) property, legend can be placed at `Left`, `Right`, `Top`, `Bottom` or `Custom` of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. +By using the [`position`](../api/stock-chart/legendSettings#position) property, legend can be placed at `Left`, `Right`, `Top`, `Bottom` or `Custom` of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -32,7 +31,7 @@ By using the [`position`](../api/stock-chart/legendSettings/#position) property, {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/typescript/stock-chart/legend-cs1" %} -[`Custom`](../api/stock-chart/legendSettings/#position) position is used to position the legend anywhere in the Stock Chart using x, y coordinates. +[`Custom`](../api/stock-chart/legendSettings#position) position is used to position the legend anywhere in the Stock Chart using x, y coordinates. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -47,7 +46,7 @@ By using the [`position`](../api/stock-chart/legendSettings/#position) property, **Legend Alignment** -The legend can be align as `Center`, `Far` or `Near` to the Stock Chart using [`alignment`](../api/stock-chart/legendSettings/#alignment) property. +The legend can be align as `Center`, `Far` or `Near` to the Stock Chart using [`alignment`](../api/stock-chart/legendSettings#alignment) property. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -62,7 +61,7 @@ The legend can be align as `Center`, `Far` or `Near` to the Stock Chart using [` ## Customization -To change the legend icon shape, [`legendShape`](../api/stock-chart/stockSeries/#legendshape-string) property in the [`series`](../api/stock-chart/stockSeries/) can be used. By default legend icon shape is `seriesType`. +To change the legend icon shape, [`legendShape`](../api/stock-chart/stockSeries#legendshape-string) property in the [`series`](../api/stock-chart/stockSeries) can be used. By default legend icon shape is `seriesType`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -77,7 +76,7 @@ To change the legend icon shape, [`legendShape`](../api/stock-chart/stockSeries/ **Legend Size** -By default, legend takes 20% - 25% of the Stock Chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the width vertically, while placing on left or right position of the Stock Chart. The default legend size can be changed by using the [`width`](../api/stock-chart/legendSettings/#width) and [`height`](../api/stock-chart/legendSettings/#height) property of the `legendSettings`. +By default, legend takes 20% - 25% of the Stock Chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the width vertically, while placing on left or right position of the Stock Chart. The default legend size can be changed by using the [`width`](../api/stock-chart/legendSettings#width) and [`height`](../api/stock-chart/legendSettings#height) property of the `legendSettings`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -92,7 +91,7 @@ By default, legend takes 20% - 25% of the Stock Chart's height horizontally, whe **Legend Item Size** -The size of the legend items can customized by using the [`shapeHeight`](../api/stock-chart/legendSettings/#shapeheight) and [`shapeWidth`](../api/stock-chart/legendSettings/#shapewidth) property. +The size of the legend items can customized by using the [`shapeHeight`](../api/stock-chart/legendSettings#shapeheight) and [`shapeWidth`](../api/stock-chart/legendSettings#shapewidth) property. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -122,7 +121,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa ## Legend Title -The title for legend can be set using [`title`](../api/stock-chart/legendSettings/#title) property in `legendSettings`. Customize the [`fontStyle`](../api/stock-chart/stockChartFont/#fontstyle), [`size`](../api/stock-chart/stockChartFont/#size), [`fontWeight`](../api/stock-chart/stockChartFont/#fontweight), [`color`](../api/stock-chart/stockChartFont/#color), [`textAlignment`](../api/stock-chart/stockChartFont/#textalignment), [`fontFamily`](../api/stock-chart/stockChartFont/#fontfamily), [`opacity`](../api/stock-chart/stockChartFont/#opacity) and [`textOverflow`](../api/stock-chart/stockChartFont/#textoverflow) of legend title. [`titlePosition`](../api/stock-chart/legendSettings/#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. [`maximumTitleWidth`](../api/stock-chart/legendSettings/#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. +The title for legend can be set using [`title`](../api/stock-chart/legendSettings#title) property in `legendSettings`. Customize the [`fontStyle`](../api/stock-chart/stockChartFont#fontstyle), [`size`](../api/stock-chart/stockChartFont#size), [`fontWeight`](../api/stock-chart/stockChartFont#fontweight), [`color`](../api/stock-chart/stockChartFont#color), [`textAlignment`](../api/stock-chart/stockChartFont#textalignment), [`fontFamily`](../api/stock-chart/stockChartFont#fontfamily), [`opacity`](../api/stock-chart/stockChartFont#opacity) and [`textOverflow`](../api/stock-chart/stockChartFont#textoverflow) of legend title. [`titlePosition`](../api/stock-chart/legendSettings#titleposition) is used to set the legend position in `Top`, `Left` and `Right` position. [`maximumTitleWidth`](../api/stock-chart/legendSettings#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -139,7 +138,7 @@ The title for legend can be set using [`title`](../api/stock-chart/legendSetting Legend templates allow you to replace default legend icons and text with custom HTML.This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.The rendered content becomes the legend item and can be styled with CSS. -You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/documentation/api/stock-chart/legendSettingsModel) property of [`legendSettings`](https://ej2.syncfusion.com/documentation/api/stock-chart/legendSettingsModel). Legend interactions (click to toggle series) remain unless [`ToggleVisibility`](https://ej2.syncfusion.com/documentation/api/stock-chart/legendsettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging. +You can customize the legend items by using the [`template`](https://ej2.syncfusion.com/documentation/api/stock-chartlegendSettingsModel) property of [`legendSettings`](https://ej2.syncfusion.com/documentation/api/stock-chartlegendSettingsModel). Legend interactions (click to toggle series) remain unless [`ToggleVisibility`](https://ej2.syncfusion.com/documentation/api/stock-chart/legendsettings#togglevisibility) is set to false. Templates work with all legend positions, alignments, and paging. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/period-selector.md b/chart-sdk/typescript/stock-chart/period-selector.md similarity index 75% rename from chart-sdk/typescript/stock-charts/period-selector.md rename to chart-sdk/typescript/stock-chart/period-selector.md index 26fd2a675..0d1899ee0 100644 --- a/chart-sdk/typescript/stock-charts/period-selector.md +++ b/chart-sdk/typescript/stock-chart/period-selector.md @@ -4,7 +4,6 @@ title: Period selector in TypeScript Stock chart control | Syncfusion description: Learn here all about Period selector in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Period selector -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -15,7 +14,7 @@ The period selector allows to select a range with specified periods. By default ## Periods -Periods is an array of objects that allows users to specify the range of [`periods`](../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`](../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 +39,7 @@ Periods is an array of objects that allows users to specify the range of [`perio ## Visibility of period selector -The [`enablePeriodSelector`](../api/stock-chart/stockChartModel/#enableperiodselector) property allows users to toggle the visibility of period selector. +The [`enablePeriodSelector`](../api/stock-chart/stockChartModel#enableperiodselector) property allows users to toggle the visibility of period selector. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/range-selector.md b/chart-sdk/typescript/stock-chart/range-selector.md similarity index 89% rename from chart-sdk/typescript/stock-charts/range-selector.md rename to chart-sdk/typescript/stock-chart/range-selector.md index 50b263929..55561de08 100644 --- a/chart-sdk/typescript/stock-charts/range-selector.md +++ b/chart-sdk/typescript/stock-chart/range-selector.md @@ -4,7 +4,6 @@ title: Range selector in TypeScript Stock chart control | Syncfusion description: Learn here all about Range selector in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Range selector -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -17,7 +16,7 @@ The left and right thumb of RangeNavigator are used to indicate the selected ran * By tapping on the labels. * By setting the start and end through Date Range button. -Following code example shows the [`enableSelector`](../api/stock-chart/stockChartModel/#enableselector) property allows users to toggle the visibility of range selector. +Following code example shows the [`enableSelector`](../api/stock-chart/stockChartModel#enableselector) property allows users to toggle the visibility of range selector. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/series-types.md b/chart-sdk/typescript/stock-chart/series-types.md similarity index 65% rename from chart-sdk/typescript/stock-charts/series-types.md rename to chart-sdk/typescript/stock-chart/series-types.md index 2ec9f1630..3dc84ff16 100644 --- a/chart-sdk/typescript/stock-charts/series-types.md +++ b/chart-sdk/typescript/stock-chart/series-types.md @@ -4,7 +4,6 @@ title: Series types in TypeScript Stock chart control | Syncfusion description: Learn here all about Series types in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Series types -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -17,27 +16,27 @@ Essential JS 2 StockChart supports 6 major types of series namely `Line`, `Splin ## Line -To render a line series, use series [`type`](../api/stock-chart/stockSeriesModel/#type-string) as `Line` and inject `LineSeries` module using `StockChart.Inject(LineSeries)` method. +To render a line series, use series [`type`](../api/stock-chart/stockSeriesModel#type-string) as `Line` and inject `LineSeries` module using `StockChart.Inject(LineSeries)` method. ## Spline -To render a spline series, use series [`type`](../api/stock-chart/stockSeriesModel/#type-string) as `Spline` and inject `SplineSeries` module using `StockChart.Inject(SplineSeries)` method. +To render a spline series, use series [`type`](../api/stock-chart/stockSeriesModel#type-string) as `Spline` and inject `SplineSeries` module using `StockChart.Inject(SplineSeries)` method. ## Hilo -To render a hilo series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `Hilo` and inject `HiloSeries` module using `StockChart.Inject(HiloSeries)` method. +To render a hilo series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `Hilo` and inject `HiloSeries` module using `StockChart.Inject(HiloSeries)` method. ## HiloOpenClose -To render a hiloOpenClose series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` module using `StockChart.Inject(HiloOpenCloseSeries)` method. +To render a hiloOpenClose series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `HiloOpenClose` and inject `HiloOpenCloseSeries` module using `StockChart.Inject(HiloOpenCloseSeries)` method. ## HollowCandle -To render a hollowcandle series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. +To render a hollowcandle series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. ## Candle -To render a candle series, use series [`type`](../api/stock-chart/stockSeriesModel/#type) as `Candle` and inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. +To render a candle series, use series [`type`](../api/stock-chart/stockSeriesModel#type) as `Candle` and inject `CandleSeries` module using `StockChart.Inject(CandleSeries)` method. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/stock-events.md b/chart-sdk/typescript/stock-chart/stock-events.md similarity index 96% rename from chart-sdk/typescript/stock-charts/stock-events.md rename to chart-sdk/typescript/stock-chart/stock-events.md index 6b29124c8..86858df40 100644 --- a/chart-sdk/typescript/stock-charts/stock-events.md +++ b/chart-sdk/typescript/stock-chart/stock-events.md @@ -4,7 +4,6 @@ title: Stock events in TypeScript Stock chart control | Syncfusion description: Learn here all about Stock events in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Stock events -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -44,4 +43,4 @@ By default, stock events will be showed for all series. Now, you can set the sto ## 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/typescript/stock-charts/summary.md b/chart-sdk/typescript/stock-chart/summary.md similarity index 97% rename from chart-sdk/typescript/stock-charts/summary.md rename to chart-sdk/typescript/stock-chart/summary.md index b6c756ad5..75dc53352 100644 --- a/chart-sdk/typescript/stock-charts/summary.md +++ b/chart-sdk/typescript/stock-chart/summary.md @@ -4,7 +4,6 @@ title: Summary in TypeScript Stock chart control | Syncfusion description: Learn here all about Summary in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Summary -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- diff --git a/chart-sdk/typescript/stock-charts/technical-indicators.md b/chart-sdk/typescript/stock-chart/technical-indicators.md similarity index 67% rename from chart-sdk/typescript/stock-charts/technical-indicators.md rename to chart-sdk/typescript/stock-chart/technical-indicators.md index 33466aa0e..785c5f361 100644 --- a/chart-sdk/typescript/stock-charts/technical-indicators.md +++ b/chart-sdk/typescript/stock-chart/technical-indicators.md @@ -4,7 +4,6 @@ title: Technical indicators in TypeScript Stock chart control | Syncfusion description: Learn here all about Technical indicators in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Technical indicators -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -18,48 +17,48 @@ StockChart supports 10 types of technical indicators namely `Accumulation Distri ## Accumulation Distribution -Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `AccumulationDistribution` and inject -`AccumulationDistributionIndicator` module using `StockChart.Inject(AccumulationDistributionIndicator)`. To calculate the signal line [`volume`](../api/stock-chart/stockChartIndicator/#volume) field is additionally added with `dataSource`. +Accumulation Distribution combines price and volume to show how money may be flowing into or out of stock. To render a Accumulation Distribution Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `AccumulationDistribution` and inject +`AccumulationDistributionIndicator` module using `StockChart.Inject(AccumulationDistributionIndicator)`. To calculate the signal line [`volume`](../api/stock-chart/stockChartIndicator#volume) field is additionally added with `dataSource`. ## Average True Range (ATR) ATR measures the stock volatility by comparing the current value with the previous value. To render a Average True Range (ATR) Indicator, -use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Atr` and inject `AtrIndicator` module using `StockChart.Inject(AtrIndicator)`. +use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Atr` and inject `AtrIndicator` module using `StockChart.Inject(AtrIndicator)`. ## Exponential Moving Average (EMA) -Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Ema` and inject `EmaIndicator` module using `StockChart.Inject(EmaIndicator)`. +Moving average Indicators are used to define the direction of the trend. To render a EMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Ema` and inject `EmaIndicator` module using `StockChart.Inject(EmaIndicator)`. ## Momentum -Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Momentum`and inject `MomentumIndicator` module using `StockChart.Inject(MomentumIndicator)` method. Momentum indicator will be represented by two lines (upperLine, signalLine).In momentum indicator the upperBand value is always renders at the value 100. +Momentum shows the speed at which the price of the stock is changing. To render a Momentum indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Momentum`and inject `MomentumIndicator` module using `StockChart.Inject(MomentumIndicator)` method. Momentum indicator will be represented by two lines (upperLine, signalLine).In momentum indicator the upperBand value is always renders at the value 100. ## Moving Average Convergence Divergence (MACD) -MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Macd` and inject `MacdIndicator` module using `StockChart.Inject(MacdIndicator)`.MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line. +MACD is based on the difference between two EMA's. To render a MACD Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Macd` and inject `MacdIndicator` module using `StockChart.Inject(MacdIndicator)`.MACD indicator will be represented by MACD line,signal line, MACD histogram. MACD histogram is used to differentiate MACD line and signal line. ## Relative Strength Index (RSI) -RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Rsi` and inject `RsiIndicator` module using `StockChart.Inject(Rsindicator)`.RSI indicator will be represented -by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [`overBought`](../api/stock-chart/stockChartIndicator/#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator/#oversold) properties of indicator and the signalLine is calculated by RSI formula. +RSI shows how strongly a stock is moving in its current direction. To render a RSI Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Rsi` and inject `RsiIndicator` module using `StockChart.Inject(Rsindicator)`.RSI indicator will be represented +by three lines (upperBand, lowerBand, signalLine). The upperBand and lowerBand values are customized by [`overBought`](../api/stock-chart/stockChartIndicator#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator#oversold) properties of indicator and the signalLine is calculated by RSI formula. ## Simple Moving Average (SMA) -Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Sma` and inject `SmaIndicator` module using `StockChart.Inject(SmaIndicator)`. +Moving average Indicators are used to define the direction of the trend. To render a SMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Sma` and inject `SmaIndicator` module using `StockChart.Inject(SmaIndicator)`. ## Stochastic -It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Stochastic` and inject `StochasticIndicator` module using `StockChart.Inject(StochasticIndicator)` method. -stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand value is customized by [`overBought`](../api/stock-chart/stockChartIndicator/#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator/#oversold) properties of indicators and the periodLine and signalLine is render based on stochastic formula. +It shows how a stock is, when compared to previous state. To render a Stochastic indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Stochastic` and inject `StochasticIndicator` module using `StockChart.Inject(StochasticIndicator)` method. +stochastic indicator will be represented by four lines (upperLine, lowerLine, periodLine, signalLine). In stochastic indicator the upperBand value and lowerBand value is customized by [`overBought`](../api/stock-chart/stockChartIndicator#overbought) and [`overSold`](../api/stock-chart/stockChartIndicator#oversold) properties of indicators and the periodLine and signalLine is render based on stochastic formula. ## Triangular Moving Average (TMA) -Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `Tma` and inject `TmaIndicator` module using `StockChart.Inject(TmaIndicator)`. +Moving average Indicators are used to define the direction of the trend. To render a TMA Indicator, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `Tma` and inject `TmaIndicator` module using `StockChart.Inject(TmaIndicator)`. ## Bollinger Band -A StockChart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [`type`](../api/stock-chart/stockChartIndicator/#type) as `BollingerBand` and inject `BollingerBands` module using `StockChart.Inject(BollingerBands)` method. Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine). -The default values of the Bollinger Band [`period`](../api/stock-chart/stockChartIndicator/#period) is 14 and [`standardDeviations`](../api/stock-chart/stockChartIndicator/#standarddeviation) is 2. +A StockChart overlay that shows the upper and lower limits of normal price movements based on the standard deviation of prices. To render a Bollinger Band, use indicator [`type`](../api/stock-chart/stockChartIndicator#type) as `BollingerBand` and inject `BollingerBands` module using `StockChart.Inject(BollingerBands)` method. Bollinger band will be represented by three lines (upperLine, lowerLine, signalLine). +The default values of the Bollinger Band [`period`](../api/stock-chart/stockChartIndicator#period) is 14 and [`standardDeviations`](../api/stock-chart/stockChartIndicator#standarddeviation) is 2. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/tool-tip.md b/chart-sdk/typescript/stock-chart/tool-tip.md similarity index 83% rename from chart-sdk/typescript/stock-charts/tool-tip.md rename to chart-sdk/typescript/stock-chart/tool-tip.md index 00ecc79e4..6df050657 100644 --- a/chart-sdk/typescript/stock-charts/tool-tip.md +++ b/chart-sdk/typescript/stock-chart/tool-tip.md @@ -4,7 +4,6 @@ title: Tool tip in TypeScript Stock chart control | Syncfusion description: Learn here all about Tool tip in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Tool tip -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -17,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`](../api/chart/tooltipSettings/#enable) property to true and by injecting [`Tooltip`](../api/stock-chart/stockChartModel/#tooltip) module using `StockChart.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`](../api/stock-chart/stockChartModel#tooltip) module using `StockChart.Inject(Tooltip)`. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -51,7 +50,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`](../api/stock-chart/stockTooltipSettings/#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`](../api/stock-chart/stockTooltipSettings#position) property. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -66,7 +65,7 @@ By default, the tooltip is positioned at the left side of the stock chart. You c ## Customize the appearance of the tooltip -The [`fill`](../api/chart/tooltipSettingsModel/#fill) and [`border`](../api/chart/tooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/chart/tooltipSettingsModel/#textStyle) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](../api/chart/tooltipSettingsModel#fill) and [`border`](../api/chart/tooltipSettingsModel#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../api/chart/tooltipSettingsModel#textStyle) property in the tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/trend-lines.md b/chart-sdk/typescript/stock-chart/trend-lines.md similarity index 80% rename from chart-sdk/typescript/stock-charts/trend-lines.md rename to chart-sdk/typescript/stock-chart/trend-lines.md index 63accf449..bf518653b 100644 --- a/chart-sdk/typescript/stock-charts/trend-lines.md +++ b/chart-sdk/typescript/stock-chart/trend-lines.md @@ -4,7 +4,6 @@ title: Trend lines in TypeScript Stock chart control | Syncfusion description: Learn here all about Trend lines in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Trend lines -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -18,27 +17,27 @@ 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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Linear` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel#type) as `Linear` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Exponential` and inject +To render a exponential trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Exponential` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Logarithmic` and inject +To render a logarithmic trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Logarithmic` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. ## Polynomial A polynomial trendline is a curved line that is used when data fluctuates. -To render a polynomial trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel/#type) as `Polynomial` and inject +To render a polynomial trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Polynomial` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. `polynomialOrder` used to define the polynomial value. @@ -47,13 +46,13 @@ To render a polynomial trendline, use trendline [`type`](../api/stock-chart/stoc 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`](../api/stock-chart/stockChartTrendlineModel/#type) as `Power` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. +To render a power trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `Power` and inject `Trendlines` module using `StockChart.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`](../api/stock-chart/stockChartTrendlineModel/#type) as `MovingAverage` and inject +To render a moving average trendline, use trendline [`type`](../api/stock-chart/stockChartTrendlineModel#type) as `MovingAverage` and inject `Trendlines` module using `StockChart.Inject(Trendlines)`. `period` property defines the period to find the moving average. @@ -71,7 +70,7 @@ To render a moving average trendline, use trendline [`type`](../api/stock-chart/ **Customization of Trendline** -The [`fill`](../api/stock-chart/stockChartTrendlineModel/#fill) and [`width`](../api/stock-chart/stockChartTrendlineModel/#width) properties are used to customize the appearance of the trendline. +The [`fill`](../api/stock-chart/stockChartTrendlineModel#fill) and [`width`](../api/stock-chart/stockChartTrendlineModel#width) properties are used to customize the appearance of the trendline. {% tabs %} {% highlight ts tabtitle="index.ts" %} diff --git a/chart-sdk/typescript/stock-charts/working-with-data.md b/chart-sdk/typescript/stock-chart/working-with-data.md similarity index 93% rename from chart-sdk/typescript/stock-charts/working-with-data.md rename to chart-sdk/typescript/stock-chart/working-with-data.md index dc2395684..176db4ed1 100644 --- a/chart-sdk/typescript/stock-charts/working-with-data.md +++ b/chart-sdk/typescript/stock-chart/working-with-data.md @@ -4,7 +4,6 @@ title: Working with data in TypeScript Stock chart control | Syncfusion description: Learn here all about Working with data in Syncfusion TypeScript Stock chart control of Syncfusion Essential JS 2 and more. platform: chart-sdk control: Working with data -publishingplatform: chart-sdk documentation: ug domainurl: https://help.syncfusion.com/chart-sdk --- @@ -16,7 +15,7 @@ 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`](../api/stock-chart/stockSeriesModel/#datasource) property in series. +You can bind a simple JSON data to the chart using [`dataSource`](../api/stock-chart/stockSeriesModel#datasource) property in series. {% tabs %} {% highlight ts tabtitle="index.ts" %} @@ -46,4 +45,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/vue/bullet-chart/axis-customization.md b/chart-sdk/vue/bullet-chart/axis-customization.md index 22fc1b72a..e24d87735 100644 --- a/chart-sdk/vue/bullet-chart/axis-customization.md +++ b/chart-sdk/vue/bullet-chart/axis-customization.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## MajorTickLines and MinorTickLines Customization -The following properties can be used to customize [`majorTicklines`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#majorticklines) and [`minorTicklines`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#minorticklines). +The following properties can be used to customize [`majorTicklines`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#majorticklines) and [`minorTicklines`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#minorticklines). * **width** - Specifies the width of ticklines. * **height** - Specifies the height of ticklines. @@ -32,7 +32,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/vue/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/vue/documentation/api/bullet-chart#tickposition) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -47,7 +47,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/vue/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/vue/documentation/api/bullet-chart#labelformat) property. Axis labels support all globalize formats. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -122,7 +122,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/vue/documentation/api/bullet-chart/#enablegroupseparator) property to **true**. +To separate the groups of thousands, set the [`enableGroupSeparator`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#enablegroupseparator) property to **true**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -137,7 +137,7 @@ To separate the groups of thousands, set the [`enableGroupSeparator`](https://ej ## Custom Label Format -Using the [`labelFormat`](https://ej2.syncfusion.com/vue/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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -152,7 +152,7 @@ Using the [`labelFormat`](https://ej2.syncfusion.com/vue/documentation/api/bulle ## Label Placement -Label can be placed **Inside** or **Outside** of the ranges using the [`labelPosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#labelposition) property. +Label can be placed **Inside** or **Outside** of the ranges using the [`labelPosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#labelposition) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -167,7 +167,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/vue/documentation/api/bullet-chart/#opposedposition) property to **true**. +To place an axis opposite to its original position, set the [`opposedPosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#opposedposition) property to **true**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -182,7 +182,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/vue/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/vue/documentation/api/bullet-chart#categoryfield). It helps to understand the input data in a more efficient way. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -197,7 +197,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/vue/documentation/api/bullet-chart/#categorylabelstyle) setting for category and the [`labelStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#labelstyle) setting for axis label. The [`useRangeColor`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart#categorylabelstyle) setting for category and the [`labelStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#labelstyle) setting for axis label. The [`useRangeColor`](https://ej2.syncfusion.com/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/vue/bullet-chart/bullet-chart-dimensions.md index 482677e29..6e695efb4 100644 --- a/chart-sdk/vue/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/vue/bullet-chart/bullet-chart-dimensions.md @@ -51,7 +51,7 @@ export default { ## Size for Bullet Chart -The [`width`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#width) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#height) properties are used to adjust the size of the Bullet Chart. +The [`width`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#width) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#height) properties are used to adjust the size of the Bullet Chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/comparative-bar.md b/chart-sdk/vue/bullet-chart/comparative-bar.md index 627529df5..3c8057d33 100644 --- a/chart-sdk/vue/bullet-chart/comparative-bar.md +++ b/chart-sdk/vue/bullet-chart/comparative-bar.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Comparative bar in Vue Bullet chart component -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/vue/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/vue/documentation/api/bullet-chart#targetfield) should be mapped to the appropriate field from the datasource. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -25,7 +25,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/vue/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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -40,10 +40,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/vue/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/vue/documentation/api/bullet-chart#datasource) for the bullet chart. -* [`targetColor`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#targetcolor) - Specifies the fill color of target bar. -* [`targetWidth`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#targetwidth) - Specifies the width of target bar. +* [`targetColor`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#targetcolor) - Specifies the fill color of target bar. +* [`targetWidth`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#targetwidth) - Specifies the width of target bar. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/customization.md b/chart-sdk/vue/bullet-chart/customization.md index 2ed2379ab..02020ab8c 100644 --- a/chart-sdk/vue/bullet-chart/customization.md +++ b/chart-sdk/vue/bullet-chart/customization.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Orientation -The Bullet Chart can be rendered in different orientations such as **Horizontal** or **Vertical** via the [`orientation`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart#orientation) property. By default, the Bullet Chart is rendered in the **Horizontal** orientation. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -27,7 +27,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/vue/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/vue/documentation/api/bullet-chart#enablertl) property to **true**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -42,7 +42,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/vue/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/vue/documentation/api/bullet-chart#animation) setting. The speed and the delay are controlled using the `duration` and `delay` properties respectively. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -57,7 +57,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/vue/documentation/api/bullet-chart/#theme) property. +The Bullet Chart supports different type of themes via the [`theme`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#theme) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/data-binding.md b/chart-sdk/vue/bullet-chart/data-binding.md index 832f8f614..a3b9e3b69 100644 --- a/chart-sdk/vue/bullet-chart/data-binding.md +++ b/chart-sdk/vue/bullet-chart/data-binding.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Data binding in Vue Bullet chart component -The [`dataSource`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart/#valuefield) and [`targetField`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#targetfield) respectively. +The [`dataSource`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart#valuefield) and [`targetField`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#targetfield) respectively. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/data-label.md b/chart-sdk/vue/bullet-chart/data-label.md index b7149b43f..692ea8b55 100644 --- a/chart-sdk/vue/bullet-chart/data-label.md +++ b/chart-sdk/vue/bullet-chart/data-label.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Data label in Vue Bullet chart component -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/vue/documentation/api/bullet-chart/#datalabel) setting's [`enable`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart#datalabel) setting's [`enable`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletDataLabelModel#enable) property to **true**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -25,7 +25,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/vue/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/vue/documentation/api/bullet-chart/bulletDataLabelModel#labelstyle). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/ranges.md b/chart-sdk/vue/bullet-chart/ranges.md index 6fccdb7a5..2cc62a77c 100644 --- a/chart-sdk/vue/bullet-chart/ranges.md +++ b/chart-sdk/vue/bullet-chart/ranges.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Ranges in Vue Bullet chart component -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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -25,7 +25,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/vue/documentation/api/bullet-chart/rangeModel/#color) and [`opacity`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart/rangeModel#color) and [`opacity`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/rangeModel#opacity) properties in [`ranges`](https://ej2.syncfusion.com/angular/documentation/api/bullet-chart#ranges). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/title.md b/chart-sdk/vue/bullet-chart/title.md index 79b559a26..e50fb8c6b 100644 --- a/chart-sdk/vue/bullet-chart/title.md +++ b/chart-sdk/vue/bullet-chart/title.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Title -The title of the Bullet Chart displays the information about the data plotted by specifying it in the [`title`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#title) property. +The title of the Bullet Chart displays the information about the data plotted by specifying it in the [`title`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#title) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -27,7 +27,7 @@ The title of the Bullet Chart displays the information about the data plotted by ## Subtitle -To show additional information about the data plotted, the Bullet Chart can also be given a subtitle using the [`subtitle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#subtitle) property. +To show additional information about the data plotted, the Bullet Chart can also be given a subtitle using the [`subtitle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#subtitle) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -42,11 +42,11 @@ To show additional information about the data plotted, the Bullet Chart can also ## Title and SubTitle Position -The title and the subtitle positions can be customized using the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#titleposition) property. Possible positions are **Left**, **Right**, **Top**, and **Bottom**. +The title and the subtitle positions can be customized using the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#titleposition) property. Possible positions are **Left**, **Right**, **Top**, and **Bottom**. ### Position as Left -By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#titleposition) to **Left**, you can display the title and subtitle at the left side of the Bullet Chart. +By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#titleposition) to **Left**, you can display the title and subtitle at the left side of the Bullet Chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -61,7 +61,7 @@ By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/ap ### Position as Right -By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#titleposition) to **Right**, you can display the title and subtitle at the right side of the Bullet Chart. +By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#titleposition) to **Right**, you can display the title and subtitle at the right side of the Bullet Chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -76,7 +76,7 @@ By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/ap ### Position as Top -By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#titleposition) to **Top**, you can display the title and subtitle at the top of the Bullet Chart. The default title and subtitle positions of the Bullet Chart is **Top**. +By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#titleposition) to **Top**, you can display the title and subtitle at the top of the Bullet Chart. The default title and subtitle positions of the Bullet Chart is **Top**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -91,7 +91,7 @@ By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/ap ### Position as Bottom -By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#titleposition) to **Bottom**, you can display the title and subtitle at the bottom of the Bullet Chart. +By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#titleposition) to **Bottom**, you can display the title and subtitle at the bottom of the Bullet Chart. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -106,7 +106,7 @@ By setting the [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/ap ## Title Customization -The title color, opacity, font size, font family, font weight, and font style can be customized using the [`titleStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#titlestyle) property. +The title color, opacity, font size, font family, font weight, and font style can be customized using the [`titleStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#titlestyle) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -121,7 +121,7 @@ The title color, opacity, font size, font family, font weight, and font style ca ## SubTitle Customization -The sub-title color, opacity, font size, font family, font weight, and font style can be customized using the [`subtitleStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#subtitlestyle) property. +The sub-title color, opacity, font size, font family, font weight, and font style can be customized using the [`subtitleStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#subtitlestyle) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/bullet-chart/tool-tip.md b/chart-sdk/vue/bullet-chart/tool-tip.md index c863bb7b3..78be55e3f 100644 --- a/chart-sdk/vue/bullet-chart/tool-tip.md +++ b/chart-sdk/vue/bullet-chart/tool-tip.md @@ -14,7 +14,7 @@ When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays i ## Default Tooltip -The tooltip is not visible by default. To make it visible, set the [`enable`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel/#enable) property in the [`tooltip`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#tooltip) to **true** and injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)` and injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)`. +The tooltip is not visible by default. To make it visible, set the [`enable`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel#enable) property in the [`tooltip`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#tooltip) to **true** and injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)` and injecting `BulletTooltip` module using `BulletChart.Inject(BulletTooltip)`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -29,7 +29,7 @@ The tooltip is not visible by default. To make it visible, set the [`enable`](ht ## Tooltip Template -Any HTML elements can be displayed in the tooltip by using the [`template`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel/#template) property of the [`tooltip`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel#template) property of the [`tooltip`](https://ej2.syncfusion.com/vue/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. ## Customize the Appearance of Tooltip @@ -37,6 +37,6 @@ 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/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel/#fill) - Specifies the color of tooltip. -* [`border`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel/#border) - Specifies the tooltip border color and width. -* [`textStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel/#textstyle) - Specifies the tooltip font family, font style, font weight, color and size. \ No newline at end of file +* [`fill`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel#fill) - Specifies the color of tooltip. +* [`border`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel#border) - Specifies the tooltip border color and width. +* [`textStyle`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/bulletTooltipSettingsModel#textstyle) - Specifies the tooltip font family, font style, font weight, color and size. \ No newline at end of file diff --git a/chart-sdk/vue/bullet-chart/value-bar.md b/chart-sdk/vue/bullet-chart/value-bar.md index 5e92e6d32..081e43417 100644 --- a/chart-sdk/vue/bullet-chart/value-bar.md +++ b/chart-sdk/vue/bullet-chart/value-bar.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Value bar in Vue Bullet chart component -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/vue/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/vue/documentation/api/bullet-chart#valuefield) should be mapped to the appropriate field from the data source. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -25,7 +25,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/vue/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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -42,7 +42,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/vue/documentation/api/bullet-chart/#valueborder) property of the bullet chart, you can customize the border [`color`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/borderModel/#color) and [`width`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/borderModel/#width) of the actual bar. +Using the [`valueBorder`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#valueborder) property of the bullet chart, you can customize the border [`color`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/borderModel#color) and [`width`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/borderModel#width) of the actual bar. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -57,7 +57,7 @@ Using the [`valueBorder`](https://ej2.syncfusion.com/vue/documentation/api/bulle ### Fill color and height customization -Customize the fill color and height of the actual bar using the [`valueFill`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#valuefill) and [`valueHeight`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart/#datasource) for the bullet chart using [`valueFill`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart/#valuefill) property. +Customize the fill color and height of the actual bar using the [`valueFill`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#valuefill) and [`valueHeight`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/bullet-chart#datasource) for the bullet chart using [`valueFill`](https://ej2.syncfusion.com/vue/documentation/api/bullet-chart#valuefill) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/heatmap-chart/appearance.md b/chart-sdk/vue/heatmap-chart/appearance.md index 8812dc9c9..9cd80fcf4 100644 --- a/chart-sdk/vue/heatmap-chart/appearance.md +++ b/chart-sdk/vue/heatmap-chart/appearance.md @@ -12,11 +12,11 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Cell customization -You can customize the cell by using the [cellSettings](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#cellsettings) property. +You can customize the cell by using the [cellSettings](https://ej2.syncfusion.com/vue/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/vue/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/vue/documentation/api/heatmap/cellSettings#border) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -31,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](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/cellSettings#enablecellhighlighting) property. >Note: The cell highlighting only works in a SVG rendering mode. @@ -48,7 +48,7 @@ Enable or disable the cell highlighting while hovering over the heat map cells b ### Color gradient mode -The [colorGradientMode](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettingsModel/#colorgradientmode) property can be used to set the minimum and maximum values for colors based on row and column. +The [colorGradientMode](https://ej2.syncfusion.com/vue/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. @@ -71,7 +71,7 @@ Three types of color gradient modes are available. ## Background color -The background color of the HeatMap can be customized using the [backgroundColor](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#backgroundcolor) property. +The background color of the HeatMap can be customized using the [backgroundColor](https://ej2.syncfusion.com/vue/documentation/api/heatmap#backgroundcolor) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -86,7 +86,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#margin) property. +Set the margin for the HeatMap from its container by using the [margin](https://ej2.syncfusion.com/vue/documentation/api/heatmap#margin) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -101,7 +101,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/vue/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/vue/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/vue/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/vue/documentation/api/heatmap/title#textstyle) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -116,7 +116,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings/#showlabel) property. By default, the data labels will be visible. +The visibility of data labels can be toggled using the [showLabel](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings#showlabel) property. By default, the data labels will be visible. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -131,7 +131,7 @@ The visibility of data labels can be toggled using the [showLabel](https://ej2.s ### Customize the data label -The label displayed in the HeatMap cell can be changed using the [cellRender](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#cellrender) event. +The label displayed in the HeatMap cell can be changed using the [cellRender](https://ej2.syncfusion.com/vue/documentation/api/heatmap#cellrender) event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -146,7 +146,7 @@ The label displayed in the HeatMap cell can be changed using the [cellRender](ht ### 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/vue/documentation/api/heatmap/cellSettings/#textstyle) in the [cellSettings](https://ej2.syncfusion.com/vue/documentation/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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings#textstyle) in the [cellSettings](https://ej2.syncfusion.com/vue/documentation/api/heatmap#cellsettings) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -161,7 +161,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/vue/documentation/api/heatmap/cellSettings/#format) property. +The format of the data label, such as currency, decimal, percent etc. can be changed using [format](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings#format) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -176,7 +176,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/vue/documentation/api/heatmap/cellSettings/#labeltemplate) property of [cellSettings](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/cellSettings#labeltemplate) property of [cellSettings](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings) in the HeatMap. The following examples show various data binding methods in the HeatMap using the `labelTemplate` property. @@ -250,4 +250,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) \ No newline at end of file +* [To customize the appearance of tool tip](./tooltip#customize-the-appearance-of-tooltip) \ No newline at end of file diff --git a/chart-sdk/vue/heatmap-chart/bubble-heatmap.md b/chart-sdk/vue/heatmap-chart/bubble-heatmap.md index d06b6e4b9..8a661c567 100644 --- a/chart-sdk/vue/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/vue/heatmap-chart/bubble-heatmap.md @@ -16,13 +16,13 @@ This section shows how to customize the appearance of the HeatMap cells as bubbl 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/vue/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/vue/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/vue/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/vue/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/vue/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/vue/documentation/api/heatmap/cellSettings#isinversedbubblesize) property. -To render a bubble HeatMap with size series, set the [bubbleType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings/#bubbletype) property to **Size**. +To render a bubble HeatMap with size series, set the [bubbleType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings#bubbletype) property to **Size**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -49,7 +49,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/vue/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/vue/documentation/api/heatmap/cellSettings#bubbletype) property to **Color**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -66,7 +66,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/vue/documentation/api/heatmap/cellSettings/#bubbletype) property to **Sector**. +To render the data points with bubble sector, set the [bubbleType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/cellSettings#bubbletype) property to **Sector**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -81,7 +81,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/vue/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/vue/documentation/api/heatmap/cellSettings#bubbletype) property to **SizeAndColor**. The following examples demonstrate different data binding with the **SizeAndColor** bubble type set in the HeatMap. @@ -162,7 +162,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/vue/documentation/api/heatmap/bubbleDataModel/#size) and [color](https://ej2.syncfusion.com/vue/documentation/api/heatmap/bubbleDataModel/#color) properties in the [bubbleDataMapping](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/bubbleDataModel#size) and [color](https://ej2.syncfusion.com/vue/documentation/api/heatmap/bubbleDataModel#color) properties in the [bubbleDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/dataModel#bubbledatamapping). >The `bubbleDataMapping` supports only for the JSON data with cell adaptor type. diff --git a/chart-sdk/vue/heatmap-chart/dimensions.md b/chart-sdk/vue/heatmap-chart/dimensions.md index 6f30c5995..1842ebbba 100644 --- a/chart-sdk/vue/heatmap-chart/dimensions.md +++ b/chart-sdk/vue/heatmap-chart/dimensions.md @@ -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/vue/documentation/api/heatmap/#width) and [height](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#height) properties. +You can set the size of heat map directly by using the [width](https://ej2.syncfusion.com/vue/documentation/api/heatmap#width) and [height](https://ej2.syncfusion.com/vue/documentation/api/heatmap#height) properties. ## In pixel diff --git a/chart-sdk/vue/heatmap-chart/events.md b/chart-sdk/vue/heatmap-chart/events.md index 25a7a3be6..d097c561f 100644 --- a/chart-sdk/vue/heatmap-chart/events.md +++ b/chart-sdk/vue/heatmap-chart/events.md @@ -14,7 +14,7 @@ This section describes the HeatMap chart event, which occurs when the required a ## cellClick -When you click on a HeatMap cell, the [cellClick](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#cellclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iCellClickEventArgs/). +When you click on a HeatMap cell, the [cellClick](https://ej2.syncfusion.com/vue/documentation/api/heatmap#cellclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iCellClickEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -29,7 +29,7 @@ When you click on a HeatMap cell, the [cellClick](https://ej2.syncfusion.com/vue ## cellDoubleClick -When you double click on a HeatMap cell, the [cellDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#celldoubleclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iCellClickEventArgs/). +When you double click on a HeatMap cell, the [cellDoubleClick](https://ej2.syncfusion.com/vue/documentation/api/heatmap#celldoubleclick) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iCellClickEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -44,7 +44,7 @@ When you double click on a HeatMap cell, the [cellDoubleClick](https://ej2.syncf ## cellRender -The [cellRender](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iCellEventArgs/). +The [cellRender](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iCellEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -59,7 +59,7 @@ The [cellRender](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#cellr ## cellSelected -When single or multiple cells in the HeatMap are selected, the [cellSelected](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#cellselected) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iSelectedEventArgs/). +When single or multiple cells in the HeatMap are selected, the [cellSelected](https://ej2.syncfusion.com/vue/documentation/api/heatmap#cellselected) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iSelectedEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -74,7 +74,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/vue/documentation/api/heatmap/#created) event is triggered. +Once HeatMap has been completely rendered, the [created](https://ej2.syncfusion.com/vue/documentation/api/heatmap#created) event is triggered. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -89,7 +89,7 @@ Once HeatMap has been completely rendered, the [created](https://ej2.syncfusion. ## legendRender -The [legendRender](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iLegendRenderEventArgs/). +The [legendRender](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iLegendRenderEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -104,7 +104,7 @@ The [legendRender](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#leg ## load -The [load](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iLoadedEventArgs/). +The [load](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iLoadedEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -119,7 +119,7 @@ The [load](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#load) event ## loaded -Once HeatMap is loaded, the [loaded](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#loaded) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iLoadedEventArgs/). +Once HeatMap is loaded, the [loaded](https://ej2.syncfusion.com/vue/documentation/api/heatmap#loaded) event is triggered. To know more about arguments of this event, refer [here](https://ej2.syncfusion.com/vue/documentation/api/heatmap/iLoadedEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -134,7 +134,7 @@ Once HeatMap is loaded, the [loaded](https://ej2.syncfusion.com/vue/documentatio ## resized -When the window is resized, the [resized](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iResizeEventArgs/). +When the window is resized, the [resized](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iResizeEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -149,7 +149,7 @@ When the window is resized, the [resized](https://ej2.syncfusion.com/vue/documen ## tooltipRender -The [tooltipRender](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iTooltipEventArgs/). +The [tooltipRender](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/iTooltipEventArgs). {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/heatmap-chart/legend.md b/chart-sdk/vue/heatmap-chart/legend.md index 20170f817..462b762a8 100644 --- a/chart-sdk/vue/heatmap-chart/legend.md +++ b/chart-sdk/vue/heatmap-chart/legend.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Legend in Vue Heatmap chart component -The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#visible) property to **true** and injecting the `Legend` module into the `provide`. +The legend is used to provide the information about the heat map cell. You can enable the legend by setting the [visible](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#visible) property to **true** and injecting the `Legend` module into the `provide`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -30,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettings/#type) property in the `paletteSettings` property. +You can change the legend type by using the [type](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -45,7 +45,7 @@ You can change the legend type by using the [type](https://ej2.syncfusion.com/vu ## Placement -You can place the legend at left, right, top, or bottom to the heat map layout by using the [position](https://ej2.syncfusion.com/vue/documentation/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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#position) property. The legend is positioned at the right to the heat map by default. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -60,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#alignment) property. +You can align the legend as center, far, or near to the heat map using the [alignment](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#alignment) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -75,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#width) and [height](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#height) properties. +You can change the legend dimensions with values in pixels or percentage by using the[width](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#width) and [height](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#height) properties. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -105,9 +105,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](https://ej2.syncfusion.com/vue/documentation/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](https://ej2.syncfusion.com/vue/documentation/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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#labeldisplaytype) property. +In smart legend, you can change the display type of legend labels by using the [labelDisplayType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#labeldisplaytype) property. The following are the legend label display types: * All: Displays all labels in the legend. @@ -127,7 +127,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 viewing the specific range value. You can enable the legend selection using the [toggleVisibility](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#togglevisibility) property. +In the HeatMap, the legend selection is used to toggle the visibility of cell for viewing the specific range value. You can enable the legend selection using the [toggleVisibility](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#togglevisibility) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -141,7 +141,7 @@ In the HeatMap, the legend selection is used to toggle the visibility of cell fo {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/vue/heatmap-chart/legend-cs8" %} ## 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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings/#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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/legendSettings#textstyle) property. {% tabs %} diff --git a/chart-sdk/vue/heatmap-chart/palette.md b/chart-sdk/vue/heatmap-chart/palette.md index 991768838..1b4e0a7ef 100644 --- a/chart-sdk/vue/heatmap-chart/palette.md +++ b/chart-sdk/vue/heatmap-chart/palette.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Palette in Vue Heatmap chart component -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/vue/documentation/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](https://ej2.syncfusion.com/vue/documentation/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 @@ -18,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettings/#type) property in the `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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -33,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 **Fixed** for the [type](https://ej2.syncfusion.com/vue/documentation/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 **Fixed** for the [type](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettings#type) property in the `paletteSettings` property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -48,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteCollection/#value)property for `palette` property to calculate the color stops. The heat map automatically calculates the color stops if the [value](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteCollection/#value) property is not defined. The [label](https://ej2.syncfusion.com/vue/documentation/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 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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteCollection#value)property for `palette` property to calculate the color stops. The heat map automatically calculates the color stops if the [value](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteCollection#value) property is not defined. The [label](https://ej2.syncfusion.com/vue/documentation/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 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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -80,4 +80,4 @@ The color range support is used to provide a specific color for specific range i ## See Also -* [How to enable smart legend](./legend/#smart-legend) \ No newline at end of file +* [How to enable smart legend](./legend#smart-legend) \ No newline at end of file diff --git a/chart-sdk/vue/heatmap-chart/rendering-mode.md b/chart-sdk/vue/heatmap-chart/rendering-mode.md index 17a57068f..e7b10af7b 100644 --- a/chart-sdk/vue/heatmap-chart/rendering-mode.md +++ b/chart-sdk/vue/heatmap-chart/rendering-mode.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Rendering mode in Vue Heatmap chart component -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/vue/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/vue/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/vue/heatmap-chart/selection.md b/chart-sdk/vue/heatmap-chart/selection.md index c02f33927..788cae2e4 100644 --- a/chart-sdk/vue/heatmap-chart/selection.md +++ b/chart-sdk/vue/heatmap-chart/selection.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Selection in Vue HeatMap chart component -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/vue/documentation/api/heatmap/#cellselected) event. You can enable the cell selection using the [allowSelection](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap#cellselected) event. You can enable the cell selection using the [allowSelection](https://ej2.syncfusion.com/vue/documentation/api/heatmap#allowselection) property. The HeatMap cells can be selected using the following interactions, as shown in the table below. @@ -33,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](https://ej2.syncfusion.com/vue/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://ej2.syncfusion.com/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -48,7 +48,7 @@ In the HeatMap, the [enableMultiSelect](https://ej2.syncfusion.com/vue/documenta ### Clearing cell selection -The [clearSelection](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap#clearselection) method can be used to clear all the selected cells. The below example illustrates the same. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/heatmap-chart/tooltip.md b/chart-sdk/vue/heatmap-chart/tooltip.md index 6bee86bdf..616bca2fa 100644 --- a/chart-sdk/vue/heatmap-chart/tooltip.md +++ b/chart-sdk/vue/heatmap-chart/tooltip.md @@ -14,7 +14,7 @@ Tooltip is used to provide the details of the heatmap cell, and this can be disp ## Default tooltip -You can enable the tooltip by setting the [showTooltip](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#showtooltip) property to **true** and injecting the `Tooltip` module into the `provide`. +You can enable the tooltip by setting the [showTooltip](https://ej2.syncfusion.com/vue/documentation/api/heatmap#showtooltip) property to **true** and injecting the `Tooltip` module into the `provide`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -29,7 +29,7 @@ You can enable the tooltip by setting the [showTooltip](https://ej2.syncfusion.c ## Tooltip template -In heatmap, you can customize the tooltip using the [tooltipRender](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#tooltiprender) client side event. +In heatmap, you can customize the tooltip using the [tooltipRender](https://ej2.syncfusion.com/vue/documentation/api/heatmap#tooltiprender) client side event. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -44,7 +44,7 @@ In heatmap, you can customize the tooltip using the [tooltipRender](https://ej2. ## Customize the appearance of Tooltip -The [fill](https://ej2.syncfusion.com/vue/documentation/api/heatmap/tooltipSettings/#fill) and [border](https://ej2.syncfusion.com/vue/documentation/api/heatmap/tooltipSettings/#border) properties are used to customize the background color and border of the Tooltip respectively. The [textStyle](https://ej2.syncfusion.com/vue/documentation/api/heatmap/tooltipSettings/#textstyle) property in the Tooltip is used to customize the font of the tooltip text. +The [fill](https://ej2.syncfusion.com/vue/documentation/api/heatmap/tooltipSettings#fill) and [border](https://ej2.syncfusion.com/vue/documentation/api/heatmap/tooltipSettings#border) properties are used to customize the background color and border of the Tooltip respectively. The [textStyle](https://ej2.syncfusion.com/vue/documentation/api/heatmap/tooltipSettings#textstyle) property in the Tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/heatmap-chart/working-with-data.md b/chart-sdk/vue/heatmap-chart/working-with-data.md index e7825897f..9580928ff 100644 --- a/chart-sdk/vue/heatmap-chart/working-with-data.md +++ b/chart-sdk/vue/heatmap-chart/working-with-data.md @@ -25,7 +25,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/vue/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/vue/documentation/api/heatmap#datasource) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -40,7 +40,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/vue/documentation/api/heatmap/data/#data) property in the [dataSource](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#datasource) and setting the [adaptorType](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/data#data) property in the [dataSource](https://ej2.syncfusion.com/vue/documentation/api/heatmap#datasource) and setting the [adaptorType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#adaptortype) property to **Cell**. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -55,7 +55,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/vue/documentation/api/heatmap/data/#data) property in [dataSource](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#datasource). To achieve this, you should enable the [isJsonData](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#isjsondata) property and define the [adaptorType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#adaptortype) property as **Table**. The [xDataMapping](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/data#data) property in [dataSource](https://ej2.syncfusion.com/vue/documentation/api/heatmap#datasource). To achieve this, you should enable the [isJsonData](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#isjsondata) property and define the [adaptorType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#adaptortype) property as **Table**. The [xDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#xdatamapping) property is used to map the row header in JSON data. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -70,7 +70,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/vue/documentation/api/heatmap/data/#data) property in [dataSource](https://ej2.syncfusion.com/vue/documentation/api/heatmap/#datasource). To achieve this, you should define the [adaptorType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#adaptortype) property as **Cell**, and enable the [isJsonData](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#isjsondata) property. Now, map the fields of data by using the [valueMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#valuemapping), [xDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#xdatamapping) and [yDataMapping](https://ej2.syncfusion.com/vue/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/vue/documentation/api/heatmap/data#data) property in [dataSource](https://ej2.syncfusion.com/vue/documentation/api/heatmap#datasource). To achieve this, you should define the [adaptorType](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#adaptortype) property as **Cell**, and enable the [isJsonData](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#isjsondata) property. Now, map the fields of data by using the [valueMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#valuemapping), [xDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#xdatamapping) and [yDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#ydatamapping) properties. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -85,7 +85,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](https://ej2.syncfusion.com/vue/documentation/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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/paletteSettings#emptypointcolor) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -101,7 +101,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](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#xdatamapping), [yDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#ydatamapping), [valueMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#valuemapping) and [bubbleDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data/#bubbledatamapping) properties as string value concatenated by a dot. +The nested data can be mapped using the [xDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#xdatamapping), [yDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#ydatamapping), [valueMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#valuemapping) and [bubbleDataMapping](https://ej2.syncfusion.com/vue/documentation/api/heatmap/data#bubbledatamapping) properties as string value concatenated by a dot. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -116,4 +116,4 @@ The nested data can be mapped using the [xDataMapping](https://ej2.syncfusion.co ## 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/vue/sparkline-charts/sparkline-dimensions.md b/chart-sdk/vue/sparkline-charts/sparkline-dimensions.md index cf6ace5a5..537ceb7d4 100644 --- a/chart-sdk/vue/sparkline-charts/sparkline-dimensions.md +++ b/chart-sdk/vue/sparkline-charts/sparkline-dimensions.md @@ -27,7 +27,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/vue/documentation/api/sparkline/#width-string) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/sparkline/#height-string) properties. +You can also set the size for sparkline directly using the [`width`](https://ej2.syncfusion.com/vue/documentation/api/sparkline#width-string) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/sparkline#height-string) properties. ### In pixel diff --git a/chart-sdk/vue/stock-charts/accessibility.md b/chart-sdk/vue/stock-chart/accessibility.md similarity index 94% rename from chart-sdk/vue/stock-charts/accessibility.md rename to chart-sdk/vue/stock-chart/accessibility.md index 5f5168cca..830b66e6a 100644 --- a/chart-sdk/vue/stock-charts/accessibility.md +++ b/chart-sdk/vue/stock-chart/accessibility.md @@ -10,7 +10,7 @@ domainurl: https://help.syncfusion.com/chart-sdk # Accessibility in Vue Stock chart component -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. +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. The accessibility compliance for the Stock chart component is outlined below. diff --git a/chart-sdk/vue/stock-charts/appearance.md b/chart-sdk/vue/stock-chart/appearance.md similarity index 84% rename from chart-sdk/vue/stock-charts/appearance.md rename to chart-sdk/vue/stock-chart/appearance.md index 6f819db27..83f4a1e27 100644 --- a/chart-sdk/vue/stock-charts/appearance.md +++ b/chart-sdk/vue/stock-chart/appearance.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## Stock Chart Title -Chart can be given a title using [`title`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/#title-string) property, to show the information about the data plotted. +Chart can be given a title using [`title`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart#title-string) property, to show the information about the data plotted. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -44,7 +44,7 @@ The `textStyle` property of chart title provides options to customize the `size` Changing theme will affect background color,gridlines,tooltip colors and appearance. -[`theme`](https://ej2.syncfusion.com/vue/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/vue/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 html tabtitle="Composition API (~/src/App.vue)" %} @@ -59,4 +59,4 @@ Changing theme will affect background color,gridlines,tooltip colors and appeara ## See Also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/vue/stock-charts/axis-customization.md b/chart-sdk/vue/stock-chart/axis-customization.md similarity index 87% rename from chart-sdk/vue/stock-charts/axis-customization.md rename to chart-sdk/vue/stock-chart/axis-customization.md index ab6abd657..220beb6e4 100644 --- a/chart-sdk/vue/stock-charts/axis-customization.md +++ b/chart-sdk/vue/stock-chart/axis-customization.md @@ -27,7 +27,7 @@ An axis can be positioned in the Stock Chart area using `crossesAt` properties. ## Title -You can add a title to the axis using [`title`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel/#titlestyle) property of the axis. +You can add a title to the axis using [`title`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#titlestyle) property of the axis. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -42,7 +42,7 @@ You can add a title to the axis using [`title`](https://ej2.syncfusion.com/vue/d ## Tick Lines Customization -You can customize the  `width`, `color` and `size` of the minor and major tick lines, using [`majorTickLines`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel/#majorticklines) and [`minorTickLines`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#majorticklines) and [`minorTickLines`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel#minorticklines) properties in the axis. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -57,7 +57,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/vue/documentation/api/stock-chart/stockChartAxisModel/#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#majorgridlines) and [`minorGridLines`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel#minorgridlines) properties in the axis. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -89,7 +89,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/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#isinversed) to true. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -105,7 +105,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/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#opposedposition) property of the axis to true. {% tabs %} diff --git a/chart-sdk/vue/stock-charts/axis-types.md b/chart-sdk/vue/stock-chart/axis-types.md similarity index 89% rename from chart-sdk/vue/stock-charts/axis-types.md rename to chart-sdk/vue/stock-chart/axis-types.md index 28ec94aeb..053bc23ff 100644 --- a/chart-sdk/vue/stock-charts/axis-types.md +++ b/chart-sdk/vue/stock-chart/axis-types.md @@ -12,7 +12,7 @@ domainurl: https://help.syncfusion.com/chart-sdk ## 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/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -25,11 +25,11 @@ DateTime axis uses date time scale and displays the date time values as axis lab {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/vue/stock-chart/axis-types-cs1" %} ->Note: To use this axis, we need to inject `DateTimeService` into the `provide` and set the [`valueType`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTime`. +>Note: To use this axis, we need to inject `DateTimeService` into the `provide` and set the [`valueType`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTime`. ## 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/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -42,13 +42,13 @@ DateTimeCategory axis in the stock chart is used to display only business days. {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/vue/stock-chart/axis-types-cs3" %} ->Note: To use this axis, we need to inject `DateTimeCategoryService` into the `provide` and set the [`valueType`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel/#valuetype) of axis to `DateTimeCategory`. +>Note: To use this axis, we need to inject `DateTimeCategoryService` into the `provide` and set the [`valueType`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `DateTimeCategory`. ## Logarithmic axis -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/vue/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/vue/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -61,8 +61,8 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/vue/stock-chart/axis-types-cs2" %} ->Note: To use this axis, we need to inject `LogarithmicService` into the `provide` and set the [`valueType`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel/#valuetype) of axis to `Logarithmic`. +>Note: To use this axis, we need to inject `LogarithmicService` into the `provide` and set the [`valueType`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartAxisModel#valuetype) of axis to `Logarithmic`. ## See also -* [Axis Customization](./axis-customization/) \ No newline at end of file +* [Axis Customization](./axis-customization) \ No newline at end of file diff --git a/chart-sdk/vue/stock-charts/chart-dimensions.md b/chart-sdk/vue/stock-chart/chart-dimensions.md similarity index 96% rename from chart-sdk/vue/stock-charts/chart-dimensions.md rename to chart-sdk/vue/stock-chart/chart-dimensions.md index 8e75b4909..a890bc5f3 100644 --- a/chart-sdk/vue/stock-charts/chart-dimensions.md +++ b/chart-sdk/vue/stock-chart/chart-dimensions.md @@ -27,8 +27,8 @@ Stock Chart can render to its container size. You can set the size via inline or ## Size for Stock Chart -You can also set size for stock chart directly through [`width`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/#width) and -[`height`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/#height) properties. +You can also set size for stock chart directly through [`width`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart#width) and +[`height`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart#height) properties. * In Pixel diff --git a/chart-sdk/vue/stock-charts/cross-hair.md b/chart-sdk/vue/stock-chart/cross-hair.md similarity index 100% rename from chart-sdk/vue/stock-charts/cross-hair.md rename to chart-sdk/vue/stock-chart/cross-hair.md diff --git a/chart-sdk/vue/stock-charts/export-print.md b/chart-sdk/vue/stock-chart/export-print.md similarity index 100% rename from chart-sdk/vue/stock-charts/export-print.md rename to chart-sdk/vue/stock-chart/export-print.md diff --git a/chart-sdk/vue/stock-charts/getting-started.md b/chart-sdk/vue/stock-chart/getting-started.md similarity index 100% rename from chart-sdk/vue/stock-charts/getting-started.md rename to chart-sdk/vue/stock-chart/getting-started.md diff --git a/chart-sdk/vue/stock-charts/gradient.md b/chart-sdk/vue/stock-chart/gradient.md similarity index 100% rename from chart-sdk/vue/stock-charts/gradient.md rename to chart-sdk/vue/stock-chart/gradient.md diff --git a/chart-sdk/vue/stock-charts/images/vue2-stockchart-demo.png b/chart-sdk/vue/stock-chart/images/vue2-stockchart-demo.png similarity index 100% rename from chart-sdk/vue/stock-charts/images/vue2-stockchart-demo.png rename to chart-sdk/vue/stock-chart/images/vue2-stockchart-demo.png diff --git a/chart-sdk/vue/stock-charts/images/vue3-stockchart-demo.png b/chart-sdk/vue/stock-chart/images/vue3-stockchart-demo.png similarity index 100% rename from chart-sdk/vue/stock-charts/images/vue3-stockchart-demo.png rename to chart-sdk/vue/stock-chart/images/vue3-stockchart-demo.png diff --git a/chart-sdk/vue/stock-charts/images/vue3-terminal.png b/chart-sdk/vue/stock-chart/images/vue3-terminal.png similarity index 100% rename from chart-sdk/vue/stock-charts/images/vue3-terminal.png rename to chart-sdk/vue/stock-chart/images/vue3-terminal.png diff --git a/chart-sdk/vue/stock-charts/legend.md b/chart-sdk/vue/stock-chart/legend.md similarity index 74% rename from chart-sdk/vue/stock-charts/legend.md rename to chart-sdk/vue/stock-chart/legend.md index 7469c2a82..a5114e37e 100644 --- a/chart-sdk/vue/stock-charts/legend.md +++ b/chart-sdk/vue/stock-chart/legend.md @@ -10,11 +10,11 @@ domainurl: https://help.syncfusion.com/chart-sdk # Legend in Vue Stock chart component -Legend provides information about the series rendered in the Stock Chart which can be customized using legend properties. Legend can be added to a Stock Chart by enabling the [`visible`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#visible) option in the [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/). +Legend provides information about the series rendered in the Stock Chart which can be customized using legend properties. Legend can be added to a Stock Chart by enabling the [`visible`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#visible) option in the [`legendSettings`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings). ## Position and Alignment -By using the [`position`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#position) property, legend can be placed at `Left`, `Right`, `Top`, `Bottom` or `Custom` of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. +By using the [`position`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#position) property, legend can be placed at `Left`, `Right`, `Top`, `Bottom` or `Custom` of the Stock Chart. The legend is positioned at the bottom of the Stock Chart, by default. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -27,7 +27,7 @@ By using the [`position`](https://ej2.syncfusion.com/vue/documentation/api/stock {% previewsample "https://help.syncfusion.com/code-snippet/chart-sdk/vue/stock-chart/legend-cs1" %} -* [`Custom`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#position) position is used to position the legend anywhere in the Stock Chart using x, y coordinates. +* [`Custom`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#position) position is used to position the legend anywhere in the Stock Chart using x, y coordinates. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -46,7 +46,7 @@ By using the [`position`](https://ej2.syncfusion.com/vue/documentation/api/stock -The legend can be align as `Center`, `Far` or `Near` to the chart using [`alignment`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#alignment) property. +The legend can be align as `Center`, `Far` or `Near` to the chart using [`alignment`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#alignment) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -61,7 +61,7 @@ The legend can be align as `Center`, `Far` or `Near` to the chart using [`alignm ## Customization -To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeries/#legendshape) property in the [`series`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeries/) can be used. By default legend icon shape is `seriesType`. +To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeries#legendshape) property in the [`series`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeries) can be used. By default legend icon shape is `seriesType`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -76,7 +76,7 @@ To change the legend icon shape, [`legendShape`](https://ej2.syncfusion.com/vue/ **Legend Size** -By default, legend takes 20% - 25% of the Stock Chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the Stock Chart's width vertically, when placed on left or right position of the Stock Chart. The default legend size can be changed by using the [`width`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#width) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#height) property of the `legendSettings`. +By default, legend takes 20% - 25% of the Stock Chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the Stock Chart's width vertically, when placed on left or right position of the Stock Chart. The default legend size can be changed by using the [`width`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#width) and [`height`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#height) property of the `legendSettings`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -91,7 +91,7 @@ By default, legend takes 20% - 25% of the Stock Chart's height horizontally, whe **Legend Item Size** -The size of the legend items can customized by using the [`shapeHeight`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#shapewidth) property. +The size of the legend items can customized by using the [`shapeHeight`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#shapeheight) and [`shapeWidth`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#shapewidth) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -121,7 +121,7 @@ By default, series name will be displayed as legend. To skip the legend for a pa ## Legend Title -The title for legend can be set using [`title`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#title) property in `legendSettings`. Customize the [`fontStyle`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#fontstyle), [`size`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#size), [`fontWeight`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#fontweight), [`color`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#color), [`textAlignment`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#textalignment), [`fontFamily`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#fontfamily), [`opacity`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#opacity) and [`textOverflow`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont/#textoverflow) of legend title. [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#titleposition) is used to set the legend position in Top, Left and Right position. [`maximumTitleWidth`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings/#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. +The title for legend can be set using [`title`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#title) property in `legendSettings`. Customize the [`fontStyle`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#fontstyle), [`size`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#size), [`fontWeight`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#fontweight), [`color`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#color), [`textAlignment`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#textalignment), [`fontFamily`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#fontfamily), [`opacity`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#opacity) and [`textOverflow`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartFont#textoverflow) of legend title. [`titlePosition`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#titleposition) is used to set the legend position in Top, Left and Right position. [`maximumTitleWidth`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/legendSettings#maximumtitlewidth) is used to set the width of the legend title. By default, it will be `100px`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/stock-charts/period-selector.md b/chart-sdk/vue/stock-chart/period-selector.md similarity index 80% rename from chart-sdk/vue/stock-charts/period-selector.md rename to chart-sdk/vue/stock-chart/period-selector.md index 90c309d77..98d61d2a3 100644 --- a/chart-sdk/vue/stock-charts/period-selector.md +++ b/chart-sdk/vue/stock-chart/period-selector.md @@ -14,7 +14,7 @@ The period selector allows to select a range with specified periods. By default ## Periods -Periods is an array of objects that allows users to specify the range of [`periods`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/periodSelector/). 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/vue/documentation/api/stock-chart/periodSelector). 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 @@ -39,7 +39,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/vue/documentation/api/stock-chart/periodSelector/) property allows users to toggle the visibility of period selector. +The [`enablePeriodSelector`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/periodSelector) property allows users to toggle the visibility of period selector. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/stock-charts/range-selector.md b/chart-sdk/vue/stock-chart/range-selector.md similarity index 89% rename from chart-sdk/vue/stock-charts/range-selector.md rename to chart-sdk/vue/stock-chart/range-selector.md index 202eff4d8..7e8c54949 100644 --- a/chart-sdk/vue/stock-charts/range-selector.md +++ b/chart-sdk/vue/stock-chart/range-selector.md @@ -16,7 +16,7 @@ The left and right thumb of RangeNavigator are used to indicate the selected ran * By tapping on the labels. * By setting the start and end through Date Range button. -Following code example shows the [`enableSelector`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/periodSelector/) property allows users to toggle the visibility of enable selector. +Following code example shows the [`enableSelector`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/periodSelector) property allows users to toggle the visibility of enable selector. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/stock-charts/series-types.md b/chart-sdk/vue/stock-chart/series-types.md similarity index 71% rename from chart-sdk/vue/stock-charts/series-types.md rename to chart-sdk/vue/stock-chart/series-types.md index 37d0e1596..6094ecfdc 100644 --- a/chart-sdk/vue/stock-charts/series-types.md +++ b/chart-sdk/vue/stock-chart/series-types.md @@ -16,29 +16,29 @@ Essential® JS 2 StockChart supports 6 major ## Line -To render a line series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel/#type-string) as `Line` and +To render a line series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel#type-string) as `Line` and inject `LineSeries` into the `provide`. ## Spline -To render a spline series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel/#type-string) as `Spline` and inject `SplineSeries` into the `provide`. +To render a spline series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel#type-string) as `Spline` and inject `SplineSeries` into the `provide`. ## Hilo -To render a hilo series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel/#type-string) as `Hilo` and +To render a hilo series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel#type-string) as `Hilo` and inject `HiloSeries` into the `provide`. ## HiloOpenClose -To render a hiloOpenClose series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel/#type-string) as `HiloOpenClose` and inject `HiloOpenCloseSeries` into the `provide`. +To render a hiloOpenClose series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chartstockSeriesModel#type-string) as `HiloOpenClose` and inject `HiloOpenCloseSeries` into the `provide`. ## HollowCandle -To render a hollowcandle series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel/#type-string) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` into the `provide`. +To render a hollowcandle series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel#type-string) as `Candle` and set `enableSolidCandle` as false. Now inject `CandleSeries` into the `provide`. ## Candle -To render a candle series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel/#type-string) as `Candle` and inject `CandleSeries` into the `provide`. +To render a candle series, use series [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockSeriesModel#type-string) as `Candle` and inject `CandleSeries` into the `provide`. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/stock-charts/stock-events.md b/chart-sdk/vue/stock-chart/stock-events.md similarity index 100% rename from chart-sdk/vue/stock-charts/stock-events.md rename to chart-sdk/vue/stock-chart/stock-events.md diff --git a/chart-sdk/vue/stock-charts/technical-indicators.md b/chart-sdk/vue/stock-chart/technical-indicators.md similarity index 100% rename from chart-sdk/vue/stock-charts/technical-indicators.md rename to chart-sdk/vue/stock-chart/technical-indicators.md diff --git a/chart-sdk/vue/stock-charts/tool-tip.md b/chart-sdk/vue/stock-chart/tool-tip.md similarity index 81% rename from chart-sdk/vue/stock-charts/tool-tip.md rename to chart-sdk/vue/stock-chart/tool-tip.md index cf6822983..283c0ced5 100644 --- a/chart-sdk/vue/stock-charts/tool-tip.md +++ b/chart-sdk/vue/stock-chart/tool-tip.md @@ -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/vue/documentation/api/stock-chart/tooltipSettings/#enable) property to true and by injecting [`Tooltip`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettings/) +By default, tooltip is not visible. Enable the tooltip by setting [`enable`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettings#enable) property to true and by injecting [`Tooltip`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettings) into the `provide`. {% tabs %} @@ -51,7 +51,7 @@ value. ## 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/vue/documentation/api/stock-chart/stockTooltipSettings/#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/vue/documentation/api/stock-chart/stockTooltipSettings#position) property. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} @@ -66,7 +66,7 @@ By default, the tooltip is positioned at the left side of the stock chart. You c ## Customize the appearance of the tooltip -The [`fill`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettingsModel/#fill-string) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettingsModel/#border-bordermodel) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettingsModel/#textstyle-fontmodel) property in the tooltip is used to customize the font of the tooltip text. +The [`fill`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettingsModel#fill-string) and [`border`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettingsModel#border-bordermodel) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/tooltipSettingsModel#textstyle-fontmodel) property in the tooltip is used to customize the font of the tooltip text. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/stock-charts/trend-lines.md b/chart-sdk/vue/stock-chart/trend-lines.md similarity index 83% rename from chart-sdk/vue/stock-charts/trend-lines.md rename to chart-sdk/vue/stock-chart/trend-lines.md index 366956f97..8c767285b 100644 --- a/chart-sdk/vue/stock-charts/trend-lines.md +++ b/chart-sdk/vue/stock-chart/trend-lines.md @@ -17,26 +17,26 @@ 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/vue/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Linear` and inject +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/vue/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Linear` and inject `Trendlines` module using `provide`. ## 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/vue/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Exponential` and inject `Trendlines` module using `provide`. +To render a exponential trendline, use trendline [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Exponential` and inject `Trendlines` module using `provide`. ## 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/vue/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Logarithmic` and inject `Trendlines` module using `provide`. +To render a logarithmic trendline, use trendline [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Logarithmic` and inject `Trendlines` module using `provide`. ## 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/vue/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Polynomial` and inject `Trendlines` module using `provide`. +To render a polynomial trendline, use trendline [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Polynomial` and inject `Trendlines` module using `provide`. `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/vue/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `Power` and inject `Trendlines` module using `provide`. +To render a power trendline, use trendline [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#type) as `Power` and inject `Trendlines` module using `provide`. ## 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/vue/documentation/api/stock-chart/stockChartTrendlineModel/#type) as `MovingAverage` and inject `Trendlines` module using `provide`. +To render a moving average trendline, use trendline [`type`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#type) as `MovingAverage` and inject `Trendlines` module using `provide`. `period` property defines the period to find the moving average. @@ -67,7 +67,7 @@ To render a moving average trendline, use trendline [`type`](https://ej2.syncfus **Customization of Trendlines** -The [`fill`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel/#fill-string) and [`width`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel/#width-number) properties are used to customize the appearance of the trendline. +The [`fill`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#fill-string) and [`width`](https://ej2.syncfusion.com/vue/documentation/api/stock-chart/stockChartTrendlineModel#width-number) properties are used to customize the appearance of the trendline. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-sdk/vue/stock-charts/vue-3-getting-started.md b/chart-sdk/vue/stock-chart/vue-3-getting-started.md similarity index 100% rename from chart-sdk/vue/stock-charts/vue-3-getting-started.md rename to chart-sdk/vue/stock-chart/vue-3-getting-started.md diff --git a/chart-sdk/vue/stock-charts/working-with-data.md b/chart-sdk/vue/stock-chart/working-with-data.md similarity index 97% rename from chart-sdk/vue/stock-charts/working-with-data.md rename to chart-sdk/vue/stock-chart/working-with-data.md index 20904e85e..8f79fc193 100644 --- a/chart-sdk/vue/stock-charts/working-with-data.md +++ b/chart-sdk/vue/stock-chart/working-with-data.md @@ -15,7 +15,7 @@ Stock Chart can visualizes 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/vue/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/vue/documentation/api/stock-chart/stockSeriesModel#datasource) property in series. {% tabs %} {% highlight html tabtitle="Composition API (~/src/App.vue)" %} diff --git a/chart-toc.html b/chart-toc.html index 348188527..e358b1a3a 100644 --- a/chart-toc.html +++ b/chart-toc.html @@ -224,26 +224,26 @@
  • API Reference
    • -
  • Stock Charts -
    • -
  • Stock Charts -