diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md index 63436baca5..f17dbe1cf4 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/funnel.md @@ -1,6 +1,6 @@ --- layout: post -title: Funnel in ##Platform_Name## Accumulation Chart Component +title: Funnel in ##Platform_Name## Accumulation Chart Component | Syncfusion description: Learn here all about Funnel in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Funnel @@ -9,7 +9,7 @@ documentation: ug --- -# Funnel Chart +# Funnel chart in ##Platform_Name## Accumulation Chart Component To render a funnel series, use the series [`Type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_Type) as `Funnel`. @@ -67,7 +67,7 @@ The size of the funnel chart can be customized by using the `Width` and `Height -## Neck Size +## Neck size The funnel's neck size can be customized by using the `NeckWidth` and `NeckHeight` properties. @@ -96,7 +96,7 @@ The funnel's neck size can be customized by using the `NeckWidth` and `NeckHeigh -## Gap Between the Segments +## Gap between the segments Funnel chart provides options to customize the space between the segments by using the `GapRatio` property of the series. It ranges from 0 to 1. @@ -154,7 +154,7 @@ Points can be exploded on mouse click by setting the `Explode` property to true. -## Smart Data Label +## Smart data label It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series. @@ -212,7 +212,69 @@ Individual points can be customized using the `PointRender` event. -## See Also +## Mode + +The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`FunnelMode`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_FunnelMode) is `Standard`. + +### Standard + +The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-standard.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-standard.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Trapezoidal + +The `Trapezoidal` mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-trapezoidal.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-trapezoidal.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data label](./data-label/) * [Grouping](./grouping/) diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md index feb2163e96..875a152552 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/title-and-sub-title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title And Sub Title in ##Platform_Name## Accumulation Chart Component +title: Title And Sub Title in ##Platform_Name## Accumulation Chart Component | Syncfusion description: Learn here all about Title And Sub Title in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Title And Sub Title @@ -10,7 +10,7 @@ documentation: ug -# Title +# Title in ##Platform_Name## Accumulation Chart Component Accumulation Chart can be given a title using [`Title`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_Title) property, to show the information about the data plotted. @@ -39,7 +39,7 @@ Accumulation Chart can be given a title using [`Title`](https://help.syncfusion. -## Title Customization +## Title customization Accumulation Chart can be customized a title using [`TitleStyle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_TitleStyle) property. @@ -49,8 +49,8 @@ Accumulation Chart can be customized a title using [`TitleStyle`](https://help.s {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %} +{% highlight c# tabtitle="Title-cus.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %} {% endhighlight %} {% endtabs %} @@ -60,8 +60,37 @@ Accumulation Chart can be customized a title using [`TitleStyle`](https://help.s {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/razor %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %} +{% highlight c# tabtitle="Title-cus.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Position + +The [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.AccumulationChartTitleStyleSettings.html#Syncfusion_EJ2_Charts_AccumulationChartTitleStyleSettings_Position) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} {% endhighlight %} {% endtabs %} {% endif %} @@ -78,8 +107,8 @@ Accumulation Chart can be given a subtitle using [`SubTitle`](https://help.syncf {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %} +{% highlight c# tabtitle="Sub-title.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %} {% endhighlight %} {% endtabs %} @@ -89,15 +118,15 @@ Accumulation Chart can be given a subtitle using [`SubTitle`](https://help.syncf {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/razor %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %} +{% highlight c# tabtitle="Sub-title.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %} {% endhighlight %} {% endtabs %} {% endif %} -## SubTitle Customization +## SubTitle customization Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_SubTitleStyle) property. @@ -107,8 +136,8 @@ Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https:// {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %} +{% highlight c# tabtitle="Sub-title-cus.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %} {% endhighlight %} {% endtabs %} @@ -118,8 +147,37 @@ Accumulation Chart can be customized a subtitle using [`SubTitleStyle`](https:// {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/razor %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %} +{% highlight c# tabtitle="Sub-title-cus.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Position + +The [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.AccumulationChartTitleStyleSettings.html#Syncfusion_EJ2_Charts_AccumulationChartTitleStyleSettings_Position) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} {% endhighlight %} {% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md index 3f31b28b71..cf6ae77e27 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/funnel.md @@ -9,7 +9,7 @@ documentation: ug --- -# Funnel Chart in ##Platform_Name## Accumulation Chart Component +# Funnel chart in ##Platform_Name## Accumulation Chart Component To render a funnel series, use the series [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_Type) as `Funnel`. @@ -77,7 +77,7 @@ public class FunnelChartData -## Neck Size +## Neck size The funnel's neck size can be customized by using the `neckWidth` and `neckHeight` properties. @@ -111,7 +111,7 @@ public class FunnelChartData -## Gap Between the Segments +## Gap between the segments Funnel chart provides options to customize the space between the segments by using the `gapRatio` property of the series. It ranges from 0 to 1. @@ -179,7 +179,7 @@ public class FunnelChartData -## Smart Data Label +## Smart data label It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel or pyramid series. @@ -248,7 +248,69 @@ public class FunnelChartData -## See Also +## Mode + +The Funnel chart supports both Standard and Trapezoidal modes of rendering. The default value of the [`FunnelMode`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_FunnelMode) is `Standard`. + +### Standard + +The `Standard` funnel mode follows the traditional funnel shape, with the width continuously narrowing down to a point at the bottom. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-standard.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-standard.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Trapezoidal + +The `Trapezoidal` mode is a modified funnel shape where the width narrows, but features a flattened or parallel section near the top, creating a trapezoidal appearance. This mode helps compare different data points more clearly while maintaining a funnel-like structure. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-trapezoidal.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Mode-trapezoidal.cs" %} +{% include code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data label](./data-label/) * [Grouping](./grouping/) diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/title-and-sub-title.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/title-and-sub-title.md index 4ffcf9c0d6..13439a4158 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/title-and-sub-title.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/title-and-sub-title.md @@ -45,7 +45,7 @@ public class PieChartData -## Title Customization +## Title customization Accumulation Chart can be customized a title using [`titleStyle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_TitleStyle) property. @@ -72,8 +72,37 @@ public class PieChartData {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/razor %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title.cs %} +{% highlight c# tabtitle="Title-cus.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Position + +The [`Position`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChartTitleStyleSettings.html#Syncfusion_EJ2_Charts_AccumulationChartTitleStyleSettings_Position) property customizes the placement of the accumulation chart title. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the title anywhere on the chart using x and y coordinates, providing flexible title alignment based on layout requirements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} {% endhighlight %} {% endtabs %} {% endif %} @@ -107,15 +136,15 @@ public class PieChartData {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/razor %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/title.cs %} +{% highlight c# tabtitle="Sub-title.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs %} {% endhighlight %} {% endtabs %} {% endif %} -## SubTitle Customization +## SubTitle customization Accumulation Chart can be customized a subtitle using [`subTitleStyle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChart.html#Syncfusion_EJ2_Charts_AccumulationChart_SubTitleStyle) property. @@ -142,8 +171,37 @@ public class PieChartData {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/razor %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/title.cs %} +{% highlight c# tabtitle="Sub-title-cus.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Position + +The [`Position`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationChartTitleStyleSettings.html#Syncfusion_EJ2_Charts_AccumulationChartTitleStyleSettings_Position) property customizes the placement of the accumulation chart subtitle. It supports the following options: `Right`, `Left`, `Bottom`, `Top`, and `Custom`. The Custom option allows you to position the subtitle anywhere on the chart using x and y coordinates, providing flexible subtitle alignment based on layout requirements. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Title-position.cs" %} +{% include code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs %} {% endhighlight %} {% endtabs %} {% endif %} diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-print.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-print.md index d0b3937920..f3150294e5 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-print.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-print.md @@ -49,7 +49,7 @@ The optional parameters for this method are, * `Width` - width of chart export, * `Height` - height of chart export, * `IsVertical` - decides the chart export in vertical or horizontal direction, -* `Header` - header for the exported chart, +* `Header` - header for the exported chart, * `Footer` - footer for the exported chart, and * `ExportToMultiplePages` - decides to export multiple charts on separate pages for PDF export. @@ -223,3 +223,35 @@ The chart can be exported as an image in the form of a base64 string by utilizin {% endhighlight %} {% endtabs %} {% endif %} + + + +## Excel export + +You can export the rendered chart data to Excel in either `XLSX` or `CSV` format. The `ExcelProperties` property in the [`BeforeExport`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_BeforeExport) event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths. + + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/getting-started/excel-export/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Excel-export.cs" %} +{% include code-snippet/chart/getting-started/excel-export/excel-export.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/getting-started/excel-export/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Excel-export.cs" %} +{% include code-snippet/chart/getting-started/excel-export/excel-export.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/bar.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/bar.md index ff43ac1357..afc404380d 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/bar.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/bar.md @@ -455,6 +455,66 @@ The `PointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/column.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/column.md index 096be4bd9e..baa702e8d4 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/column.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/column.md @@ -456,6 +456,65 @@ The `PointRender` event allows you to customize each data point before it is ren {% endif %} + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for column series. This allows you to create columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/range-column.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/range-column.md index 582d610ce3..123581b2a5 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/range-column.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/range-column.md @@ -318,7 +318,64 @@ The `PointRender` event allows you to customize each data point before it is ren {% endif %} -## See Also + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for range column series. This allows you to create range columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the range columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-bar100.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-bar100.md index 291760b04f..62b2b25f71 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-bar100.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-bar100.md @@ -344,6 +344,67 @@ The `PointRender` event allows you to customize each data point before it is ren {% endhighlight %} {% endtabs %} {% endif %} + + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for 100% stacked bar series. This allows you to create 100% stacked bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the 100% stacked bars using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-column100.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-column100.md index c254751f29..28706bb620 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-column100.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stack-column100.md @@ -345,6 +345,66 @@ The `PointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for 100% stacked column series. This allows you to create 100% stacked columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the 100% stacked columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartDataLabelSettings.html) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-area.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-area.md index 1a74815ae2..57e3ddf4ae 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-area.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-area.md @@ -9,9 +9,9 @@ documentation: ug --- -# Stacked Area in ##Platform_Name## Charts Component +# Stacked area in ##Platform_Name## Charts Component -## Stacked Area +## Stacked area To render a [stacked area](https://www.syncfusion.com/aspnet-mvc-ui-controls/charts/chart-types/stacked-area-chart) series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this: @@ -317,7 +317,78 @@ The `PointRender` event allows you to customize each data point before it is ren {% endhighlight %} {% endtabs %} {% endif %} -## See Also + + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-bar.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-bar.md index 9d17a79673..ab982fa448 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-bar.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-bar.md @@ -9,7 +9,7 @@ documentation: ug --- -# Stacked Bar in ##Platform_Name## Charts Component +# Stacked bar in ##Platform_Name## Charts Component ## Stacked bar @@ -371,6 +371,134 @@ The `PointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for stacked bar series. This allows you to create stacked bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the stacked bars using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-column.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-column.md index 5bf2fdbc4b..0eeb89f622 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-column.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-column.md @@ -9,7 +9,7 @@ documentation: ug --- -# Stacked Column in ##Platform_Name## Charts Component +# Stacked column in ##Platform_Name## Charts Component ## Stacked column @@ -372,6 +372,76 @@ The `PointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-line.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-line.md index 6617da423e..fee3560ac5 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-line.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-line.md @@ -9,9 +9,9 @@ documentation: ug --- -# Stacked Line Chart in ##Platform_Name## Charts Component +# Stacked line Chart in ##Platform_Name## Charts Component -## Stacked Line +## Stacked line To render a [stacked line](https://www.syncfusion.com/aspnet-mvc-ui-controls/charts/chart-types/stacked-line-chart) series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this: @@ -344,7 +344,78 @@ The `PointRender` event allows you to customize each data point before it is ren {% endhighlight %} {% endtabs %} {% endif %} -## See Also + + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-step-area.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-step-area.md index cbb3b8988d..c534a75716 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-step-area.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/stacked-step-area.md @@ -371,6 +371,77 @@ The `PointRender` event allows you to customize each data point before it is ren {% endhighlight %} {% endtabs %} {% endif %} + + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/waterfall.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/waterfall.md index c6c5d5d08d..526713be70 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/waterfall.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/chart-types/waterfall.md @@ -237,7 +237,67 @@ The `PointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} -## See Also + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for waterfall series. This allows you to create waterfalls with rounded corners, giving your chart a more polished appearance. You can customize each corner of the waterfalls using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/cross-hair-and-track-ball.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/cross-hair-and-track-ball.md index 9734e257ef..255ebe010d 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/cross-hair-and-track-ball.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/cross-hair-and-track-ball.md @@ -152,3 +152,33 @@ Trackball can be enabled by setting the [`Enable`](https://help.syncfusion.com/c {% endtabs %} {% endif %} + + +## Crosshair highlight Category + +The [`HighlightCategory`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartCrosshairSettings.html#Syncfusion_EJ2_Charts_ChartCrosshairSettings_HighlightCategory) property in the crosshair highlights the background of the entire category when hovered over. The crosshair color can be customized using the `Color` property within the [`Line`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartCrosshairSettings.html#Syncfusion_EJ2_Charts_ChartCrosshairSettings_Line) configuration. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Highlight-category.cs" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Highlight-category.cs" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/tool-tip.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/tool-tip.md index b9049b026d..b9f4398d68 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/tool-tip.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/tool-tip.md @@ -210,3 +210,33 @@ public class GroupingChartData {% endhighlight %} {% endtabs %} + + +## Closest tooltip + +The [`ShowNearestTooltip`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartTooltipSettings.html#Syncfusion_EJ2_Charts_ChartTooltipSettings_ShowNearestTooltip) property in the chart tooltip displays tooltips based on the data points closest to the cursor. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Nearest-tooltip.cs" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Nearest-tooltip.cs" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/zooming.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/zooming.md index b282a898e9..647f4ebb04 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/zooming.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/zooming.md @@ -195,6 +195,39 @@ Using the [`EnableScrollbar`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncf +### Position + +The [`Position`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartScrollbarSettings.html#Syncfusion_EJ2_Charts_ChartScrollbarSettings_Position) property allows users to specify their preferred scrollbar location. By default, both vertical and horizontal scrollbars are rendered near their respective axes. Using the customization options below, you can position the scrollbar as desired: + +* Default: `placeNextToAxisLine`. +* Horizontal scrollbar: Available positions are `Top` and `Bottom`. +* Vertical scrollbar: Available positions are `Left` and `Right`. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/zoom/position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Position.cs" %} +{% include code-snippet/chart/user-interaction/zoom/position/position.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/zoom/position/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Position.cs" %} +{% include code-snippet/chart/user-interaction/zoom/position/position.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## Enable animation Enable the [`EnableAnimation`](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Charts.ChartZoomSettings.html#Syncfusion_EJ2_Charts_ChartZoomSettings_EnableAnimation) property to experience smooth transitions when zooming in on the chart. diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-print.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-print.md index 25d3a6b0c8..01af84ac6d 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-print.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-print.md @@ -247,3 +247,34 @@ The chart can be exported as an image in the form of a base64 string by utilizin {% endtabs %} {% endif %} + + +## Excel export + +You can export the rendered chart data to Excel in either `XLSX` or `CSV` format. The `ExcelProperties` property in the [`BeforeExport`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_BeforeExport) event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths. + + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/getting-started/excel-export/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Excel-export.cs" %} +{% include code-snippet/chart/getting-started/excel-export/excel-export.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/getting-started/excel-export/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Excel-export.cs" %} +{% include code-snippet/chart/getting-started/excel-export/excel-export.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/bar.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/bar.md index a95d541096..1eb8531ceb 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/bar.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/bar.md @@ -455,6 +455,65 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/bar/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/column.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/column.md index e6065b47a9..d04223319d 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/column.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/column.md @@ -455,6 +455,66 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for column series. This allows you to create columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/range-column.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/range-column.md index 2d162ffe9f..dd22482fcc 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/range-column.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/range-column.md @@ -317,7 +317,65 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} -## See Also + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for range column series. This allows you to create range columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the range columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-bar100.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-bar100.md index 9baaec3c01..e2e60d0b16 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-bar100.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-bar100.md @@ -345,6 +345,66 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for 100% stacked bar series. This allows you to create 100% stacked bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the 100% stacked bars using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-column100.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-column100.md index b55ff235bd..bc9c98f779 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-column100.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stack-column100.md @@ -345,6 +345,66 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for 100% stacked column series. This allows you to create 100% stacked columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the 100% stacked columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-area.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-area.md index 537404180b..a90f992841 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-area.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-area.md @@ -9,9 +9,9 @@ documentation: ug --- -# Stacked Area in ##Platform_Name## Charts Component +# Stacked area in ##Platform_Name## Charts Component -## Stacked Area +## Stacked area To render a [stacked area](https://www.syncfusion.com/aspnet-core-ui-controls/charts/chart-types/stacked-area-chart) series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this: @@ -318,7 +318,77 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} -## See Also + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-bar.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-bar.md index d1b8c78ed0..96b19b0742 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-bar.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-bar.md @@ -9,7 +9,7 @@ documentation: ug --- -# Stacked Bar in ##Platform_Name## Charts Component +# Stacked bar in ##Platform_Name## Charts Component ## Stacked bar @@ -371,6 +371,134 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for stacked bar series. This allows you to create stacked bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the stacked bars using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-column.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-column.md index da4dce9df6..805e6ae8a9 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-column.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-column.md @@ -9,7 +9,7 @@ documentation: ug --- -# Stacked Column in ##Platform_Name## Charts Component +# Stacked column in ##Platform_Name## Charts Component ## Stacked column @@ -372,6 +372,134 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for stacked column series. This allows you to create stacked columns with rounded corners, giving your chart a more polished appearance. You can customize each corner of the stacked columns using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-column/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/stacked-column/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-line.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-line.md index eca38386ad..35429e5a2c 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-line.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-line.md @@ -9,9 +9,9 @@ documentation: ug --- -# Stacked Line Chart in ##Platform_Name## Charts Component +# Stacked line Chart in ##Platform_Name## Charts Component -## Stacked Line +## Stacked line To render a [stacked line](https://www.syncfusion.com/aspnet-core-ui-controls/charts/chart-types/stacked-line-chart) series in your chart, you need to follow a few steps to configure it correctly. Here’s a concise guide on how to do this: @@ -345,7 +345,77 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} -## See Also + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-step-area.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-step-area.md index 2df2e82dd2..04c588a14c 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-step-area.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/stacked-step-area.md @@ -372,6 +372,76 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} + + +## Stack labels + +The stack labels in stacked charts display cumulative total values for stack segments directly using data labels. If a stacked point has negative values, the stack labels are displayed below the point. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Stack labels customization + +Stack labels have various properties for customization to enhance the visual based on your requirements: + +* [`Visible`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Visible) - Specifies whether stack labels are visible. Setting to true will display the labels. Default is false. +* [`Fill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Fill) - Defines the background color of the stack labels. Accepts valid CSS color strings (hex, RGBA, etc.). Default is transparent. +* [`Format`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Format) - Formats the text displayed in the stack labels. Supports placeholders like {value}. Default is null. +* [`Angle`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. Default is 0. +* [`Rx`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Rx) - Defines the rounded corner radius along the X-axis (horizontal direction) for the stack label background. Default is 5. +* [`Ry`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Ry) - Defines the rounded corner radius along the Y-axis (vertical direction) for the stack label background. Default is 5. +* [`Margin`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Margin) - Configures the margin around the stack label (left, right, top, and bottom). +* [`Border`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Border) - Configures the appearance of the stack label's border. +* [`Font`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartStackLabelSettings.html#Syncfusion_EJ2_Charts_ChartStackLabelSettings_Font) - Customizes the stack label text, including font size, color, style, weight, and family. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Stack-labels-cus.cs" %} +{% include code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## See also * [Data Label](../data-labels) diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/waterfall.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/waterfall.md index cde0d5e566..c1afd20efa 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/waterfall.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/chart-types/waterfall.md @@ -237,7 +237,67 @@ The `pointRender` event allows you to customize each data point before it is ren {% endtabs %} {% endif %} -## See Also + + +## Corner radius + +The [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in the chart series is used to customize the corner radius for waterfall series. This allows you to create waterfalls with rounded corners, giving your chart a more polished appearance. You can customize each corner of the waterfalls using the topLeft, topRight, bottomLeft, and bottomRight properties. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +### Point corner radius + +We can customize the corner radius for individual points in the chart series using the [`PointRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Chart.html#Syncfusion_EJ2_Charts_Chart_PointRender) event by setting the [`CornerRadius`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartSeries.html#Syncfusion_EJ2_Charts_ChartSeries_CornerRadius) property in its event argument. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Point-corner-radius.cs" %} +{% include code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + +## See also * [Data Label](../data-labels) * [Tooltip](../tool-tip) \ No newline at end of file diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/cross-hair-and-track-ball.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/cross-hair-and-track-ball.md index 1754432c9b..ca96c5224a 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/cross-hair-and-track-ball.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/cross-hair-and-track-ball.md @@ -152,3 +152,33 @@ Trackball can be enabled by setting the [`enable`](https://help.syncfusion.com/c {% endtabs %} {% endif %} + + +## Crosshair highlight Category + +The [`HighlightCategory`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartCrosshairSettings.html#Syncfusion_EJ2_Charts_ChartCrosshairSettings_HighlightCategory) property in the crosshair highlights the background of the entire category when hovered over. The crosshair color can be customized using the `Color` property within the [`Line`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartCrosshairSettings.html#Syncfusion_EJ2_Charts_ChartCrosshairSettings_Line) configuration. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Highlight-category.cs" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Highlight-category.cs" %} +{% include code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/tool-tip.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/tool-tip.md index a70d78887c..a793cb1cf9 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/tool-tip.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/tool-tip.md @@ -203,3 +203,34 @@ By setting the [`EnableHighlight`](https://help.syncfusion.com/cr/aspnetcore-js2 {% include code-snippet/chart/user-interaction/tooltip/tooltip-enable/tooltip-enable.cs %} {% endhighlight %} {% endtabs %} + + + +## Closest tooltip + +The [`ShowNearestTooltip`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartTooltipSettings.html#Syncfusion_EJ2_Charts_ChartTooltipSettings_ShowNearestTooltip) property in the chart tooltip displays tooltips based on the data points closest to the cursor. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Nearest-tooltip.cs" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Nearest-tooltip.cs" %} +{% include code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/zooming.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/zooming.md index b5a0081a47..0967f886ef 100644 --- a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/zooming.md +++ b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/zooming.md @@ -195,6 +195,39 @@ Using the [`EnableScrollbar`](https://help.syncfusion.com/cr/aspnetcore-js2/Sync +### Position + +The [`Position`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartScrollbarSettings.html#Syncfusion_EJ2_Charts_ChartScrollbarSettings_Position) property allows users to specify their preferred scrollbar location. By default, both vertical and horizontal scrollbars are rendered near their respective axes. Using the customization options below, you can position the scrollbar as desired: + +* Default: `placeNextToAxisLine`. +* Horizontal scrollbar: Available positions are `Top` and `Bottom`. +* Vertical scrollbar: Available positions are `Left` and `Right`. + +{% if page.publishingplatform == "aspnet-core" %} + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/zoom/position/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Position.cs" %} +{% include code-snippet/chart/user-interaction/zoom/position/position.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/chart/user-interaction/zoom/position/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Position.cs" %} +{% include code-snippet/chart/user-interaction/zoom/position/position.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + + ## Enable animation Enable the [`EnableAnimation`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.ChartZoomSettings.html#Syncfusion_EJ2_Charts_ChartZoomSettings_EnableAnimation) property to experience smooth transitions when zooming in on the chart. diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs new file mode 100644 index 0000000000..fadb372d63 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/mode-standard.cs @@ -0,0 +1,21 @@ +public ActionResult Index() + { + List chartData = new List + { + + new FunnelChartData { XValue = "Renewed", YValue = 18.20, Text = "Renewed 18.20%" }, + new FunnelChartData { XValue = "Subscribe", YValue = 27.3, Text = "Subscribe 27.3%" }, + new FunnelChartData { XValue = "Support", YValue = 55.9, Text = "Support 55.9%" }, + new FunnelChartData { XValue = "Downloaded", YValue = 76.8, Text = "Downloaded 76.8%" }, + new FunnelChartData { XValue = "Visited", YValue = 100, Text = "Visited 100%" } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class FunnelChartData + { + public string XValue; + public double YValue; + public string Text; + } + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/razor b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/razor new file mode 100644 index 0000000000..984bd82cb9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/razor @@ -0,0 +1,11 @@ +@Html.EJS().AccumulationChart("container").Series(series => + { + series.DataSource(ViewBag.dataSource) + .XName("XValue") + .YName("YValue") + .Width("60%") + .Height("80%") + .FunnelMode(Syncfusion.EJ2.Charts.FunnelModes.Standard) + .Type(Syncfusion.EJ2.Charts.AccumulationType.Funnel) + .Add(); + }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper new file mode 100644 index 0000000000..ade31c7093 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-standard/tagHelper @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs new file mode 100644 index 0000000000..fadb372d63 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/mode-trapezoidal.cs @@ -0,0 +1,21 @@ +public ActionResult Index() + { + List chartData = new List + { + + new FunnelChartData { XValue = "Renewed", YValue = 18.20, Text = "Renewed 18.20%" }, + new FunnelChartData { XValue = "Subscribe", YValue = 27.3, Text = "Subscribe 27.3%" }, + new FunnelChartData { XValue = "Support", YValue = 55.9, Text = "Support 55.9%" }, + new FunnelChartData { XValue = "Downloaded", YValue = 76.8, Text = "Downloaded 76.8%" }, + new FunnelChartData { XValue = "Visited", YValue = 100, Text = "Visited 100%" } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class FunnelChartData + { + public string XValue; + public double YValue; + public string Text; + } + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor new file mode 100644 index 0000000000..523f6d6603 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/razor @@ -0,0 +1,11 @@ +@Html.EJS().AccumulationChart("container").Series(series => + { + series.DataSource(ViewBag.dataSource) + .XName("XValue") + .YName("YValue") + .Width("60%") + .Height("80%") + .FunnelMode(Syncfusion.EJ2.Charts.FunnelModes.Trapezoidal) + .Type(Syncfusion.EJ2.Charts.AccumulationType.Funnel) + .Add(); + }).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper new file mode 100644 index 0000000000..1bd1ed3393 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/mode-trapezoidal/tagHelper @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs new file mode 100644 index 0000000000..7893917fca --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/sub-title-cus.cs @@ -0,0 +1,22 @@ + public ActionResult Pie() + { + List chartData = new List + { + + new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"}, + new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"}, + new PieChartData { xValue = "Canada", yValue = 13, text = "13%"}, + new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"}, + new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"}, + new PieChartData { xValue = "Russia", yValue = 2, text = "2%"}, + new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"} + }; + ViewBag.dataSource = chartData; + return View(); + } + public class PieChartData + { + public string xValue; + public double yValue; + public string text; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs new file mode 100644 index 0000000000..7893917fca --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/sub-title.cs @@ -0,0 +1,22 @@ + public ActionResult Pie() + { + List chartData = new List + { + + new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"}, + new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"}, + new PieChartData { xValue = "Canada", yValue = 13, text = "13%"}, + new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"}, + new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"}, + new PieChartData { xValue = "Russia", yValue = 2, text = "2%"}, + new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"} + }; + ViewBag.dataSource = chartData; + return View(); + } + public class PieChartData + { + public string xValue; + public double yValue; + public string text; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs new file mode 100644 index 0000000000..7893917fca --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/title-cus.cs @@ -0,0 +1,22 @@ + public ActionResult Pie() + { + List chartData = new List + { + + new PieChartData { xValue = "Saudi Arabia", yValue = 58, text = "58%"}, + new PieChartData { xValue = "Persian Gulf", yValue = 15, text = "15%"}, + new PieChartData { xValue = "Canada", yValue = 13, text = "13%"}, + new PieChartData { xValue = "Venezuela", yValue = 8 , text = "8%"}, + new PieChartData { xValue = "Mexico", yValue = 3 , text = "3%"}, + new PieChartData { xValue = "Russia", yValue = 2, text = "2%"}, + new PieChartData { xValue = "Miscellaneous", yValue = 1, text = "1%"} + }; + ViewBag.dataSource = chartData; + return View(); + } + public class PieChartData + { + public string xValue; + public double yValue; + public string text; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor new file mode 100644 index 0000000000..d672092444 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/razor @@ -0,0 +1,11 @@ +@Html.EJS().AccumulationChart("container").Series(series => + { + series.XName("XValue") + .YName("YValue") + .DataLabel(dl => dl.Visible(true).Name("Text").Font(ft => ft.Color("white"))) + .DataSource(ViewBag.dataSource) + .Add(); + } + ).LegendSettings(ls => ls.Visible(false) + ).TitleStyle(Sts => Sts.FontFamily("Arial").FontStyle("italic").FontWeight("regular").Color("#E27F2D").Size("23px").Position(Syncfusion.EJ2.Charts.TitlePosition.Bottom) + ).Title("Oil and other liquid imports in USA").SubTitle("In the year 2014 - 2015").Render() diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper new file mode 100644 index 0000000000..fc75ec1f89 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/tagHelper @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs new file mode 100644 index 0000000000..65341d73c9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-position/title-position.cs @@ -0,0 +1,22 @@ + public ActionResult Pie() + { + List chartData = new List + { + + new PieChartData { XValue = "Saudi Arabia", YValue = 58, Text = "58%" }, + new PieChartData { XValue = "Persian Gulf", YValue = 15, Text = "15%" }, + new PieChartData { XValue = "Canada", YValue = 13, Text = "13%" }, + new PieChartData { XValue = "Venezuela", YValue = 8 , Text = "8%" }, + new PieChartData { XValue = "Mexico", YValue = 3 , Text = "3%" }, + new PieChartData { XValue = "Russia", YValue = 2, Text = "2%" }, + new PieChartData { XValue = "Miscellaneous", YValue = 1, Text = "1%" } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class PieChartData + { + public string XValue; + public double YValue; + public string Text; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/excel-export.cs b/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/excel-export.cs new file mode 100644 index 0000000000..e991a6f929 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/excel-export.cs @@ -0,0 +1,18 @@ +public IActionResult Index() +{ + List chartData = new List + { + new ExcelExportChartData { X = "John", Y = 10000 }, + new ExcelExportChartData { X = "Jake", Y = 12000 }, + new ExcelExportChartData { X = "Peter", Y = 18000 }, + new ExcelExportChartData { X = "James", Y = 11000 }, + new ExcelExportChartData { X = "Mary", Y = 9700 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class ExcelExportChartData +{ + public string X; + public double Y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/razor b/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/razor new file mode 100644 index 0000000000..09440204e1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/razor @@ -0,0 +1,23 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Width(2).XName("X").YName("Y").DataSource(ViewBag.dataSource).Add(); + }).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Manager").MajorGridLines(mg=>mg.Width(0)) + ).PrimaryYAxis(py => py.Title("Sales").MajorGridLines(mg=>mg.Width(0)).Minimum(0).Maximum(20000) + ).Title("Sales Comparision").BeforeExport("beforeExport").Render() + +
+ @Html.EJS().Button("togglebtn").IsPrimary(true).Content("Export").Render() +
+ diff --git a/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/tagHelper new file mode 100644 index 0000000000..83748d6110 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/getting-started/excel-export/tagHelper @@ -0,0 +1,29 @@ + + + + + + + + + + + + +
+ +
+ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..ace389d7b9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/corner-radius.cs @@ -0,0 +1,19 @@ +public ActionResult Index() +{ + List chartData = new List + { + new BarChartData { X = 2006, Y = 7.8 }, + new BarChartData { X = 2007, Y = -7.2 }, + new BarChartData { X = 2008, Y = 6.8 }, + new BarChartData { X = 2009, Y = -10.7 }, + new BarChartData { X = 2010, Y = 10.8}, + new BarChartData { X = 2011, Y = -9.8 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class BarChartData +{ + public double X; + public double Y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/razor new file mode 100644 index 0000000000..14ed0e7b6a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/razor @@ -0,0 +1,23 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar). + XName("X"). + YName("Y"). + CornerRadius(cr => cr.TopRight(10).BottomRight(10)). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(px => px.Minimum(2005).Maximum(2012).Interval(1).Title("Year") + ).PrimaryYAxis(py => py.Minimum(3).Maximum(12).Interval(1).Title("Percentage").LabelFormat("{value}%") + ).Title("Unemployment rate (%)").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/tagHelper new file mode 100644 index 0000000000..29a97b31cb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/bar/corner-radius/tagHelper @@ -0,0 +1,22 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..bfc67606ad --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,19 @@ +public ActionResult Index() +{ + List chartData = new List + { + new BarChartData { X = 2006, Y = 7.8 }, + new BarChartData { X = 2007, Y = 7.2 }, + new BarChartData { X = 2008, Y = 6.8 }, + new BarChartData { X = 2009, Y = 10.7 }, + new BarChartData { X = 2010, Y = 10.8}, + new BarChartData { X = 2011, Y = 9.8 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class BarChartData +{ + public double X; + public double Y; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/razor new file mode 100644 index 0000000000..108eab986d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/razor @@ -0,0 +1,22 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Bar). + XName("X"). + YName("Y"). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(px => px.Minimum(2005).Maximum(2012).Interval(1).Title("Year") + ).PrimaryYAxis(py => py.Minimum(3).Maximum(12).Interval(1).Title("Percentage").LabelFormat("{value}%") + ).Title("Unemployment rate (%)").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/tagHelper new file mode 100644 index 0000000000..e3f71a4bc1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/bar/point-corner-radius/tagHelper @@ -0,0 +1,21 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..d5677f5411 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/corner-radius.cs @@ -0,0 +1,21 @@ +public ActionResult Index() +{ + List chartData = new List + { + new ColumnChartData { Country = "USA", Gold = -50 }, + new ColumnChartData { Country = "China", Gold = 40 }, + new ColumnChartData { Country = "Japan", Gold = -70 }, + new ColumnChartData { Country = "Australia", Gold = 60 }, + new ColumnChartData { Country = "France", Gold = -50 }, + new ColumnChartData { Country = "Germany", Gold = -40 }, + new ColumnChartData { Country = "Italy", Gold = 40 }, + new ColumnChartData { Country = "Sweden", Gold = 30 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class ColumnChartData +{ + public string Country; + public double Gold; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/razor new file mode 100644 index 0000000000..8e059406f0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/razor @@ -0,0 +1,12 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column). + XName("Country"). + YName("Gold"). + CornerRadius(cr => cr.TopLeft(10).TopRight(10)). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Countries") + ).PrimaryYAxis(py => py.Maximum(80).Interval(20).Title("Medals") + ).Title("Olympic Medals").Render() diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/tagHelper new file mode 100644 index 0000000000..a3ea26ebd4 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/corner-radius/tagHelper @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..875ef4a6bf --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,21 @@ +public ActionResult Index() +{ + List chartData = new List + { + new ColumnChartData { Country = "USA", Gold = 50 }, + new ColumnChartData { Country = "China", Gold = 40 }, + new ColumnChartData { Country = "Japan", Gold = 70 }, + new ColumnChartData { Country = "Australia", Gold = 60 }, + new ColumnChartData { Country = "France", Gold = 50 }, + new ColumnChartData { Country = "Germany", Gold = 40 }, + new ColumnChartData { Country = "Italy", Gold = 40 }, + new ColumnChartData { Country = "Sweden", Gold = 30 } + }; + ViewBag.dataSource = chartData; + return View(); +} +public class ColumnChartData +{ + public string Country; + public double Gold; +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/razor new file mode 100644 index 0000000000..a67e98a819 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/razor @@ -0,0 +1,22 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column). + XName("Country"). + YName("Gold"). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Countries") + ).PrimaryYAxis(py => py.Minimum(0).Maximum(80).Interval(20).Title("Medals") + ).Title("Olympic Medals").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/tagHelper new file mode 100644 index 0000000000..0b4624943e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/column-charts/point-corner-radius/tagHelper @@ -0,0 +1,22 @@ + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..a7897c7855 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/corner-radius.cs @@ -0,0 +1,28 @@ +public ActionResult Index() + { + List chartData = new List + { + new RangeChartData { X = "Jan", Low = 0.7, High = 6.1, Low1 = 1.7, High1 = 7.1 }, + new RangeChartData { X = "Feb", Low = 1.3, High = 6.3, Low1 = 1.9, High1 = 7.7 }, + new RangeChartData { X = "Mar", Low = 1.9, High = 8.5, Low1 = 1.2, High1 = 7.5 }, + new RangeChartData { X = "Apr", Low = 3.1, High = 10.8, Low1 = 2.5, High1 = 9.8 }, + new RangeChartData { X = "May", Low = 5.7, High = 14.40, Low1 = 4.7, High1 = 11.4 }, + new RangeChartData { X = "Jun", Low = 8.4, High = 16.90, Low1 = 6.4, High1 = 14.4 }, + new RangeChartData { X = "Jul", Low = 10.6, High = 19.20, Low1 = 9.6, High1 = 17.2 }, + new RangeChartData { X = "Aug", Low = 10.5, High = 18.9, Low1 = 10.7, High1 = 17.9 }, + new RangeChartData { X = "Sep", Low = 8.5, High = 16.1, Low1 = 7.5, High1 = 15.1 }, + new RangeChartData { X = "Oct", Low = 6.0, High = 12.5, Low1 = 3.0, High1 = 10.5 }, + new RangeChartData { X = "Nov", Low = 1.5, High = 6.9, Low1 = 1.2, High1 = 7.9 }, + new RangeChartData { X = "Dec", Low = 5.1, High = 12.1, Low1 = 4.1, High1 = 9.1 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class RangeChartData + { + public string X; + public double Low; + public double High; + public double Low1; + public double High1; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/razor new file mode 100644 index 0000000000..dd059de03f --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/razor @@ -0,0 +1,23 @@ + +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn). + XName("X"). + High("High"). + Low("Low"). + CornerRadius(cr => cr.TopLeft(10).TopRight(10).BottomLeft(10).BottomRight(10)). + DataSource(ViewBag.dataSource). + Add(); + + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn). + XName("X"). + High("High1"). + Low("Low1"). + CornerRadius(cr => cr.TopLeft(10).TopRight(10).BottomLeft(10).BottomRight(10)). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Month") + ).PrimaryYAxis(py => py.Title("Temperature(Celsius)").LabelFormat("{value}°C") + ).Title("Maximum and Minimum Temperature").Render() + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/tagHelper new file mode 100644 index 0000000000..107e37432c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/corner-radius/tagHelper @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..a7897c7855 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,28 @@ +public ActionResult Index() + { + List chartData = new List + { + new RangeChartData { X = "Jan", Low = 0.7, High = 6.1, Low1 = 1.7, High1 = 7.1 }, + new RangeChartData { X = "Feb", Low = 1.3, High = 6.3, Low1 = 1.9, High1 = 7.7 }, + new RangeChartData { X = "Mar", Low = 1.9, High = 8.5, Low1 = 1.2, High1 = 7.5 }, + new RangeChartData { X = "Apr", Low = 3.1, High = 10.8, Low1 = 2.5, High1 = 9.8 }, + new RangeChartData { X = "May", Low = 5.7, High = 14.40, Low1 = 4.7, High1 = 11.4 }, + new RangeChartData { X = "Jun", Low = 8.4, High = 16.90, Low1 = 6.4, High1 = 14.4 }, + new RangeChartData { X = "Jul", Low = 10.6, High = 19.20, Low1 = 9.6, High1 = 17.2 }, + new RangeChartData { X = "Aug", Low = 10.5, High = 18.9, Low1 = 10.7, High1 = 17.9 }, + new RangeChartData { X = "Sep", Low = 8.5, High = 16.1, Low1 = 7.5, High1 = 15.1 }, + new RangeChartData { X = "Oct", Low = 6.0, High = 12.5, Low1 = 3.0, High1 = 10.5 }, + new RangeChartData { X = "Nov", Low = 1.5, High = 6.9, Low1 = 1.2, High1 = 7.9 }, + new RangeChartData { X = "Dec", Low = 5.1, High = 12.1, Low1 = 4.1, High1 = 9.1 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class RangeChartData + { + public string X; + public double Low; + public double High; + public double Low1; + public double High1; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/razor new file mode 100644 index 0000000000..d97db65000 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/razor @@ -0,0 +1,31 @@ + +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn). + XName("X"). + High("High"). + Low("Low"). + DataSource(ViewBag.dataSource). + Add(); + + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.RangeColumn). + XName("X"). + High("High1"). + Low("Low1"). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Month") + ).PrimaryYAxis(py => py.Title("Temperature(Celsius)").LabelFormat("{value}°C") + ).Title("Maximum and Minimum Temperature").PointRender("pointRender").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/tagHelper new file mode 100644 index 0000000000..966302c1b9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/range-column/point-corner-radius/tagHelper @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/razor new file mode 100644 index 0000000000..9f8e982734 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/razor @@ -0,0 +1,18 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("Organic").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Fair-trade").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("Veg Alternatives").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y3").DataSource(ViewBag.dataSource) + .Name("Others").Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).Title("Years").IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).LabelFormat("y").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorTickLines(mt=>mt.Width(0)) +).PrimaryYAxis(py => py.Title("Spend in Billions").Minimum(0).Maximum(7).Interval(1).LabelFormat("{value}B").MajorTickLines(mt=>mt.Width(0)) +).StackLabels(sl => sl.Visible(true).Fill("rgba(0, 123, 255, 0.5)").Format("{value}").Angle(45).Rx(10).Ry(10) +).Title("Trend in Sales of Ethical Produce").Render() diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs new file mode 100644 index 0000000000..d96d10e87c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/stack-labels-cus.cs @@ -0,0 +1,31 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = new DateTime(2000, 01, 01), Y = 0.61, Y1 = 0.03, Y2 = 0.48, Y3 = 0.23 }, + new StackedLineChartData { X = new DateTime(2001, 01, 01), Y = 0.81, Y1 = 0.05, Y2 = 0.53, Y3 = 0.17 }, + new StackedLineChartData { X = new DateTime(2002, 01, 01), Y = 0.91, Y1 = 0.06, Y2 = 0.57, Y3 = 0.17 }, + new StackedLineChartData { X = new DateTime(2003, 01, 01), Y = 1, Y1 = 0.09, Y2 = 0.61, Y3 = 0.20 }, + new StackedLineChartData { X = new DateTime(2004, 01, 01), Y = 1.19, Y1 = 0.14, Y2 = 0.63, Y3 = 0.23 }, + new StackedLineChartData { X = new DateTime(2005, 01, 01), Y = 1.47, Y1 = 0.20, Y2 = 0.64, Y3 = 0.36 }, + new StackedLineChartData { X = new DateTime(2006, 01, 01), Y = 1.74, Y1 = 0.29, Y2 = 0.66, Y3 = 0.43 }, + new StackedLineChartData { X = new DateTime(2007, 01, 01), Y = 1.98, Y1 = 0.46, Y2 = 0.76, Y3 = 0.52 }, + new StackedLineChartData { X = new DateTime(2008, 01, 01), Y = 1.99, Y1 = 0.64, Y2 = 0.77, Y3 = 0.72 }, + new StackedLineChartData { X = new DateTime(2009, 01, 01), Y = 1.70, Y1 = 0.75, Y2 = 0.55, Y3 = 1.29 }, + new StackedLineChartData { X = new DateTime(2010, 01, 01), Y = 1.48, Y1 = 1.06, Y2 = 0.54, Y3 = 1.38 }, + new StackedLineChartData { X = new DateTime(2011, 01, 01), Y = 1.38, Y1 = 1.25, Y2 = 0.57, Y3 = 1.82 }, + new StackedLineChartData { X = new DateTime(2012, 01, 01), Y = 1.66, Y1 = 1.55, Y2 = 0.61, Y3 = 2.16 }, + new StackedLineChartData { X = new DateTime(2013, 01, 01), Y = 1.66, Y1 = 1.55, Y2 = 0.67, Y3 = 2.51 }, + new StackedLineChartData { X = new DateTime(2014, 01, 01), Y = 1.67, Y1 = 1.65, Y2 = 0.67, Y3 = 2.61 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public DateTime X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/tagHelper new file mode 100644 index 0000000000..29f2fd915d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels-cus/tagHelper @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/razor new file mode 100644 index 0000000000..61212e9726 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/razor @@ -0,0 +1,17 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("Organic").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Fair-trade").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("Veg Alternatives").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y3").DataSource(ViewBag.dataSource) + .Name("Others").Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).Title("Years").IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).LabelFormat("y").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorTickLines(mt=>mt.Width(0)) +).PrimaryYAxis(py => py.Title("Spend in Billions").Minimum(0).Maximum(7).Interval(1).LabelFormat("{value}B").MajorTickLines(mt=>mt.Width(0)) +).StackLabels(stackLabels => stackLabels.Visible(true)).Title("Trend in Sales of Ethical Produce").Render() diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs new file mode 100644 index 0000000000..d96d10e87c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/stack-labels.cs @@ -0,0 +1,31 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = new DateTime(2000, 01, 01), Y = 0.61, Y1 = 0.03, Y2 = 0.48, Y3 = 0.23 }, + new StackedLineChartData { X = new DateTime(2001, 01, 01), Y = 0.81, Y1 = 0.05, Y2 = 0.53, Y3 = 0.17 }, + new StackedLineChartData { X = new DateTime(2002, 01, 01), Y = 0.91, Y1 = 0.06, Y2 = 0.57, Y3 = 0.17 }, + new StackedLineChartData { X = new DateTime(2003, 01, 01), Y = 1, Y1 = 0.09, Y2 = 0.61, Y3 = 0.20 }, + new StackedLineChartData { X = new DateTime(2004, 01, 01), Y = 1.19, Y1 = 0.14, Y2 = 0.63, Y3 = 0.23 }, + new StackedLineChartData { X = new DateTime(2005, 01, 01), Y = 1.47, Y1 = 0.20, Y2 = 0.64, Y3 = 0.36 }, + new StackedLineChartData { X = new DateTime(2006, 01, 01), Y = 1.74, Y1 = 0.29, Y2 = 0.66, Y3 = 0.43 }, + new StackedLineChartData { X = new DateTime(2007, 01, 01), Y = 1.98, Y1 = 0.46, Y2 = 0.76, Y3 = 0.52 }, + new StackedLineChartData { X = new DateTime(2008, 01, 01), Y = 1.99, Y1 = 0.64, Y2 = 0.77, Y3 = 0.72 }, + new StackedLineChartData { X = new DateTime(2009, 01, 01), Y = 1.70, Y1 = 0.75, Y2 = 0.55, Y3 = 1.29 }, + new StackedLineChartData { X = new DateTime(2010, 01, 01), Y = 1.48, Y1 = 1.06, Y2 = 0.54, Y3 = 1.38 }, + new StackedLineChartData { X = new DateTime(2011, 01, 01), Y = 1.38, Y1 = 1.25, Y2 = 0.57, Y3 = 1.82 }, + new StackedLineChartData { X = new DateTime(2012, 01, 01), Y = 1.66, Y1 = 1.55, Y2 = 0.61, Y3 = 2.16 }, + new StackedLineChartData { X = new DateTime(2013, 01, 01), Y = 1.66, Y1 = 1.55, Y2 = 0.67, Y3 = 2.51 }, + new StackedLineChartData { X = new DateTime(2014, 01, 01), Y = 1.67, Y1 = 1.65, Y2 = 0.67, Y3 = 2.61 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public DateTime X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/tagHelper new file mode 100644 index 0000000000..10669485de --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-area/stack-labels/tagHelper @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..8ea72be3c1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/corner-radius.cs @@ -0,0 +1,27 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedBarChartData { X = "Jan", Y = 6, Y1 = 6, Y2 = -1 }, + new StackedBarChartData { X = "Feb", Y = 8 , Y1 = 8, Y2 = -1.5 }, + new StackedBarChartData { X = "Mar", Y = 12, Y1 = 11, Y2 = -2 }, + new StackedBarChartData { X = "Apr", Y = 15, Y1 = 16, Y2 = -2.5 }, + new StackedBarChartData { X = "May", Y = 20, Y1 = 21, Y2 = -3 }, + new StackedBarChartData { X = "Jun", Y = 24, Y1 = 25, Y2 = -3.5 }, + new StackedBarChartData { X = "Jul", Y = 28, Y1 = 27, Y2 = -4 }, + new StackedBarChartData { X = "Aug", Y = 32, Y1 = 31, Y2 = -4.5 }, + new StackedBarChartData { X = "Sep", Y = 33, Y1 = 34, Y2 = -5 }, + new StackedBarChartData { X = "Oct", Y = 35, Y1 = 34, Y2 = -5.5 }, + new StackedBarChartData { X = "Nov", Y = 40, Y1 = 41, Y2 = -6 }, + new StackedBarChartData { X = "Dec", Y = 42, Y1 = 42, Y2 = -6.5 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedBarChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/razor new file mode 100644 index 0000000000..5766dfb073 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/razor @@ -0,0 +1,16 @@ +@Html.EJS().Chart("container-vertical").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar) + .XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("Apple").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar) + .CornerRadius(cr => cr.TopRight(10).BottomRight(10)).XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Orange").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar) + .CornerRadius(cr => cr.TopRight(10).BottomRight(10)).XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("Wastage").Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Months") + ).PrimaryYAxis(py => py.Title("Percentage (%)").Minimum(-20).Maximum(100).LabelFormat("{value}%").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift) + ).Title("Sales Comparison").Render() + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/tagHelper new file mode 100644 index 0000000000..b8cf1e8339 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/corner-radius/tagHelper @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..8ea72be3c1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,27 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedBarChartData { X = "Jan", Y = 6, Y1 = 6, Y2 = -1 }, + new StackedBarChartData { X = "Feb", Y = 8 , Y1 = 8, Y2 = -1.5 }, + new StackedBarChartData { X = "Mar", Y = 12, Y1 = 11, Y2 = -2 }, + new StackedBarChartData { X = "Apr", Y = 15, Y1 = 16, Y2 = -2.5 }, + new StackedBarChartData { X = "May", Y = 20, Y1 = 21, Y2 = -3 }, + new StackedBarChartData { X = "Jun", Y = 24, Y1 = 25, Y2 = -3.5 }, + new StackedBarChartData { X = "Jul", Y = 28, Y1 = 27, Y2 = -4 }, + new StackedBarChartData { X = "Aug", Y = 32, Y1 = 31, Y2 = -4.5 }, + new StackedBarChartData { X = "Sep", Y = 33, Y1 = 34, Y2 = -5 }, + new StackedBarChartData { X = "Oct", Y = 35, Y1 = 34, Y2 = -5.5 }, + new StackedBarChartData { X = "Nov", Y = 40, Y1 = 41, Y2 = -6 }, + new StackedBarChartData { X = "Dec", Y = 42, Y1 = 42, Y2 = -6.5 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedBarChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/razor new file mode 100644 index 0000000000..61bf8783c0 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/razor @@ -0,0 +1,32 @@ +@Html.EJS().Chart("container-vertical").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar) + .XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("Apple").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar) + .XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Orange").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar) + .XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("Wastage").Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Months") + ).PrimaryYAxis(py => py.Title("Percentage (%)").Minimum(-20).Maximum(100).LabelFormat("{value}%").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift) + ).Title("Sales Comparison").PointRender("pointRender").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/tagHelper new file mode 100644 index 0000000000..10257caa74 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/point-corner-radius/tagHelper @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/razor new file mode 100644 index 0000000000..19aeaa4b0e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/razor @@ -0,0 +1,14 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).XName("X").YName("Y") + .Name("Apple").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).XName("X").YName("Y1") + .Name("Orange").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).XName("X").YName("Y2") + .Name("Wastage").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Months") +).PrimaryYAxis(py => py.Title("Percentage (%)").Minimum(-20).Maximum(100).LabelFormat("{value}%").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift) +).StackLabels(stackLabels => stackLabels.Visible(true).Fill("rgba(0, 123, 255, 0.5)").Format("{value}").Angle(45).Rx(10).Ry(10) +).Title("Sales Comparison").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs new file mode 100644 index 0000000000..6ef229a1d9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/stack-labels-cus.cs @@ -0,0 +1,27 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = "Jan", Y = 6, Y1 = 6, Y2 = -1 }, + new StackedLineChartData { X = "Feb", Y = 8 , Y1 = 8, Y2 = -1.5 }, + new StackedLineChartData { X = "Mar", Y = 12, Y1 = 11, Y2 = -2 }, + new StackedLineChartData { X = "Apr", Y = 15, Y1 = 16, Y2 = -2.5 }, + new StackedLineChartData { X = "May", Y = 20, Y1 = 21, Y2 = -3 }, + new StackedLineChartData { X = "Jun", Y = 24, Y1 = 25, Y2 = -3.5 }, + new StackedLineChartData { X = "Jul", Y = 28, Y1 = 27, Y2 = -4 }, + new StackedLineChartData { X = "Aug", Y = 32, Y1 = 31, Y2 = -4.5 }, + new StackedLineChartData { X = "Sep", Y = 33, Y1 = 34, Y2 = -5 }, + new StackedLineChartData { X = "Oct", Y = 35, Y1 = 34, Y2 = -5.5 }, + new StackedLineChartData { X = "Nov", Y = 40, Y1 = 41, Y2 = -6 }, + new StackedLineChartData { X = "Dec", Y = 42, Y1 = 42, Y2 = -6.5 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/tagHelper new file mode 100644 index 0000000000..d64a7a4155 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels-cus/tagHelper @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/razor new file mode 100644 index 0000000000..b41a281223 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/razor @@ -0,0 +1,13 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).XName("X").YName("Y") + .Name("Apple").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).XName("X").YName("Y1") + .Name("Orange").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar).XName("X").YName("Y2") + .Name("Wastage").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Months") +).PrimaryYAxis(py => py.Title("Percentage (%)").Minimum(-20).Maximum(100).LabelFormat("{value}%").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift) +).StackLabels(stackLabels => stackLabels.Visible(true)).Title("Sales Comparison").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs new file mode 100644 index 0000000000..6ef229a1d9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/stack-labels.cs @@ -0,0 +1,27 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = "Jan", Y = 6, Y1 = 6, Y2 = -1 }, + new StackedLineChartData { X = "Feb", Y = 8 , Y1 = 8, Y2 = -1.5 }, + new StackedLineChartData { X = "Mar", Y = 12, Y1 = 11, Y2 = -2 }, + new StackedLineChartData { X = "Apr", Y = 15, Y1 = 16, Y2 = -2.5 }, + new StackedLineChartData { X = "May", Y = 20, Y1 = 21, Y2 = -3 }, + new StackedLineChartData { X = "Jun", Y = 24, Y1 = 25, Y2 = -3.5 }, + new StackedLineChartData { X = "Jul", Y = 28, Y1 = 27, Y2 = -4 }, + new StackedLineChartData { X = "Aug", Y = 32, Y1 = 31, Y2 = -4.5 }, + new StackedLineChartData { X = "Sep", Y = 33, Y1 = 34, Y2 = -5 }, + new StackedLineChartData { X = "Oct", Y = 35, Y1 = 34, Y2 = -5.5 }, + new StackedLineChartData { X = "Nov", Y = 40, Y1 = 41, Y2 = -6 }, + new StackedLineChartData { X = "Dec", Y = 42, Y1 = 42, Y2 = -6.5 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/tagHelper new file mode 100644 index 0000000000..5b4f788fa1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar/stack-labels/tagHelper @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..13e8e984ef --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/corner-radius.cs @@ -0,0 +1,25 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedBarChartData { X = 2000, Y = 0.61, Y1 = 0.03, Y2 = 0.48}, + new StackedBarChartData { X = 2001, Y = 0.81, Y1 = 0.05, Y2 = 0.53 }, + new StackedBarChartData { X = 2002, Y = 0.91, Y1 = 0.06, Y2 = 0.57 }, + new StackedBarChartData { X = 2003, Y = 1, Y1 = 0.09, Y2 = 0.61 }, + new StackedBarChartData { X = 2004, Y = 1.19, Y1 = 0.14, Y2 = 0.63 }, + new StackedBarChartData { X = 2005, Y = 1.47, Y1 = 0.20, Y2 = 0.64 }, + new StackedBarChartData { X = 2006, Y = 1.74, Y1 = 0.29, Y2 = 0.66 }, + new StackedBarChartData { X = 2007, Y = 1.98, Y1 = 0.46, Y2 = 0.76 }, + new StackedBarChartData { X = 2008, Y = 1.99, Y1 = 0.64, Y2 = 0.77 }, + new StackedBarChartData { X = 2009, Y = 1.70, Y1 = 0.75, Y2 = 0.55 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedBarChartData + { + public double X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/razor new file mode 100644 index 0000000000..cf137cb909 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/razor @@ -0,0 +1,26 @@ +@Html.EJS().Chart("container-vertical").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100) + .XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("Apple").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100) + .XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Orange").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100) + .CornerRadius(cr => cr.BottomRight(10).TopRight(10)).XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("Wastage").Add(); + } + ).PrimaryXAxis(px => px.Title("Years") + ).PrimaryYAxis(py => py.Title("Percentage (%)").LabelFormat("{value}%") + ).LegendSettings(lg => lg.Visible(false)).Title("Sales Comparison").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/tagHelper new file mode 100644 index 0000000000..4eef994a6c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/corner-radius/tagHelper @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..13e8e984ef --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,25 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedBarChartData { X = 2000, Y = 0.61, Y1 = 0.03, Y2 = 0.48}, + new StackedBarChartData { X = 2001, Y = 0.81, Y1 = 0.05, Y2 = 0.53 }, + new StackedBarChartData { X = 2002, Y = 0.91, Y1 = 0.06, Y2 = 0.57 }, + new StackedBarChartData { X = 2003, Y = 1, Y1 = 0.09, Y2 = 0.61 }, + new StackedBarChartData { X = 2004, Y = 1.19, Y1 = 0.14, Y2 = 0.63 }, + new StackedBarChartData { X = 2005, Y = 1.47, Y1 = 0.20, Y2 = 0.64 }, + new StackedBarChartData { X = 2006, Y = 1.74, Y1 = 0.29, Y2 = 0.66 }, + new StackedBarChartData { X = 2007, Y = 1.98, Y1 = 0.46, Y2 = 0.76 }, + new StackedBarChartData { X = 2008, Y = 1.99, Y1 = 0.64, Y2 = 0.77 }, + new StackedBarChartData { X = 2009, Y = 1.70, Y1 = 0.75, Y2 = 0.55 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedBarChartData + { + public double X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/razor new file mode 100644 index 0000000000..15590d8c23 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/razor @@ -0,0 +1,32 @@ +@Html.EJS().Chart("container-vertical").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100) + .XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("Apple").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100) + .XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Orange").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingBar100) + .XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("Wastage").Add(); + } + ).PrimaryXAxis(px => px.Title("Years") + ).PrimaryYAxis(py => py.Title("Percentage (%)").LabelFormat("{value}%") + ).LegendSettings(lg => lg.Visible(false)).Title("Sales Comparison").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/tagHelper new file mode 100644 index 0000000000..f342b25d6c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-bar100/point-corner-radius/tagHelper @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..f175144d9b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/corner-radius.cs @@ -0,0 +1,23 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedColumnChartData { X = "2014", Y = -111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, + new StackedColumnChartData { X = "2015", Y = 127.3, Y1 = 99.5, Y2 = 79.3, Y3 = 38.2 }, + new StackedColumnChartData { X = "2016", Y = -143.4, Y1 = 121.7, Y2 = 91.3, Y3 = 44.0 }, + new StackedColumnChartData { X = "2017", Y = 159.9, Y1 = 142.5, Y2 = 102.4, Y3 = 51.6 }, + new StackedColumnChartData { X = "2018", Y = -175.4, Y1 = 166.7, Y2 = 112.9, Y3 = 61.9 }, + new StackedColumnChartData { X = "2019", Y = 189.0, Y1 = 182.9, Y2 = 122.4, Y3 = 71.5 }, + new StackedColumnChartData { X = "2020", Y = -202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedColumnChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/razor new file mode 100644 index 0000000000..c04028d3af --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/razor @@ -0,0 +1,24 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y") + .Name("UK").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y1") + .Name("Germany").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y2") + .Name("France").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y3") + .Name("Italy").CornerRadius(cr => cr.TopLeft(10).TopRight(10)).DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Years").Interval(1) +).PrimaryYAxis(py => py.Title("Sales in Billions").Minimum(0).Maximum(700).Interval(100).LabelFormat("{value}B") +).Title("Mobile Game Market by Country").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/tagHelper new file mode 100644 index 0000000000..dd614f3c34 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/corner-radius/tagHelper @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..37e0cb9e83 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,23 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedColumnChartData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, + new StackedColumnChartData { X = "2015", Y = 127.3, Y1 = 99.5, Y2 = 79.3, Y3 = 38.2 }, + new StackedColumnChartData { X = "2016", Y = 143.4, Y1 = 121.7, Y2 = 91.3, Y3 = 44.0 }, + new StackedColumnChartData { X = "2017", Y = 159.9, Y1 = 142.5, Y2 = 102.4, Y3 = 51.6 }, + new StackedColumnChartData { X = "2018", Y = 175.4, Y1 = 166.7, Y2 = 112.9, Y3 = 61.9 }, + new StackedColumnChartData { X = "2019", Y = 189.0, Y1 = 182.9, Y2 = 122.4, Y3 = 71.5 }, + new StackedColumnChartData { X = "2020", Y = 202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedColumnChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/razor new file mode 100644 index 0000000000..3a5245f59e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/razor @@ -0,0 +1,30 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("UK").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Germany").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("France").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y3").DataSource(ViewBag.dataSource) + .Name("Italy").Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Years").Interval(1) +).PrimaryYAxis(py => py.Title("Sales in Billions").Minimum(0).Maximum(700).Interval(100).LabelFormat("{value}B") +).Title("Mobile Game Market by Country").PointRender("pointRender").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/tagHelper new file mode 100644 index 0000000000..5f3b9a8b67 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/point-corner-radius/tagHelper @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/razor new file mode 100644 index 0000000000..6ebb7081a3 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/razor @@ -0,0 +1,16 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y") + .Name("UK").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y1") + .Name("Germany").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y2") + .Name("France").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y3") + .Name("Italy").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Years").Interval(1) +).PrimaryYAxis(py => py.Title("Sales in Billions").Minimum(0).Maximum(700).Interval(100).LabelFormat("{value}B") +).StackLabels(stackLabels => stackLabels.Visible(true).Fill("rgba(0, 123, 255, 0.5)").Format("{value}").Angle(45).Rx(10).Ry(10) +).Title("Mobile Game Market by Country").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs new file mode 100644 index 0000000000..4da2bdb5c5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/stack-labels-cus.cs @@ -0,0 +1,23 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedColumnChartData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, + new StackedColumnChartData { X = "2015", Y = 127.3, Y1 = 99.5, Y2 = 79.3, Y3 = 38.2 }, + new StackedColumnChartData { X = "2016", Y = 143.4, Y1 = 121.7, Y2 = 91.3, Y3 = 44.0 }, + new StackedColumnChartData { X = "2017", Y = 159.9, Y1 = 142.5, Y2 = 102.4, Y3 = 51.6 }, + new StackedColumnChartData { X = "2018", Y = 175.4, Y1 = 166.7, Y2 = 112.9, Y3 = 61.9 }, + new StackedColumnChartData { X = "2019", Y = 189.0, Y1 = 182.9, Y2 = 122.4, Y3 = 71.5 }, + new StackedColumnChartData { X = "2020", Y = 202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedColumnChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/tagHelper new file mode 100644 index 0000000000..fce7ec5fd1 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels-cus/tagHelper @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/razor new file mode 100644 index 0000000000..76e9af3859 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/razor @@ -0,0 +1,15 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y") + .Name("UK").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y1") + .Name("Germany").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y2") + .Name("France").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn).XName("X").YName("Y3") + .Name("Italy").Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Title("Years").Interval(1) +).PrimaryYAxis(py => py.Title("Sales in Billions").Minimum(0).Maximum(700).Interval(100).LabelFormat("{value}B") +).StackLabels(stackLabels => stackLabels.Visible(true)).Title("Mobile Game Market by Country").Render() + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs new file mode 100644 index 0000000000..4da2bdb5c5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/stack-labels.cs @@ -0,0 +1,23 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedColumnChartData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, + new StackedColumnChartData { X = "2015", Y = 127.3, Y1 = 99.5, Y2 = 79.3, Y3 = 38.2 }, + new StackedColumnChartData { X = "2016", Y = 143.4, Y1 = 121.7, Y2 = 91.3, Y3 = 44.0 }, + new StackedColumnChartData { X = "2017", Y = 159.9, Y1 = 142.5, Y2 = 102.4, Y3 = 51.6 }, + new StackedColumnChartData { X = "2018", Y = 175.4, Y1 = 166.7, Y2 = 112.9, Y3 = 61.9 }, + new StackedColumnChartData { X = "2019", Y = 189.0, Y1 = 182.9, Y2 = 122.4, Y3 = 71.5 }, + new StackedColumnChartData { X = "2020", Y = 202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedColumnChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/tagHelper new file mode 100644 index 0000000000..96eb3a0609 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column/stack-labels/tagHelper @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..e72a70afee --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/corner-radius.cs @@ -0,0 +1,23 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedColumnChartData { X = new DateTime(2006, 01, 01), Y = 900, Y1 = 190, Y2 = 250, Y3 = 150 }, + new StackedColumnChartData { X = new DateTime(2007, 01, 01), Y = 544, Y1 = 226, Y2 = 145, Y3 = 120 }, + new StackedColumnChartData { X = new DateTime(2008, 01, 01), Y = 880, Y1 = 194, Y2 = 190, Y3 = 115 }, + new StackedColumnChartData { X = new DateTime(2009, 01, 01), Y = 675, Y1 = 250, Y2 = 220, Y3 = 125 }, + new StackedColumnChartData { X = new DateTime(2010, 01, 01), Y = 765, Y1 = 222, Y2 = 225, Y3 = 132 }, + new StackedColumnChartData { X = new DateTime(2011, 01, 01), Y = 679, Y1 = 181, Y2 = 135, Y3 = 137 }, + new StackedColumnChartData { X = new DateTime(2012, 01, 01), Y = 770, Y1 = 128, Y2 = 152, Y3 = 110 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedColumnChartData + { + public DateTime X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/razor new file mode 100644 index 0000000000..a5881c38c7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/razor @@ -0,0 +1,30 @@ +@Html.EJS().Chart("container-vertical").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("UK").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Germany").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("France").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .CornerRadius(cr => cr.TopLeft(10).TopRight(10)).XName("X").YName("Y3").DataSource(ViewBag.dataSource) + .Name("Italy").Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).Title("Years").Interval(1).LabelFormat("y") + ).PrimaryYAxis(py => py.Title("GDP (%) Per Annum").LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None) + ).Title("Gross Domestic Product Growth").PointRender("pointRender").Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/tagHelper new file mode 100644 index 0000000000..b81f507705 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/corner-radius/tagHelper @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..e72a70afee --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,23 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedColumnChartData { X = new DateTime(2006, 01, 01), Y = 900, Y1 = 190, Y2 = 250, Y3 = 150 }, + new StackedColumnChartData { X = new DateTime(2007, 01, 01), Y = 544, Y1 = 226, Y2 = 145, Y3 = 120 }, + new StackedColumnChartData { X = new DateTime(2008, 01, 01), Y = 880, Y1 = 194, Y2 = 190, Y3 = 115 }, + new StackedColumnChartData { X = new DateTime(2009, 01, 01), Y = 675, Y1 = 250, Y2 = 220, Y3 = 125 }, + new StackedColumnChartData { X = new DateTime(2010, 01, 01), Y = 765, Y1 = 222, Y2 = 225, Y3 = 132 }, + new StackedColumnChartData { X = new DateTime(2011, 01, 01), Y = 679, Y1 = 181, Y2 = 135, Y3 = 137 }, + new StackedColumnChartData { X = new DateTime(2012, 01, 01), Y = 770, Y1 = 128, Y2 = 152, Y3 = 110 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedColumnChartData + { + public DateTime X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/razor new file mode 100644 index 0000000000..8318501bf6 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/razor @@ -0,0 +1,36 @@ +@Html.EJS().Chart("container-vertical").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y").DataSource(ViewBag.dataSource) + .Name("UK").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y1").DataSource(ViewBag.dataSource) + .Name("Germany").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y2").DataSource(ViewBag.dataSource) + .Name("France").Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn100) + .XName("X").YName("Y3").DataSource(ViewBag.dataSource) + .Name("Italy").Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).Title("Years").Interval(1).LabelFormat("y") + ).PrimaryYAxis(py => py.Title("GDP (%) Per Annum").LabelFormat("{value}%").RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None) + ).Title("Gross Domestic Product Growth").PointRender("pointRender").Render() + + + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/tagHelper new file mode 100644 index 0000000000..8eb8568863 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-column100/point-corner-radius/tagHelper @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/razor new file mode 100644 index 0000000000..9c468d9eca --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/razor @@ -0,0 +1,19 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y") + .Name("John").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y1") + .Name("Peter").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y2") + .Name("Steve").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y3") + .Name("Charle").DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Interval(1) +).PrimaryYAxis(py => py.Title("Expense").Interval(100).LabelFormat("${value}")).ChartArea(area => area.Border(br => br.Width(0)) +).StackLabels(stackLabels => stackLabels.Visible(true).Fill("rgba(0, 123, 255, 0.5)").Format("{value}").Angle(45).Rx(10).Ry(10) +).Tooltip(tt => tt.Enable(true)).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs new file mode 100644 index 0000000000..f4bdcbc39a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/stack-labels-cus.cs @@ -0,0 +1,28 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = "Food", Y = 90, Y1 = 40, Y2 = 70, Y3 = 120 }, + new StackedLineChartData { X = "Transport", Y = 80, Y1 = 90, Y2 = 110, Y3 = 70 }, + new StackedLineChartData { X = "Medical", Y = 50, Y1 = 80, Y2 = 120, Y3 = 50 }, + new StackedLineChartData { X = "Clothes", Y = 70, Y1 = 30, Y2 = 60, Y3 = 180 }, + new StackedLineChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2 = 80, Y3 = 30 }, + new StackedLineChartData { X = "Books", Y = 10, Y1 = 40, Y2 = 30, Y3 = 270 }, + new StackedLineChartData { X = "Fitness", Y = 100,Y1 = 30, Y2 = 70, Y3 = 40 }, + new StackedLineChartData { X = "Electricity", Y = 55, Y1 = 95, Y2 = 55, Y3 = 75 }, + new StackedLineChartData { X = "Tax", Y = 20, Y1 = 50, Y2 = 40, Y3 = 65 }, + new StackedLineChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2 = 80, Y3 = 95 }, + new StackedLineChartData { X = "Education", Y = 45, Y1 = 15, Y2 = 45, Y3 = 195 }, + new StackedLineChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2 = 65, Y3 = 115 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/tagHelper new file mode 100644 index 0000000000..b2e56b3c16 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels-cus/tagHelper @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/razor new file mode 100644 index 0000000000..806066641d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/razor @@ -0,0 +1,18 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y") + .Name("John").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y1") + .Name("Peter").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y2") + .Name("Steve").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingLine) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y3") + .Name("Charle").DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).Interval(1) +).PrimaryYAxis(py => py.Title("Expense").Interval(100).LabelFormat("${value}")).ChartArea(area => area.Border(br => br.Width(0)) +).StackLabels(stackLabels => stackLabels.Visible(true)).Tooltip(tt => tt.Enable(true)).Render() + diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs new file mode 100644 index 0000000000..f4bdcbc39a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/stack-labels.cs @@ -0,0 +1,28 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = "Food", Y = 90, Y1 = 40, Y2 = 70, Y3 = 120 }, + new StackedLineChartData { X = "Transport", Y = 80, Y1 = 90, Y2 = 110, Y3 = 70 }, + new StackedLineChartData { X = "Medical", Y = 50, Y1 = 80, Y2 = 120, Y3 = 50 }, + new StackedLineChartData { X = "Clothes", Y = 70, Y1 = 30, Y2 = 60, Y3 = 180 }, + new StackedLineChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2 = 80, Y3 = 30 }, + new StackedLineChartData { X = "Books", Y = 10, Y1 = 40, Y2 = 30, Y3 = 270 }, + new StackedLineChartData { X = "Fitness", Y = 100,Y1 = 30, Y2 = 70, Y3 = 40 }, + new StackedLineChartData { X = "Electricity", Y = 55, Y1 = 95, Y2 = 55, Y3 = 75 }, + new StackedLineChartData { X = "Tax", Y = 20, Y1 = 50, Y2 = 40, Y3 = 65 }, + new StackedLineChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2 = 80, Y3 = 95 }, + new StackedLineChartData { X = "Education", Y = 45, Y1 = 15, Y2 = 45, Y3 = 195 }, + new StackedLineChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2 = 65, Y3 = 115 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public string X; + public double Y; + public double Y1; + public double Y2; + public double Y3; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/tagHelper new file mode 100644 index 0000000000..a7214dae6a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-line/stack-labels/tagHelper @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/razor new file mode 100644 index 0000000000..488dd4cf0a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/razor @@ -0,0 +1,15 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y") + .Name("Organic").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y1") + .Name("Fair-trade").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y2") + .Name("Others").DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.Title("Years").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorTickLines(mt=>mt.Width(0)) +).PrimaryYAxis(py => py.Title("Spend in Billions").Minimum(0).Maximum(4).Interval(1).LabelFormat("{value}B").MajorTickLines(mt=>mt.Width(0)) +).StackLabels(stackLabels => stackLabels.Visible(true).Fill("rgba(0, 123, 255, 0.5)").Format("{value}").Angle(45).Rx(10).Ry(10) +).Title("Trend in Sales of Ethical Produce").Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs new file mode 100644 index 0000000000..14ceedcad2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/stack-labels-cus.cs @@ -0,0 +1,25 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = 2000, Y = 0.61, Y1 = 0.03, Y2 = 0.48 }, + new StackedLineChartData { X = 2001, Y = 0.81, Y1 = 0.05, Y2 = 0.53 }, + new StackedLineChartData { X = 2002, Y = 0.91, Y1 = 0.06, Y2 = 0.57 }, + new StackedLineChartData { X = 2003, Y = 1, Y1 = 0.09, Y2 = 0.61 }, + new StackedLineChartData { X = 2004, Y = 1.19, Y1 = 0.14, Y2 = 0.63 }, + new StackedLineChartData { X = 2005, Y = 1.47, Y1 = 0.20, Y2 = 0.64 }, + new StackedLineChartData { X = 2006, Y = 1.74, Y1 = 0.29, Y2 = 0.66 }, + new StackedLineChartData { X = 2007, Y = 1.98, Y1 = 0.46, Y2 = 0.76 }, + new StackedLineChartData { X = 2008, Y = 1.99, Y1 = 0.64, Y2 = 0.77 }, + new StackedLineChartData { X = 2009, Y = 1.70, Y1 = 0.75, Y2 = 0.55 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public double X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/tagHelper new file mode 100644 index 0000000000..d0f28d9504 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels-cus/tagHelper @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/razor b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/razor new file mode 100644 index 0000000000..c65336352e --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/razor @@ -0,0 +1,14 @@ +@Html.EJS().Chart("container-vertical").Series(series => +{ + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y") + .Name("Organic").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y1") + .Name("Fair-trade").DataSource(ViewBag.dataSource).Add(); + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StackingStepArea) + .Marker(mr=> mr.DataLabel(dl=>dl.Visible(true))).XName("X").YName("Y2") + .Name("Others").DataSource(ViewBag.dataSource).Add(); +}).PrimaryXAxis(px => px.Title("Years").EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).MajorTickLines(mt=>mt.Width(0)) +).PrimaryYAxis(py => py.Title("Spend in Billions").Minimum(0).Maximum(4).Interval(1).LabelFormat("{value}B").MajorTickLines(mt=>mt.Width(0)) +).StackLabels(stackLabels => stackLabels.Visible(true)).Title("Trend in Sales of Ethical Produce").Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs new file mode 100644 index 0000000000..14ceedcad2 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/stack-labels.cs @@ -0,0 +1,25 @@ +public ActionResult Index() + { + List chartData = new List + { + new StackedLineChartData { X = 2000, Y = 0.61, Y1 = 0.03, Y2 = 0.48 }, + new StackedLineChartData { X = 2001, Y = 0.81, Y1 = 0.05, Y2 = 0.53 }, + new StackedLineChartData { X = 2002, Y = 0.91, Y1 = 0.06, Y2 = 0.57 }, + new StackedLineChartData { X = 2003, Y = 1, Y1 = 0.09, Y2 = 0.61 }, + new StackedLineChartData { X = 2004, Y = 1.19, Y1 = 0.14, Y2 = 0.63 }, + new StackedLineChartData { X = 2005, Y = 1.47, Y1 = 0.20, Y2 = 0.64 }, + new StackedLineChartData { X = 2006, Y = 1.74, Y1 = 0.29, Y2 = 0.66 }, + new StackedLineChartData { X = 2007, Y = 1.98, Y1 = 0.46, Y2 = 0.76 }, + new StackedLineChartData { X = 2008, Y = 1.99, Y1 = 0.64, Y2 = 0.77 }, + new StackedLineChartData { X = 2009, Y = 1.70, Y1 = 0.75, Y2 = 0.55 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class StackedLineChartData + { + public double X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/tagHelper new file mode 100644 index 0000000000..9cefd680b9 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/stacked-steparea/stack-labels/tagHelper @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs new file mode 100644 index 0000000000..d70406e818 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/corner-radius.cs @@ -0,0 +1,24 @@ +public ActionResult Index() + { + List chartData = new List + { + new WaterfallChartData { X = "Income", Y = 4711 }, + new WaterfallChartData { X = "Sales", Y = -1015 }, + new WaterfallChartData { X = "Development", Y = -688 }, + new WaterfallChartData { X = "Revenue", Y = 1030 }, + new WaterfallChartData { X = "Balance" }, + new WaterfallChartData { X = "Administrative", Y = -780 }, + new WaterfallChartData { X = "Expense", Y = -361 }, + new WaterfallChartData { X = "Tax", Y = -695 }, + new WaterfallChartData { X = "Net Profit" } + }; + ViewBag.dataSource = chartData; + ViewData["intermediateSumIndexes"] = new int[] {4}; + ViewData["sumIndexes"] = new int[] {8}; + return View(); + } + public class WaterfallChartData + { + public string X; + public double Y; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/razor new file mode 100644 index 0000000000..5071f94d20 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/razor @@ -0,0 +1,25 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall). + XName("X"). + YName("Y"). + IntermediateSumIndexes((int[])ViewData["intermediateSumIndexes"]). + SumIndexes((int[])ViewData["sumIndexes"]). + CornerRadius(cr => cr.TopLeft(10).TopRight(10)). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(py => + py.ValueType(Syncfusion.EJ2.Charts.ValueType.Category) + ).PointRender("pointRender").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/tagHelper new file mode 100644 index 0000000000..b0b01238ec --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/corner-radius/tagHelper @@ -0,0 +1,25 @@ +@{ + var intermediateSumIndexes = new int[] {4}; + var sumIndexes = new int[] {8}; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs new file mode 100644 index 0000000000..d70406e818 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/point-corner-radius.cs @@ -0,0 +1,24 @@ +public ActionResult Index() + { + List chartData = new List + { + new WaterfallChartData { X = "Income", Y = 4711 }, + new WaterfallChartData { X = "Sales", Y = -1015 }, + new WaterfallChartData { X = "Development", Y = -688 }, + new WaterfallChartData { X = "Revenue", Y = 1030 }, + new WaterfallChartData { X = "Balance" }, + new WaterfallChartData { X = "Administrative", Y = -780 }, + new WaterfallChartData { X = "Expense", Y = -361 }, + new WaterfallChartData { X = "Tax", Y = -695 }, + new WaterfallChartData { X = "Net Profit" } + }; + ViewBag.dataSource = chartData; + ViewData["intermediateSumIndexes"] = new int[] {4}; + ViewData["sumIndexes"] = new int[] {8}; + return View(); + } + public class WaterfallChartData + { + public string X; + public double Y; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/razor b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/razor new file mode 100644 index 0000000000..e7e6713014 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/razor @@ -0,0 +1,30 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Waterfall). + XName("X"). + YName("Y"). + IntermediateSumIndexes((int[])ViewData["intermediateSumIndexes"]). + SumIndexes((int[])ViewData["sumIndexes"]). + DataSource(ViewBag.dataSource). + Add(); + } + ).PrimaryXAxis(py => + py.ValueType(Syncfusion.EJ2.Charts.ValueType.Category) + ).PointRender("pointRender").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/tagHelper new file mode 100644 index 0000000000..5ca8f3012b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/series/waterfall/point-corner-radius/tagHelper @@ -0,0 +1,30 @@ +@{ + var intermediateSumIndexes = new int[] {4}; + var sumIndexes = new int[] {8}; +} + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs new file mode 100644 index 0000000000..c33c5b3747 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/highlight-category.cs @@ -0,0 +1,21 @@ +public ActionResult Index() + { + List chartData = new List + { + new HighLightCategoryData { Country = "USA", Gold = 50 }, + new HighLightCategoryData { Country = "China", Gold = 40 }, + new HighLightCategoryData { Country = "Japan", Gold = 70 }, + new HighLightCategoryData { Country = "Australia", Gold = 60 }, + new HighLightCategoryData { Country = "France", Gold = 50 }, + new HighLightCategoryData { Country = "Germany", Gold = 40 }, + new HighLightCategoryData { Country = "Italy", Gold = 40 }, + new HighLightCategoryData { Country = "Sweden", Gold = 30 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class HighLightCategoryData + { + public string Country; + public double Gold; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/razor b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/razor new file mode 100644 index 0000000000..7fa05dabe8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/razor @@ -0,0 +1,10 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column) + .XName("Country") + .YName("Gold") + .DataSource(ViewBag.dataSource) + .Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category) + ).Crosshair(cr=>cr.Enable(true).Line(l=>l.Color("red")).LineType(Syncfusion.EJ2.Charts.LineType.Vertical).HighlightCategory(true)).Render() \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/tagHelper new file mode 100644 index 0000000000..7032198eb5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/crosshair-trackball/highlight-category/tagHelper @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs new file mode 100644 index 0000000000..ffe82ed1a7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/nearest-tooltip.cs @@ -0,0 +1,23 @@ +public IActionResult Index() + { + List chartData = new List + { + new ColumnChartData { X = new DateTime(1975, 01, 01), Y = 16, Y1 = 10, Y2 = 4.5 }, + new ColumnChartData { X = new DateTime(1980, 01, 01), Y = 12.5, Y1 = 7.5, Y2 = 5 }, + new ColumnChartData { X = new DateTime(1985, 01, 01), Y = 19, Y1 = 11, Y2 = 6.5 }, + new ColumnChartData { X = new DateTime(1990, 01, 01), Y = 14.4, Y1 = 7, Y2 = 4.4 }, + new ColumnChartData { X = new DateTime(1995, 01, 01), Y = 11.5, Y1 = 8, Y2 = 5 }, + new ColumnChartData { X = new DateTime(2000, 01, 01), Y = 14, Y1 = 6, Y2 = 1.5 }, + new ColumnChartData { X = new DateTime(2005, 01, 01), Y = 10, Y1 = 3.5, Y2 = 2.5 }, + new ColumnChartData { X = new DateTime(2010, 01, 01), Y = 16, Y1 = 7, Y2 = 3.7 } + }; + ViewBag.dataSource = chartData; + return View(); + } + public class ColumnChartData + { + public DateTime X; + public double Y; + public double Y1; + public double Y2; + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/razor b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/razor new file mode 100644 index 0000000000..f18ae9551b --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/razor @@ -0,0 +1,33 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine) + .XName("X") + .YName("Y") + .Marker(mr => mr.Visible(true).Width(10).Height(10)) + .Name("China") + .Width(2) + .DataSource(ViewBag.dataSource) + .Add(); + + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine) + .XName("X") + .YName("Y1") + .Marker(mr => mr.Visible(true).Width(10).Height(10)) + .Name("Australia") + .Width(2) + .DataSource(ViewBag.dataSource) + .Add(); + + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.StepLine) + .XName("X") + .YName("Y2") + .Marker(mr => mr.Visible(true).Width(10).Height(10)) + .Name("Japan") + .Width(2) + .DataSource(ViewBag.dataSource) + .Add(); + } + ).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift).Title("Years").LabelFormat("y").IntervalType(Syncfusion.EJ2.Charts.IntervalType.Years).LineStyle(ls=>ls.Width(0)) + ).PrimaryYAxis(py => py.Title("Percentage (%)").LabelFormat("{value}%").Minimum(0).Maximum(20).Interval(4) + ).LegendSettings(leg => leg.Visible(true)).Title("Unemployment Rates 1975-2010").Tooltip(tt => tt.Enable(true).EnableHighlight(true).ShowNearestTooltip(true)).Render() + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/tagHelper new file mode 100644 index 0000000000..bb6006a9cf --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/tooltip/nearest-tooltip/tagHelper @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/position.cs b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/position.cs new file mode 100644 index 0000000000..3dcb62bd37 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/position.cs @@ -0,0 +1,4 @@ +public IActionResult Index() + { + return View(); + } \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/razor b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/razor new file mode 100644 index 0000000000..8705814e9c --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/razor @@ -0,0 +1,33 @@ +@Html.EJS().Chart("container").Series(series => + { + series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Area) + .Name("Product X") + .XName("x") + .YName("y") + .Border(br => br.Width(0.5).Color("#00bdae")) + .Animation(an => an.Enable(false)) + .DataSource("series1") + .Add(); + } + ).PrimaryXAxis(px => px.ScrollbarSettings(scroll => scroll.Enable(true).EnableZoom(false).Height(14).TrackRadius(8).ScrollbarRadius(8).GripColor("transparent").TrackColor("yellow").ScrollbarColor("red").Position(Syncfusion.EJ2.Charts.ScrollbarPosition.Bottom)). + ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).ZoomFactor(0.2).ZoomPosition(0.6) + ).PrimaryYAxis(py => py.ScrollbarSettings(scroll => scroll.Enable(true).EnableZoom(false).Height(14).TrackRadius(8).ScrollbarRadius(8).GripColor("transparent").TrackColor("yellow").ScrollbarColor("red").Position(Syncfusion.EJ2.Charts.ScrollbarPosition.Right)) + ).LegendSettings(legend => legend.Visible(false) + ).ZoomSettings(z => z.EnableScrollbar(true).EnableSelectionZooming(true).Mode(Syncfusion.EJ2.Charts.ZoomMode.X)).Title("Sales History of Product X").Render() + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/tagHelper new file mode 100644 index 0000000000..f75b08e3ce --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/chart/user-interaction/zoom/position/tagHelper @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file