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 99% rename from chart-sdk/angular/stock-charts/localization.md rename to chart-sdk/angular/stock-chart/localization.md index 8078c446a..8e2882249 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/angular/documentation/common/localization) {% tabs %} {% highlight ts tabtitle="app.component.ts" %} diff --git a/chart-sdk/angular/stock-charts/period-selector.md b/chart-sdk/angular/stock-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/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 98% 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..9fb440d92 100644 --- a/chart-sdk/asp-net-core/stock-charts/chart-dimensions.md +++ b/chart-sdk/asp-net-core/stock-chart/chart-dimensions.md @@ -4,7 +4,6 @@ title: Chart Dimensions in ASP.NET Core Stock Chart Component 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..fb3e37c7c 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 --- 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 91% 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..9343ad695 100644 --- a/chart-sdk/asp-net-core/stock-charts/range-selector.md +++ b/chart-sdk/asp-net-core/stock-chart/range-selector.md @@ -1,15 +1,14 @@ --- 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. 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/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 98% 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..7509cf35d 100644 --- a/chart-sdk/asp-net-mvc/stock-charts/chart-dimensions.md +++ b/chart-sdk/asp-net-mvc/stock-chart/chart-dimensions.md @@ -4,7 +4,6 @@ title: Chart Dimensions in ASP.NET MVC Stock Chart Component 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/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 78% rename from chart-sdk/javascript/stock-charts/legend.md rename to chart-sdk/javascript/stock-chart/legend.md index c88d13f95..444335f40 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,7 +14,7 @@ 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 @@ -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/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/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..3b244feb9 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 --- 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/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..2280aaa1b 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..a2d17e47c 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 87% rename from chart-sdk/vue/stock-charts/tool-tip.md rename to chart-sdk/vue/stock-chart/tool-tip.md index cf6822983..d841b8b9e 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 %} @@ -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 -