From ba7c3369d659a617e0faf991d706f96de59c06c7 Mon Sep 17 00:00:00 2001 From: gowthamanthavasiyappan <90315799+gowthamanthavasiyappan@users.noreply.github.com> Date: Wed, 12 Jan 2022 17:55:56 +0530 Subject: [PATCH] SEO-1870_Site_Audit_Issues_React --- ReactJS/Chart/3D-Chart.md | 30 +++---- ReactJS/Chart/Axis.md | 142 +++++++++++++++---------------- ReactJS/Chart/Multiple-Panes.md | 16 ++-- ReactJS/Gantt/Getting-Started.md | 24 +++--- ReactJS/Grid/Editing.md | 56 ++++++------ 5 files changed, 134 insertions(+), 134 deletions(-) diff --git a/ReactJS/Chart/3D-Chart.md b/ReactJS/Chart/3D-Chart.md index 0368643d..31867abc 100644 --- a/ReactJS/Chart/3D-Chart.md +++ b/ReactJS/Chart/3D-Chart.md @@ -8,7 +8,7 @@ documentation: ug api : /api/js/ejchart --- -# 3D Chart +# 3D Chart in Syncfusion ReactJS Essential 3D Chart for JavaScript allows you to view 8 chart types in 3D view such as [`Bar`](chart-types#bar-chart), [`StackingBar`](chart-types#stacked-bar-chart), [`StackingBar100`](chart-types#stacked-bar-chart-1), [`Column`](chart-types#column-chart), [`Stacked Column`](chart-types#stacked-column-chart), [`100% Stacked Column`](chart-types#stacked-column-chart-1), [`Pie`](chart-types#pie-chart), [`Doughnut`](chart-types#doughnut-chart). @@ -44,7 +44,7 @@ For rendering a 3D Column Chart, specify the series [`type`](../api/ejchart#memb {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img1.png) +![ReactJS 3D Chart](/js/Chart/3D-Chart_images/3D-Chart_img1.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/column) here to view the 3D Column Chart online demo sample. @@ -80,7 +80,7 @@ You can create a 3D Bar Chart by setting the series [`type`](../api/ejchart#memb {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img2.png) +![ReactJS 3D Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img2.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/bar) here to view the 3D Bar Chart online demo sample. @@ -121,7 +121,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img3.png) +![ReactJS 3D Stacked Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img3.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/stackedcolumn) here to view the Stacked Column 3DChart online demo sample. @@ -161,7 +161,7 @@ Stacking Column 3DChart is rendered by specifying the series [`type`](../api/ejc {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img4.png) +![ReactJS 3D 100% Stacked Column Chart](/js/Chart/3D-Chart_images/3D-Chart_img4.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/100%stackedcolumn) here to view the 100% Stacked Column 3DChart online demo sample. @@ -202,7 +202,7 @@ To create Stacking Bar 3DChart, set the series [`type`](../api/ejchart#members:s {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img5.png) +![ReactJS 3D Stacked Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img5.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/stackedbar) here to view the Stacked Bar 3DChart online demo sample. @@ -242,7 +242,7 @@ You can create 100% Stacking Bar 3DChart by setting the series [`type`](../api/e {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img6.png) +![ReactJS 3D 100% Stacked Bar Chart](/js/Chart/3D-Chart_images/3D-Chart_img6.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/100%stackedbar) here to view the 100% Stacking Bar 3DChart online demo sample. @@ -278,7 +278,7 @@ To render the Pie Chart in 3D view, enable the **enbel3D** option in the chart a {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img7.png) +![ReactJS 3D Pie Chart](/js/Chart/3D-Chart_images/3D-Chart_img7.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/pie) here to view the Pie 3DChart online demo sample. @@ -314,7 +314,7 @@ To render the Doughnut Chart in 3D view, enable the **enbel3D** option in the ch {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img8.png) +![ReactJS 3D Doughnut Chart](/js/Chart/3D-Chart_images/3D-Chart_img8.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/doughnut) here to view the Doughnut 3DChart online demo sample. @@ -345,7 +345,7 @@ To render the EjChart in 3D view, set the [`enable3D`](../api/ejchart#members:en {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img9.png) +![ReactJS 3D View](/js/Chart/3D-Chart_images/3D-Chart_img9.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/3d/column) here to view the 3DChart online demo sample. @@ -371,7 +371,7 @@ To render the EjChart in 3D view, set the [`enable3D`](../api/ejchart#members:en {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img10.png) +![ReactJS Placing Bar](/js/Chart/3D-Chart_images/3D-Chart_img10.png) ### Setting Axis Wall Size @@ -395,7 +395,7 @@ In 3DChart, Cartesian axes lines are represented as walls and it defines the wid {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img11.png) +![ReactJS Setting Axis Wall Size](/js/Chart/3D-Chart_images/3D-Chart_img11.png) ### 3D Depth @@ -418,7 +418,7 @@ By using the [`depth`](../api/ejchart#members:depth) property, you can view the {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img12.png) +![ReactJS 3D Depth](/js/Chart/3D-Chart_images/3D-Chart_img12.png) ### Rotating and Tilting 3D Chart @@ -449,7 +449,7 @@ To spin the 3D Chart on mouse dragging, enable [`enableRotation`](../api/ejchart {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img13.png) +![ReactJS Rotating and Tilting 3D Chart](/js/Chart/3D-Chart_images/3D-Chart_img13.png) ### PerspectiveAngle @@ -473,4 +473,4 @@ The [`perspectiveAngle`](../api/ejchart#members:perspectiveangle) specifies the {% endhighlight %} -![](/js/Chart/3D-Chart_images/3D-Chart_img14.png) +![ReactJS PerspectiveAngle](/js/Chart/3D-Chart_images/3D-Chart_img14.png) diff --git a/ReactJS/Chart/Axis.md b/ReactJS/Chart/Axis.md index ab341ad1..8250ef11 100644 --- a/ReactJS/Chart/Axis.md +++ b/ReactJS/Chart/Axis.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart Axis -description: How to customize the grid lines, tick lines, labels and title of chart axis -platform: js +title: Axis Support in ReactJS Chart Control | Syncfusion +description: Learn here all about Axis Support in Syncfusion Essential Studio ReactJS Chart Control, its elements, and more. +platform: ReactJS control: Chart documentation: ug api : /api/js/ejchart --- -# Axis +# Axis Support in ReactJS Chart **Charts** typically have two axes that are used to measure and categorize data: a vertical (y) axis, and a horizontal (x) axis. @@ -45,7 +45,7 @@ ReactDOM.render( -![](/js/Chart/Axis_images/axis_img1.png) +![ReactJS Chart Axis](/js/Chart/Axis_images/axis_img1.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/column) here to view our online demo sample that uses Category axis. @@ -74,7 +74,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img2.png) +![ReactJS Chart Place labels on ticks](/js/Chart/Axis_images/axis_img2.png) ### Display labels after a fixed interval @@ -99,7 +99,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img3.png) +![ReactJS Chart Display labels after a fixed interval](/js/Chart/Axis_images/axis_img3.png) ### Indexed Category Axis @@ -133,11 +133,11 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img50.png) +![ReactJS Chart Indexed Category Axis](/js/Chart/Axis_images/axis_img50.png) **While Category axis isIndexed value false** -![](/js/Chart/Axis_images/axis_img51.png) +![ReactJS Chart Category axis isIndexed](/js/Chart/Axis_images/axis_img51.png) ## Numeric Axis @@ -164,7 +164,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img4.png) +![ReactJS Chart Numeric Axis](/js/Chart/Axis_images/axis_img4.png) ### Customize numeric range @@ -191,7 +191,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img5.png) +![ReactJS Chart Customize numeric range](/js/Chart/Axis_images/axis_img5.png) #### Customizing numeric interval @@ -217,7 +217,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img6.png) +![ReactJS Chart numeric interval](/js/Chart/Axis_images/axis_img6.png) ### Apply padding to the range @@ -251,7 +251,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img7.png) +![ReactJS Chart Apply padding to the range](/js/Chart/Axis_images/axis_img7.png) #### Round @@ -278,13 +278,13 @@ ReactDOM.render( **Chart before rounding axis range** -![](/js/Chart/Axis_images/axis_img8.png) +![ReactJS Chart Round](/js/Chart/Axis_images/axis_img8.png) **Chart after rounding axis range** -![](/js/Chart/Axis_images/axis_img9.png) +![ReactJS Chart Round axis range](/js/Chart/Axis_images/axis_img9.png) **Additional** @@ -309,7 +309,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img10.png) +![ReactJS Chart rangePadding Axis](/js/Chart/Axis_images/axis_img10.png) **Normal** @@ -335,7 +335,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img11.png) +![ReactJS Chart Normal Axis](/js/Chart/Axis_images/axis_img11.png) ####Customizing the starting range of the axis @@ -362,7 +362,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img66.png) +![ReactJS Chart starting range of the axis](/js/Chart/Axis_images/axis_img66.png) ## DateTime Axis @@ -387,7 +387,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img12.png) +![ReactJS Chart DateTime Axis](/js/Chart/Axis_images/axis_img12.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartaxes/datetimeaxis) here to view our online demo sample for date time axis. @@ -419,7 +419,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img13.png) +![ReactJS Chart Customizing date time range](/js/Chart/Axis_images/axis_img13.png) ### Date time intervals @@ -460,7 +460,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img14.png) +![ReactJS Chart Date time intervals](/js/Chart/Axis_images/axis_img14.png) ### Apply padding to the range @@ -496,7 +496,7 @@ When the value of the [`rangePadding`](../api/ejchart#members:primaryxaxis-range {% endhighlight %} -![](/js/Chart/Axis_images/axis_img15.png) +![ReactJS Chart Apply padding to the range](/js/Chart/Axis_images/axis_img15.png) **Round** @@ -525,12 +525,12 @@ When the value of the [`rangePadding`](../api/ejchart#members:primaryxaxis-range **Chart before rounding axis range** -![](/js/Chart/Axis_images/axis_img16.png) +![ReactJS Chart Chart before rounding axis range](/js/Chart/Axis_images/axis_img16.png) **Chart after rounding axis range** -![](/js/Chart/Axis_images/axis_img17.png) +![ReactJS Chart Chart after rounding axis range](/js/Chart/Axis_images/axis_img17.png) **Additional** @@ -557,7 +557,7 @@ When the value of the [`rangePadding`](../api/ejchart#members:primaryxaxis-range {% endhighlight %} -![](/js/Chart/Axis_images/axis_img18.png) +![ReactJS Chart Additional Axis](/js/Chart/Axis_images/axis_img18.png) ## DateTime Category Axis @@ -584,7 +584,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img63.png) +![ReactJS Chart DateTime Category Axis](/js/Chart/Axis_images/axis_img63.png) [Click](http://js.syncfusion.com/demos/web/#!/bootstrap/chart/ChartAxes/DateTimeCategoryAxis) here to view our online demo sample for date time axis. @@ -616,7 +616,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img64.png) +![ReactJS Chart DateTime Category range](/js/Chart/Axis_images/axis_img64.png) ### DateTime Category intervals @@ -652,7 +652,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img65.png) +![ReactJS Chart DateTime Category intervals](/js/Chart/Axis_images/axis_img65.png) ## Logarithmic Axis @@ -683,7 +683,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing whe {% endhighlight %} -![](/js/Chart/Axis_images/axis_img19.png) +![ReactJS Chart Logarithmic Axis](/js/Chart/Axis_images/axis_img19.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartaxes/logaxis) here to view our online demo sample link for logarithmic axis. @@ -714,7 +714,7 @@ Logarithmic range can be customized by using the [`range`](../api/ejchart#member {% endhighlight %} -![](/js/Chart/Axis_images/axis_img20.png) +![ReactJS Chart Logarithmic range](/js/Chart/Axis_images/axis_img20.png) ### Logarithmic base @@ -741,7 +741,7 @@ Logarithmic base can be customized by using the [`logBase`](../api/ejchart#membe {% endhighlight %} -![](/js/Chart/Axis_images/axis_img21.png) +![ReactJS Chart Logarithmic base](/js/Chart/Axis_images/axis_img21.png) ### Logarithmic interval @@ -769,7 +769,7 @@ Logarithmic axis interval can be customized by using the [`interval`](../api/ejc {% endhighlight %} -![](/js/Chart/Axis_images/axis_img22.png) +![ReactJS Chart Logarithmic interval](/js/Chart/Axis_images/axis_img22.png) ## Label Format @@ -797,7 +797,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img23.png) +![ReactJS Chart Format numeric labels](/js/Chart/Axis_images/axis_img23.png) The following table describes the result of applying some commonly used label formats on numeric values. @@ -882,7 +882,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img24.png) +![ReactJS Chart Format date time values](/js/Chart/Axis_images/axis_img24.png) The following table describes the result of applying some common date time formats to the labelFormat property @@ -955,7 +955,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img25.png) +![ReactJS Chart Custom label format](/js/Chart/Axis_images/axis_img25.png) ## Common axis features @@ -987,7 +987,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img52.png) +![ReactJS Chart Axis Crossing](/js/Chart/Axis_images/axis_img52.png) #### Crossing a specific Axis @@ -1025,7 +1025,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img53.png) +![ReactJS Chart Crossing a specific Axis](/js/Chart/Axis_images/axis_img53.png) Axis will be placed in the opposite side if value of [`crossesAt`](../api/ejchart#members:primaryxaxis-crossesat) property is greater than the maximum value of crossing axis (axis name provided through [`crossesInAxis`](../api/ejchart#members:primaryxaxis-crossesinaxis) property or primary Y axis for horizontal axis). @@ -1049,7 +1049,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img54.png) +![ReactJS Chart Axis](/js/Chart/Axis_images/axis_img54.png) #### Crossing in DateTime Axis @@ -1076,7 +1076,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img55.png) +![ReactJS Chart Crossing in DateTime Axis](/js/Chart/Axis_images/axis_img55.png) #### Crossing in Category Axis @@ -1106,7 +1106,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img56.png) +![ReactJS Chart Crossing in Category Axis](/js/Chart/Axis_images/axis_img56.png) #### Positioning the axis elements while crossing The [`showNextToAxisLine`](../api/ejchart#members:primaryxaxis-shownexttoaxisline) property is used for controlling the axis elements movement along with the axis line while axis crossing is performed. When the showNextToAxisLine is set as false only the axis line and the tick lines are placed at the crossing Value and the axis elements will be placed outside the chart area. The default value of [`showNextToAxisLine`](../api/ejchart#members:primaryxaxis-shownexttoaxisline) is **true**. @@ -1132,7 +1132,7 @@ The [`showNextToAxisLine`](../api/ejchart#members:primaryxaxis-shownexttoaxislin The axis is placed at the crossing value without the axis elements -![](/js/Chart/Axis_images/axis_img67.png) +![ReactJS Chart Positioning the axis elements](/js/Chart/Axis_images/axis_img67.png) ### Axis Visibility @@ -1159,7 +1159,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img26.png) +![ReactJS Chart Axis Visibility](/js/Chart/Axis_images/axis_img26.png) ### Axis title @@ -1195,7 +1195,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img27.png) +![ReactJS Chart Axis title](/js/Chart/Axis_images/axis_img27.png) You can modify the position of the axis title either inside or outside the chart area using the property [`position`]. By default, it will be placed outside the chart area. In addition, you can also change the alignment of the title to near, far and center by [`alignment`] property, using [`offset`] property you can change the position with respect to pixels. @@ -1223,7 +1223,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img62.png) +![ReactJS Chart Axis](/js/Chart/Axis_images/axis_img62.png) ### Label customization @@ -1253,7 +1253,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img28.png) +![ReactJS Chart Label customization Axis](/js/Chart/Axis_images/axis_img28.png) ### Label and tick positioning @@ -1281,7 +1281,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img29.png) +![ReactJS Chart Label and tick positioning](/js/Chart/Axis_images/axis_img29.png) ### Edge labels placement @@ -1309,12 +1309,12 @@ ReactDOM.render( **Chart before setting edge label placement to X-axis** -![](/js/Chart/Axis_images/axis_img30.png) +![ReactJS Chart Edge labels placement](/js/Chart/Axis_images/axis_img30.png) **Chart after setting edge label placement to X-axis** -![](/js/Chart/Axis_images/axis_img31.png) +![ReactJS Chart edge label placement to X-axis](/js/Chart/Axis_images/axis_img31.png) ### Grid lines customization @@ -1351,7 +1351,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img32.png) +![ReactJS Chart Grid lines Axis](/js/Chart/Axis_images/axis_img32.png) ### Tick lines customization @@ -1390,7 +1390,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img33.png) +![ReactJS Chart Tick lines Axis](/js/Chart/Axis_images/axis_img33.png) ### Inversing axis @@ -1420,12 +1420,12 @@ ReactDOM.render( **Chart before inversing the axes** -![](/js/Chart/Axis_images/axis_img34.png) +![ReactJS Chart Inversing axis](/js/Chart/Axis_images/axis_img34.png) **Chart after inversing the axes** -![](/js/Chart/Axis_images/axis_img35.png) +![ReactJS Chart after Inversing Axis](/js/Chart/Axis_images/axis_img35.png) @@ -1456,12 +1456,12 @@ ReactDOM.render( **Chart with X and Y axes at normal position** -![](/js/Chart/Axis_images/axis_img36.png) +![ReactJS Chart Place axes at the opposite side](/js/Chart/Axis_images/axis_img36.png) **Chart with Y-axis at opposed position** -![](/js/Chart/Axis_images/axis_img37.png) +![ReactJS Chart Y-axis at opposed position](/js/Chart/Axis_images/axis_img37.png) ### Maximum number of labels per 100 pixels @@ -1491,19 +1491,19 @@ ReactDOM.render( **Chart before setting maximum labels per 100 pixels** -![](/js/Chart/Axis_images/axis_img38.png) +![ReactJS Chart Chart before setting maximum labels](/js/Chart/Axis_images/axis_img38.png) **Chart after setting maximum labels one per 100 pixels** -![](/js/Chart/Axis_images/axis_img39.png) +![ReactJS Chart Chart after setting maximum labels](/js/Chart/Axis_images/axis_img39.png) ## Multiple Axis Multiple axes can be used in the Chart and chart area can be split into multiple panes to draw multiple series with multiple axes. -![](/js/Chart/Axis_images/axis_img40.png) +![ReactJS Chart Multiple Axis](/js/Chart/Axis_images/axis_img40.png) An additional horizontal or vertical axis can be added to the chart by adding an axis instance to the **axes** collection and then you can associate it to a series by specifying the name of the axis to the [`xAxisName`](../api/ejchart#members:series-xaxisname) or [`yAxisName`](../api/ejchart#members:series-yaxisname) property of the series. @@ -1543,7 +1543,7 @@ ReactDOM.render( -![](/js/Chart/Axis_images/axis_img41.png) +![ReactJS Chart Multiple Axis](/js/Chart/Axis_images/axis_img41.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartaxes/multipleaxes) here to view the multiple axis online demo sample. @@ -1576,7 +1576,7 @@ ReactDOM.render( -![](/js/Chart/Axis_images/axis_img42.png) +![ReactJS Chart Smart Axis Labels](/js/Chart/Axis_images/axis_img42.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartaxes/smartaxislabels) here to view our online demo sample for smart axis labels. @@ -1585,37 +1585,37 @@ ReactDOM.render( The following screenshot displays the result, when the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property is set as **rotate45**. -![](/js/Chart/Axis_images/axis_img43.png) +![ReactJS Chart rotate45 Axis](/js/Chart/Axis_images/axis_img43.png) The following screenshot displays the result, when the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property is set as **rotate90**. -![](/js/Chart/Axis_images/axis_img44.png) +![ReactJS Chart rotate90 Axis](/js/Chart/Axis_images/axis_img44.png) The following screenshot displays the result, when the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property is set as **wrap**. -![](/js/Chart/Axis_images/axis_img45.png) +![ReactJS Chart wrap](/js/Chart/Axis_images/axis_img45.png) The following screenshot displays the result, when of setting the **trim** as value to the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property. -![](/js/Chart/Axis_images/axis_img46.png) +![ReactJS Chart trim](/js/Chart/Axis_images/axis_img46.png) The following screenshot displays the result, when the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property is set as **hide**. -![](/js/Chart/Axis_images/axis_img47.png) +![ReactJS Chart hide](/js/Chart/Axis_images/axis_img47.png) The following screenshot displays the result, when the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property is set as **multipleRows **. -![](/js/Chart/Axis_images/axis_img48.png) +![ReactJS Chart multipleRows](/js/Chart/Axis_images/axis_img48.png) The following screenshot displays the result, when the [`labelIntersectAction`](../api/ejchart#members:primaryxaxis-labelintersectaction) property is set as **wrapByWord**. -![](/js/Chart/Axis_images/axis_img49.png) +![ReactJS Chart wrapByWord](/js/Chart/Axis_images/axis_img49.png) ## Multi-level Labels Axis can be customized with multiple levels of labels using the [`multiLevelLabels`] property. These labels are placed based on the start and end range values and we can add any number of labels to an axis. @@ -1644,7 +1644,7 @@ ReactDOM.render( ); {% endhighlight %} -![](/js/Chart/Axis_images/axis_img57.png) +![ReactJS Chart Multi-level Labels](/js/Chart/Axis_images/axis_img57.png) ### Customizing the multi-Level labels The color, width and type of the border can be customized. The default border type is [`Rectangle`]. And the other supported border types are namely brace, curly brace, without top/bottom border and none. @@ -1675,7 +1675,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img58.png) +![ReactJS Chart Customizing the multi-Level labels](/js/Chart/Axis_images/axis_img58.png) The text of the labels can be customized using the [`text`] and [`font`] properties @@ -1706,7 +1706,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img59.png) +![ReactJS Chart Axis](/js/Chart/Axis_images/axis_img59.png) You can change the alignment of the text to far, near and center position using the [`textAlignment`] property. By default, the text will be center aligned. @@ -1732,7 +1732,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Axis_images/axis_img60.png) +![ReactJS Chart textAlignment](/js/Chart/Axis_images/axis_img60.png) You can trim, wrap or wrapAndTrim the text if it exceeds the maximum text width value using the property [`textOverflow`] @@ -1761,7 +1761,7 @@ ReactDOM.render( The below screenshot shows the trimmed multi-level labels -![](/js/Chart/Axis_images/axis_img61.png) +![ReactJS Chart trimmed multi-level labels](/js/Chart/Axis_images/axis_img61.png) And these labels can be placed in various rows using the [`level`] property. [Click](http://js.syncfusion.com/demos/web/#!/bootstrap/chart/chartaxes/multi-levellabels) here to view the multi-level labels online demo sample. diff --git a/ReactJS/Chart/Multiple-Panes.md b/ReactJS/Chart/Multiple-Panes.md index f22b446f..244cf1e4 100644 --- a/ReactJS/Chart/Multiple-Panes.md +++ b/ReactJS/Chart/Multiple-Panes.md @@ -1,18 +1,18 @@ --- layout: post -title: Render Chart in multiple layouts +title: Render Chart in multiple layouts | Syncfusion description: Learn how to split chart area into multiple plot areas and render different types of series in each area. -platform: js +platform: ReactJS control: Chart documentation: ug api : /api/js/ejchart --- -# Multiple panes +# Multiple panes in ReactJS Chart Chart area can be divided into multiple panes using the [`rowDefinitions`](../api/ejchart.html#members:rowdefinitions) and [`columnDefinitions`](../api/ejchart.html#members:rowdefinitions) properties. -### Row Definitions +## Row Definitions To split the chart area vertically into a number of rows, use [`rowDefinitions`](../api/ejchart.html#members:rowdefinitions) of the chart. @@ -66,7 +66,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Multiple-Panes_images/Multiple-Panes_img1.png) +![React Chart Multiple Panes](/js/Chart/Multiple-Panes_images/Multiple-Panes_img1.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartaxes/multipleaxes) here to view the online demo sample for multiple panes. @@ -116,7 +116,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Multiple-Panes_images/Multiple-Panes_img2.png) +![React Chart Spanning Vertical Axis](/js/Chart/Multiple-Panes_images/Multiple-Panes_img2.png) ## Column Definitions @@ -166,7 +166,7 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Multiple-Panes_images/Multiple-Panes_img3.png) +![React Chart horizontal axis](/js/Chart/Multiple-Panes_images/Multiple-Panes_img3.png) **Column Span** @@ -210,4 +210,4 @@ ReactDOM.render( {% endhighlight %} -![](/js/Chart/Multiple-Panes_images/Multiple-Panes_img4.png) +![React Chart Column Span](/js/Chart/Multiple-Panes_images/Multiple-Panes_img4.png) diff --git a/ReactJS/Gantt/Getting-Started.md b/ReactJS/Gantt/Getting-Started.md index 182a35a2..6814f28a 100644 --- a/ReactJS/Gantt/Getting-Started.md +++ b/ReactJS/Gantt/Getting-Started.md @@ -1,13 +1,13 @@ --- layout: post -title: Getting-Started -description: getting started +title: Getting Started with ReactJS Gantt Control | Syncfusion +description: Learn here all about getting started with Syncfusion Essential Studio ReactJS Gantt Control, its elements, and more. platform: React JS control: Gantt documentation: ug --- -# Getting Started +# Getting Started with ReactJS Gantt This section explains briefly about how to create a Gantt chart in your application with ReactJS. @@ -17,7 +17,7 @@ To get started Syncfusion ReactJS application refer [`this`](https://help.syncfu In this tutorial, you can learn how to create a simple Gantt chart, add tasks or subtasks, and set relationship between tasks during the design phase of a software project. The following screenshot displays the desired output after completing this tutorial, -![](Getting-Started_images/Getting-Started_img4.png) +![ReactJS Gantt Getting Started](Getting-Started_images/Getting-Started_img4.png) The required ReactJS script dependencies as follows. And you can also refer [React](https://facebook.github.io/react/docs/getting-started.html) to know more about react js. @@ -167,7 +167,7 @@ ReactDOM.render( A Gantt chart is created as shown in the following screen shot. -![](Getting-Started_images/Getting-Started_img5.png) +![ReactJS Gantt Using jsx Template](Getting-Started_images/Getting-Started_img5.png) ## Enable Toolbar @@ -207,7 +207,7 @@ var toolbarsettings = { The following screen shot displays a Tool bar in Gantt chart control: -![](Getting-Started_images/Getting-Started_img6.png) +![ReactJS Gantt Enable Toolbar](Getting-Started_images/Getting-Started_img6.png) N> Add, edit, delete, indent and outdent options are enabled when enabling the allowEditing, allowAdding, allowDelete, allowIndent and allowOutdent properties in the edit Options. @@ -277,7 +277,7 @@ ReactDOM.render( The following screen shot displays a Gantt chart control with Enable Editing options. -![](Getting-Started_images/Getting-Started_img7.png) +![ReactJS Gantt Predecessor Editing](Getting-Started_images/Getting-Started_img7.png) N> Both cellEditing and normal editing operations are performed through double-click or single click action that can be defined by editSettings.beginEditAction property. @@ -299,7 +299,7 @@ You can enable the context menu in Gantt, by setting the [`enableContextMenu`](h The following screen shot displays Gantt chart in which Context menu option is enabled: -![](Getting-Started_images/Getting-Started_img8.png) +![ReactJS Gantt Enable Context Menu](Getting-Started_images/Getting-Started_img8.png) ## Enable Column Menu @@ -319,7 +319,7 @@ You can enable the column menu in Gantt, by setting the [`showColumnChooser`](ht The following screen shot displays Gantt chart in which column chooser option is enabled: -![](Getting-Started_images/Getting-Started_img11.png) +![ReactJS Gantt Enable Column Menu](Getting-Started_images/Getting-Started_img11.png) ## Provide tasks relationship @@ -348,7 +348,7 @@ You can show the relationship in tasks, by using the [`predecessorMapping`](http The following screenshot displays the relationship between tasks. -![](Getting-Started_images/Getting-Started_img9.png) +![ReactJS Gantt Provide tasks relationship](Getting-Started_images/Getting-Started_img9.png) ## Provide Resources @@ -388,7 +388,7 @@ ReactDOM.render( The following screenshot displays resource allocation for tasks in Gantt chart. -![](Getting-Started_images/Getting-Started_img10.png) +![ReactJS Gantt Provide Resources](Getting-Started_images/Getting-Started_img10.png) By following these steps, you have learned how to provide data source to Gantt chart, how to configure Gantt to set task relationships, assign resources for each task, and add toolbar with necessary buttons. @@ -413,4 +413,4 @@ In Gantt, you can on or off weekends high lighting by setting the [`highlightWee The following screen shot displays Gantt chart in which highlight weekends is enabled: -![](Getting-Started_images/Getting-Started_img12.png) +![ReactJS Gantt Highlight Weekend](Getting-Started_images/Getting-Started_img12.png) diff --git a/ReactJS/Grid/Editing.md b/ReactJS/Grid/Editing.md index a73c9e5f..20cc0c27 100644 --- a/ReactJS/Grid/Editing.md +++ b/ReactJS/Grid/Editing.md @@ -6,7 +6,7 @@ platform: reactjs control: Grid documentation: ug --- -# Editing +# Editing Support in ReactJS Grid The grid control has support for dynamic insertion, updating and deletion of records. You can start the edit action either by double clicking the particular row or by selecting the required row and clicking on Edit icon in toolbar. Similarly, you can add new record to grid either by clicking on insert icon in toolbar or on an external button which is bound to call [`addRecord`](http://help.syncfusion.com/api/js/ejgrid#methods:addrecord "addRecord") method of grid. `Save` and `Cancel` while on edit mode is possible using respective toolbar icon in grid. @@ -54,7 +54,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img1.png) +![ReactJS Grid Editing](Editing_images/Editing_img1.png) ## Cell edit type and its params @@ -149,7 +149,7 @@ The following code example describes the above behavior. The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img2.png) +![ReactJS Grid Editing Type](Editing_images/Editing_img2.png) ## Cell Edit Template @@ -205,7 +205,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img3.png) +![ReactJS Grid Cell Edit Template](Editing_images/Editing_img3.png) ## Edit Modes @@ -247,7 +247,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img4.png) +![ReactJS Grid Edit Modes](Editing_images/Editing_img4.png) ### Inline Form @@ -285,7 +285,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img5.png) +![ReactJS Grid Inline Form](Editing_images/Editing_img5.png) ### Inline Template Form @@ -373,13 +373,13 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img6.png) +![ReactJS Grid Inline Template Form](Editing_images/Editing_img6.png) {:caption} Before the template elements are converted to JS controls -![](Editing_images/Editing_img7.png) +![ReactJS Grid Before Inline Template Form](Editing_images/Editing_img7.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -419,7 +419,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img8.png) +![ReactJS Grid Dialog](Editing_images/Editing_img8.png) ### Dialog Template Form @@ -506,11 +506,11 @@ var EditGrid = React.createClass({ The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img9.png) +![ReactJS Grid Dialog Template Form](Editing_images/Editing_img9.png) {:caption} Before the template elements are converted to JS controls -![](Editing_images/Editing_img10.png) +![ReactJS Grid Before Dialog Template Form](Editing_images/Editing_img10.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -550,7 +550,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img11.png) +![ReactJS Grid External Form](Editing_images/Editing_img11.png) Form Position: @@ -593,7 +593,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img12.png) +![ReactJS Grid Form Position](Editing_images/Editing_img12.png) ### External Template Form @@ -682,11 +682,11 @@ var EditGrid = React.createClass({ The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img13.png) +![ReactJS Grid External Template Form](Editing_images/Editing_img13.png) {:caption} Before the template elements are converted to JS controls -![](Editing_images/Editing_img14.png) +![ReactJS Grid Before External Template Form](Editing_images/Editing_img14.png) {:caption} After the template elements are converted to JS controls using actionComplete event @@ -730,7 +730,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img15.png) +![ReactJS Grid Batch Excel Like](Editing_images/Editing_img15.png) ## Confirmation messages @@ -771,7 +771,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img16.png) +![ReactJS Grid Confirmation Editing](Editing_images/Editing_img16.png) To show delete confirm dialog while deleting a record, set [`showDeleteConfirmDialog`](http://help.syncfusion.com/api/js/ejgrid#members:editsettings-showdeleteconfirmdialog "showDeleteConfirmDialog") as true. @@ -810,7 +810,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img17.png) +![ReactJS Grid Editing](Editing_images/Editing_img17.png) ## Column Validation @@ -937,7 +937,7 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img18.png) +![ReactJS Grid jQuery Validation](Editing_images/Editing_img18.png) ## Persisting data in Server @@ -1020,7 +1020,7 @@ The grid actions (sorting, filtering, paging, searching, and aggregates) details Please refer the below screen shot. -![](Editing_images/Editing_img20.png) +![ReactJS Grid Persisting data in Server](Editing_images/Editing_img20.png) Also, using 'DataOperations' helper class you can perform grid action at server side. The in-built methods that we have provided in the DataOperations class are listed below. @@ -1162,7 +1162,7 @@ public ActionResult Insert(EditableOrder value) The newly added record details are bound to the 'value' parameter. Please refer the below image. -![](Editing_images/Editing_img21.png) +![ReactJS Grid Insert Record](Editing_images/Editing_img21.png) ### Update Record: @@ -1182,7 +1182,7 @@ public ActionResult Update(EditableOrder value) The updated record details are bound to the 'value' parameter. Please refer the below image. -![](Editing_images/Editing_img22.png) +![ReactJS Grid Update Record](Editing_images/Editing_img22.png) ### Delete Record: @@ -1202,7 +1202,7 @@ public ActionResult Remove(int key) The deleted record primary key value is bound to the 'key' parameter. Please refer the below image. -![](Editing_images/Editing_img23.png) +![ReactJS Grid Delete Record](Editing_images/Editing_img23.png) ### CRUD URL: @@ -1261,7 +1261,7 @@ public ActionResult CrudUpdate(EditableOrder value, string action,int key) Please refer the below image to know about the action parameter -![](Editing_images/Editing_img24.png) +![ReactJS Grid CRUD URL](Editing_images/Editing_img24.png) N> If you specify `insertUrl` along with `CrudUrl` then while adding `insertUrl` only called. @@ -1323,7 +1323,7 @@ public ActionResult BatchUpdate(string action, List added, List 1. If it is remote, then the newly added record is placed based on the index from current view data. @@ -1445,4 +1445,4 @@ Create a JSX file and paste the following content The following output is displayed as a result of the above code example. -![](Editing_images/Editing_img28.png) \ No newline at end of file +![ReactJS Grid Default column values](Editing_images/Editing_img28.png) \ No newline at end of file