Merge pull request #49 from kmuthukumar23/EJ2-000-samples-update

Samples updated
syncfusion · Jul 5, 2019 · cf09c7a · cf09c7a
2 parents 726a478 + 51d763d
commit cf09c7a
Show file tree

Hide file tree

Showing 499 changed files with 12,797 additions and 6,258 deletions.
diff --git a/Pages/Barcodes/Barcode/DefaultFunctionalities.razor b/Pages/Barcodes/Barcode/DefaultFunctionalities.razor
@@ -5,7 +5,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "Default Functionalities";
+    SampleBrowser.CurrentSampleName = "Ean8";
     SampleBrowser.CurrentControlName = "Barcode";
     SampleBrowser.CurrentControlCategory = "Barcode";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Barcode;

diff --git a/Pages/Charts/Chart/Area.razor b/Pages/Charts/Chart/Area.razor
@@ -16,12 +16,6 @@
     SampleBrowser.Description = new string[] {
         @"<p>
         In this example, you can see how to render and configure the area type charts. Similar to line type series, but the area get closed and filled with series color. You can use <code>dashArray</code>, <code>width</code>, <code>fill</code> properties to customize the spline. <code>Marker</code> and <code>dataLabel</code> are used to represent individual data and its value. Legend is enabled in this example with series type shape.
-    </p>
-    <br>
-
-    <p>
-        More information on the area series can be found in this
-        <a target=""_blank"" href=""http://ej2.syncfusion.com/documentation/chart/api-series.html#type-chartseriestype"">documentation section</a>.
     </p>"
     };
 }

diff --git a/Pages/Charts/Chart/AreaEmpty.razor b/Pages/Charts/Chart/AreaEmpty.razor
@@ -31,7 +31,7 @@
     <EjsChart id="area" title="Inflation Rate">
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="2" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
-            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
+            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis Title="Rates" LabelFormat="{value}M">
             <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

diff --git a/Pages/Charts/Chart/Bar.razor b/Pages/Charts/Chart/Bar.razor
@@ -36,11 +36,13 @@
     <EjsChart id="bar" title="UK Trade in Food Groups - 2015">
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Title="Food">
-            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
+            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis LabelFormat="{value}B" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
+            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
             <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryYAxis>
         <ChartTooltipsettings enable="true"></ChartTooltipsettings>
         <ChartSeriesCollection>

diff --git a/Pages/Charts/Chart/BoxandWhisker.razor b/Pages/Charts/Chart/BoxandWhisker.razor
@@ -34,7 +34,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="boxandwhisker" title="Employee Age Group in Various Department" Width="60%">
+    <EjsChart id="boxandwhisker" title="Employee Age Group in Various Department" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift" LabelIntersectAction="LabelIntersectAction.Trim" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/CategoryAxis.razor b/Pages/Charts/Chart/CategoryAxis.razor
@@ -32,7 +32,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="categoryaxis" title="Internet Users – 2016" Width="60%">
+    <EjsChart id="categoryaxis" title="Internet Users – 2016" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis title="Country" valueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/Column.razor b/Pages/Charts/Chart/Column.razor
@@ -44,7 +44,7 @@
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis>
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
-            <ChartAxisFont Color="transparent"></ChartAxisFont>
+            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
             <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
         </ChartPrimaryYAxis>

diff --git a/Pages/Charts/Chart/ColumnPlacement.razor b/Pages/Charts/Chart/ColumnPlacement.razor
@@ -35,14 +35,14 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="columnplacement" Width="60%" title="Fruit Consumption" EnableSideBySidePlacement="false">
+    <EjsChart id="columnplacement"  title="Fruit Consumption" EnableSideBySidePlacement="false">
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis>
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
-            <ChartAxisFont Color="transparent"></ChartAxisFont>
+            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
             <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
         </ChartPrimaryYAxis>

diff --git a/Pages/Charts/Chart/Crosshair.razor b/Pages/Charts/Chart/Crosshair.razor
@@ -36,6 +36,7 @@
     <EjsChart id="crosshairChart" title="Conns,Inc Stock Details">
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime"
                            Skeleton="MMM">
+            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
             <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis Minimum=83 Maximum=87 Interval=1 Title="Millions in USD"
@@ -52,6 +53,7 @@
         <ChartAxes>
             <ChartAxis RowIndex=0 OpposedPosition=true Minimum=82 Maximum=88 Interval=2 Name="yAxis" Title="Millions in USD (Stock)">              
                 <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>
+                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
             </ChartAxis>
         </ChartAxes>
         <ChartSeriesCollection>

diff --git a/Pages/Charts/Chart/DateTimeAxis.razor b/Pages/Charts/Chart/DateTimeAxis.razor
@@ -32,7 +32,7 @@
 @*End:Hidden*@
 
     <div class="control-section">
-        <EjsChart id="datetimeaxis" title="Alaska Weather Statistics - 2016" Width="60%">
+        <EjsChart id="datetimeaxis" title="Alaska Weather Statistics - 2016" >
             <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
             <ChartPrimaryXAxis labelFormat="MMM" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
                 <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/ErrorBar.razor b/Pages/Charts/Chart/ErrorBar.razor
@@ -53,7 +53,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="errorbar" title="Sales Distribution of Car by Region" Width="60%">
+    <EjsChart id="errorbar" title="Sales Distribution of Car by Region" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/Funnel.razor b/Pages/Charts/Chart/Funnel.razor
@@ -24,7 +24,7 @@
             <AccumulationChartLegendSettings Visible="false">
             </AccumulationChartLegendSettings>
             <AccumulationChartSeriesCollection>
-                <AccumulationChartSeries dataSource="@dataSource" xName="xValue" yName="yValue" type="AccumulationType.Funnel" width="60%" height="80%" neckWidth="15%" neckHeight="18%">
+                <AccumulationChartSeries dataSource="@dataSource" xName="xValue" yName="yValue" type="AccumulationType.Funnel"  height="80%" neckWidth="15%" neckHeight="18%">
                     <AccumulationDataLabelSettings Visible="true" Name="text">
 
                     </AccumulationDataLabelSettings>

diff --git a/Pages/Charts/Chart/IndexedCategoryAxis.razor b/Pages/Charts/Chart/IndexedCategoryAxis.razor
@@ -31,7 +31,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="indexedaxis" title="Internet Users – 2016" Width="60%">
+    <EjsChart id="indexedaxis" title="Internet Users – 2016" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis valueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"  interval="1" isIndexed="true">
             <ChartAxisCrosshairTooltip Enable="true"></ChartAxisCrosshairTooltip>

diff --git a/Pages/Charts/Chart/InversedAxis.razor b/Pages/Charts/Chart/InversedAxis.razor
@@ -32,7 +32,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="inversedaxis" title="Exchange Rate(INR per USD)" Width="60%">
+    <EjsChart id="inversedaxis" title="Exchange Rate(INR per USD)" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis valueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" opposedPosition="true" isInversed="true">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/InversedSpline.razor b/Pages/Charts/Chart/InversedSpline.razor
@@ -34,11 +34,12 @@
     <EjsChart id="inversedspline" title="Climate Graph - 2012" dataSource="@chartData" isTransposed="true">
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1" LabelIntersectAction="LabelIntersectAction.Rotate90">
-            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
+            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis LabelFormat="{value}C">            
-            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryYAxis>
         <ChartTooltipsettings enable="true"></ChartTooltipsettings>
         <ChartSeriesCollection>

diff --git a/Pages/Charts/Chart/MultiSeriesChart.razor b/Pages/Charts/Chart/MultiSeriesChart.razor
@@ -31,7 +31,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="multiseries" title="Annual Growth GDP in France" Width="60%">
+    <EjsChart id="multiseries" title="Annual Growth GDP in France" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis LabelIntersectAction="LabelIntersectAction.Rotate45" Title="Years" Interval="1" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/MultipleAxis.razor b/Pages/Charts/Chart/MultipleAxis.razor
@@ -30,10 +30,8 @@
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Title="Country">
             <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
         </ChartPrimaryXAxis>
-        <ChartPrimaryYAxis Minimum="0" Maximum="100" EdgeLabelPlacement="EdgeLabelPlacement.Shift">
+        <ChartPrimaryYAxis Minimum="0" Maximum="100" Interval="20" LabelFormat="{value}°F">
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
-            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
-            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryYAxis>
         <ChartAxes>
             <ChartAxis Minimum="24" Maximum="36" Interval="2" OpposedPosition="true" RowIndex="0" Name="yAxis2" LabelFormat="{value}°C">

diff --git a/Pages/Charts/Chart/NegativeStack.razor b/Pages/Charts/Chart/NegativeStack.razor
@@ -32,14 +32,14 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="negativestack" title="Height vs Weight" Width="60%">
+    <EjsChart id="negativestack" title="Height vs Weight" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis title="Height in Inches" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis labelFormat="{value} KG">
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
-            <ChartAxisFont Color="transparent"></ChartAxisFont>
+            <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
             <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
         </ChartPrimaryYAxis>
@@ -59,6 +59,7 @@
                 </ChartMarker>
             </ChartSeries>
         </ChartSeriesCollection>
+        <ChartLegendSettings Position="LegendPosition.Right"></ChartLegendSettings>
         <ChartTooltipsettings enable="true"></ChartTooltipsettings>
     </EjsChart>
 </div>

diff --git a/Pages/Charts/Chart/NumericAxis.razor b/Pages/Charts/Chart/NumericAxis.razor
@@ -31,7 +31,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="numericaxis" title="England vs West Indies" Width="60%">
+    <EjsChart id="numericaxis" title="England vs West Indies" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis title="Death Overs" Minimum="15" Maximum="21" Interval="1">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/Pareto.razor b/Pages/Charts/Chart/Pareto.razor
@@ -35,11 +35,18 @@
     <EjsChart id="pareto" title="Defect vs Frequency">
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1" Title="Defects">
+            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
+            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
             <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
+            <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
         </ChartPrimaryXAxis>
         <ChartPrimaryYAxis Title="Frequency" Minimum="0" Maximum="150" Interval="30">
             <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
             <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>
+            <ChartAxisMajorGridLines Width="1"></ChartAxisMajorGridLines>
+            <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>
+            <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>
         </ChartPrimaryYAxis>
         <ChartTooltipsettings Enable="true" Shared="true"></ChartTooltipsettings>
         <ChartSeriesCollection>

diff --git a/Pages/Charts/Chart/Polar.razor b/Pages/Charts/Chart/Polar.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "Polar Chart";
+    SampleBrowser.CurrentSampleName = "Wind Rose";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;

diff --git a/Pages/Charts/Chart/PolarArea.razor b/Pages/Charts/Chart/PolarArea.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "PolarArea Chart";
+    SampleBrowser.CurrentSampleName = "Polar Area";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;
@@ -39,13 +39,13 @@
         <ChartPrimaryYAxis Title="Revenue in Millios" LabelFormat="{value}M"></ChartPrimaryYAxis>
         <ChartSeriesCollection>
             <ChartSeries dataSource="@dataSource" opacity=0.5 name="Product A" xName="x" width="2" yName="y" type="ChartSeriesType.Polar" drawType="ChartDrawType.Area">
-                <ChartBorder Color="transparent" Width="0"></ChartBorder>
+                <ChartSeriesBorder Color="transparent" Width="0"></ChartSeriesBorder>
             </ChartSeries>
             <ChartSeries dataSource="@dataSource" opacity=0.5 name="Product B" xName="x" width="2" yName="y1" type="ChartSeriesType.Polar" drawType="ChartDrawType.Area">
-                <ChartBorder Color="transparent" Width="0"></ChartBorder>
+                <ChartSeriesBorder Color="transparent" Width="0"></ChartSeriesBorder>
             </ChartSeries>
             <ChartSeries dataSource="@dataSource" opacity=0.5 name="Product C" xName="x" width="2" yName="y2" type="ChartSeriesType.Polar" drawType="ChartDrawType.Area">
-                <ChartBorder Color="transparent" Width="0"></ChartBorder>
+                <ChartSeriesBorder Color="transparent" Width="0"></ChartSeriesBorder>
             </ChartSeries>
         </ChartSeriesCollection>
     </EjsChart>

diff --git a/Pages/Charts/Chart/PolarLineChart.razor b/Pages/Charts/Chart/PolarLineChart.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "PolarLine Chart";
+    SampleBrowser.CurrentSampleName = "Polar Line";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;

diff --git a/Pages/Charts/Chart/PolarRangeColumn.razor b/Pages/Charts/Chart/PolarRangeColumn.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "PolarRangeColumn";
+    SampleBrowser.CurrentSampleName = "Polar RangeColumn";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;

diff --git a/Pages/Charts/Chart/PolarScatter.razor b/Pages/Charts/Chart/PolarScatter.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "Scatter";
+    SampleBrowser.CurrentSampleName = "Polar Scatter";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;

diff --git a/Pages/Charts/Chart/PolarStackedArea.razor b/Pages/Charts/Chart/PolarStackedArea.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "Stacked Area";
+    SampleBrowser.CurrentSampleName = "Polar StackedArea";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;

diff --git a/Pages/Charts/Chart/Pyramid.razor b/Pages/Charts/Chart/Pyramid.razor
@@ -3,7 +3,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "Pyramid Chart";
+    SampleBrowser.CurrentSampleName = "Pyramid";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;

diff --git a/Pages/Charts/Chart/RangeBar.razor b/Pages/Charts/Chart/RangeBar.razor
@@ -34,7 +34,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="rangebar" title="Temperature Variation" IsTransposed="true" Width="60%">
+    <EjsChart id="rangebar" title="Temperature Variation" IsTransposed="true" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/RangeColumn.razor b/Pages/Charts/Chart/RangeColumn.razor
@@ -33,7 +33,7 @@
 @*End:Hidden*@
 
 <div class="control-section">
-    <EjsChart id="rangecolumn" title="Temperature Variation" Width="60%">
+    <EjsChart id="rangecolumn" title="Temperature Variation" >
         <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
         <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category">
             <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

diff --git a/Pages/Charts/Chart/RoundedColumn.razor b/Pages/Charts/Chart/RoundedColumn.razor
@@ -4,7 +4,7 @@
 @*Hidden:Lines*@
 @using ej2_blazor_samples
 @{
-    SampleBrowser.CurrentSampleName = "RoundedColumn Chart";
+    SampleBrowser.CurrentSampleName = "Rounded Column";
     SampleBrowser.CurrentControlName = "Chart";
     SampleBrowser.CurrentControlCategory = "Chart";
     SampleBrowser.CurrentControl = SampleBrowser.Config.Chart;
@@ -35,15 +35,15 @@
 @*End:Hidden*@
 
     <div class="control-section">
-        <EjsChart id="roundedcolumn" title="Trade in Food Groups" Width="60%">
+        <EjsChart id="roundedcolumn" title="Trade in Food Groups">
             <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>
             <ChartPrimaryXAxis TickPosition="AxisPosition.Inside" LabelPosition="AxisPosition.Inside" ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category" Interval="1">
                 <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
-                <ChartAxisFont Color="#ffffff"></ChartAxisFont>
+                <ChartAxisLabelStyle Color="#ffffff"></ChartAxisLabelStyle>
             </ChartPrimaryXAxis>
             <ChartPrimaryYAxis minimum="0" maximum="300" interval="50">
                 <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>
-                <ChartAxisFont Color="transparent"></ChartAxisFont>
+                <ChartAxisLabelStyle Color="transparent"></ChartAxisLabelStyle>
                 <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                 <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>
                 <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>