diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/annotation.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/annotation.md index d2f0a17436..9697026ca2 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/annotation.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/annotation.md @@ -1,6 +1,6 @@ --- layout: post -title: Annotation in ##Platform_Name## Accumulation Chart Component +title: Annotation in ##Platform_Name## Accumulation Chart Component | Syncfusion description: Learn here all about Annotation in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Annotation @@ -9,7 +9,7 @@ documentation: ug --- -# Annotation +# Annotation in ##Platform_Name## Accumulation Chart Component The annotations are used to mark the specific area of interest in the chart area with texts, shapes or images. @@ -23,8 +23,13 @@ By using the content option of annotation property, you can specify {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/annotation/annotation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Annotation.cs" %} -{% include code-snippet/chart/accumulation-charts/annotation/annotation/annotation.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -52,8 +57,13 @@ The annotation can be placed with respect to either `Series` or `Chart`. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/annotation/region/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Region.cs" %} -{% include code-snippet/chart/accumulation-charts/annotation/region/region.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string x; + public double y; +} {% endhighlight %} {% endtabs %} @@ -81,8 +91,13 @@ Specifies the coordinate units of an annotation either in `Pixel` or `Point`. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/annotation/co-ordinate/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Co-ordinate.cs" %} -{% include code-snippet/chart/accumulation-charts/annotation/co-ordinate/co-ordinate.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string x; + public double y; +} {% endhighlight %} {% endtabs %} @@ -110,8 +125,13 @@ The annotations can be moved vertically and horizontally from its default positi {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/annotation/alignment/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Alignment.cs" %} -{% include code-snippet/chart/accumulation-charts/annotation/alignment/alignment.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string x; + public double y; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/center-label.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/center-label.md index 8070dd2ed8..870c341200 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/center-label.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/center-label.md @@ -19,7 +19,13 @@ Using [`centerLabel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.E {% include code-snippet/chart/accumulation-charts/chart-print/centerlabel/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Centerlabel.cs" %} -{% include code-snippet/chart/accumulation-charts/chart-print/centerlabel/centerlabel.cs %} +... +public class PieChartData +{ + public string x; + public double y; + public string text; +} {% endhighlight %} {% endtabs %} @@ -31,8 +37,14 @@ The default text in the center label can be changed when the mouse pointer hover {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/chart-print/hovertext/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Hovertext.cs" %} -{% include code-snippet/chart/accumulation-charts/chart-print/hovertext/hovertext.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string x; + public double y; + public string text; +} {% endhighlight %} {% endtabs %} @@ -44,8 +56,14 @@ Customize the center label text using the [`textStyle`](https://help.syncfusion. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/chart-print/customization/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Customization.cs" %} -{% include code-snippet/chart/accumulation-charts/chart-print/customization/customization.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string x; + public double y; + public string text; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/data-label.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/data-label.md index c8e9cab947..da593b2be6 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/data-label.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/data-label.md @@ -17,8 +17,15 @@ Data label can be added to a chart series by enabling the [`visible`](https://h {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/default/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/default/default.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -30,8 +37,15 @@ Accumulation chart provides support for placing the data label either `inside` o {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/position/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Position.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/position/position.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -43,8 +57,15 @@ Data labels will be arranged smartly without overlapping with each other. You ca {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/smartlabels/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Smartlabels.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/smartlabels/smartlabels.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -56,8 +77,15 @@ Label content can be formatted by using the template option. Inside the template {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/template/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Template.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/template/template.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -69,8 +97,15 @@ Connector line will be visible when the data label is placed `outside` the chart {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/connector/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Connector.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/connector/connector.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -83,8 +118,15 @@ Text from the data source can be mapped to data label using `name` property. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/map/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Map.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/map/map.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -97,8 +139,15 @@ Data label for the accumulation chart can be formatted using [`format`](https:// {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/format/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="format.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/format/format.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -167,8 +216,15 @@ Individual text can be customized using the `textRender` event. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/custom/custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -180,8 +236,15 @@ When the data label text exceeds the container, the text can be wrapped by using {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/textwrap/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Textwrap.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/textwrap/textwrap.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string x; + public double y; + public string text; + public string tooltipMappingName; +} {% endhighlight %} {% endtabs %} @@ -197,8 +260,15 @@ You can customize the data label of pie chart using [TextRender](https://help.sy {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/percentage/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Percentage.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/percentage/percentage.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -210,8 +280,15 @@ You can display the percentage values in data label of pie chart using `template {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/datalabel/template-percentage/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Template-percentage.cs" %} -{% include code-snippet/chart/accumulation-charts/datalabel/template-percentage/template-percentage.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md index 2f605ed8d0..5698d28a61 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/empty-points.md @@ -1,6 +1,6 @@ --- layout: post -title: Empty Points in ##Platform_Name## Accumulation Chart Component +title: Empty Points in ##Platform_Name## Accumulation Chart Component | Syncfusion description: Learn here all about Empty Points in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Empty Points @@ -9,7 +9,7 @@ documentation: ug --- -# Empty Points +# Empty Points in ##Platform_Name## Accumulation Chart Component The data points those uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and not plotted in the chart. You can customize those points, using the `emptyPointSettings` property in series. The default mode of the empty point is `Gap`. Other supported modes are `Average` and `Zero`. @@ -19,8 +19,13 @@ The data points those uses the `null` or `undefined` as value are considered as {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/empty-points/empty/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Empty.cs" %} -{% include code-snippet/chart/accumulation-charts/empty-points/empty/empty.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class EmptyPointsChartData +{ + public string xValue; + public Nullable yValue; +} {% endhighlight %} {% endtabs %} @@ -48,8 +53,13 @@ Specific color for an empty point can be set by using the `fill` property in `em {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/empty-points/custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/empty-points/custom/custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class EmptyPointsChartData +{ + public string xValue; + public Nullable yValue; +} {% endhighlight %} {% endtabs %} 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 a928ccb2a1..3f31b28b71 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 @@ -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`. @@ -19,8 +19,13 @@ To render a funnel series, use the series [`type`](https://help.syncfusion.com/c {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/default/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/default/default.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -48,8 +53,13 @@ The size of the funnel chart can be customized by using the `width` and `height` {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Size.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/size/size.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -77,8 +87,13 @@ The funnel's neck size can be customized by using the `neckWidth` and `neckHeigh {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/neck-size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Neck-size.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/neck-size/neck-size.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -106,8 +121,13 @@ Funnel chart provides options to customize the space between the segments by usi {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/gap/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Gap.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/gap/gap.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -135,8 +155,13 @@ Points can be exploded on mouse click by setting the `explode` property to true. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/explode/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Explode.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/explode/explode.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -164,8 +189,14 @@ It provides the data label smart arrangement of the funnel and pyramid series. T {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/data-label/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Data-label.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/data-label/data-label.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -193,8 +224,13 @@ Individual points can be customized using the `pointRender` event. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/funnel/custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/funnel/custom/custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FunnelChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/getting-started.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/getting-started.md index 691148cb60..f1826b20d0 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/getting-started.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/getting-started.md @@ -55,17 +55,15 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add script resources -Here, the theme and script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, +Here, the script is referred using CDN inside the `` of `~/Pages/Shared/_Layout.cshtml` file as follows, {% tabs %} {% highlight cshtml tabtitle="~/_Layout.cshtml" %} ... - - @@ -97,23 +95,6 @@ Also, register the script manager `` at the end of `` in the A Now, add the Syncfusion ASP.NET Core Accumulation Chart tag helper in `~/Pages/Index.cshtml` page. -{% tabs %} -{% highlight c# tabtitle="CSHTML" %} - - - - - - - - - - -{% endhighlight %} -{% endtabs %} - -**Pie Series** - By default, the pie series will be rendered when assigning the JSON data to the series using the [`dataSource`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_DataSource) property. Map the field names in the JSON data to the [`xName`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_XName) and [`yName`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_YName) properties of the series. {% tabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/grouping.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/grouping.md index 060f770c70..15dd243e0e 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/grouping.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/grouping.md @@ -1,6 +1,6 @@ --- layout: post -title: Grouping in ##Platform_Name## Accumulation Chart Component +title: Grouping in ##Platform_Name## Accumulation Chart Component | Syncfusion description: Learn here all about Grouping in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Grouping @@ -10,7 +10,7 @@ documentation: ug -# Grouping +# Grouping in ##Platform_Name## Accumulation Chart Component You can club or group few points of the series based on [`groupTo`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_GroupTo) property. For example, if the club value is 11, then the points with value less than 11 is grouped together and will be showed as a single point with label `others`. The property also takes value in percentage (percentage of total data points value). @@ -20,8 +20,14 @@ You can club or group few points of the series based on [`groupTo`](https://help {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/grouping/group/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Group.cs" %} -{% include code-snippet/chart/accumulation-charts/grouping/group/group.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -51,8 +57,14 @@ You can visualize all points available in club or group points by clicking on th {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/grouping/slice/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Slice.cs" %} -{% include code-snippet/chart/accumulation-charts/grouping/slice/slice.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -80,8 +92,14 @@ Slice can also be grouped based on the number of points by specifying the [`grou {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/grouping/groupmode/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Groupmode.cs" %} -{% include code-snippet/chart/accumulation-charts/grouping/groupmode/groupmode.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -109,8 +127,14 @@ You can customize the grouped point and its data label using `pointRender` and ` {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/grouping/custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/grouping/custom/custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/legend.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/legend.md index 5ba8b212e1..0df2e472cb 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/legend.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/legend.md @@ -19,8 +19,13 @@ Like chart, the legend is also available for accumulation charts, which gives in {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/default/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/default/default.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -48,8 +53,13 @@ By using the position property, you can position the legend at the `left`, ` {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/position/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Position.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/position/position.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -77,8 +87,13 @@ You can reverse the order of the legend items by using the [`reverse`](https://h {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/reverse/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Reverse.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/reverse/reverse.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -106,8 +121,13 @@ To change the legend icon shape, use the `legendShape` property in the `series {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/legend-shape/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Legend-shape.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/legend-shape/legend-shape.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -135,8 +155,14 @@ The legend size can be changed by using the `width` and `height` properties of t {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Size.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/size/size.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} + {% endhighlight %} {% endtabs %} @@ -164,8 +190,13 @@ You can customize the size of the legend items by using the `shapeHeight` and `s {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/item-size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Item-size.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/item-size/item-size.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -193,8 +224,13 @@ Paging will be enabled by default, when the legend items exceeds the legend boun {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/paging/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Paging.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/paging/paging.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -220,8 +256,13 @@ When the legend text exceeds the container, the text can be wrapped by using **t {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/text-wrap/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Textwrap.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/text-wrap/textwrap.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -248,8 +289,14 @@ You can customize the animation while clicking legend by setting enableAnimation {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/accumulation-animation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Accumulation-animation.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/accumulation-animation/accumulation-animation.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -277,8 +324,13 @@ You can set title for legend using `Title` property in `LegendSettings`. You can {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/title/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/title/title.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -306,8 +358,13 @@ By default, the page number will be enabled while legend paging. Now, you can di {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/arrow-page/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Arrow-page.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/arrow-page/arrow-page.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -333,8 +390,13 @@ The [`itemPadding`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2 {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/legend/itemPadding/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="ItemPadding.cs" %} -{% include code-snippet/chart/accumulation-charts/legend/itemPadding/itemPadding.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pie-dough-nut.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pie-dough-nut.md index 0ee6added2..7906a30e92 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pie-dough-nut.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pie-dough-nut.md @@ -21,8 +21,13 @@ To render a pie series, use the series [`type`](https://help.syncfusion.com/cr/a {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/pie/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Pie.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/pie/pie.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -51,7 +56,12 @@ By default, radius of the pie series will be 80% of the size (minimum of chart w {% include code-snippet/chart/accumulation-charts/pie-doughnut/radius/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Radius.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/radius/radius.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -80,7 +90,13 @@ The center position of the pie can be changed by Center X and Center Y. By defau {% include code-snippet/chart/accumulation-charts/pie-doughnut/piecenter/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Piecenter.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/piecenter/piecenter.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -109,7 +125,13 @@ You can use radius mapping to render the slice with different [`radius`](https:/ {% include code-snippet/chart/accumulation-charts/pie-doughnut/various-radius/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Various-radius.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/various-radius/various-radius.cs %} +... +public class PieRadiusChartData +{ + public string xValue; + public double yValue; + public string r; +} {% endhighlight %} {% endtabs %} @@ -138,7 +160,11 @@ To achieve a doughnut in pie series, customize the [`innerRadius`](https://help. {% include code-snippet/chart/accumulation-charts/pie-doughnut/doughnut/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Doughnut.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/doughnut/doughnut.cs %} +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -167,7 +193,12 @@ You can customize the start and end angle of the pie series using the [`startAng {% include code-snippet/chart/accumulation-charts/pie-doughnut/start-angle/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Start-angle.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/start-angle/start-angle.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -196,7 +227,14 @@ The fill color and the text in the data source can be mapped to the chart using {% include code-snippet/chart/accumulation-charts/pie-doughnut/map/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Map.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/map/map.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; + public string fill; +} {% endhighlight %} {% endtabs %} @@ -225,7 +263,12 @@ Individual points can be customized using the `pointRender` event. {% include code-snippet/chart/accumulation-charts/pie-doughnut/custom/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/custom/custom.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -254,7 +297,12 @@ By default, the border will appear in the pie or doughnut chart while mouse hove {% include code-snippet/chart/accumulation-charts/pie-doughnut/border/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Border.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/border/border.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -283,7 +331,12 @@ You can customize the color of the point using the `palettes` property. {% include code-snippet/chart/accumulation-charts/pie-doughnut/palette/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Palette.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/palette/palette.cs %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pyramid.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pyramid.md index 83c2fe312b..6a21bdba88 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pyramid.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/pyramid.md @@ -1,6 +1,6 @@ --- layout: post -title: Pyramid in ##Platform_Name## Accumulation Chart Component +title: Pyramid in ##Platform_Name## Accumulation Chart Component | Syncfusion description: Learn here all about Pyramid in Syncfusion ##Platform_Name## Accumulation Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Pyramid @@ -9,7 +9,7 @@ documentation: ug --- -# Pyramid Chart +# Pyramid Chart in ##Platform_Name## Accumulation Chart Component To render a pyramid series, use the series [`type`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.AccumulationSeries.html#Syncfusion_EJ2_Charts_AccumulationSeries_Type) as `Pyramid`. @@ -19,8 +19,13 @@ To render a pyramid series, use the series [`type`](https://help.syncfusion.com/ {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/default/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/chart/accumulation-charts/pyramid/default/default.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PyramidChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -48,8 +53,13 @@ The Pyramid chart supports linear and surface modes of rendering. The default ty {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/mode/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Mode.cs" %} -{% include code-snippet/chart/accumulation-charts/pyramid/mode/mode.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PyramidChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -59,7 +69,7 @@ The Pyramid chart supports linear and surface modes of rendering. The default ty {% highlight razor tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/mode/razor %} {% endhighlight %} -{% highlight c# tabtitle="Mode.cs" %} +{% highlight c# tabtitle="CSHTML.cs" %} {% include code-snippet/chart/accumulation-charts/pyramid/mode/mode.cs %} {% endhighlight %} {% endtabs %} @@ -77,8 +87,13 @@ The size of the pyramid chart can be customized by using the `width` and `height {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/size/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Size.cs" %} -{% include code-snippet/chart/accumulation-charts/pyramid/size/size.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PyramidChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -106,8 +121,13 @@ Pyramid chart provides options to customize the space between the segments by us {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/gap/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Gap.cs" %} -{% include code-snippet/chart/accumulation-charts/pyramid/gap/gap.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PyramidChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -135,8 +155,12 @@ Points can be exploded on mouse click by setting the `explode` property to true. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/explode/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Explode.cs" %} -{% include code-snippet/chart/accumulation-charts/pyramid/explode/explode.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +public class PyramidChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -163,8 +187,12 @@ Individual points can be customized using the `pointRender` event. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pyramid/custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/pyramid/custom/custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +public class PyramidChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} 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 8404f650a6..4ffcf9c0d6 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 @@ -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. @@ -20,8 +20,14 @@ Accumulation Chart can be given a title using [`title`](https://help.syncfusion. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/pie-doughnut/title/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/chart/accumulation-charts/pie-doughnut/title/title.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -49,8 +55,14 @@ 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="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -78,8 +90,14 @@ 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="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} @@ -107,8 +125,14 @@ 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="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/tool-tip.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/tool-tip.md index 1eaf29c5b8..2a2bcbabd7 100644 --- a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/tool-tip.md +++ b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/tool-tip.md @@ -19,8 +19,13 @@ Tooltip for the accumulation chart can be enabled by using the [`Enable`](https {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/default/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Default.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/default/default.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -48,8 +53,13 @@ We can specify header for the tooltip using [`Header`](https://help.syncfusion.c {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/header/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Header.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/header/header.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -77,8 +87,13 @@ By default, tooltip shows information of x and y value in points. In addition to {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/format/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Format.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/format/format.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -106,8 +121,13 @@ Any HTML element can be displayed in the tooltip by using the [`Template`](https {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/tooltip-format/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Tooltip-format.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/tooltip-format/tooltip-format.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -164,8 +184,13 @@ The [`Fill`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/custom/custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -193,8 +218,13 @@ Using [`TooltipRender`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/individual/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Individual.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/individual/individual.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class PieChartData +{ + public string xValue; + public double yValue; +} {% endhighlight %} {% endtabs %} @@ -222,8 +252,14 @@ By default, tooltip shows information of x and y value in points. You can show m {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/chart/accumulation-charts/tooltip/mapping/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Mapping.cs" %} -{% include code-snippet/chart/accumulation-charts/tooltip/mapping/mapping.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingChartData +{ + public string xValue; + public double yValue; + public string text; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/appbar/design.md b/ej2-asp-core-mvc/appbar/design.md index b638718d5b..751b20ac80 100644 --- a/ej2-asp-core-mvc/appbar/design.md +++ b/ej2-asp-core-mvc/appbar/design.md @@ -22,9 +22,6 @@ The following example depicts the code to provide spacing between the home and p {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/design/spacer/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Spacer.cs" %} -{% include code-snippet/appbar/design/spacer/spacer.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -53,9 +50,6 @@ The following example depicts the code to provide a vertical line between a grou {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/design/separator/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Separator.cs" %} -{% include code-snippet/appbar/design/separator/separator.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -82,9 +76,6 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/design/media/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Media.cs" %} -{% include code-snippet/appbar/design/media/media.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -111,9 +102,6 @@ AppBar is rendered with a Menu component in its AppBar header area. Menu compone {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/design/menu/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Menu.cs" %} -{% include code-snippet/appbar/design/menu/menu.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -140,9 +128,6 @@ The AppBar is rendered with a Button and DropDownButton component in its AppBar {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/design/buttons/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Button.cs" %} -{% include code-snippet/appbar/design/buttons/buttons.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -169,9 +154,6 @@ The AppBar is rendered with the SideBar component below the AppBar. Click on the {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/design/sidebar/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Sidebar.cs" %} -{% include code-snippet/appbar/design/sidebar/sidebar.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/appbar/position.md b/ej2-asp-core-mvc/appbar/position.md index cabb4e0c71..bf431c2c71 100644 --- a/ej2-asp-core-mvc/appbar/position.md +++ b/ej2-asp-core-mvc/appbar/position.md @@ -26,9 +26,6 @@ The top AppBar is the default one in which it positions the AppBar at the top of {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/position/top/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Top.cs" %} -{% include code-snippet/appbar/position/top/top.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -55,9 +52,6 @@ This position can be set to the AppBar by setting `Bottom` to the position prope {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/position/bottom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Bottom.cs" %} -{% include code-snippet/appbar/position/bottom/bottom.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -84,9 +78,6 @@ This position can be set to the AppBar by setting `true` to the sticky property. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/position/sticky/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Sticky.cs" %} -{% include code-snippet/appbar/position/sticky/sticky.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/appbar/size-and-color.md b/ej2-asp-core-mvc/appbar/size-and-color.md index 2352ba55e3..2beda6ca54 100644 --- a/ej2-asp-core-mvc/appbar/size-and-color.md +++ b/ej2-asp-core-mvc/appbar/size-and-color.md @@ -28,9 +28,6 @@ This mode is the default one in which the AppBar is displayed with the default h {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/regular/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Regular.cs" %} -{% include code-snippet/appbar/size-and-color/regular/regular.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -57,9 +54,6 @@ This height mode can be set to the AppBar by setting `Prominent` to the mode pro {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/prominent/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Prominent.cs" %} -{% include code-snippet/appbar/size-and-color/prominent/prominent.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -86,9 +80,6 @@ This height mode can be set to the AppBar by setting `Dense` to the mode propert {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/dense/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Dense.cs" %} -{% include code-snippet/appbar/size-and-color/dense/dense.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -124,9 +115,6 @@ This color mode is the default one in which the AppBar can be displayed with a l {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/light/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Light.cs" %} -{% include code-snippet/appbar/size-and-color/light/light.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -153,9 +141,6 @@ This color mode can be set to the AppBar by setting `Dark` to the property color {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/dark/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Dark.cs" %} -{% include code-snippet/appbar/size-and-color/dark/dark.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -182,9 +167,6 @@ This color mode can be set to the AppBar by setting `Primary` to the property co {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/primary/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Primary.cs" %} -{% include code-snippet/appbar/size-and-color/primary/primary.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -211,9 +193,6 @@ This color mode can be set to the AppBar by setting `Inherit` to the property co {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/size-and-color/inherit/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Inherit.cs" %} -{% include code-snippet/appbar/size-and-color/inherit/inherit.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/appbar/style-and-appearance.md b/ej2-asp-core-mvc/appbar/style-and-appearance.md index d25a7393a0..3d3d336cb8 100644 --- a/ej2-asp-core-mvc/appbar/style-and-appearance.md +++ b/ej2-asp-core-mvc/appbar/style-and-appearance.md @@ -34,9 +34,6 @@ CssClass is used for AppBar customization based on the custom class. In the exam {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/style-and-appearance/cssclass/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="CssClass.cs" %} -{% include code-snippet/appbar/style-and-appearance/cssclass/cssclass.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -63,8 +60,13 @@ It can be used for additional inline attributes by specifying as inline attribut {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/appbar/style-and-appearance/htmlattributes/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HtmlAttributes.cs" %} -{% include code-snippet/appbar/style-and-appearance/htmlattributes/htmlattributes.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +public class HtmlAttributes : PageModel +{ + public Dictionary htmlAttribute = new Dictionary() + { {"aria-label", "appbar" } }; + ... +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/auto-complete/data-binding.md b/ej2-asp-core-mvc/auto-complete/data-binding.md index 0909ce9eb9..3a214c0bb0 100644 --- a/ej2-asp-core-mvc/auto-complete/data-binding.md +++ b/ej2-asp-core-mvc/auto-complete/data-binding.md @@ -65,8 +65,12 @@ In the following example, `Name` column from complex data have been mapped to {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/data-binding/arrayofobjects/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Arrayofobjects.cs" %} -{% include code-snippet/autocomplete/data-binding/arrayofobjects/arrayofobjects.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +public class Countries +{ + public string Name { get; set; } + public string Code { get; set; } +} {% endhighlight %} {% endtabs %} @@ -96,8 +100,20 @@ In the following example, `Country.CountryId` column from complex data have be {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/data-binding/complexdata/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Complex.cs" %} -{% include code-snippet/autocomplete/data-binding/complexdata/Complex.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +public class Code +{ + public string Id { get; set; } +} +public class Country +{ + public string CountryId { get; set; } +} +public class Complex +{ + public Country Country { get; set; } + public Code Code { get; set; } +} {% endhighlight %} {% endtabs %} @@ -127,9 +143,6 @@ The following sample displays the first 6 contacts from the `Customers` table of {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/data-binding/remotedata/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Remotedata.cs" %} -{% include code-snippet/autocomplete/data-binding/remotedata/remotedata.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/auto-complete/filtering.md b/ej2-asp-core-mvc/auto-complete/filtering.md index 75f605f231..3a8a42429c 100644 --- a/ej2-asp-core-mvc/auto-complete/filtering.md +++ b/ej2-asp-core-mvc/auto-complete/filtering.md @@ -139,9 +139,6 @@ An AutoComplete supports diacritics filtering which will ignore the [diacritics] {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/filtering/diacritics/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Diacritics.cs" %} -{% include code-snippet/autocomplete/filtering/diacritics/diacritics.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/auto-complete/templates.md b/ej2-asp-core-mvc/auto-complete/templates.md index bdf77a6044..4ce1d83553 100644 --- a/ej2-asp-core-mvc/auto-complete/templates.md +++ b/ej2-asp-core-mvc/auto-complete/templates.md @@ -157,9 +157,6 @@ There is also an option to custom design the suggestion list content when the da {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/templates/actionfailuretemplate/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Actionfailuretemplate.cs" %} -{% include code-snippet/autocomplete/templates/actionfailuretemplate/actionfailuretemplate.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/auto-complete/value-binding.md b/ej2-asp-core-mvc/auto-complete/value-binding.md index 8af983f51f..cc2010d2e6 100644 --- a/ej2-asp-core-mvc/auto-complete/value-binding.md +++ b/ej2-asp-core-mvc/auto-complete/value-binding.md @@ -59,8 +59,22 @@ The following sample shows the example for preselect values for object data type {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/object/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Arrayofobjects.cs" %} -{% include code-snippet/autocomplete/object/object.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Record +{ + public string ID { get; set; } + public string Text { get; set; } + public List RecordList { set; get; } + public List RecordModelList() + { + return Enumerable.Range(1, 150).Select(i => new Record() + { + ID = i.ToString(), + Text = "Item " + i, + }).ToList(); + } +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/auto-complete/virtual-scroll.md b/ej2-asp-core-mvc/auto-complete/virtual-scroll.md index bdd4ef4c1c..8b0b1c9113 100644 --- a/ej2-asp-core-mvc/auto-complete/virtual-scroll.md +++ b/ej2-asp-core-mvc/auto-complete/virtual-scroll.md @@ -31,8 +31,22 @@ In the following example, `text` column from complex data have been mapped to th {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/virtual-scroll/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="virtualscroll.cs" %} -{% include code-snippet/autocomplete/virtual-scroll/virtualscroll.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class RecordData +{ + public string ID { get; set; } + public string Text { get; set; } + public List RecordList { set; get; } + public List RecordModelList() + { + return Enumerable.Range(1, 150).Select(i => new RecordData() + { + ID = i.ToString(), + Text = "Item " + i, + }).ToList(); + } +} {% endhighlight %} {% endtabs %} @@ -60,8 +74,22 @@ The following sample displays the OrderId from the `Orders` Data Service. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/virtual-scroll-remote/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="virtualscroll.cs" %} -{% include code-snippet/autocomplete/virtual-scroll-remote/virtualscroll.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class BindingRecord +{ + public string ID { get; set; } + public string Text { get; set; } + public List RecordList { set; get; } + public List RecordModelList() + { + return Enumerable.Range(1, 150).Select(i => new BindingRecord() + { + ID = i.ToString(), + Text = "Item " + i, + }).ToList(); + } +} {% endhighlight %} {% endtabs %} @@ -89,8 +117,44 @@ The following sample shows the example for Grouping with Virtualization. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/autocomplete/virtual-scroll-group/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="virtualscroll.cs" %} -{% include code-snippet/autocomplete/virtual-scroll-group/virtualscroll.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class GroupingRecord +{ + public string ID { get; set; } + public string Text { get; set; } + public string Group { get; set; } + public List RecordList { set; get; } + public List RecordModelList() + { + Random random = new Random(); + return Enumerable.Range(1, 150).Select(i => new GroupingRecord() + { + ID = i.ToString(), + Text = "Item " + i, + Group = GetRandomGroup(random), + + }).ToList(); + } + public string GetRandomGroup(Random random) + { + // Generate a random number between 1 and 4 to determine the group + int randomGroup = random.Next(1, 5); + switch (randomGroup) + { + case 1: + return "Group A"; + case 2: + return "Group B"; + case 3: + return "Group C"; + case 4: + return "Group D"; + default: + return string.Empty; + } + } +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md b/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md index 2dcd0c1bc1..05b7121f83 100644 --- a/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md +++ b/ej2-asp-core-mvc/avatar/how-to/avatar-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Avatar Customization in ##Platform_Name## Avatar Component +title: Avatar Customization in ##Platform_Name## Avatar Component | Syncfusion description: Learn here all about Avatar Customization in Syncfusion ##Platform_Name## Avatar component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Avatar Customization @@ -10,9 +10,9 @@ documentation: ug # Avatar Customization -## Colour customization +## Color customization -The avatar comes with default background colour (grey). This can be easily customized to desired colour by adding custom class or directly selecting the avatar class from the CSS. +The avatar comes with default background color (Grey). This can be easily customized to desired color by adding custom class or directly selecting the avatar class from the CSS. {% if page.publishingplatform == "aspnet-core" %} @@ -76,9 +76,6 @@ Avatars can be used with a wide variety of media formats like SVG, font-icons, i {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/avatar/media-formats/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="HomeController.cs" %} -{% include code-snippet/avatar/media-formats/HomeController.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/axis-customization.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/axis-customization.md index 59ca04a022..d6270b39c1 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/axis-customization.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/axis-customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Axis Customization in ##Platform_Name## Bullet Chart Component +title: Axis Customization in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Axis Customization in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Axis Customization @@ -9,7 +9,7 @@ documentation: ug --- -# Axis customization +# Axis customization in Bullet Chart Control ## MajorTickLines and MinorTickLines customization @@ -28,8 +28,13 @@ The following properties can be used to customize `MajorTicklines` and `MinorTic {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/ticks/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Ticks.cs" %} -{% include code-snippet/bullet-chart/axis-customization/ticks/ticks.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class TicklinesData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -58,8 +63,13 @@ The major and the minor ticks can be placed **Inside** or **Outside** the ranges {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/tick-placement/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Tick-placement.cs" %} -{% include code-snippet/bullet-chart/axis-customization/tick-placement/tick-placement.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Position +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -85,8 +95,13 @@ Axis numeric labels can be formatted by using the [`LabelFormat`](https://help.s {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/label-format/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Label-format.cs" %} -{% include code-snippet/bullet-chart/axis-customization/label-format/label-format.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FormatData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -176,8 +191,13 @@ To separate groups of thousands, use the [`EnableGroupSeparator`](https://help.s {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/grouping/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Grouping.cs" %} -{% include code-snippet/bullet-chart/axis-customization/grouping/grouping.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Separator +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -204,8 +224,13 @@ Using the [`LabelFormat`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusi {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/custom-label/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Custom-label.cs" %} -{% include code-snippet/bullet-chart/axis-customization/custom-label/custom-label.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class CustomFormatData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -237,7 +262,12 @@ You can customize the axis labels **Inside** or **Outside** the bullet chart usi {% include code-snippet/bullet-chart/axis-customization/label-placement/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Label-placement.cs" %} -{% include code-snippet/bullet-chart/axis-customization/label-placement/label-placement.cs %} +... +public class Placement +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -264,8 +294,13 @@ To place an axis opposite to its original position, set the [`OpposedPosition`]( {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/opposed/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Opposed.cs" %} -{% include code-snippet/bullet-chart/axis-customization/opposed/opposed.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class OpposedPositionData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -292,8 +327,14 @@ The Bullet Chart supports X-axis label by specifying the property from the data {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/axis-customization/category/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Category.cs" %} -{% include code-snippet/bullet-chart/axis-customization/category/category.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Category +{ + public double value; + public double target; + public string category; +} {% endhighlight %} {% endtabs %} @@ -324,7 +365,13 @@ The label color, opacity, font size, font family, font weight, and font style ca {% include code-snippet/bullet-chart/axis-customization/category-label/tagHelper %} {% endhighlight %} {% highlight c# tabtitle="Category-label.cs" %} -{% include code-snippet/bullet-chart/axis-customization/category-label/category-label.cs %} +... +public class CustomCategory +{ + public double value; + public double target; + public string category; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/bullet-chart-dimensions.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/bullet-chart-dimensions.md index bc7fdd1a30..3d2fc64bef 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/bullet-chart-dimensions.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/bullet-chart-dimensions.md @@ -1,6 +1,6 @@ --- layout: post -title: Bullet Chart Dimensions in ##Platform_Name## Bullet Chart Component +title: Bullet Chart Dimensions in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Bullet Chart Dimensions in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Bullet Chart Dimensions @@ -21,8 +21,13 @@ The size of the Bullet Chart is determined by the container size, and it can be {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/bullet-chart-dimensions/container/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Container.cs" %} -{% include code-snippet/bullet-chart/bullet-chart-dimensions/container/container.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class DefaultBulletData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -54,8 +59,13 @@ Sets the size of the Bullet Chart in pixels as shown below. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/bullet-chart-dimensions/pixel/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Pixel.cs" %} -{% include code-snippet/bullet-chart/bullet-chart-dimensions/pixel/pixel.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class BulletData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -83,8 +93,13 @@ By setting a value in percentage, the Bullet Chart gets its dimension with respe {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/bullet-chart-dimensions/percentage/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Percentage.cs" %} -{% include code-snippet/bullet-chart/bullet-chart-dimensions/percentage/percentage.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class DefaultBulletChartData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/comparative-bar.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/comparative-bar.md index 058880d565..6ad9060d18 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/comparative-bar.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/comparative-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Comparative Bar in ##Platform_Name## Bullet Chart Component +title: Comparative Bar in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Comparative Bar in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Comparative Bar @@ -9,7 +9,7 @@ documentation: ug --- -# Target bar +# Target bar in Bullet Chart Control The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [`TargetField`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.charts.bulletchart.html#Syncfusion_EJ2_Charts_BulletChart_TargetField) should be mapped to the appropriate field from the datasource. @@ -19,8 +19,13 @@ The line marker that runs perpendicular to the orientation of the graph is known {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/target-bar/target-bar/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Target-bar.cs" %} -{% include code-snippet/bullet-chart/target-bar/target-bar/target-bar.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class TargetBarData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -50,8 +55,13 @@ The shape of the target bar can be customized using the [`TargetTypes`](https:// {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/target-bar/target-types/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Target-types.cs" %} -{% include code-snippet/bullet-chart/target-bar/target-types/target-types.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class TargetType +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -82,8 +92,13 @@ The following properties can be used to customize the target bar. Also, you can {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/target-bar/target-color/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Target-color.cs" %} -{% include code-snippet/bullet-chart/target-bar/target-color/target-color.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class TargetBarCustomization +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/customization.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/customization.md index 5bdacfeca6..0bf6261ce1 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/customization.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/customization.md @@ -1,6 +1,6 @@ --- layout: post -title: Customization in ##Platform_Name## Bullet Chart Component +title: Customization in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Customization in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Customization @@ -9,7 +9,7 @@ documentation: ug --- -# Customization +# Customization in Bullet Chart Control ## Orientation @@ -21,8 +21,13 @@ The Bullet Chart can be rendered in different orientations such as **Horizontal* {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/customization/orientation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Orientation.cs" %} -{% include code-snippet/bullet-chart/customization/orientation/orientation.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class OrientationData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -51,8 +56,13 @@ The Bullet Chart supports the right-to-left rendering that can be enabled by set {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/customization/right-to-left/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Right-to-left.cs" %} -{% include code-snippet/bullet-chart/customization/right-to-left/right-to-left.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class RightToLeftData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -82,8 +92,13 @@ The actual and the target bar supports the linear animation via the [`Animation` {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/customization/animation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Animation.cs" %} -{% include code-snippet/bullet-chart/customization/animation/animation.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class AnimationData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -111,8 +126,13 @@ The Bullet Chart supports different type of themes via the [`Theme`](https://hel {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/customization/theme/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Theme.cs" %} -{% include code-snippet/bullet-chart/customization/theme/theme.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Themes +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-binding.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-binding.md index 5816ec3fcd..0db93cbc3a 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-binding.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-binding.md @@ -1,6 +1,6 @@ --- layout: post -title: Data Binding in ##Platform_Name## Bullet Chart Component +title: Data Binding in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Data Binding in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Data Binding @@ -9,9 +9,9 @@ documentation: ug --- -# Working with data +# Working with data in Bullet Chart Control -Bullet Chart can visualise data bound from local or remote data. +Bullet Chart can visualize data bound from local or remote data. ## Local data @@ -23,8 +23,14 @@ You can bind a simple JSON data to the chart using [`DataSource`](https://help.s {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/working-with-data/working-with-data/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Working-with-data.cs" %} -{% include code-snippet/bullet-chart/working-with-data/working-with-data/working-with-data.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class LocalBulletData +{ + public double value; + public double comparativeMeasureValue; + public string category; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-label.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-label.md index 720fc6424a..f082b0ea62 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-label.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/data-label.md @@ -1,6 +1,6 @@ --- layout: post -title: Data Label in ##Platform_Name## Bullet Chart Component +title: Data Label in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Data Label in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Data Label @@ -9,7 +9,7 @@ documentation: ug --- -# Data label +# Data label in Bullet Chart Control Data Labels are used to identify the value of actual bar in the Bullet Chart component. The Data Labels will be shown by specifying the [`DataLabel`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.BulletChart.html#Syncfusion_EJ2_Charts_BulletChart_DataLabel) setting's [`Enable`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.BulletChartBulletDataLabel.html#Syncfusion_EJ2_Charts_BulletChartBulletDataLabel_Enable) property to **true**. @@ -19,8 +19,14 @@ Data Labels are used to identify the value of actual bar in the Bullet Chart com {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/data-label/data-label/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Data-label.cs" %} -{% include code-snippet/bullet-chart/data-label/data-label/data-label.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Data +{ + public double value; + public double comparativeMeasureValue; + public string category; +} {% endhighlight %} {% endtabs %} @@ -48,8 +54,14 @@ Data Labels color, opacity, font size, font family, font weight, and font style {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/data-label/data-label-custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Data-label-custom.cs" %} -{% include code-snippet/bullet-chart/data-label/data-label-custom/data-label-custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class CustomData +{ + public double value; + public double comparativeMeasureValue; + public string category; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/ranges.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/ranges.md index 8b5be14be2..121016f486 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/ranges.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/ranges.md @@ -1,6 +1,6 @@ --- layout: post -title: Ranges in ##Platform_Name## Bullet Chart Component +title: Ranges in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Ranges in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ranges @@ -9,7 +9,7 @@ documentation: ug --- -# Ranges +# Ranges in Bullet Chart Control Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the [`End`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.Range.html#Syncfusion_EJ2_Charts_Range_End) property in [`Ranges`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.BulletChart.html#Syncfusion_EJ2_Charts_BulletChart_Ranges). The [`Minimum`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Charts.BulletChart.html#Syncfusion_EJ2_Charts_BulletChart_Minimum) value of a quantitative scale is considered the starting point of the first range or the previous range end point. @@ -19,8 +19,14 @@ Ranges represent the quality of a specific range such as **Good**, **Bad** and * {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/ranges/ranges/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Ranges.cs" %} -{% include code-snippet/bullet-chart/ranges/ranges/ranges.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Range +{ + public double value; + public double target; + public string category; +} {% endhighlight %} {% endtabs %} @@ -50,8 +56,14 @@ Enhance the readability of ranges with color and opacity. It can be applied usin {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/ranges/ranges-custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Ranges-custom.cs" %} -{% include code-snippet/bullet-chart/ranges/ranges-custom/ranges-custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Custom +{ + public double value; + public double target; + public string category; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/title.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/title.md index e434297632..da357c78e1 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/title.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/title.md @@ -1,6 +1,6 @@ --- layout: post -title: Title in ##Platform_Name## Bullet Chart Component +title: Title in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Title in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Title @@ -9,7 +9,7 @@ documentation: ug --- -# Title and subtitle +# Title and subtitle in Bullet Chart Control ## Title @@ -21,8 +21,13 @@ The title of the Bullet Chart displays the information about the data plotted by {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/title/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title.cs" %} -{% include code-snippet/bullet-chart/title/title/title.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class DefaultBulletData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -52,8 +57,13 @@ To show additional information about the data plotted, the Bullet Chart can also {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/sub-title/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Sub-title.cs" %} -{% include code-snippet/bullet-chart/title/sub-title/sub-title.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class SubTitleData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -87,8 +97,13 @@ By setting the `titlePosition` to **Left**, you can display the title and subtit {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/left/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Left.cs" %} -{% include code-snippet/bullet-chart/title/left/left.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Position +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -116,8 +131,13 @@ By setting the [`TitlePosition`](https://help.syncfusion.com/cr/aspnetcore-js2/S {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/right/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Right.cs" %} -{% include code-snippet/bullet-chart/title/right/right.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class RightPositionData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -145,8 +165,13 @@ By setting the [`TitlePosition`](https://help.syncfusion.com/cr/aspnetcore-js2/S {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/top/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Top.cs" %} -{% include code-snippet/bullet-chart/title/top/top.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class TopPositionData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -174,8 +199,13 @@ By setting the [`TitlePosition`](https://help.syncfusion.com/cr/aspnetcore-js2/S {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/bottom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Bottom.cs" %} -{% include code-snippet/bullet-chart/title/bottom/bottom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class BottomPositionData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -205,8 +235,13 @@ The title color, opacity, font size, font family, font weight, and font style ca {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/title-custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Title-custom.cs" %} -{% include code-snippet/bullet-chart/title/title-custom/title-custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Customization +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -234,8 +269,13 @@ The sub-title color, opacity, font size, font family, font weight, and font styl {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/title/sub-title-custom/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Sub-title-custom.cs" %} -{% include code-snippet/bullet-chart/title/sub-title-custom/sub-title-custom.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class Custom +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/tool-tip.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/tool-tip.md index af6e19e8c6..30b632fe3e 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/tool-tip.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/tool-tip.md @@ -1,6 +1,6 @@ --- layout: post -title: Tooltip in ##Platform_Name## Bullet Chart Component +title: Tooltip in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Tooltip in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Tooltip @@ -9,7 +9,7 @@ documentation: ug --- -# Tooltip +# Tooltip in Bullet Chart Control When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values. @@ -23,8 +23,14 @@ By setting [`Enable`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.E {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/tool-tip/tool-tip/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Tool-tip.cs" %} -{% include code-snippet/bullet-chart/tool-tip/tool-tip/tool-tip.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class TooltipData +{ + public double value; + public double comparativeMeasureValue; + public string category; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/value-bar.md b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/value-bar.md index f766a5dc3f..dd450ddfb1 100644 --- a/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/value-bar.md +++ b/ej2-asp-core-mvc/bullet-chart/EJ2_ASP.NETCORE/value-bar.md @@ -1,6 +1,6 @@ --- layout: post -title: Value Bar in ##Platform_Name## Bullet Chart Component +title: Value Bar in ##Platform_Name## Bullet Chart Component | Syncfusion description: Learn here all about Value Bar in Syncfusion ##Platform_Name## Bullet Chart component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Value Bar @@ -9,7 +9,7 @@ documentation: ug --- -# Actual bar +# Actual bar in Bullet Chart Control To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [`ValueField`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.charts.bulletchart.html#Syncfusion_EJ2_Charts_BulletChart_ValueField) should be mapped to the appropriate field from the data source. @@ -19,8 +19,13 @@ To display the primary data or the current value of the data being measured know {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/value-bar/value-bar/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Value-bar.cs" %} -{% include code-snippet/bullet-chart/value-bar/value-bar/value-bar.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class DefaultBulletData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -50,8 +55,13 @@ The shape of the actual bar can be customized using the [`Type`](https://help.sy {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/value-bar/types/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Types.cs" %} -{% include code-snippet/bullet-chart/value-bar/types/types.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class ActualBarTypeData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -83,8 +93,13 @@ Using the [`ValueBorder`](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusi {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/value-bar/value-border/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Value-border.cs" %} -{% include code-snippet/bullet-chart/value-bar/value-border/value-border.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class CustomBorderData +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} @@ -112,8 +127,13 @@ Customize the fill color and height of the actual bar using the [`ValueFill`](ht {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/bullet-chart/value-bar/value-fill/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Value-fill.cs" %} -{% include code-snippet/bullet-chart/value-bar/value-fill/value-fill.cs %} +{% highlight c# tabtitle="CSHTML.cs" %} +... +public class FillColorCustomization +{ + public double value; + public double target; +} {% endhighlight %} {% endtabs %} diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png index 7d9bf73704..1f25f408b5 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar.png index 6f8968a32a..e0d234a980 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-actual-bar.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-category-label.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-category-label.png index 4160575285..6805c6fccd 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-category-label.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-category-label.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-data-label.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-data-label.png index c072277b6e..fcf41e3419 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-data-label.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-data-label.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png index 97c0fea6a1..4bc0bb1e24 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-customization.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-customization.png index a62420b727..932ef82978 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-customization.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-customization.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-format.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-format.png index bd84aad2c3..b8b0fc05f9 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-format.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-label-format.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-orientation.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-orientation.png index 01e48b0ce4..f0cc93e32b 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-orientation.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-orientation.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-range.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-range.png index 6966f7b1f8..38bd0ba519 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-range.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-range.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png index 3cc8be6f71..e9726f5717 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-right-to-left-direction.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-subtitle.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-subtitle.png index 6fca33915a..2d30340b2e 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-subtitle.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-subtitle.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png index 58f6ecd5cd..4bd79490f6 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar-customization.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar.png index e965628294..59e3c8e584 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-target-bar.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-theme.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-theme.png index 23d26c6cfe..837990fc91 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-theme.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-theme.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png index 4d93d92a65..3181d4689e 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-tick-line-customization.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-customization.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-customization.png index 1a93f2549b..be929361ae 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-customization.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-customization.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-positions.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-positions.png index d7842ea8cd..e989edfcae 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-positions.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bullet-chart-title-positions.png differ diff --git a/ej2-asp-core-mvc/bullet-chart/images/blazor-bulletchart-tooltip.png b/ej2-asp-core-mvc/bullet-chart/images/blazor-bulletchart-tooltip.png index 18f57235d7..318933c8f9 100644 Binary files a/ej2-asp-core-mvc/bullet-chart/images/blazor-bulletchart-tooltip.png and b/ej2-asp-core-mvc/bullet-chart/images/blazor-bulletchart-tooltip.png differ diff --git a/ej2-asp-core-mvc/calendar/accessibility.md b/ej2-asp-core-mvc/calendar/accessibility.md index 7e4f0bebf9..4292046739 100644 --- a/ej2-asp-core-mvc/calendar/accessibility.md +++ b/ej2-asp-core-mvc/calendar/accessibility.md @@ -19,7 +19,6 @@ The accessibility compliance for the Calendar component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | - | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | Intermediate | | [Section 508 Support](../common/accessibility#accessibility-standards) | Intermediate | | [Screen Reader Support](../common/accessibility#screen-reader-support) | Yes | @@ -59,7 +58,7 @@ It helps disabled persons by providing information about the widget for assistiv * **Role**: Gives information to assistive technologies about how to handle each element in a widget. -* **Grid-cell**: Defines the individual cell that can be focussed and selected. +* **Grid-cell**: Defines the individual cell that can be focused and selected. ## Keyboard interaction diff --git a/ej2-asp-core-mvc/carousel/EJ2_ASP.NETCORE/populating-items.md b/ej2-asp-core-mvc/carousel/EJ2_ASP.NETCORE/populating-items.md index 689f4cfb9e..bb0961c6ad 100644 --- a/ej2-asp-core-mvc/carousel/EJ2_ASP.NETCORE/populating-items.md +++ b/ej2-asp-core-mvc/carousel/EJ2_ASP.NETCORE/populating-items.md @@ -33,7 +33,7 @@ When rendering the Carousel component using data binding, you can assign a commo {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/carousel/populating-items/item-datasource/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Data.cs" %} +{% highlight c# tabtitle="CSHTML.cs" %} public class CarouselDataBinding { public int Id { get; set; } diff --git a/ej2-asp-core-mvc/circular-gauge/EJ2_ASP.NETCORE/print-and-export.md b/ej2-asp-core-mvc/circular-gauge/EJ2_ASP.NETCORE/print-and-export.md index 8bb93352ca..72a3f31adf 100644 --- a/ej2-asp-core-mvc/circular-gauge/EJ2_ASP.NETCORE/print-and-export.md +++ b/ej2-asp-core-mvc/circular-gauge/EJ2_ASP.NETCORE/print-and-export.md @@ -1,6 +1,6 @@ --- layout: post -title: Print And Export in ##Platform_Name## Circular Gauge Component +title: Print And Export in ##Platform_Name## Circular Gauge Component | Syncfusion description: Learn here all about Print And Export in Syncfusion ##Platform_Name## Circular Gauge component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Print And Export @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# Print and Export +# Print and Export in Circular Gauge Control ## Print @@ -20,9 +20,6 @@ To use the print functionality, set the [`allowPrint`](https://ej2.syncfusion.co {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/print-and-export/print/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Print.cs" %} -{% include code-snippet/circulargauge/print-and-export/print/print.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -55,9 +52,6 @@ To use the image export functionality, set the [`allowImageExport`](https://ej2. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/print-and-export/export/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Export.cs" %} -{% include code-snippet/circulargauge/print-and-export/export/export.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -82,9 +76,6 @@ The image file is got as base64 string for the JPEG and PNG formats. The circula {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/print-and-export/base64/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Export.cs" %} -{% include code-snippet/circulargauge/print-and-export/base64/export.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -111,9 +102,6 @@ To use the PDF export functionality, the [`allowPdfExport`](https://ej2.syncfusi {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/print-and-export/exportPdf/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Export.cs" %} -{% include code-snippet/circulargauge/print-and-export/exportPdf/export.cs %} -{% endhighlight %} {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/circular-gauge/accessibility.md b/ej2-asp-core-mvc/circular-gauge/accessibility.md index 5a2dda8f25..5864a6a33e 100644 --- a/ej2-asp-core-mvc/circular-gauge/accessibility.md +++ b/ej2-asp-core-mvc/circular-gauge/accessibility.md @@ -22,7 +22,7 @@ The accessibility compliance for the Circular Gauge component is outlined below. | [Right-To-Left Support](../common/accessibility) | Yes | | [Color Contrast](../common/accessibility) | Yes | | [Mobile Device Support](../common/accessibility) | Yes | -| [Keyboard Navigation Support](../common/accessibility) | No | +| [Keyboard Navigation Support](../common/accessibility) | Not Applicable | | [Accessibility Checker Validation](../common/accessibility) | Yes | | [Axe-core Accessibility Validation](../common/accessibility) | Yes | diff --git a/ej2-asp-core-mvc/circular-gauge/gauge-animation.md b/ej2-asp-core-mvc/circular-gauge/gauge-animation.md index c1a0d4e8fc..40b1f32277 100644 --- a/ej2-asp-core-mvc/circular-gauge/gauge-animation.md +++ b/ej2-asp-core-mvc/circular-gauge/gauge-animation.md @@ -26,9 +26,6 @@ The animation of the Circular Gauge is demonstrated in the following example. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/gauge-animation/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Animation.cs" %} -{% include code-snippet/circulargauge/gauge-animation/gauge-animation.cs %} -{% endhighlight %} {% endtabs %} ![Circular Gauge with Animation](../circular-gauge/images/animation.gif) diff --git a/ej2-asp-core-mvc/circular-gauge/gauge-annotations.md b/ej2-asp-core-mvc/circular-gauge/gauge-annotations.md index b10991d1b7..b87c929fc7 100644 --- a/ej2-asp-core-mvc/circular-gauge/gauge-annotations.md +++ b/ej2-asp-core-mvc/circular-gauge/gauge-annotations.md @@ -76,9 +76,9 @@ As the annotation allows to place any custom element, it can initialize a gauge {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/gauge-annotations/subgauge/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Subgauge.cs" %} + {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/circular-gauge/gauge-appearance.md b/ej2-asp-core-mvc/circular-gauge/gauge-appearance.md index c184a73045..b3aab76728 100644 --- a/ej2-asp-core-mvc/circular-gauge/gauge-appearance.md +++ b/ej2-asp-core-mvc/circular-gauge/gauge-appearance.md @@ -106,9 +106,9 @@ Using [background](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2. {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/gauge-appearance/area-customization/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Area-customization.cs" %} + {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} @@ -135,9 +135,9 @@ You can set margin for gauge from its container through [margin](https://help.sy {% highlight cshtml tabtitle="CSHTML" %} {% include code-snippet/circulargauge/gauge-appearance/margin/tagHelper %} {% endhighlight %} -{% highlight c# tabtitle="Margin.cs" %} + {% endtabs %} {% elsif page.publishingplatform == "aspnet-mvc" %} diff --git a/ej2-asp-core-mvc/code-snippet/appbar/design/buttons/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/design/buttons/tagHelper index 201f578157..a2fd5fb692 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/design/buttons/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/design/buttons/tagHelper @@ -1,10 +1,34 @@ @using Syncfusion.EJ2; @using Syncfusion.EJ2.Navigations; +@{ + List productDropDownButtonItems = new List(); + productDropDownButtonItems.Add(new + { + text = "Developer", + }); + productDropDownButtonItems.Add(new + { + text = "Analytics", + }); + productDropDownButtonItems.Add(new + { + text = "Reporting", + }); + productDropDownButtonItems.Add(new + { + text = "E-Signature", + }); + productDropDownButtonItems.Add(new + { + text = "Help-Desk", + }); +} + - +
diff --git a/ej2-asp-core-mvc/code-snippet/appbar/design/media/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/design/media/tagHelper index 3cec49b9ef..562d764c10 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/design/media/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/design/media/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; -
diff --git a/ej2-asp-core-mvc/code-snippet/appbar/design/menu/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/design/menu/tagHelper index 3cf307d8de..ac4d13cd31 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/design/menu/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/design/menu/tagHelper @@ -1,13 +1,59 @@ @using Syncfusion.EJ2; @using Syncfusion.EJ2.Navigations; +@{ + List companyMenuItems = new List() + { + new MenuItem + { + Text = "Company", + Items = new List() + { + new MenuItem { Text = "About Us" }, + new MenuItem { Text = "Customers" }, + new MenuItem { Text = "Blog" }, + new MenuItem { Text = "Careers" } + } + } + }; + + List productMenuItems = new List() + { + new MenuItem + { + Text = "Products", + Items = new List() + { + new MenuItem { Text = "Developer" }, + new MenuItem { Text = "Analytics" }, + new MenuItem { Text = "Reporting" }, + new MenuItem { Text = "Help Desk" } + } + } + }; + + List aboutMenuItems = new List(){ + new MenuItem + { + Text = "About Us" + } + }; + + List carrerMenuItems = new List(){ + new MenuItem + { + Text = "Carrers" + } + }; +} + - - - - + + + +
diff --git a/ej2-asp-core-mvc/code-snippet/appbar/design/separator/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/design/separator/tagHelper index 4e7135b4d0..d0cad1a673 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/design/separator/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/design/separator/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/design/sidebar/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/design/sidebar/tagHelper index c27ff469f0..da0edbe1d3 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/design/sidebar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/design/sidebar/tagHelper @@ -1,6 +1,23 @@ @using Syncfusion.EJ2; @using Syncfusion.EJ2.Navigations; +@{ + Dictionary htmlAttribute = new Dictionary() + { { "class", "sidebar-treeview" } }; + + List treedata = new List(); + treedata.Add(new TreeDatas { nodeId = "01", nodeText = "Installation" }); + treedata.Add(new TreeDatas { nodeId = "02", nodeText = "Deployment" }); + treedata.Add(new TreeDatas { nodeId = "03", nodeText = "Quick Start" }); + treedata.Add(new TreeDatas { nodeId = "04", nodeText = "Components", hasChild = true }); + treedata.Add(new TreeDatas { nodeId = "04-01", nodeText = "Calendar", pid = "04" }); + treedata.Add(new TreeDatas { nodeId = "04-02", nodeText = "DatePicker", pid = "04" }); + treedata.Add(new TreeDatas { nodeId = "04-03", nodeText = "DateTimePicker", pid = "04" }); + treedata.Add(new TreeDatas { nodeId = "04-04", nodeText = "DateRangePicker", pid = "04" }); + treedata.Add(new TreeDatas { nodeId = "04-05", nodeText = "TimePicker", pid = "04" }); + treedata.Add(new TreeDatas { nodeId = "04-06", nodeText = "SideBar", pid = "04" }); +} +
@@ -12,7 +29,7 @@
- +
@@ -21,7 +38,7 @@
- +
diff --git a/ej2-asp-core-mvc/code-snippet/appbar/design/spacer/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/design/spacer/tagHelper index 200d2295dd..5a5d981da6 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/design/spacer/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/design/spacer/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/position/bottom/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/position/bottom/tagHelper index 0dafed31b3..d1d41aef3b 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/position/bottom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/position/bottom/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; -
diff --git a/ej2-asp-core-mvc/code-snippet/appbar/position/sticky/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/position/sticky/tagHelper index 3888f452a1..991b64213a 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/position/sticky/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/position/sticky/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/position/top/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/position/top/tagHelper index 9586319c5a..5d8c86f002 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/position/top/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/position/top/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; -
diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dark/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dark/tagHelper index ed1cbc6899..e709c96f3a 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dark/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dark/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dense/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dense/tagHelper index 363d4d0340..0d4963f2e9 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dense/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/dense/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/inherit/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/inherit/tagHelper index 46f8d4cc41..ec0a5bb0a8 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/inherit/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/inherit/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/light/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/light/tagHelper index 33b83e4d45..f8dfd80714 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/light/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/light/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/primary/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/primary/tagHelper index 69fb31bc5d..dc86704c21 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/primary/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/primary/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/prominent/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/prominent/tagHelper index e313c1aa3b..e4fb5bcddd 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/prominent/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/prominent/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/regular/tagHelper b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/regular/tagHelper index e088cf2c40..f7de0c7169 100644 --- a/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/regular/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/appbar/size-and-color/regular/tagHelper @@ -1,6 +1,3 @@ -@using Syncfusion.EJ2; -@using Syncfusion.EJ2.Navigations; - diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/arrayofobjects/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/arrayofobjects/tagHelper index bc5da8e24c..ea14774589 100644 --- a/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/arrayofobjects/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/arrayofobjects/tagHelper @@ -1,6 +1,29 @@ +@{ + List country = new List(); + country.Add(new Countries { Name = "Australia", Code = "AU" }); + country.Add(new Countries { Name = "Bermuda", Code = "BM" }); + country.Add(new Countries { Name = "Canada", Code = "CA" }); + country.Add(new Countries { Name = "Cameroon", Code = "CM" }); + country.Add(new Countries { Name = "Denmark", Code = "DK" }); + country.Add(new Countries { Name = "France", Code = "FR" }); + country.Add(new Countries { Name = "Finland", Code = "FI" }); + country.Add(new Countries { Name = "Germany", Code = "DE" }); + country.Add(new Countries { Name = "Greenland", Code = "GL" }); + country.Add(new Countries { Name = "Hong Kong", Code = "HK" }); + country.Add(new Countries { Name = "India", Code = "IN" }); + country.Add(new Countries { Name = "Italy", Code = "IT" }); + country.Add(new Countries { Name = "Japan", Code = "JP" }); + country.Add(new Countries { Name = "Mexico", Code = "MX" }); + country.Add(new Countries { Name = "Norway", Code = "NO" }); + country.Add(new Countries { Name = "Poland", Code = "PL" }); + country.Add(new Countries { Name = "Switzerland", Code = "CH" }); + country.Add(new Countries { Name = "United Kingdom", Code = "GB" }); + country.Add(new Countries { Name = "United States", Code = "US" }); +} +
- +
diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/complexdata/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/complexdata/tagHelper index b4558bb868..d440ed4a10 100644 --- a/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/complexdata/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/data-binding/complexdata/tagHelper @@ -1,6 +1,16 @@ +@{ + List data = new List(); + data.Add(new Complex() { Country = new Country() { CountryId = "Australia" }, Code = new Code() { Id = "AU" } }); + data.Add(new Complex() { Country = new Country() { CountryId = "Bermuda" }, Code = new Code() { Id = "BM" } }); + data.Add(new Complex() { Country = new Country() { CountryId = "Canada" }, Code = new Code() { Id = "CA" } }); + data.Add(new Complex() { Country = new Country() { CountryId = "Cameroon" }, Code = new Code() { Id = "CM" } }); + data.Add(new Complex() { Country = new Country() { CountryId = "Denmark" }, Code = new Code() { Id = "DK" } }); + data.Add(new Complex() { Country = new Country() { CountryId = "France" }, Code = new Code() { Id = "FR" } }); +} +
- +
diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/object/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/object/tagHelper index a34c51fa45..7d8d2e2b00 100644 --- a/ej2-asp-core-mvc/code-snippet/autocomplete/object/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/object/tagHelper @@ -1,6 +1,14 @@ +@page +@model AutoCompleteBindingSamples.Pages.ObjectDataType + +@{ + var objectType = new Record().RecordModelList(); + var value = new { ID = "id5", Text = "Item 5" }; +} +
- +
diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-group/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-group/tagHelper index 35d515990f..f3bf7e04ff 100644 --- a/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-group/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-group/tagHelper @@ -1,6 +1,10 @@ +@{ + var data = new GroupingRecord().RecordModelList(); +} +
- +
diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-remote/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-remote/tagHelper index e21121800e..353dbaf6b2 100644 --- a/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-remote/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll-remote/tagHelper @@ -1,6 +1,10 @@ +@{ + var data = new BindingRecord().RecordModelList(); +} +
- + diff --git a/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll/tagHelper b/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll/tagHelper index 958786c62d..5d6eb4d757 100644 --- a/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/autocomplete/virtual-scroll/tagHelper @@ -1,6 +1,10 @@ +@{ + var data = new RecordData().RecordModelList(); +} +
- +
diff --git a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper index 581e772b07..39fdd4b39c 100644 --- a/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/avatar/media-formats/tagHelper @@ -1,3 +1,10 @@ +@page +@model AvatarUGSample.Pages.VariousAvatarMediaModel + +@{ + +} +
@@ -87,7 +94,7 @@ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category-label/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category-label/tagHelper index 067e7fa8d1..6d1160da22 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category-label/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category-label/tagHelper @@ -1,8 +1,15 @@ - - - - - - - +@{ + List bulletData = new List + { + new CustomCategory { value = 1500, target = 1300, category = "Product A" } + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category/tagHelper index b1bf425e63..5352cd0601 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/category/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new Category { value = 1500, target = 1300, category = "Product A" } + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/custom-label/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/custom-label/tagHelper index ac303916d6..a8a3b6d020 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/custom-label/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/custom-label/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new CustomFormatData { value = 1500, target = 1300} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/grouping/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/grouping/tagHelper index bf1314875c..ad917f9b81 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/grouping/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/grouping/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new Separator { value = 1500, target = 1300} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-format/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-format/tagHelper index e48c0a32c6..cd2ba1fd75 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-format/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-format/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new FormatData { value = 1500, target = 1300} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-placement/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-placement/tagHelper index 438d970cd7..54d707d45f 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-placement/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/label-placement/tagHelper @@ -1,7 +1,14 @@ +@{ + List bulletData = new List + { + new Placement { value = 1500, target = 1300} + }; +} + - - - - - + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/opposed/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/opposed/tagHelper index ad446e6214..c324c9e12b 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/opposed/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/opposed/tagHelper @@ -1,7 +1,14 @@ +@{ + List bulletData = new List + { + new OpposedPositionData { value = 1500, target = 1300} + }; +} + - - - - - + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/tick-placement/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/tick-placement/tagHelper index 11e86841f9..ad7210edee 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/tick-placement/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/tick-placement/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new Position { value = 1500, target = 1300} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/ticks/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/ticks/tagHelper index 11a6823b91..24f9e88486 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/ticks/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/axis-customization/ticks/tagHelper @@ -1,9 +1,16 @@ - - - - - - - - +@{ + List bulletData = new List + { + new TicklinesData { value = 1500, target = 1300} + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/container/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/container/tagHelper index bbe6a1b69a..f9f745014e 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/container/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/container/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new DefaultBulletData { value = 270, target = 250} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/percentage/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/percentage/tagHelper index 84ceb0e40a..e48daaf95d 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/percentage/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/percentage/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new DefaultBulletChartData { value = 270, target = 250} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/pixel/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/pixel/tagHelper index 71a7dfb1f3..d28bff6cdc 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/pixel/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/bullet-chart-dimensions/pixel/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new BulletData { value = 270, target = 250} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/animation/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/animation/tagHelper index 02f31bd4e9..e69e213934 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/animation/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/animation/tagHelper @@ -1,8 +1,15 @@ - - - - - - - +@{ + List bulletData = new List + { + new AnimationData { value = 55, target = 75} + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/orientation/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/orientation/tagHelper index cd4fee8bf3..8dd2dc7c1e 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/orientation/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/orientation/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new OrientationData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/right-to-left/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/right-to-left/tagHelper index 209357c151..c0aba40c52 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/right-to-left/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/right-to-left/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new RightToLeftData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/theme/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/theme/tagHelper index 4675371d5b..99d11f1497 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/theme/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/customization/theme/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new Themes { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label-custom/tagHelper index 5c6bc16640..4fd955aa7b 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label-custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label-custom/tagHelper @@ -1,10 +1,22 @@ - - - - - - - - - +@{ + List bulletData = new List + { + new CustomData { value = 5, comparativeMeasureValue = 7.5, category= "2001"}, + new CustomData { value = 7, comparativeMeasureValue = 5, category= "2002"}, + new CustomData { value = 10, comparativeMeasureValue = 6, category= "2003"}, + new CustomData { value = 5, comparativeMeasureValue = 8, category= "2004"}, + new CustomData { value = 12, comparativeMeasureValue = 5, category= "2005"}, + new CustomData { value = 8, comparativeMeasureValue = 6, category= "2006"} + }; +} + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label/tagHelper index ef042f41de..79c2f0eb4c 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/data-label/data-label/tagHelper @@ -1,8 +1,20 @@ - - - - - - - +@{ + List bulletData = new List + { + new Data { value = 5, comparativeMeasureValue = 7.5, category= "2001"}, + new Data { value = 7, comparativeMeasureValue = 5, category= "2002"}, + new Data { value = 10, comparativeMeasureValue = 6, category= "2003"}, + new Data { value = 5, comparativeMeasureValue = 8, category= "2004"}, + new Data { value = 12, comparativeMeasureValue = 5, category= "2005"}, + new Data { value = 8, comparativeMeasureValue = 6, category= "2006"} + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges-custom/tagHelper index dd538baf79..be7693338f 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges-custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges-custom/tagHelper @@ -1,9 +1,18 @@ - - - - - - - - +@{ + List bulletData = new List + { + new Custom { value = 55, target = 75, category = "Year 1"}, + new Custom { value = 70, target = 70, category = "Year 2"}, + new Custom { value = 85, target = 75, category = "Year 3"} + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges/tagHelper index 2df8e37e40..2d5c95f08b 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/ranges/ranges/tagHelper @@ -1,7 +1,16 @@ - - - - - - +@{ + List bulletData = new List + { + new Range { value = 55, target = 75, category = "Year 1"}, + new Range { value = 70, target = 70, category = "Year 2"}, + new Range { value = 85, target = 75, category = "Year 3"} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-bar/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-bar/tagHelper index 404bc1f9e3..e1ff579125 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-bar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-bar/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new TargetBarData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-color/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-color/tagHelper index 29a4403950..f89a926fa0 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-color/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/target-bar/target-color/tagHelper @@ -1,11 +1,15 @@ @{ var color = "red"; + List bulletData = new List + { + new TargetBarCustomization { value = 55, target = 75 } + }; } - - - - - - + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/bottom/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/bottom/tagHelper index 8097ea864f..214d3414e8 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/bottom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/bottom/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new BottomPositionData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/left/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/left/tagHelper index 096d417ac9..dcfcdf759d 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/left/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/left/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new Position { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/right/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/right/tagHelper index 2b14848cc3..128eb1e6f1 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/right/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/right/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new RightPositionData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title-custom/tagHelper index 9fcdb89951..c35fb644b1 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title-custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title-custom/tagHelper @@ -1,8 +1,15 @@ - - - - - - - +@{ + List bulletData = new List + { + new Custom { value = 55, target = 75} + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title/tagHelper index b6d30f670a..519c173ad3 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/sub-title/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new SubTitleData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title-custom/tagHelper index 2d4d0fba5f..d0ef2d4407 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title-custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title-custom/tagHelper @@ -1,8 +1,15 @@ - - - - - - - +@{ + List bulletData = new List + { + new Customization { value = 55, target = 75} + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title/tagHelper index 46183e1c87..208e3f13b0 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/title/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new DefaultBulletData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/top/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/top/tagHelper index d0e71ffc24..7b37c6ce6c 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/title/top/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/title/top/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new DefaultBulletData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/tool-tip/tool-tip/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/tool-tip/tool-tip/tagHelper index 0b2d4b3876..20fa036d7c 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/tool-tip/tool-tip/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/tool-tip/tool-tip/tagHelper @@ -1,8 +1,20 @@ - - - - - - - +@{ + List bulletData = new List + { + new TooltipData { value = 5, comparativeMeasureValue = 7.5, category= "2001"}, + new TooltipData { value = 7, comparativeMeasureValue = 5, category= "2002"}, + new TooltipData { value = 10, comparativeMeasureValue = 6, category= "2003"}, + new TooltipData { value = 5, comparativeMeasureValue = 8, category= "2004"}, + new TooltipData { value = 12, comparativeMeasureValue = 5, category= "2005"}, + new TooltipData { value = 8, comparativeMeasureValue = 6, category= "2006"} + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/types/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/types/tagHelper index 86c106dd9d..f32b8c4c35 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/types/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/types/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new ActualBarTypeData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-bar/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-bar/tagHelper index 2b17d0f906..c700258c2c 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-bar/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-bar/tagHelper @@ -1,7 +1,14 @@ - - - - - - +@{ + List bulletData = new List + { + new DefaultBulletData { value = 55, target = 75} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-border/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-border/tagHelper index e21a0d6e18..74b1fb6d00 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-border/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-border/tagHelper @@ -1,8 +1,15 @@ - - - - - - - +@{ + List bulletData = new List + { + new CustomBorderData { value = 55, target = 75} + }; +} + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-fill/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-fill/tagHelper index e32efc8f1a..fcd0b733f6 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-fill/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/value-bar/value-fill/tagHelper @@ -1,11 +1,15 @@ @{ var color = "blue"; + List bulletData = new List + { + new FillColorCustomization { value = 55, target = 75 } + }; } - - - - - - + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/bullet-chart/working-with-data/working-with-data/tagHelper b/ej2-asp-core-mvc/code-snippet/bullet-chart/working-with-data/working-with-data/tagHelper index c857b92164..2a22145463 100644 --- a/ej2-asp-core-mvc/code-snippet/bullet-chart/working-with-data/working-with-data/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/bullet-chart/working-with-data/working-with-data/tagHelper @@ -1,7 +1,19 @@ - - - - - - +@{ + List bulletData = new List + { + new LocalBulletData { value = 5, comparativeMeasureValue = 7.5, category= "2001"}, + new LocalBulletData { value = 7, comparativeMeasureValue = 5, category= "2002"}, + new LocalBulletData { value = 10, comparativeMeasureValue = 6, category= "2003"}, + new LocalBulletData { value = 5, comparativeMeasureValue = 8, category= "2004"}, + new LocalBulletData { value = 12, comparativeMeasureValue = 5, category= "2005"}, + new LocalBulletData { value = 8, comparativeMeasureValue = 6, category= "2006"} + }; +} + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/alignment/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/alignment/tagHelper index 0b8ec3d1aa..f2b87fdeaa 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/alignment/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/alignment/tagHelper @@ -1,13 +1,24 @@ +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 37 }, + new PieChartData { x = "UC Browser", y = 17 }, + new PieChartData { x = "iPhone", y = 19 }, + new PieChartData { x = "Others", y = 4 }, + new PieChartData { x = "Opera", y = 11 }, + new PieChartData { x = "Android", y = 12 }, + }; - - - - - - - - - - - - \ No newline at end of file +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/annotation/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/annotation/tagHelper index 7413191118..72cb4fc28f 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/annotation/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/annotation/tagHelper @@ -1,11 +1,23 @@ - - - - - - - - - - - +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/co-ordinate/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/co-ordinate/tagHelper index 512ff7812c..030d49140a 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/co-ordinate/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/co-ordinate/tagHelper @@ -1,11 +1,23 @@ - - - - - - - - - - - +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 37 }, + new PieChartData { x = "UC Browser", y = 17 }, + new PieChartData { x = "iPhone", y = 19 }, + new PieChartData { x = "Others", y = 4 }, + new PieChartData { x = "Opera", y = 11 }, + new PieChartData { x = "Android", y = 12 }, + }; +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/region/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/region/tagHelper index c0c6da75a1..030d49140a 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/region/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/annotation/region/tagHelper @@ -1,13 +1,23 @@ +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 37 }, + new PieChartData { x = "UC Browser", y = 17 }, + new PieChartData { x = "iPhone", y = 19 }, + new PieChartData { x = "Others", y = 4 }, + new PieChartData { x = "Opera", y = 11 }, + new PieChartData { x = "Android", y = 12 }, + }; +} - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/centerlabel/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/centerlabel/tagHelper index 46cd5ccd34..cabaef8c31 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/centerlabel/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/centerlabel/tagHelper @@ -1,6 +1,18 @@ +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 61.3, text = "Chrome: 61.3%"}, + new PieChartData { x = "Safari", y = 24.6, text = "Safari: 24.6%"}, + new PieChartData { x = "Edge", y = 5.0, text = "Edge: 5.0%"}, + new PieChartData { x = "Samsung Internet", y = 2.7, text = "Samsung Internet: 2.7%"}, + new PieChartData { x = "Firefox", y = 2.6, text = "Firefox: 2.6%"}, + new PieChartData { x = "Others", y = 3.6, text = "Others: 3.6%"} + }; +} + - + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/customization/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/customization/tagHelper index fb915d8a98..64c3d003d9 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/customization/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/customization/tagHelper @@ -1,6 +1,18 @@ +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 61.3, text = "Chrome: 61.3%"}, + new PieChartData { x = "Safari", y = 24.6, text = "Safari: 24.6%"}, + new PieChartData { x = "Edge", y = 5.0, text = "Edge: 5.0%"}, + new PieChartData { x = "Samsung Internet", y = 2.7, text = "Samsung Internet: 2.7%"}, + new PieChartData { x = "Firefox", y = 2.6, text = "Firefox: 2.6%"}, + new PieChartData { x = "Others", y = 3.6, text = "Others: 3.6%"} + }; +} + - + @@ -8,4 +20,4 @@ - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/hovertext/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/hovertext/tagHelper index 553af639df..8fe5f114d0 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/hovertext/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/chart-print/hovertext/tagHelper @@ -1,11 +1,22 @@ +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 61.3, text = "Chrome: 61.3%"}, + new PieChartData { x = "Safari", y = 24.6, text = "Safari: 24.6%"}, + new PieChartData { x = "Edge", y = 5.0, text = "Edge: 5.0%"}, + new PieChartData { x = "Samsung Internet", y = 2.7, text = "Samsung Internet: 2.7%"}, + new PieChartData { x = "Firefox", y = 2.6, text = "Firefox: 2.6%"}, + new PieChartData { x = "Others", y = 3.6, text = "Others: 3.6%"} + }; +} + - + + hoverTextFormat="${point.x}
Browser Share
${point.y}%"> - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/connector/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/connector/tagHelper index 6d9c6ce8e5..7557fd3825 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/connector/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/connector/tagHelper @@ -1,15 +1,22 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/custom/tagHelper index ec0007062e..c3b83c03da 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/custom/tagHelper @@ -1,21 +1,30 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} - - - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/default/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/default/tagHelper index 4b8a6ee595..02848a5772 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/default/tagHelper @@ -1,11 +1,20 @@ - - - - - - - - - - - \ No newline at end of file +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/format/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/format/tagHelper index 511583cfc0..afe628240c 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/format/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/format/tagHelper @@ -1,13 +1,21 @@ - @section ControlsSection{ - - - - - - - - - - - } \ No newline at end of file +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/map/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/map/tagHelper index cb3a43e6d5..fb530c2ccf 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/map/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/map/tagHelper @@ -1,11 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/percentage/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/percentage/tagHelper index b499f8241e..663c7b5b32 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/percentage/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/percentage/tagHelper @@ -1,16 +1,26 @@ - - - - - - - - - - - +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/position/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/position/tagHelper index 4295f0fd3a..45e5738383 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/position/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/position/tagHelper @@ -1,13 +1,20 @@ - +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/smartlabels/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/smartlabels/tagHelper index 14b763bbc8..f258a28d94 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/smartlabels/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/smartlabels/tagHelper @@ -1,12 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template-percentage/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template-percentage/tagHelper index 736addad00..400b74f084 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template-percentage/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template-percentage/tagHelper @@ -1,11 +1,20 @@ - - - - - - - - - - - \ No newline at end of file +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template/tagHelper index 6d622d98ff..4358ec17c2 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/template/tagHelper @@ -1,13 +1,27 @@ - @section ControlsSection{ - - - - - - " + "
${point.y}
"> - - - - - } \ No newline at end of file +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/textwrap/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/textwrap/tagHelper index afb3b6b7f4..7ee317eba7 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/textwrap/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/datalabel/textwrap/tagHelper @@ -1,13 +1,21 @@ - @section ControlsSection{ - - - - - - - - - - - } \ No newline at end of file +@{ + List chartData = new List + { + new PieChartData { x = "Chrome", y = 100, text= "Chrome (100M)
40%", tooltipMappingName= "40%" }, + new PieChartData { x=" UC Browser", y= 40, text= "UC Browser (40M)
16%", tooltipMappingName= "16%" }, + new PieChartData { x= "Opera" , y= 30, text= "Opera (30M)
12%", tooltipMappingName= "12%" }, + new PieChartData { x= "Safari", y= 30, text= "Safari (30M)
12%", tooltipMappingName= "12%" }, + }; +} + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/custom/tagHelper index de60ae91fd..0f45dec42e 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/custom/tagHelper @@ -1,14 +1,27 @@ +@{ + List chartData = new List + { + new EmptyPointsChartData { xValue = "Rice", yValue = 80 }, + new EmptyPointsChartData { xValue = "Wheat", yValue = null }, + new EmptyPointsChartData { xValue = "Oil", yValue = 70 }, + new EmptyPointsChartData { xValue = "Corn", yValue = 60 }, + new EmptyPointsChartData { xValue = "Gram", yValue = null }, + new EmptyPointsChartData { xValue = "Milk", yValue = 70 }, + new EmptyPointsChartData { xValue = "Peas", yValue = 80 }, + new EmptyPointsChartData { xValue = "Fruit", yValue = 60 }, + new EmptyPointsChartData { xValue = "Butter",yValue = null }, + }; +} - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/empty/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/empty/tagHelper index 4cffe5b5e7..27275348f4 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/empty/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/empty-points/empty/tagHelper @@ -1,14 +1,27 @@ +@{ + List chartData = new List + { + new EmptyPointsChartData { xValue = "Rice", yValue = 80 }, + new EmptyPointsChartData { xValue = "Wheat", yValue = null }, + new EmptyPointsChartData { xValue = "Oil", yValue = 70 }, + new EmptyPointsChartData { xValue = "Corn", yValue = 60 }, + new EmptyPointsChartData { xValue = "Gram", yValue = null }, + new EmptyPointsChartData { xValue = "Milk", yValue = 70 }, + new EmptyPointsChartData { xValue = "Peas", yValue = 80 }, + new EmptyPointsChartData { xValue = "Fruit", yValue = 60 }, + new EmptyPointsChartData { xValue = "Butter",yValue = null } + }; +} - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/custom/tagHelper index 5cac7fd362..8f5ad9037c 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/custom/tagHelper @@ -1,21 +1,32 @@ +@{ + List chartData = new List + { + new FunnelChartData { xValue = "Chrome", yValue = 37 }, + new FunnelChartData { xValue = "UC Browser", yValue = 17 }, + new FunnelChartData { xValue = "iPhone", yValue = 19 }, + new FunnelChartData { xValue = "Others", yValue = 4 }, + new FunnelChartData { xValue = "Opera", yValue = 11 }, + new FunnelChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/data-label/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/data-label/tagHelper index 7505c91a9d..1734c025eb 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/data-label/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/data-label/tagHelper @@ -1,13 +1,37 @@ - - - - - - - - - - - - - \ No newline at end of file +@page +@using static PyramidFunnelTypeSample.Pages.FunnelSmartLabelModel +@model PyramidFunnelTypeSample.Pages.FunnelSmartLabelModel +@{ + List chartData = new List + { + new FunnelData { xValue = "China", yValue = 1409517397, text = "China" }, + new FunnelData { xValue = "India", yValue = 1339180127, text = "India" }, + new FunnelData { xValue = "United States", yValue = 324459463, text = "United States" }, + new FunnelData { xValue = "Indonesia", yValue = 263991379, text = "Indonesia" }, + new FunnelData { xValue = "Brazil", yValue = 209288278, text = "Brazil" }, + new FunnelData { xValue = "Pakistan", yValue = 197015955, text = "Pakistan" }, + new FunnelData { xValue = "Nigeria", yValue = 190886311, text = "Nigeria" }, + new FunnelData { xValue = "Bangladesh", yValue = 164669751, text = "Bangladesh" }, + new FunnelData { xValue = "Russia", yValue = 143989754, text = "Russia" }, + new FunnelData { xValue = "Mexico", yValue = 129163276, text = "Mexico" }, + new FunnelData { xValue = "Japan", yValue = 127484450, text = " Japan" }, + new FunnelData { xValue = "Ethiopia", yValue = 104957438, text = "Ethiopia" }, + new FunnelData { xValue = "Philippines", yValue = 104918090, text = "Philippines" }, + new FunnelData { xValue = "Egypt", yValue = 97553151, text = "Egypt" }, + new FunnelData { xValue = "Vietnam", yValue = 95540800, text = "Vietnam" }, + new FunnelData { xValue = "Germany", yValue = 82114224, text = "Germany" }, + }; +} + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/default/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/default/tagHelper index 83532d36d3..97be3afa6c 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/default/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new FunnelChartData { xValue = "Chrome", yValue = 37 }, + new FunnelChartData { xValue = "UC Browser", yValue = 17 }, + new FunnelChartData { xValue = "iPhone", yValue = 19 }, + new FunnelChartData { xValue = "Others", yValue = 4 }, + new FunnelChartData { xValue = "Opera", yValue = 11 }, + new FunnelChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/explode/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/explode/tagHelper index c388becc38..17fdd276b5 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/explode/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/explode/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new FunnelChartData { xValue = "Chrome", yValue = 37 }, + new FunnelChartData { xValue = "UC Browser", yValue = 17 }, + new FunnelChartData { xValue = "iPhone", yValue = 19 }, + new FunnelChartData { xValue = "Others", yValue = 4 }, + new FunnelChartData { xValue = "Opera", yValue = 11 }, + new FunnelChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/gap/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/gap/tagHelper index 313840c1ec..87e26c8126 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/gap/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/gap/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new FunnelChartData { xValue = "Chrome", yValue = 37 }, + new FunnelChartData { xValue = "UC Browser", yValue = 17 }, + new FunnelChartData { xValue = "iPhone", yValue = 19 }, + new FunnelChartData { xValue = "Others", yValue = 4 }, + new FunnelChartData { xValue = "Opera", yValue = 11 }, + new FunnelChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/neck-size/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/neck-size/tagHelper index 5e2dd7e833..970c4ee726 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/neck-size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/neck-size/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new FunnelChartData { xValue = "Chrome", yValue = 37 }, + new FunnelChartData { xValue = "UC Browser", yValue = 17 }, + new FunnelChartData { xValue = "iPhone", yValue = 19 }, + new FunnelChartData { xValue = "Others", yValue = 4 }, + new FunnelChartData { xValue = "Opera", yValue = 11 }, + new FunnelChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/size/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/size/tagHelper index 8125ffbf1f..f804d2b4bc 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/funnel/size/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new FunnelChartData { xValue = "Chrome", yValue = 37 }, + new FunnelChartData { xValue = "UC Browser", yValue = 17 }, + new FunnelChartData { xValue = "iPhone", yValue = 19 }, + new FunnelChartData { xValue = "Others", yValue = 4 }, + new FunnelChartData { xValue = "Opera", yValue = 11 }, + new FunnelChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/custom/tagHelper index c85a557145..67c8306a6f 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/custom/tagHelper @@ -1,30 +1,49 @@ +@{ + List chartData = new List + { + new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" }, + new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" }, + new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" }, + new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" }, + new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" }, + new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" }, + new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" }, + new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" }, + new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" }, + new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" }, + new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" }, + new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" }, + new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" }, + new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" } + }; +} - - - - - - - - - - - - - + + + + + + + + + + + + + - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/group/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/group/tagHelper index 58362760cd..6b31a53b7e 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/group/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/group/tagHelper @@ -1,14 +1,32 @@ +@{ + List chartData = new List + { + new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" }, + new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" }, + new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" }, + new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" }, + new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" }, + new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" }, + new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" }, + new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" }, + new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" }, + new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" }, + new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" }, + new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" }, + new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" }, + new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" } + }; +} - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/groupmode/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/groupmode/tagHelper index 3ade2c8a8a..6f2a644ed6 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/groupmode/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/groupmode/tagHelper @@ -1,6 +1,26 @@ - +@{ + List chartData = new List + { + new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" }, + new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" }, + new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" }, + new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" }, + new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" }, + new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" }, + new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" }, + new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" }, + new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" }, + new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" }, + new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" }, + new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" }, + new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" }, + new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" } + }; +} + + - + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/slice/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/slice/tagHelper index a59e38d61a..f362c25fca 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/slice/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/grouping/slice/tagHelper @@ -1,6 +1,26 @@ - +@{ + List chartData = new List + { + new GroupingChartData { xValue = "China",yValue = 26, text = "China: 26" }, + new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" }, + new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" }, + new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" }, + new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" }, + new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" }, + new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" }, + new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" }, + new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" }, + new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" }, + new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" }, + new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" }, + new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" }, + new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" } + }; +} + + - + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/accumulation-animation/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/accumulation-animation/tagHelper index 1a2b3da5a4..8c1dcc82e9 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/accumulation-animation/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/accumulation-animation/tagHelper @@ -1,8 +1,28 @@ +@{ + List chartData = new List + { + new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" }, + new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" }, + new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" }, + new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" }, + new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" }, + new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" }, + new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" }, + new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" }, + new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" }, + new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" }, + new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" }, + new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" }, + new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" }, + new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" } + }; +} + - + diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/arrow-page/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/arrow-page/tagHelper index 63ffb778f7..90d1e84143 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/arrow-page/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/arrow-page/tagHelper @@ -1,9 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/default/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/default/tagHelper index 30ccbe0622..3cb67c28d7 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/default/tagHelper @@ -1,10 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/item-size/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/item-size/tagHelper index 8d7597d77c..f362785719 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/item-size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/item-size/tagHelper @@ -1,10 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/itemPadding/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/itemPadding/tagHelper index b87e7f2d41..a8c0182520 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/itemPadding/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/itemPadding/tagHelper @@ -1,9 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/legend-shape/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/legend-shape/tagHelper index da10aa88d6..443b210bcb 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/legend-shape/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/legend-shape/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/paging/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/paging/tagHelper index dfc54ff3b3..7127f8d1ad 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/paging/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/paging/tagHelper @@ -1,10 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/position/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/position/tagHelper index 505e1b9bfb..55a6d4c03d 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/position/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/position/tagHelper @@ -1,10 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/reverse/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/reverse/tagHelper index a3a57a3629..85984297ad 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/reverse/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/reverse/tagHelper @@ -1,8 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} + - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/size/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/size/tagHelper index 2be7cecfc3..2fbf50eca5 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/size/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/text-wrap/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/text-wrap/tagHelper index 45390248a5..139c3a94bb 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/text-wrap/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/text-wrap/tagHelper @@ -1,8 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} + - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/title/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/title/tagHelper index 1106d365c0..a3b8176c93 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/title/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/legend/title/tagHelper @@ -1,9 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/border/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/border/tagHelper index 2e9a223f07..e38e0e661b 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/border/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/border/tagHelper @@ -1,9 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/custom/tagHelper index 3405f5eaad..ef7e025367 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/custom/tagHelper @@ -1,20 +1,31 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - + + + + + + + + - \ No newline at end of file + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/doughnut/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/doughnut/tagHelper index 8c55bbf25b..89df362752 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/doughnut/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/doughnut/tagHelper @@ -1,10 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/map/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/map/tagHelper index ecb3004898..ab6dd97d02 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/map/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/map/tagHelper @@ -1,13 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%", fill="#498fff"}, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%", fill="#ffa060"}, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%", fill="#ff68b6"}, + new PieChartData { xValue = "Others", yValue = 4 , text = "4%", fill="#81e2a1"}, + }; +} - - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/palette/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/palette/tagHelper index 073661e0e3..2af41b73fc 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/palette/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/palette/tagHelper @@ -1,9 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; + var palette = new string[] { "teal", "skyblue", "green", "red"}; +} - - - - - - - - + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/pie/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/pie/tagHelper index 2d7e0eba8f..166a014817 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/pie/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/pie/tagHelper @@ -1,10 +1,22 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; - - - - - - - - - \ No newline at end of file +} + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/piecenter/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/piecenter/tagHelper index 7e11923aeb..c0bb726dad 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/piecenter/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/piecenter/tagHelper @@ -1,26 +1,25 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37, text = "37%" }, + new PieChartData { xValue = "UC Browser", yValue = 17, text = "17%" }, + new PieChartData { xValue = "iPhone", yValue = 19, text = "19%" }, + new PieChartData { xValue = "Others", yValue = 4, text = "4%" }, + new PieChartData { xValue = "Opera", yValue = 11, text = "11%" }, + new PieChartData { xValue = "Android", yValue = 12, text = "12%" } + }; +} - - @{ - var piecenter = new - { - x = "60%", - y = "60%" - }; - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/radius/tagHelper index fba55fd6de..67d2f134a6 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/radius/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/radius/tagHelper @@ -1,11 +1,20 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/start-angle/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/start-angle/tagHelper index b476914e2e..4aa9979578 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/start-angle/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/start-angle/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper index 72475db8d2..e99c9aa311 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title-cus/tagHelper @@ -1,14 +1,25 @@ +@{ + 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%"} + }; +} - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper index 5f460008cd..7b9acdc2dd 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/sub-title/tagHelper @@ -1,12 +1,23 @@ +@{ + 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%"} + }; +} - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper index 2d7e0eba8f..b69ce58a90 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title-cus/tagHelper @@ -1,10 +1,21 @@ +@{ + 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%"} + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title/tagHelper index 97f2383fc8..2291f99f5f 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/title/tagHelper @@ -1,14 +1,25 @@ +@{ + 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%"} + }; +} - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/various-radius/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/various-radius/tagHelper index 8594e3d062..575f7866ce 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/various-radius/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pie-doughnut/various-radius/tagHelper @@ -1,12 +1,25 @@ +@{ + List chartData = new List + { + new PieRadiusChartData { xValue = "Argentina", yValue = 505370, r = "100"}, + new PieRadiusChartData { xValue = "Belgium", yValue = 551500, r = "118.7"}, + new PieRadiusChartData { xValue = "Cuba", yValue = 312685 , r = "124.6"}, + new PieRadiusChartData { xValue = "Dominican Republic", yValue = 350000 , r = "137.5"}, + new PieRadiusChartData { xValue = "Egypt", yValue = 301000 , r = "150.8"}, + new PieRadiusChartData { xValue = "Kazakhstan", yValue = 300000, r = "155.5"}, + new PieRadiusChartData { xValue = "Somalia", yValue = 357022, r = "160.6"} - - - - - - - - - - - + }; +} + + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/custom/tagHelper index a26c26f0c8..2272549dda 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/custom/tagHelper @@ -1,21 +1,33 @@ +@{ + List chartData = new List + { - - - - - - - - + new PyramidChartData { xValue = "Chrome", yValue = 37 }, + new PyramidChartData { xValue = "UC Browser", yValue = 17 }, + new PyramidChartData { xValue = "iPhone", yValue = 19 }, + new PyramidChartData { xValue = "Others", yValue = 4 }, + new PyramidChartData { xValue = "Opera", yValue = 11 }, + new PyramidChartData { xValue = "Android", yValue = 12 }, + }; +} - \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/default/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/default/tagHelper index 5930f809dd..10f186eb06 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/default/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PyramidChartData { xValue = "Chrome", yValue = 37 }, + new PyramidChartData { xValue = "UC Browser", yValue = 17 }, + new PyramidChartData { xValue = "iPhone", yValue = 19 }, + new PyramidChartData { xValue = "Others", yValue = 14 }, + new PyramidChartData { xValue = "Opera", yValue = 11 }, + new PyramidChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/explode/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/explode/tagHelper index 881f9fad19..d1945c9248 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/explode/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/explode/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PyramidChartData { xValue = "Chrome", yValue = 37 }, + new PyramidChartData { xValue = "UC Browser", yValue = 17 }, + new PyramidChartData { xValue = "iPhone", yValue = 19 }, + new PyramidChartData { xValue = "Others", yValue = 4 }, + new PyramidChartData { xValue = "Opera", yValue = 11 }, + new PyramidChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/gap/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/gap/tagHelper index e6a6cdd910..0442124a23 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/gap/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/gap/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PyramidChartData { xValue = "Chrome", yValue = 37 }, + new PyramidChartData { xValue = "UC Browser", yValue = 17 }, + new PyramidChartData { xValue = "iPhone", yValue = 19 }, + new PyramidChartData { xValue = "Others", yValue = 4 }, + new PyramidChartData { xValue = "Opera", yValue = 11 }, + new PyramidChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/mode/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/mode/tagHelper index 0df41b847e..aeaae33a10 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/mode/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/mode/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PyramidChartData { xValue = "Chrome", yValue = 37 }, + new PyramidChartData { xValue = "UC Browser", yValue = 17 }, + new PyramidChartData { xValue = "iPhone", yValue = 19 }, + new PyramidChartData { xValue = "Others", yValue = 4 }, + new PyramidChartData { xValue = "Opera", yValue = 11 }, + new PyramidChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/size/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/size/tagHelper index be23a73665..62f27cc55a 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/size/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/pyramid/size/tagHelper @@ -1,11 +1,22 @@ +@{ + List chartData = new List + { + new PyramidChartData { xValue = "Chrome", yValue = 37 }, + new PyramidChartData { xValue = "UC Browser", yValue = 17 }, + new PyramidChartData { xValue = "iPhone", yValue = 19 }, + new PyramidChartData { xValue = "Others", yValue = 4 }, + new PyramidChartData { xValue = "Opera", yValue = 11 }, + new PyramidChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/custom/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/custom/tagHelper index 9c00ee8724..bd2a27ddbf 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/custom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/custom/tagHelper @@ -1,12 +1,22 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/default/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/default/tagHelper index d2f07a7857..caeb294968 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/default/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/default/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/format/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/format/tagHelper index 4fda3f5bf9..3971620b28 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/format/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/format/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/header/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/header/tagHelper index b7dd697f3b..06d40a7f50 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/header/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/header/tagHelper @@ -1,11 +1,21 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - - \ No newline at end of file + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/individual/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/individual/tagHelper index 9a91d3a1dd..bd311bdb8f 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/individual/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/individual/tagHelper @@ -1,19 +1,30 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - - - - - - - - + + + + + + + + + - \ No newline at end of file + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/mapping/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/mapping/tagHelper index 453782006c..8f67ab7a29 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/mapping/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/mapping/tagHelper @@ -1,9 +1,29 @@ +@{ + List chartData = new List + { + new GroupingChartData { xValue = "China", yValue = 26, text = "China: 26" }, + new GroupingChartData { xValue = "Russia", yValue = 19, text = "Russia: 19" }, + new GroupingChartData { xValue = "Germany", yValue = 17, text = "Germany: 17" }, + new GroupingChartData { xValue = "Japan", yValue = 12, text = "Japan: 12" }, + new GroupingChartData { xValue = "France", yValue = 10, text = "France: 10" }, + new GroupingChartData { xValue = "South Korea", yValue = 9, text = "South Korea: 9" }, + new GroupingChartData { xValue = "Great Britain", yValue = 27, text = "Great Britain: 27" }, + new GroupingChartData { xValue = "Italy", yValue = 8, text = "Italy: 8" }, + new GroupingChartData { xValue = "Australia", yValue = 8, text = "Australia: 8" }, + new GroupingChartData { xValue = "Netherlands", yValue = 8, text = "Netherlands: 8" }, + new GroupingChartData { xValue = "Hungary", yValue = 8, text = "Hungary: 8" }, + new GroupingChartData { xValue = "Brazil", yValue = 7, text = "Brazil: 7" }, + new GroupingChartData { xValue = "Spain", yValue = 7, text = "Spain: 7" }, + new GroupingChartData { xValue = "Kenya", yValue = 6, text = "Kenya: 6" } + }; +} + - + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/tooltip-format/tagHelper b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/tooltip-format/tagHelper index ebbee2a072..4b93509fdc 100644 --- a/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/tooltip-format/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/chart/accumulation-charts/tooltip/tooltip-format/tagHelper @@ -1,15 +1,28 @@ +@{ + List chartData = new List + { + new PieChartData { xValue = "Chrome", yValue = 37 }, + new PieChartData { xValue = "UC Browser", yValue = 17 }, + new PieChartData { xValue = "iPhone", yValue = 19 }, + new PieChartData { xValue = "Others", yValue = 4 }, + new PieChartData { xValue = "Opera", yValue = 11 }, + new PieChartData { xValue = "Android", yValue = 12 }, + }; +} - - " + - "
${y}
" )) - > - - - - - - - - \ No newline at end of file + + + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper index 7a8dc69ac3..05480df3f5 100644 --- a/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/circulargauge/gauge-animation/tagHelper @@ -6,13 +6,11 @@ - + - - diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/razor b/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/razor index 674bbab575..92699603a7 100644 --- a/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/razor +++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/razor @@ -14,6 +14,7 @@ ) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/tagHelper b/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/tagHelper index 1013781e39..9b334e3e09 100644 --- a/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/gantt/how-to/draganddrop/tagHelper @@ -12,6 +12,7 @@ \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/bing/bingsublayer/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/bing/bingsublayer/tagHelper index e0d1536af6..3924f9a9c4 100644 --- a/ej2-asp-core-mvc/code-snippet/maps/bing/bingsublayer/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/maps/bing/bingsublayer/tagHelper @@ -3,7 +3,7 @@ - + diff --git a/ej2-asp-core-mvc/code-snippet/maps/drilldown/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/drilldown/tagHelper index f93e9201f9..1ebb86f0d4 100644 --- a/ej2-asp-core-mvc/code-snippet/maps/drilldown/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/maps/drilldown/tagHelper @@ -23,7 +23,7 @@
- @@ -32,7 +32,7 @@ - + diff --git a/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/razor b/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/razor index 64cc0b1f46..c9e3071605 100644 --- a/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/razor +++ b/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/razor @@ -12,7 +12,7 @@ { Enable = true, ShouldZoomInitially = true, - HorizontalAlignment = Alignment.Near + ToolbarSettings = new {horizontalAlignment = "Near"} }).Layers(new List { new Syncfusion.EJ2.Maps.MapsLayer diff --git a/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/tagHelper index 38f2e00fc9..2c59597c42 100644 --- a/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/tagHelper +++ b/ej2-asp-core-mvc/code-snippet/maps/markers/marker-zoom/tagHelper @@ -9,13 +9,14 @@ { new MapsMarker{Visible=true, DataSource=data} }; + var toolbarSettings = new { horizontalAlignment = "Near"}; } @using Syncfusion.EJ2.Maps; @using Syncfusion.EJ2;
- + diff --git a/ej2-asp-core-mvc/code-snippet/maps/print-export/export-tile/razor b/ej2-asp-core-mvc/code-snippet/maps/print-export/export-tile/razor index 11d0c44d90..004a63027b 100644 --- a/ej2-asp-core-mvc/code-snippet/maps/print-export/export-tile/razor +++ b/ej2-asp-core-mvc/code-snippet/maps/print-export/export-tile/razor @@ -1,7 +1,7 @@ @using Syncfusion.EJ2; @Html.EJS().Button("togglebtn").IconCss("e-icons e-play-icon").Content("Export").CssClass("e-flat").Render() @Html.EJS().Maps("maps").AllowImageExport(true).Layers(l=> { - l.LayerType(Syncfusion.EJ2.Maps.ShapeLayerType.OSM).Add(); + l.UrlTemplate("https://tile.openstreetmap.org/level/tileX/tileY.png").Add(); }).Render() `| +| Bing Map Key | **Property:** *layers.key*

`@(Html.EJ().Map("container").Layers(layer =>{layer.Key("")}))` | There is no need to mention the key for the online maps. The key will be available in the URL that you mention in the `UrlTemplate` property. For Bing Maps, the key will be available in the URL that you mention in the `getBingUrlTemplate` method.
**Property:** *getBingUrlTemplate*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Add(); }).Render()`
``| +| URL Template | **Property:** *layers.urltemplate*

`@(Html.EJ().Map("container").Layers(layer =>{layer.Urltemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }))`| **Property:** *layers.urlTemplate*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.UrlTemplate:'http://a.tile.openstreetmap.org/level/tileX/tileY.png' }).Render()`| +| Shape Data | **Property:** *layers.shapeData*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeData(usmap).Add}))`| **Property:** *layers.shapeData*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapeData('usmap')}).Render()`| +| Data Source | **Property:** *layers.dataSource*

`@(Html.EJ().Map("container").Layers(layer =>{layer.dataSource('PopulationData')}))`| **Property:** *layers.dataSource*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.DataSource('')}).Render()`| +| Query | Not Applicable | **Property:** *layers.query*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.Query('')}).Render()`| +| Shape Data Path | **Property:** *layers.shapeDataPath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.shapeDataPath('population')}))`| **Property:** *layers.shapeDataPath*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapeDataPath('')}).Render()`| +| Shape Property Path | **Property:** *layers.shapePropertyPath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapePropertyPath('Continent')}))`| **Property:** *layers.shapePropertyPath*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.shapePropertyPath('')}).Render()`| +| Layer Animation | Not Applicable | **Property:** *layers.animationDuration*

`@Html.EJS().Maps("container").Load("load").Layers(layer =>{layer.ShapePropertyPath('')}).Render()`| ## Shape Customization | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Shape Fill | **Property:** *layers.shapeSettings.fill*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.Fill('#626171')}})))`| **Property:** *layers.shapeSettings.fill*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{Fill="red" }).Render()`| -| Shape Palette | **Property:** *layers.shapeSettings.colorPalette*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.ColorPalette(ColorPalette.CustomPalette)}})))`
`.CustomPalette(new List{"#E51400", "#A4C400", "#730202",})`| **Property:** *layers.shapeSettings.palette*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.colorMappings}).Render()`
`ViewBag.colorMappings = data;`| +| Shape Fill | **Property:** *layers.shapeSettings.fill*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.Fill('#626171')}})))`| **Property:** *layers.shapeSettings.fill*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{Fill="red" }).Render()`| +| Shape Palette | **Property:** *layers.shapeSettings.colorPalette*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.ColorPalette(ColorPalette.CustomPalette)}})))`
`.CustomPalette(new List{"#E51400", "#A4C400", "#730202",})`| **Property:** *layers.shapeSettings.palette*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.colorMappings}).Render()`
`ViewBag.colorMappings = data;`| | Shape Point Radius | Not Applicable | **Property:** *layers.shapeSettings.circleRadius*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{circleRadius= 10 }).Render()`| -| Shape Color Value Path | **Property:** *layers.shapeSettings.colorValuePath*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.ColorValuePath('')}})))`| **Property:** *layers.shapeSettings.colorValuePath*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorValuePath='' }).Render()`| -| Shape Value Path | **Property:** *layers.shapeSettings.valuePath*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.ValuePath('')}})))`| **Property:** *layers.shapeSettings.valuePath*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ valuePath='population'}).Render()`| +| Shape Color Value Path | **Property:** *layers.shapeSettings.colorValuePath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.ColorValuePath('')}})))`| **Property:** *layers.shapeSettings.colorValuePath*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorValuePath='' }).Render()`| +| Shape Value Path | **Property:** *layers.shapeSettings.valuePath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.ValuePath('')}})))`| **Property:** *layers.shapeSettings.valuePath*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ valuePath='population'}).Render()`| | Shape DashArray | Not Applicable | **Property:** *layers.shapeSettings.dashArray*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{DashArray='1,2'}).Render()`| | Shape Opacity | Not Applicable | **Property:** *layers.shapeSettings.opacity*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ Opacity='0.5' }).Render()`| -| Range Color Mapping | **Property:** *layers.shapeSettings.colorMappings.rangeColorMapping*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss..RangeColorMappings(cm =>cm.From(10).To(100).color('blue')}})))`| **Property:** *layers.shapeSettings.colorMapping*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render()`
`ViewBag.ColorMapping = colorMapping;`
`colorMapping.Add(new MapsColorMapping{From =100, To=1000, Color = "#b3daff", Label = null})`| -| Equal Color Mapping | **Property:** *layers.shapeSettings.colorMappings.equalColorMapping*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(ss =>{ss.EqualColorMappings(cm =>cm.value('').color('blue'))))`| **Property:** *layers.shapeSettings.colorMapping*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render()`
`ViewBag.ColorMapping = colorMapping;`
`colorMapping.Add(new MapsColorMapping{Value = "1", Color = "#b3daff", Label = null})`| +| Range Color Mapping | **Property:** *layers.shapeSettings.colorMappings.rangeColorMapping*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss..RangeColorMappings(cm =>cm.From(10).To(100).color('blue')}})))`| **Property:** *layers.shapeSettings.colorMapping*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render()`
`ViewBag.ColorMapping = colorMapping;`
`colorMapping.Add(new MapsColorMapping{From =100, To=1000, Color = "#b3daff", Label = null})`| +| Equal Color Mapping | **Property:** *layers.shapeSettings.colorMappings.equalColorMapping*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(ss =>{ss.EqualColorMappings(cm =>cm.value('').color('blue'))))`| **Property:** *layers.shapeSettings.colorMapping*

`@Html.EJS().Maps("container").Load("load").ShapeSettings(new MapsShapeSettings{ColorMapping = ViewBag.ColorMapping }).Render()`
`ViewBag.ColorMapping = colorMapping;`
`colorMapping.Add(new MapsColorMapping{Value = "1", Color = "#b3daff", Label = null})`| ## Marker Customization | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Marker Data Source | **Property:** *layers.markers*

`@(Html.EJ().Map("container").Layers(lr =>{lr.Markers(datasource)}))`
`ViewData["datasource"]= Syncfusion_LocationData.GetSyncfusionLocationData();`
`List syncfusionLocationData = new List{new LocationData {Name = "USA", Latitude =38.8833 , Longitude = -77.0167 }}`| **Property:** *layers.markerSettings.dataSource*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
` function mapsLoad(args){ args.maps.layers[0].markerSettings=[{dataSource:[{latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },}]`| -| Marker Template | **Property:** *layers.markerTemplate*

`@(Html.EJ().Map("container").Layers(lr =>{lr.Markers(datasource)..MarkerTemplate("template")}))`| **Property:** *layers.markerSettings.template*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
`function mapsLoad(args){ args.maps.layers[0].markerSettings =[{template:'Template'}]`| +| Marker Data Source | **Property:** *layers.markers*

`@(Html.EJ().Map("container").Layers(layer =>{layer.Markers(datasource)}))`
`ViewData["datasource"]= Syncfusion_LocationData.GetSyncfusionLocationData();`
`List syncfusionLocationData = new List{new LocationData {Name = "USA", Latitude =38.8833 , Longitude = -77.0167 }}`| **Property:** *layers.markerSettings.dataSource*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
` function mapsLoad(args){ args.maps.layers[0].markerSettings=[{dataSource:[{latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },}]`| +| Marker Template | **Property:** *layers.markerTemplate*

`@(Html.EJ().Map("container").Layers(layer =>{layer.Markers(datasource).MarkerTemplate("template")}))`| **Property:** *layers.markerSettings.template*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
`function mapsLoad(args){ args.maps.layers[0].markerSettings =[{template:'Template'}]`| | Marker Visible | Not Applicable | **Property:** *layers.markerSettings.visible*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
`function mapsLoad(args){ args.maps.layers[0].markerSettings =[{visible:true}]`| | Marker Fill | Not Applicable | **Property:** *layers.markerSettings.fill*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
`function mapsLoad(args){ args.maps.layers[0].markerSettings =[{fill:'red'}]`| | Marker Height | Not Applicable | **Property:** *layers.markerSettings.height*

`@Html.EJS().Maps("container").Load("mapsLoad").Render()`
`function mapsLoad(args){ args.maps.layers[0].markerSettings =[{height:20}]`| @@ -89,31 +88,31 @@ This article describes the API migration process of Maps component from Essentia | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Visible | **Property:** *layers.bubbleSettings.visible*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ShowBubble(true) }})))`| **Property:** *layers.bubbleSettings.visible*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.Visible=true`| -| ValuePath | **Property:** *layers.bubbleSettings.valuePath*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ValuePath('Population') }})))`| **Property:** *layers.bubbleSettings.valuePath*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.ValuePath='Population'`| -| MinValue | **Property:** *layers.bubbleSettings.minValue*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.MinValue(20) }})))`| **Property:** *layers.bubbleSettings.minRadius*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.MinRadius=10`| -| MaxValue | **Property:** *layers.bubbleSettings.maxValue*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.MaxValue(30) }})))` -| **Property:** *layers.bubbleSettings.maxRadius*

`@Html.EJS().Maps("container").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`

`MapsBubble bubble = new MapsBubble();bubble.MaxRadius=20`| -| Bubble Type | Not Applicable | **Property:** *layers.bubbleSettings.bubbleType*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.BubbleType='Circle'`| -| Color | **Property:** *layers.bubbleSettings.color*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.Color('red') }})))`| **Property:** *layers.bubbleSettings.fill*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.Fill='red'`| -| Opacity | **Property:** *layers.bubbleSettings.bubbleOpacity*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.BubbleOpacity(0.6) }})))`| **Property:** *layers.bubbleSettings.opacity*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.Opacity=0.5`| -| Color Value Path | **Property:** *layers.bubbleSettings.colorValuePath*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ColorValuePath('')}})))`| **Property:** *layers.bubbleSettings.colorValuePath*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.ColorValuePath=''`| -| Enable Tooltip | **Property:** *layers.bubbleSettings.showTooltip*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.ShowTooltip(true) }})))`| **Property:** *layers.bubbleSettings.tooltipSettings.visible*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.TooltipSetting.Visible=true`| -| Tooltip Template | **Property:** *layers.bubbleSettings.tooltipTemplate*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs.TooltipTemplate('Template') }})))`| **Property:** *layers.bubbleSettings.tooltipSettings.template*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.TooltipSetting.Template='template'`| -| Bubble Selection | Not Applicable | **Property:** *layers.bubbleSettings.selectionSettings*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.SelectionSetting.Enable=true`| -| Bubble Highlight | Not Applicable | **Property:** *layers.bubbleSettings.highlightSettings*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.HighlightSetting.Enable=true`| -| Range Color Mapping | **Property:** *layers.bubbleSettings.colorMappings.rangeColorMapping*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs. }})))`| **Property:** *layers.bubbleSettings.colorMapping*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{lr.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.`| -| Equal Color Mapping | **Property:** *layers.bubbleSettings.colorMappings.equalColorMapping*

`@(Html.EJ().Map("container").Layers(lr =>{lr.BubbleSettings(bs =>{bs. }})))`| **Property:** *layers.bubbleSettings.colorMapping*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(lr=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.`| +| Visible | **Property:** *layers.bubbleSettings.visible*

`@(Html.EJ().Map("container").Layers(layer=>{layer.BubbleSettings(bubble =>{bubble.ShowBubble(true) }})))`| **Property:** *layers.bubbleSettings.visible*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.Visible=true`| +| ValuePath | **Property:** *layers.bubbleSettings.valuePath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.ValuePath('Population') }})))`| **Property:** *layers.bubbleSettings.valuePath*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{l.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.ValuePath='Population'`| +| MinValue | **Property:** *layers.bubbleSettings.minValue*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.MinValue(20) }})))`| **Property:** *layers.bubbleSettings.minRadius*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.MinRadius=10`| +| MaxValue | **Property:** *layers.bubbleSettings.maxValue*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.MaxValue(30) }})))` +| **Property:** *layers.bubbleSettings.maxRadius*

`@Html.EJS().Maps("container").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`

`MapsBubble bubble = new MapsBubble();bubble.MaxRadius=20`| +| Bubble Type | Not Applicable | **Property:** *layers.bubbleSettings.bubbleType*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.BubbleType='Circle'`| +| Color | **Property:** *layers.bubbleSettings.color*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.Color('red') }})))`| **Property:** *layers.bubbleSettings.fill*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.Fill='red'`| +| Opacity | **Property:** *layers.bubbleSettings.bubbleOpacity*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.BubbleOpacity(0.6) }})))`| **Property:** *layers.bubbleSettings.opacity*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.Opacity=0.5`| +| Color Value Path | **Property:** *layers.bubbleSettings.colorValuePath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.ColorValuePath('')}})))`| **Property:** *layers.bubbleSettings.colorValuePath*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.ColorValuePath=''`| +| Enable Tooltip | **Property:** *layers.bubbleSettings.showTooltip*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.ShowTooltip(true) }})))`| **Property:** *layers.bubbleSettings.tooltipSettings.visible*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.TooltipSetting.Visible=true`| +| Tooltip Template | **Property:** *layers.bubbleSettings.tooltipTemplate*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{bubble.TooltipTemplate('Template') }})))`| **Property:** *layers.bubbleSettings.tooltipSettings.template*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.TooltipSetting.Template='template'`| +| Bubble Selection | Not Applicable | **Property:** *layers.bubbleSettings.selectionSettings*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.SelectionSetting.Enable=true`| +| Bubble Highlight | Not Applicable | **Property:** *layers.bubbleSettings.highlightSettings*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.HighlightSetting.Enable=true`| +| Range Color Mapping | **Property:** *layers.bubbleSettings.colorMappings.rangeColorMapping*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{}})))`| **Property:** *layers.bubbleSettings.colorMapping*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.`| +| Equal Color Mapping | **Property:** *layers.bubbleSettings.colorMappings.equalColorMapping*

`@(Html.EJ().Map("container").Layers(layer =>{layer.BubbleSettings(bubble =>{}})))`| **Property:** *layers.bubbleSettings.colorMapping*

`@Html.EJS().Maps("container").Load("mapsLoad").Layer(layer=>{layer.BubbleSettings(ViewBag.bubbleSettings)}).Render()`
`MapsBubble bubble = new MapsBubble();`
`bubble.`| ## DataLabel Customization | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Visible | **Property:** *layers.labelSettings.showLabels*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.ShowLabels(true)})}))`| **Property:** *layers.dataLabelSettings.visible*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Visible = true})).Render()`| -| Label Path | **Property:** *layers.labelSettings.labelPath*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.LabelPath("iso_3166_2")})}))`| **Property:** *layers.dataLabelSettings.labelPath*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{LabelPath = "name",})).Render()`| -| Enable Smart Label | **Property:** *layers.labelSettings.enableSmartLabel*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.EnableSmartLabel(true);})}))`| Not Applicable | -| Smart Label Size | **Property:** *layers.labelSettings.smartLabelSize*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.SmartLabelSize(20)})}))`| Not Applicable | -| Label Length | **Property:** *layers.labelSettings.labelLength*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LabelSettings(lb =>{lb.LabelLength(20) })}))`| Not Applicable | +| Visible | **Property:** *layers.labelSettings.showLabels*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.ShowLabels(true)})}))`| **Property:** *layers.dataLabelSettings.visible*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Visible = true})).Render()`| +| Label Path | **Property:** *layers.labelSettings.labelPath*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.LabelPath("iso_3166_2")})}))`| **Property:** *layers.dataLabelSettings.labelPath*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{LabelPath = "name",})).Render()`| +| Enable Smart Label | **Property:** *layers.labelSettings.enableSmartLabel*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.EnableSmartLabel(true);})}))`| Not Applicable | +| Smart Label Size | **Property:** *layers.labelSettings.smartLabelSize*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.SmartLabelSize(20)})}))`| Not Applicable | +| Label Length | **Property:** *layers.labelSettings.labelLength*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LabelSettings(lb =>{lb.LabelLength(20) })}))`| Not Applicable | | Opacity | Not Applicable | **Property:** *layers.dataLabelSettings.opacity*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{Opacity=0.5})).Render()`| | Smart Label Mode | Not Applicable | **Property:** *layers.dataLabelSettings.smartLabelMode*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{ SmartLabelMode = SmartLabelMode.Trim})).Render()`| | InterSectAction | Not Applicable | **Property:** *layers.dataLabelSettings.intersectionAction*

`@Html.EJS().Maps("container").Layer({lr.DataLabelSettings(new MapsDataLabelSettings{ IntersectionAction = IntersectionAction.Trim})).Render()`| @@ -123,25 +122,25 @@ This article describes the API migration process of Maps component from Essentia | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Visible | **Property:** *layers.legendSettings.showLegend*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.ShowLegend(true})}))`| **Property:** *legendSettings.visible*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Visible = true}).Render()`| -| Toggle Visibility | **Property:** *layers.legendSettings.toggleVisibility*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.ToggleVisibility(true)})}))`| **Property:** *legendSettings.toggleVisibility*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ToggleVisibility = true}).Render()`| -| Legend Location X | **Property:** *layers.legendSettings.positionX*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.PositionX(250)})}))`| **Property:** *legendSettings.location*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()`| -| Legend Location Y | **Property:** *layers.legendSettings.positionY*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.PositionY(250)})}))`| **Property:** *legendSettings.location*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()`| -| Legend Type | **Property:** *layers.legendSettings.type*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Type:'Layers'})}))`| **Property:** *legendSettings.type*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Type = Syncfusion.EJ2.Maps.LegendType.Layers}).Render()`| -| Label Orientation | **Property:** *layers.legendSettings.labelOrientation*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.LabelOrientation('Vertical')})}))`| Not Applicable | -| Legend Title | **Property:** *layers.legendSettings.title*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Title:'Union territories of India'})}))`| **Property:** *legendSettings.title*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Title= ""}).Render()`| -| Legend Mode | **Property:** *layers.legendSettings.mode*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Mode('Default')})}))`| **Property:** *legendSettings.mode*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Mode = Syncfusion.EJ2.Maps.LegendMode.Default, }).Render()`| -| Legend Position | **Property:** *layers.legendSettings.position*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Position('TopLeft')})}))`| **Property:** *legendSettings.position*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Position = Syncfusion.EJ2.Maps.LegendPosition.Bottom, }).Render()`| -| Legend DockOnMap | **Property:** *layers.legendSettings.dockOnMap*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.DockOnMap(true)})}))`| Not Applicable | -| Legend Alignment | **Property:** *layers.legendSettings.dockPosition*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.DockPosition('Right')})}))`| **Property:** *legendSettings.alignment*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Alignment = Syncfusion.EJ2.Maps.Alignment.Center }).Render()`| -| Legend Left Label | **Property:** *layers.legendSettings.leftLabel*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.LeftLabel('1000M')})}))`| Not Applicable | -| Legend Right Label | **Property:** *layers.legendSettings.rightLabel*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls. RightLabel('3000M')})}))`| Not Applicable | -| Legend Shape | **Property:** *layers.legendSettings.icon*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Icon('Circle')})}))`| **Property:** *legendSettings.shape*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Shape= Syncfusion.EJ2.Maps.LegendShape.Circle }).Render()`| -| Legend Shape Height | **Property:** *layers.legendSettings.iconHeight*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.IconHeight(20)})}))`| **Property:** *legendSettings.shapeHeight*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeHeight=20 }).Render()`| -| Legend Shape Width | **Property:** *layers.legendSettings.iconWidth*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.IconWidth(20)})}))`| **Property:** *legendSettings.shapeWidth*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeWidth=20 }).Render()`| -| Height | **Property:** *layers.legendSettings.height*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Height(50)})}))`| **Property:** *legendSettings.width*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Height='50'}).Render()`| -| Width | **Property:** *layers.legendSettings.width*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.Width(50)})}))`| **Property:** *legendSettings.width*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Width='150' }).Render()`| -| Show Labels | **Property:** *layers.legendSettings.showLabels*

`@(Html.EJ().Map("container").Layers(lr =>{lr.LegendSettings(ls =>{ls.ShowLabels(true)})}))`| Not Applicable | +| Visible | **Property:** *layers.legendSettings.showLegend*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.ShowLegend(true})}))`| **Property:** *legendSettings.visible*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Visible = true}).Render()`| +| Toggle Visibility | **Property:** *layers.legendSettings.toggleVisibility*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.ToggleVisibility(true)})}))`| **Property:** *legendSettings.toggleVisibility*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ToggleVisibility = true}).Render()`| +| Legend Location X | **Property:** *layers.legendSettings.positionX*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.PositionX(250)})}))`| **Property:** *legendSettings.location*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()`| +| Legend Location Y | **Property:** *layers.legendSettings.positionY*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.PositionY(250)})}))`| **Property:** *legendSettings.location*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ }).Render()`| +| Legend Type | **Property:** *layers.legendSettings.type*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Type:'Layers'})}))`| **Property:** *legendSettings.type*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Type = Syncfusion.EJ2.Maps.LegendType.Layers}).Render()`| +| Label Orientation | **Property:** *layers.legendSettings.labelOrientation*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.LabelOrientation('Vertical')})}))`| Not Applicable | +| Legend Title | **Property:** *layers.legendSettings.title*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Title:'Union territories of India'})}))`| **Property:** *legendSettings.title*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Title= ""}).Render()`| +| Legend Mode | **Property:** *layers.legendSettings.mode*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Mode('Default')})}))`| **Property:** *legendSettings.mode*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Mode = Syncfusion.EJ2.Maps.LegendMode.Default, }).Render()`| +| Legend Position | **Property:** *layers.legendSettings.position*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Position('TopLeft')})}))`| **Property:** *legendSettings.position*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Position = Syncfusion.EJ2.Maps.LegendPosition.Bottom, }).Render()`| +| Legend DockOnMap | **Property:** *layers.legendSettings.dockOnMap*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.DockOnMap(true)})}))`| Not Applicable | +| Legend Alignment | **Property:** *layers.legendSettings.dockPosition*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.DockPosition('Right')})}))`| **Property:** *legendSettings.alignment*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Alignment = Syncfusion.EJ2.Maps.Alignment.Center }).Render()`| +| Legend Left Label | **Property:** *layers.legendSettings.leftLabel*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.LeftLabel('1000M')})}))`| Not Applicable | +| Legend Right Label | **Property:** *layers.legendSettings.rightLabel*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls. RightLabel('3000M')})}))`| Not Applicable | +| Legend Shape | **Property:** *layers.legendSettings.icon*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Icon('Circle')})}))`| **Property:** *legendSettings.shape*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Shape= Syncfusion.EJ2.Maps.LegendShape.Circle }).Render()`| +| Legend Shape Height | **Property:** *layers.legendSettings.iconHeight*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.IconHeight(20)})}))`| **Property:** *legendSettings.shapeHeight*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeHeight=20 }).Render()`| +| Legend Shape Width | **Property:** *layers.legendSettings.iconWidth*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.IconWidth(20)})}))`| **Property:** *legendSettings.shapeWidth*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ShapeWidth=20 }).Render()`| +| Height | **Property:** *layers.legendSettings.height*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Height(50)})}))`| **Property:** *legendSettings.width*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Height='50'}).Render()`| +| Width | **Property:** *layers.legendSettings.width*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.Width(50)})}))`| **Property:** *legendSettings.width*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{ Width='150' }).Render()`| +| Show Labels | **Property:** *layers.legendSettings.showLabels*

`@(Html.EJ().Map("container").Layers(layer =>{layer.LegendSettings(ls =>{ls.ShowLabels(true)})}))`| Not Applicable | | Background | Not Applicable | **Property:** *legendSettings.background*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{Background='transparent' }).Render()`| | Label Position | Not Applicable | **Property:** *legendSettings.labelPosition*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{LabelPosition = Syncfusion.EJ2.Maps.LabelPosition.After }).Render()`| | Label Display Mode | Not Applicable | **Property:** *legendSettings.labelDisplayMode*

`@Html.EJS().Maps("container").LegendSettings(new Syncfusion.EJ2.Maps.MapsLegendSettings{LabelDisplayMode = Syncfusion.EJ2.Maps.LabelIntersectAction.Trim, }).Render()`| @@ -166,27 +165,27 @@ This article describes the API migration process of Maps component from Essentia | Pinch Zoom | Not Applicable | **Property:** *zoomSettings.pinchZooming*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{PinchZooming=true}).Render()`| | Single Click Zoom | **Property:** *zoomSettings.enableZoomOnSelection*

`@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.EnableZoomOnSelection(true)}))`| **Property:** *zoomSettings.zoomOnClick*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ZoomOnClick=true}).Render()`| | Zoom Factor | **Property:** *zoomSettings.factor*

`@(Html.EJ().Map("container").ZoomSettings(zm=>{zm.Factor(2)}))`| **Property:** *zoomSettings.zoomFactor*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ ZoomFactor=2,}).Render()`| -| Toolbars | Not Applicable | **Property:** *zoomSettings.toolbars*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{Toolbars =['ZoomIn']}).Render()`| -| Toolbar Orientation | Not Applicable | **Property:** *zoomSettings.toolBarOrientation*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolBarOrientation= Syncfusion.EJ2.Maps.Orientation.Horizontal}).Render()`| -| Toolbar Vertical Alignment | Not Applicable | **Property:** *zoomSettings.verticalAlignment*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{VerticalAlignment = Syncfusion.EJ2.Maps.Alignment.Center}).Render()`| -| Toolbar Horizontal Alignment | Not Applicable | **Property:** *zoomSettings.horizontalAlignment*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{HorizontalAlignment=Syncfusion.EJ2.Maps.Alignment.Center}).Render()`| -| Toolbar Highlight Color | Not Applicable | **Property:** *zoomSettings.highlightColor*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{HighlightColor="#e61576"}).Render()`| -| Toolbar Selection Color | Not Applicable | **Property:** *zoomSettings.selectionColor*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{SelectionColor="#e61576"}).Render()`| -| Toolbar Fill Color | Not Applicable | **Property:** *zoomSettings.color*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{Color="#e61576"}).Render()`| +| Toolbars | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.toolbarItems*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { toolbarItems = new string[] { "ZoomIn" } } }}).Render()`| +| Toolbar Orientation | Not Applicable | **Property:** *zoomSettings.toolbarSettings.orientation*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new {orientation = "Horizontal"}}).Render()`| +| Toolbar Vertical Alignment | Not Applicable | **Property:** *zoomSettings.toolbarSettings.verticalAlignment*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new {verticalAlignment = "Center"}}).Render()`| +| Toolbar Horizontal Alignment | Not Applicable | **Property:** *zoomSettings.toolbarSettings.horizontalAlignment*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new {horizontalAlignment = "Center"}}).Render()`| +| Toolbar Highlight Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.highlightColor*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { highlightColor = "#e61576" } }}).Render()`| +| Toolbar Selection Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.selectionColor*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { selectionColor = "#e61576" } }}).Render()`| +| Toolbar Fill Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.color*

`@Html.EJS().Maps("container").ZoomSettings(new Syncfusion.EJ2.Maps.MapsZoomSettings{ToolbarSettings = new { buttonSettings = new { color = "#e61576"}).Render()`| ## Highlight And Selection Customization | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Highlight Fill | **Property:** *layers.shapeSettings.highlightColor*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.HighlightColor('green') })}))`| **Property:** *fill*

l`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Fill='red'}}).Render()`| -| Enable Highlight | **Property:** *layers.enableMouseHover*

`@(Html.EJ().Map("container").Layers(lr =>{lr.EnableMouseHover(true)}))`| **Property:** *enable*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Enable=true}}).Render()`| -| Highlight Border Color | **Property:** *layers.shapeSettings.highlightStroke*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.HighlightStroke('red')})}))`| **Property:** *layers.highlightSettings.border.color*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Border={Color='green'}}}).Render()`| -| Highlight Border Width | **Property:** *layers.shapeSettings.highlightBorderWidth*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.HighlightBorderWidth=('2')})}))`| **Property:** *layers.highlightSettings.border.width*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Border={Width=2}}}).Render()`| +| Highlight Fill | **Property:** *layers.shapeSettings.highlightColor*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.HighlightColor('green') })}))`| **Property:** *fill*

l`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Fill='red'}}).Render()`| +| Enable Highlight | **Property:** *layers.enableMouseHover*

`@(Html.EJ().Map("container").Layers(layer =>{layer.EnableMouseHover(true)}))`| **Property:** *enable*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Enable=true}}).Render()`| +| Highlight Border Color | **Property:** *layers.shapeSettings.highlightStroke*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.HighlightStroke('red')})}))`| **Property:** *layers.highlightSettings.border.color*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Border={Color='green'}}}).Render()`| +| Highlight Border Width | **Property:** *layers.shapeSettings.highlightBorderWidth*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.HighlightBorderWidth=('2')})}))`| **Property:** *layers.highlightSettings.border.width*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Border={Width=2}}}).Render()`| | Highlight Opacity | Not Applicable | **Property:** layers.*layers.highlightSettings.opacity*

`@Html.EJS().Maps("container").Layers(new List{HighlightSettings = new MapsHighlightSettings{Opacity=0.3}}).Render()`| -| Selection Fill | **Property:** *layers.shapeSettings.selectionColor*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.SelectionColor('blue')})}))`| **Property:** *layers.selectionSettings.fill*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Fill='red'}}).Render()`| -| Selection Enable | **Property:** *layers.enableSelection*

`@(Html.EJ().Map("container").Layers(lr =>{lr.EnableSelection(true)}))`| **Property:** *layers.selectionSettings.enable*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Enable= true}}).Render()`| -| Selection Border Width | **Property:** *layers.selectionSettings.selectionStrokeWidth*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.SelectionStrokeWidth(2)})}))`| **Property:** *layers.selectionSettings.border.width*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Border={Width=2}}}).Render()`| -| Selection Border Color | **Property:** *layers.selectionSettings.selectionStroke*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShapeSettings(sp =>{sp.SelectionStroke("white")})}))`| **Property:** *layers.selectionSettings.border.color*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Border={Color='red'}}}).Render()`| +| Selection Fill | **Property:** *layers.shapeSettings.selectionColor*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.SelectionColor('blue')})}))`| **Property:** *layers.selectionSettings.fill*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Fill='red'}}).Render()`| +| Selection Enable | **Property:** *layers.enableSelection*

`@(Html.EJ().Map("container").Layers(layer =>{layer.EnableSelection(true)}))`| **Property:** *layers.selectionSettings.enable*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Enable= true}}).Render()`| +| Selection Border Width | **Property:** *layers.selectionSettings.selectionStrokeWidth*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.SelectionStrokeWidth(2)})}))`| **Property:** *layers.selectionSettings.border.width*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Border={Width=2}}}).Render()`| +| Selection Border Color | **Property:** *layers.selectionSettings.selectionStroke*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShapeSettings(shape =>{shape.SelectionStroke("white")})}))`| **Property:** *layers.selectionSettings.border.color*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Border={Color='red'}}}).Render()`| | Selection Opacity | Not Applicable | **Property:** *layers.selectionSettings.opacity*

`@Html.EJS().Maps("container").Layers(new List{SelectionSettings = new MapsSelectionSettings{Opacity=0.3}}).Render()`| ## Navigation Line Customization @@ -210,8 +209,8 @@ This article describes the API migration process of Maps component from Essentia | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | -| Tooltip Enable | **Property:** *layers.showTooltip*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ShowTooltip(true)}))` | **Property:** *layers.tooltipSettings.visible*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Visible= true }}}).Render()`| -| Tooltip Template | **Property:** *layers.tooltipTemplate*

`@(Html.EJ().Map("container").Layers(lr =>{lr.ToolTipTemplate('myTooltip').Add}))`| **Property:** *layers.tooltipSettings.visible*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Template='tremplate'}}}).Render()`| +| Tooltip Enable | **Property:** *layers.showTooltip*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ShowTooltip(true)}))` | **Property:** *layers.tooltipSettings.visible*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Visible= true }}}).Render()`| +| Tooltip Template | **Property:** *layers.tooltipTemplate*

`@(Html.EJ().Map("container").Layers(layer =>{layer.ToolTipTemplate('myTooltip').Add}))`| **Property:** *layers.tooltipSettings.visible*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Template='template'}}}).Render()`| | Value Path | Not Applicable | **Property:** *layers.tooltipSettings.valuePath*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{ValuePath = "State"}}}).Render()`| | Format | Not Applicable | **Property:** *layers.tooltipSettings.format*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Format='${State}}}}).Render()`| | Border Color | Not Applicable | **Property:** *layers.tooltipSettings.border.color*

`@Html.EJS().Maps("container").Layers(new List{ new Syncfusion.EJ2.Maps.MapsLayer{ TooltipSettings = new MapsTooltipSettings{Border={ color:'red' } }}}).Render()`| @@ -238,11 +237,11 @@ This article describes the API migration process of Maps component from Essentia | Enable Group Separator | **Property:** *enableGroupSeparator*

`@Html.EJ().Maps("container").UseGroupingSeparator(true))`| **Property:** *useGroupingSeparator*

`@Html.EJS().Maps("container").UseGroupingSeparator(true).Render()`| | Base Layer Index | **Property:** *baseMapIndex*

`@Html.EJ().Maps("container").BaseLayerIndex(1))`| **Property:** *baseLayerIndex*

`@Html.EJS().Maps("container").BaseLayerIndex(1).Render()`| | locale | **Property:** *locale*

`@(Html.EJ().Map("container").Locale('en-us')` | Not Applicable | -| Responsive | **Property:** *isResponsive*

`@(Html.EJ().Map("container").IsResponsivet(true)`| Not Applicable | +| Responsive | **Property:** *isResponsive*

`@(Html.EJ().Map("container").IsResponsive(true)`| Not Applicable | | Enable Pan | **Property:** *enablePan*

`@(Html.EJ().Map("container").EnablePan(true)`| Not Applicable | | Enable Navigation | **Property:** *navigationControl.enableNavigation*

`@(Html.EJ().Map("container").NavigationControl(new{ enableNavigation=true })`| Not Applicable | | Navigation Orientation | **Property:** *navigationControl.orientation*

`@(Html.EJ().Map("container").NavigationControl(new{ orientation='vertical' })`| Not Applicable | -| Navigation Dock Position | **Property:** *navigationControl.dockPosition*

`@(Html.EJ().Map("container").NavigationControl(new{ dockPosition='centerleft' })`| Not Applicable | +| Navigation Dock Position | **Property:** *navigationControl.dockPosition*

`@(Html.EJ().Map("container").NavigationControl(new{ dockPosition='centerLeft' })`| Not Applicable | | Navigation Absolute Position | **Property:** *navigationControl.absolutePosition*

`@(Html.EJ().Map("container").NavigationControl(new{ absolutePosition={ x: 100, y : 100 } })`| Not Applicable | | Dragging Selection | **Property:** *draggingOnSelection*

`@(Html.EJ().Map("container").DraggingOnSelection(true)`| Not Applicable | | Resize | **Property:** *enableResize*

`@(Html.EJ().Map("container").EnableResize(true))`| Not Applicable | @@ -283,4 +282,4 @@ This article describes the API migration process of Maps component from Essentia | Marker Rendering | Not Applicable | **Property:** *markerRendering*

`@Html.EJS().Maps("container").MarkerRendering("markerRendering").Render()`
`function markerRendering(args){}`| | Bubble Mouse Move | Not Applicable | **Property:** *bubbleMouseMove*

`@Html.EJS().Maps("container").BubbleMouseMove("bubbleMouseMove").Render()`
`function bubbleMouseMove(args){}`| | Bubble Mouse Move | Not Applicable | **Property:** *annotationRendering*

`@Html.EJS().Maps("container").AnnotationRendering("annotationRendering").Render()`
`function annotationRendering(args){}`| -| Animation Complete | Not Applicable | **Property:** *animationComplete*

`@Html.EJS().Maps("container").AnimationComplete("animationComplete").Render()`
`function animationComplete(args){}`| \ No newline at end of file +| Animation Complete | Not Applicable | **Property:** *animationComplete*

`@Html.EJS().Maps("container").AnimationComplete("animationComplete").Render()`
`function animationComplete(args){}`| diff --git a/ej2-asp-core-mvc/maps/EJ2_ASP.NETCORE/ej1-api-migration.md b/ej2-asp-core-mvc/maps/EJ2_ASP.NETCORE/ej1-api-migration.md index 13a907e340..3c9a423379 100644 --- a/ej2-asp-core-mvc/maps/EJ2_ASP.NETCORE/ej1-api-migration.md +++ b/ej2-asp-core-mvc/maps/EJ2_ASP.NETCORE/ej1-api-migration.md @@ -1,6 +1,6 @@ --- layout: post -title: Ej1 Api Migration in ##Platform_Name## Maps Component +title: Ej1 Api Migration in Syncfusion ##Platform_Name## Maps Component description: Learn here all about Ej1 Api Migration in Syncfusion ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more. platform: ej2-asp-core-mvc control: Ej1 Api Migration @@ -43,23 +43,23 @@ This article describes the API migration process of Maps component from Essentia | Pinch Zoom | Not Applicable | **Property:** *zoomSettings.pinchZooming*

``| | Single Click Zoom | **Property:** *zoomSettings.enableZoomOnSelection*

`` | **Property:** *zoomSettings.zoomOnClick*

``| | Zoom Factor | **Property:** *zoomSettings.factor*

`` | **Property:** *zoomSettings.zoomFactor*

``| -| Toolbars | Not Applicable | **Property:** *zoomSettings.toolbars*

var toolBarCollection = new[] { "", "", "" };
``
    ``
    ``
``| -| Toolbar Orientation | Not Applicable | **Property:** *zoomSettings.toolBarOrientation*

``| -| Toolbar Vertical Alignment | Not Applicable | **Property:** *zoomSettings.verticalAlignment*

``| -| Toolbar Horizontal Alignment | Not Applicable | **Property:** *zoomSettings.horizontalAlignment*

``| -| Toolbar Highlight Color | Not Applicable | **Property:** *zoomSettings.highlightColor*

``| -| Toolbar Selection Color | Not Applicable | **Property:** *zoomSettings.selectionColor*

``| -| Toolbar Fill Color | Not Applicable | **Property:** *zoomSettings.color*

``| +| Toolbars | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.toolbarItems*

var toolbarSettings = new { buttonSettings = new { toolbarItems = new string[] { "Zoom", "ZoomIn", "Pan", "Reset" } } };
``
    ``
    ``
``| +| Toolbar Orientation | Not Applicable | **Property:** *zoomSettings.toolbarSettings.orientation*

var toolbarSettings = new { orientation = "Horizontal" };
``| +| Toolbar Vertical Alignment | Not Applicable | **Property:** *zoomSettings.toolbarSettings.verticalAlignment*

var toolbarSettings = new { verticalAlignment = "Center" };
``| +| Toolbar Horizontal Alignment | Not Applicable | **Property:** *zoomSettings.toolbarSettings.horizontalAlignment*

var toolbarSettings = new { horizontalAlignment = "Center" };
``| +| Toolbar Highlight Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.highlightColor*

var toolbarSettings = new { buttonSettings = new { highlightColor = "#e61576" } };
``| +| Toolbar Selection Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.selectionColor*

var toolbarSettings = new { buttonSettings = new { selectionColor = "#e61576" } };
``| +| Toolbar Fill Color | Not Applicable | **Property:** *zoomSettings.toolbarSettings.buttonSettings.color*

var toolbarSettings = new { buttonSettings = new { color = "#e61576" } };
``| ## Layer Customization | **Behavior** | **API in Essential JS 1** | **API in Essential JS 2** | | --- | --- | --- | | Type | Not Applicable | **Property:** *layers.type*

` `| -| Layer Type | **Property:** *layers.layerType*

`` | **Property:** *layers.layerType*

` `| +| Layer Type | **Property:** *layers.layerType*

`` | To render shape maps, there is no need to mention the layer type. You can use the `shapeData` property alone.
**Property:** *layers.shapeData*

` `

To render online maps, there is no need to mention the layer type. You can use the `urlTemplate` property alone.
**Property:** *layers.urlTemplate*

` `| | Visible | Not Applicable | **Property:** *layers.visible*

` `| -| Bing Map Type | **Property:** *layers.bingMapType*

`` | **Property:** *layers.bingMapType*

` `| -| Bing Map Key | **Property:** *layers.key*

`` | **Property:** *layers.key*

` `| +| Bing Map Type | **Property:** *layers.bingMapType*

`` | There is no need to mention the type of Bing Maps. The type of Bing Maps will be available in the URL that you mention in the `getBingUrlTemplate` method.
**Property:** *getBingUrlTemplate*

` `
``| +| Bing Map Key | **Property:** *layers.key*

`` | There is no need to mention the key for the online maps. The key will be available in the URL that you mention in the `urlTemplate` property. For Bing Maps, the key will be available in the URL that you mention in the `getBingUrlTemplate` method.
**Property:** *getBingUrlTemplate*

` `
``| | URL Template | **Property:** *layers.urltemplate*

`` | **Property:** *layers.urlTemplate*

` `| | Shape Data | **Property:** *layers.shapeData*

`` | **Property:** *layers.shapeData*

` `| | Data Source | **Property:** *layers.dataSource*

`` | **Property:** *layers.dataSource*

` `| @@ -277,4 +277,4 @@ This article describes the API migration process of Maps component from Essentia | Marker Rendering | Not Applicable | **Property:** *markerRendering*

``
`function markerRendering(args){}` | | Bubble Mouse Move | Not Applicable | **Property:** *bubbleMouseMove*

``
`function bubbleMouseMove(args){}` | | Bubble Mouse Move | Not Applicable | **Property:** *annotationRendering*

``
`function annotationRendering(args){}` | -| Animation Complete | Not Applicable | **Property:** *animationComplete*

``
`function animationComplete(args){}` | \ No newline at end of file +| Animation Complete | Not Applicable | **Property:** *animationComplete*

``
`function animationComplete(args){}` | diff --git a/ej2-asp-core-mvc/maps/accessibility.md b/ej2-asp-core-mvc/maps/accessibility.md index 1a025bba76..9afb0ac757 100644 --- a/ej2-asp-core-mvc/maps/accessibility.md +++ b/ej2-asp-core-mvc/maps/accessibility.md @@ -19,7 +19,7 @@ The accessibility compliance for the Maps component is outlined below. | [WCAG 2.2 Support](../common/accessibility) | Yes | | [Section 508 Support](../common/accessibility) | Yes | | [Screen Reader Support](../common/accessibility) | Yes | -| [Right-To-Left Support](../common/accessibility) | No | +| [Right-To-Left Support](../common/accessibility) | Not Applicable | | [Color Contrast](../common/accessibility) | Yes | | [Mobile Device Support](../common/accessibility) | Yes | | [Keyboard Navigation Support](../common/accessibility) |Yes | diff --git a/ej2-asp-core-mvc/maps/user-interactions.md b/ej2-asp-core-mvc/maps/user-interactions.md index 52b39cd74c..dd8405fbaa 100644 --- a/ej2-asp-core-mvc/maps/user-interactions.md +++ b/ej2-asp-core-mvc/maps/user-interactions.md @@ -8,7 +8,7 @@ publishingplatform: ##Platform_Name## documentation: ug --- -# User Interactions +# User Interactions in ##Platform_Name## Maps Component ## Zooming @@ -930,4 +930,33 @@ The HTML element can be rendered in the tooltip of the Maps using the `Template` -![Enable tooltip](./images/UserInteraction/tooltip-template.PNG) \ No newline at end of file +![Enable tooltip](./images/UserInteraction/tooltip-template.PNG) + +### Changing duration in mobile devices + +{% if page.publishingplatform == "aspnet-core" %} + +To change the duration of the tooltips and tooltip templates in mobile devices, you can use the [Duration](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsTooltipSettings.html#Syncfusion_EJ2_Maps_MapsTooltipSettings_Duration) property in [MapsTooltipSettings](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsTooltipSettings.html). By default, this property is set to **2000** milliseconds. Setting the value to **0** will keep the tooltip visible indefinitely. If it is greater than **0**, the tooltip will be removed after the specified time. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/user-interactions/tooltip-duration/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Tooltip-duration.cs" %} +{% include code-snippet/maps/user-interactions/tooltip-duration/tooltip-duration.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +To change the duration of the tooltips and tooltip templates in mobile devices, you can use the [Duration](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsTooltipSettings.html#Syncfusion_EJ2_Maps_MapsTooltipSettings_Duration) property in [MapsTooltipSettings](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsTooltipSettings.html). By default, this property is set to **2000** milliseconds. Setting the value to **0** will keep the tooltip visible indefinitely. If it is greater than **0**, the tooltip will be removed after the specified time. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/user-interactions/tooltip-duration/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Tooltip-duration.cs" %} +{% include code-snippet/maps/user-interactions/tooltip-duration/tooltip-duration.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} diff --git a/ej2-asp-core-mvc/treemap/accessibility.md b/ej2-asp-core-mvc/treemap/accessibility.md index 55e7e3ea7c..e61394d5db 100644 --- a/ej2-asp-core-mvc/treemap/accessibility.md +++ b/ej2-asp-core-mvc/treemap/accessibility.md @@ -23,7 +23,7 @@ The accessibility compliance for the TreeMap component is outlined below. | [Right-To-Left Support](../common/accessibility) | Yes | | [Color Contrast](../common/accessibility) | Yes | | [Mobile Device Support](../common/accessibility) | Yes | -| [Keyboard Navigation Support](../common/accessibility) | No | +| [Keyboard Navigation Support](../common/accessibility) | Not Applicable | | [Accessibility Checker Validation](../common/accessibility) | Yes | | [Axe-core Accessibility Validation](../common/accessibility) | Yes |