Merge remote-tracking branch 'remotes/origin/development'

Author: DeepakRajSundar

ej2-javascript-toc.html

@@ -1025,6 +1025,8 @@
 <ul>
 <li><a href="/ej2-javascript/gantt/pdf-export/pdf-export">Pdf Export</a></li>
 <li><a href="/ej2-javascript/gantt/pdf-export/multiple-gantt-exporting">Multiple Gantt Exporting</a></li>
+<li><a href="/ej2-javascript/gantt/pdf-export/customize-pdf-export.">Customize PDF exporting</a></li>
+<li><a href="/ej2-javascript/gantt/pdf-export/header-and-footer">Header and Footer</a></li>
 </ul>
 </li>
 <li><a href="/ej2-javascript/gantt/data-markers">Data Markers</a></li>

ej2-javascript/accumulation-chart/tool-tip.md

@@ -1,21 +1,21 @@
 ---
 layout: post
-title: Tool tip in ##Platform_Name## Accumulation chart control | Syncfusion
-description: Learn here all about Tool tip in Syncfusion ##Platform_Name## Accumulation chart control of Syncfusion Essential JS 2 and more.
+title: Tooltip in ##Platform_Name## Accumulation chart control | Syncfusion
+description: Learn here all about Tooltip in Syncfusion ##Platform_Name## Accumulation chart control of Syncfusion Essential JS 2 and more.
 platform: ej2-javascript
-control: Tool tip 
+control: Tooltip 
 publishingplatform: ##Platform_Name##
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Tool tip in ##Platform_Name## Accumulation chart control
+# Tooltip in ##Platform_Name## Accumulation chart control
 
-Tooltip for the accumulation chart can be enabled by using the `enable` property.
+Tooltip for the accumulation chart can be enabled by using the [`enable`](../../api/accumulation-chart/tooltipSettingsModel/#enable) property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs66/index.ts %}
 {% endhighlight %}
@@ -44,11 +44,11 @@ Tooltip for the accumulation chart can be enabled by using the `enable` proper
 
 ## Header
 
-We can specify header for the tooltip using `header` property.
+We can specify header for the tooltip using [`header`](../../api/accumulation-chart/tooltipSettingsModel/#header) property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs67/index.ts %}
 {% endhighlight %}
@@ -79,7 +79,7 @@ By default, tooltip shows information of x and y value in points. In addition to
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs68/index.ts %}
 {% endhighlight %}
@@ -104,13 +104,13 @@ By default, tooltip shows information of x and y value in points. In addition to
 {% previewsample "page.domainurl/code-snippet/chart/chart-types-cs68" %}
 {% endif %}
 
-## Tooltip Format
+## Tooltip format
 
-Any HTML element can be displayed in the tooltip by using the `template` property.
+Any HTML element can be displayed in the tooltip by using the [`template`](../../api/accumulation-chart/tooltipSettingsModel/#template) property.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs69/index.ts %}
 {% endhighlight %}
@@ -135,14 +135,44 @@ Any HTML element can be displayed in the tooltip by using the `template` propert
 {% previewsample "page.domainurl/code-snippet/chart/chart-types-cs69" %}
 {% endif %}
 
+## Fixed tooltip
+
+By default, tooltip track the mouse movement, but you can set a fixed position for the tooltip by using the `location` property.
+
+{% if page.publishingplatform == "typescript" %}
+
+{% tabs %}
+{% highlight ts tabtitle="index.ts" %}
+{% include code-snippet/chart/chart-types-cs180/index.ts %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs180/index.html %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs180" %}
+
+{% elsif page.publishingplatform == "javascript" %}
+
+{% tabs %}
+{% highlight js tabtitle="index.js" %}
+{% include code-snippet/chart/chart-types-cs180/index.js %}
+{% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/chart/chart-types-cs180/index.html %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs180" %}
+{% endif %}
+
 ## Customization
 
-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 [`highlightColor`](../api/accumulation-chart/accumulationChartModel/#highlightcolor) property can be used to change the color of the data point when hovering.
+The [`fill`](../../api/accumulation-chart/tooltipSettingsModel/#fill) and [`border`](../../api/accumulation-chart/tooltipSettingsModel/#border) properties are used to customize the background color and border of the tooltip respectively. The [`textStyle`](../../api/accumulation-chart/tooltipSettingsModel/#textstyle) property in the tooltip is used to customize the font of the tooltip text. The [`highlightColor`](../../api/accumulation-chart/accumulationChartModel/#highlightcolor) property can be used to change the color of the data point when hovering.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs70/index.ts %}
 {% endhighlight %}
@@ -169,11 +199,11 @@ property in the tooltip is used to customize the font of the tooltip text. The [
 
 ## To customize individual tooltip
 
-Using `tooltipRender` event, you can customize a tooltip for particular point. event, you can customize a tooltip for particular point.
+Using [`tooltipRender`](../../api/accumulation-chart/iAccTooltipRenderEventArgs/) event, you can customize a tooltip for particular point. event, you can customize a tooltip for particular point.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs71/index.ts %}
 {% endhighlight %}

ej2-javascript/bullet-chart/comparative-bar.md

@@ -12,11 +12,11 @@ domainurl: ##DomainURL##
 
 # Comparative bar in ##Platform_Name## Bullet chart control
 
-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` 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`](../../api/bullet-chart#targetfield) should be mapped to the appropriate field from the datasource.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/targetbar-cs1/index.ts %}
 {% endhighlight %}
@@ -41,13 +41,13 @@ The line marker that runs perpendicular to the orientation of the graph is known
 {% previewsample "page.domainurl/code-snippet/bullet-chart/targetbar-cs1" %}
 {% endif %}
 
-## Types of Target Bar
+## Types of target bar
 
-The shape of the target bar can be customized using the `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`](../../api/bullet-chart#targettypes) property and it supports **Circle**, **Cross**, and **Rect** shapes. The default type of the target bar is **Rect**.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/targetbar-cs2/index.ts %}
 {% endhighlight %}
@@ -72,16 +72,16 @@ The shape of the target bar can be customized using the `targetTypes` property a
 {% previewsample "page.domainurl/code-snippet/bullet-chart/targetbar-cs2" %}
 {% endif %}
 
-## Target Bar Customization
+## Target bar customization
 
-The following properties can be used to customize the Target Bar.
+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` - Specifies the fill color of Target Bar.
-* `targetWidth` - Specifies the width of Target Bar.
+* [`targetColor`](../../api/bullet-chart#targetcolor) - Specifies the fill color of target bar.
+* [`targetWidth`](../../api/bullet-chart#targetwidth) - Specifies the width of target bar.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/targetbar-cs3/index.ts %}
 {% endhighlight %}

ej2-javascript/bullet-chart/tool-tip.md

@@ -13,14 +13,14 @@ domainurl: ##DomainURL##
 
 When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values.
 
-## Default Tooltip
+## 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.
 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)`.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/user-interaction-cs1/index.ts %}
 {% endhighlight %}
@@ -45,13 +45,13 @@ The tooltip is not visible by default. To make it visible, set the `enable` prop
 {% previewsample "page.domainurl/code-snippet/bullet-chart/user-interaction-cs1" %}
 {% endif %}
 
-## Tooltip Template
+## Tooltip template
 
 Any HTML elements can be displayed in the tooltip by using the `template` property of the `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.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/user-interaction-cs2/index.ts %}
 {% endhighlight %}
@@ -76,7 +76,7 @@ Any HTML elements can be displayed in the tooltip by using the `template` proper
 {% previewsample "page.domainurl/code-snippet/bullet-chart/user-interaction-cs2" %}
 {% endif %}
 
-## Customization of the appearance of 'Tooltip'
+## 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.
 
@@ -88,7 +88,7 @@ The following properties can be used to customize the Bullet Chart tooltip.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/user-interaction-cs4/index.ts %}
 {% endhighlight %}

ej2-javascript/bullet-chart/value-bar.md

@@ -12,11 +12,11 @@ domainurl: ##DomainURL##
 
 # Value bar in ##Platform_Name## 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` 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.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/featurebar-cs1/index.ts %}
 {% endhighlight %}
@@ -41,13 +41,13 @@ To display the primary data or the current value of the data being measured know
 {% previewsample "page.domainurl/code-snippet/bullet-chart/featurebar-cs1" %}
 {% endif %}
 
-## Types of Actual Bar
+## Types of actual bar
 
-The shape of the actual bar can be customized using the `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.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/featurebar-cs2/index.ts %}
 {% endhighlight %}
@@ -72,15 +72,15 @@ The shape of the actual bar can be customized using the `type` property of the B
 {% previewsample "page.domainurl/code-snippet/bullet-chart/featurebar-cs2" %}
 {% endif %}
 
-## Actual Bar Customization
+## Actual bar customization
 
-### Border Customization
+### Border customization
 
-Using the `valueBorder` property of the bullet chart, you can customize the border `color` and `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.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/featurebar-cs3/index.ts %}
 {% endhighlight %}
@@ -105,13 +105,13 @@ Using the `valueBorder` property of the bullet chart, you can customize the bord
 {% previewsample "page.domainurl/code-snippet/bullet-chart/featurebar-cs3" %}
 {% endif %}
 
-### Fill color and height Customization
+### Fill color and height customization
 
-Customize the fill color and height of the actual bar using the `valueFill` and `valueHeight` properties of the bullet chart.
+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.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/bullet-chart/featurebar-cs4/index.ts %}
 {% endhighlight %}

ej2-javascript/chart/Chart-types/range-step-area.md

@@ -11,13 +11,13 @@ domainurl: ##DomainURL##
 
 # Range step area Chart in ##Platform_Name## control
 
-## Range Step Area
+## Range step area
 
 To render the range step area series, use the series [`type`](../../api/chart/seriesModel/#type) as a `RangeStepArea` and inject the `RangeStepAreaSeries` module using the `Chart.Inject(RangeStepAreaSeries)` method.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs125/index.ts %}
 {% endhighlight %}
@@ -49,10 +49,11 @@ The following properties can be used to customize the `area` series.
 * [fill](../../api/chart/seriesModel/#fill) – Specifies the color of the area series.
 * [opacity](../../api/chart/seriesModel/#opacity) – Specifies the opacity of [fill](../../api/chart/seriesModel/#fill).
 * [dashArray](../../api/chart/seriesModel/#dasharray) – Specifies the dashes of series.
+* `step` – Specifies the position of the step for the series.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs126/index.ts %}
 {% endhighlight %}
@@ -77,7 +78,7 @@ The following properties can be used to customize the `area` series.
 {% previewsample "page.domainurl/code-snippet/chart/chart-types-cs126" %}
 {% endif %}
 
-## See Also
+## See also
 
 * [Data label](../data-labels/)
 * [Tooltip](../tool-tip/)

ej2-javascript/chart/Chart-types/stacked-step-area.md

@@ -10,13 +10,13 @@ domainurl: ##DomainURL##
 ---
 # Stacked step area Chart in ##Platform_Name## control
 
-## Stacked Area
+## Stacked area
 
 To render a stacked area series, use series [`type`](../../api/chart/seriesModel/#type-string) as `StackingArea` and inject `StackingAreaSeries` module using `Chart.Inject(StackingAreaSeries)` method.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs153/index.ts %}
 {% endhighlight %}
@@ -48,10 +48,11 @@ The following properties can be used to customize the `stacked step area` series
 * [fill](../../api/chart/seriesModel/#fill) – Specifies the color of the area series.
 * [opacity](../../api/chart/seriesModel/#opacity) – Specifies the opacity of [fill](../../api/chart/seriesModel/#fill).
 * [dashArray](../../api/chart/seriesModel/#dasharray) – Specifies the dashes of series.
+* `step` – Specifies the position of the step for the series.
 
 {% if page.publishingplatform == "typescript" %}
 
- {% tabs %}
+{% tabs %}
 {% highlight ts tabtitle="index.ts" %}
 {% include code-snippet/chart/chart-types-cs154/index.ts %}
 {% endhighlight %}
@@ -76,7 +77,7 @@ The following properties can be used to customize the `stacked step area` series
 {% previewsample "page.domainurl/code-snippet/chart/chart-types-cs154" %}
 {% endif %}
 
-## See Also
+## See also
 
 * [Data label](../data-labels/)
 * [Tooltip](../tool-tip/)