diff --git a/ReactJS/Chart/3D-Chart.md b/ReactJS/Chart/3D-Chart.md index 0368643d..fec4873b 100644 --- a/ReactJS/Chart/3D-Chart.md +++ b/ReactJS/Chart/3D-Chart.md @@ -1,14 +1,14 @@ --- layout: post -title: 3D Chart types available in Essential JavaScript Chart -description: Learn about the different types of 3D charts supported by Syncfusion Essential JavaScript Chart and how to customize the 3D view. -platform: js +title: 3D in ReactJS Chart Control | Syncfusion +description: Learn here all about 3D support in Syncfusion Essential ReactJS Chart control, its elements, and more. +platform: ReactJS control: Chart documentation: ug api : /api/js/ejchart --- -# 3D Chart +# 3D Chart in ReactJS 3D Chart 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 Chart 3D Column](/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 Chart 3D Bar](/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 Chart 3D Stacked Column](/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 Chart 3D 100% Stacked Column](/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 Chart 3D Stacked Bar](/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 Chart 3D 100% Stacked Bar](/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 Chart 3D Pie](/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 Chart 3D Doughnut](/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 Chart 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 Chart 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 Chart 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 Chart 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 Chart Rotating and Tilting 3D](/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 Chart Perspective Angle](/js/Chart/3D-Chart_images/3D-Chart_img14.png) diff --git a/ReactJS/Chart/Chart-Dimensions.md b/ReactJS/Chart/Chart-Dimensions.md index 31022ee4..26fd7399 100644 --- a/ReactJS/Chart/Chart-Dimensions.md +++ b/ReactJS/Chart/Chart-Dimensions.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart size -description: Learn how to set Chart size and make it responsive. -platform: js +title: Dimensions in ReactJS Chart Control | Syncfusion +description: Learn here all about dimensions support in Syncfusion Essential ReactJS Chart control, its elements, and more. +platform: ReactJS control: Chart documentation: ug api : /api/js/ejchart --- -# Chart Dimensions +# Chart Dimensions in ReactJS Chart You can set the size of the chart directly on the chart or to the container of the chart. When you do not specify the size, it takes 450px as the height and window size as its width, by default. @@ -47,7 +47,7 @@ You can also set the chart dimension by using the [`size`](../api/ejchart#member {% endhighlight %} -![](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img1.png) +![ReactJS Chart dimentions](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img1.png) ## Setting size relative to the container size @@ -69,7 +69,7 @@ You can specify the chart size in percentage by using the [`size`](../api/ejchar {% endhighlight %} -![](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img2.png) +![ReactJS Chart setting size relative to the container size](/js/Chart/Chart-Dimensions_images/Chart-Dimensions_img2.png) ## Responsive chart diff --git a/ReactJS/Chart/Legend.md b/ReactJS/Chart/Legend.md index e738ff1e..ef2aad24 100644 --- a/ReactJS/Chart/Legend.md +++ b/ReactJS/Chart/Legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Chart legend -description: How to cutomize the legend in Essential JavaScript Chart. -platform: js +title: Legend in ReactJS Chart Control | Syncfusion +description: Learn here all about Legend support in Syncfusion Essential ReactJS Chart control, its elements, and more. +platform: ReactJS control: Chart documentation: ug api : /api/js/ejchart --- -# Legend +# Legend in ReactJS Chart The legend contains the list of chart series and Trendlines that appear in a chart. @@ -37,7 +37,7 @@ By default, the legend is enabled in the chart. You can enable or disable it by {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img1.png) +![ReactJS Chart Legend Visibility](/js/Chart/Legend_images/Legend_img1.png) [Click](http://js.syncfusion.com/demos/web/#!/azure/chart/chartcustomization/legendposition) here to view the online demo sample for legend position. @@ -71,7 +71,7 @@ To add the title to the legend, you have to specify the [`legend.title.text`](.. {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img2.png) +![ReactJS Chart Legend Title](/js/Chart/Legend_images/Legend_img2.png) ## Position and Align the Legend @@ -101,7 +101,7 @@ By using the [`position`](../api/ejchart#members:legend-position) option, you ca {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img3.png) +![ReactJS Chart Position and Align the Legend](/js/Chart/Legend_images/Legend_img3.png) **Legend Alignment** @@ -131,7 +131,7 @@ You can align the legend to the *center*, *far* or *near* based on its position {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img4.png) +![ReactJS Chart Legend Alignment](/js/Chart/Legend_images/Legend_img4.png) ## Arrange legend items in the rows and columns @@ -170,7 +170,7 @@ You can arrange the legend items horizontally and vertically by using the [`rowC {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img5.png) +![ReactJS Chart Arrange Legend Items in the Row and Column](/js/Chart/Legend_images/Legend_img5.png) ## Customization @@ -202,7 +202,7 @@ To change the legend icon shape, you have to specify the shape in the [`shape`]( {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img6.png) +![ReactJS Chart Legend Shape](/js/Chart/Legend_images/Legend_img6.png) ### Legend items size and border @@ -232,7 +232,7 @@ You can change the size of the legend items by using the [`itemStyle.width`](../ {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img7.png) +![ReactJS Chart Legend Items Size and Border](/js/Chart/Legend_images/Legend_img7.png) ### Legend size @@ -261,7 +261,7 @@ By default, legend takes 20% of the **height** horizontally when it was placed o {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img8.png) +![ReactJS Chart Legend Size](/js/Chart/Legend_images/Legend_img8.png) ### Legend Item Padding @@ -291,7 +291,7 @@ You can control the spacing between the legend items by using the [`itemPadding` {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img9.png) +![ReactJS Chart Legend Item Padding](/js/Chart/Legend_images/Legend_img9.png) ### Legend border @@ -320,7 +320,7 @@ You can customize the legend border by using the [`border`](../api/ejchart#membe {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img10.png) +![ReactJS Chart Legend Border](/js/Chart/Legend_images/Legend_img10.png) ### Scrollbar for legend @@ -350,7 +350,7 @@ You can enable or disable the legend scrollbar by using the [`enableScrollbar`]( {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img11.png) +![ReactJS Chart Scrollbar for Legend](/js/Chart/Legend_images/Legend_img11.png) ### Customize the legend text @@ -386,7 +386,7 @@ To customize the legend item text and title you can use the [`legend.font`](../a {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img12.png) +![ReactJS Chart Customize the Legend Text](/js/Chart/Legend_images/Legend_img12.png) ### LegendItems Text Overflow @@ -417,20 +417,20 @@ You can trim the legend item text when its width exceeds the [`legend.textWidth` {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img13.png) +![ReactJS Chart Legend Items Text Overflow](/js/Chart/Legend_images/Legend_img13.png) **Wrap** By specifying [`textOverflow`](../api/ejchart#members:legend-textOverflow) as **"wrap"**, you can wrap the legend text by word. -![](/js/Chart/Legend_images/Legend_img14.png) +![ReactJS Chart Wrap](/js/Chart/Legend_images/Legend_img14.png) **WrapAndTrim** You can wrap and trim the legend text by specifying [`textOverflow`](../api/ejchart#members:legend-textOverflow) as **"wrapAndTrim"**. The original text will be displayed on mouse hover. -![](/js/Chart/Legend_images/Legend_img15.png) +![ReactJS Chart Wrap and Trim](/js/Chart/Legend_images/Legend_img15.png) ## Handle the legend item clicked @@ -491,7 +491,7 @@ You can select a specific series or point while clicking on the corresponding le {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img16.png) +![ReactJS Chart Series Selection on Legend Item Click](/js/Chart/Legend_images/Legend_img16.png) @@ -523,4 +523,4 @@ var legend={visible:true}; {% endhighlight %} -![](/js/Chart/Legend_images/Legend_img17.png) \ No newline at end of file +![ReactJS Chart Collapsing Legend Item](/js/Chart/Legend_images/Legend_img17.png) \ No newline at end of file diff --git a/ReactJS/CircularGauge/Getting-Started.md b/ReactJS/CircularGauge/Getting-Started.md index 4a4c5bdf..87853f22 100644 --- a/ReactJS/CircularGauge/Getting-Started.md +++ b/ReactJS/CircularGauge/Getting-Started.md @@ -1,20 +1,20 @@ --- layout: post -title: Getting-Started -description: getting started +title: Getting-Started in ReactJS CircularGauge Control | Syncfusion +description: Learn here all about getting started with Syncfusion Essential ReactJS CircularGauge control, its elements, and more. platform: React JS control: CircularGauge documentation: ug --- -# Getting Started +# Getting Started with ReactJS CircularGauge * This section encompasses how to configure Circular Gauge. You can provide data to a Circular Gauge and make them to display in a required way. * The following screen shot displays a Circular Gauge, which visually represents the functions of an Automobile speedometer with RPM (Rotation per Minute), kph (Kilometer per hour) and it denotes the speed level indicators (Safe, Caution and Danger). -![](Getting-Started_images/Getting-Started_img11.png) +![ReactJS CirculaGauge Getting Started](Getting-Started_images/Getting-Started_img11.png) Analog Speedometer {:.caption} @@ -110,7 +110,7 @@ Run the above code example to get a default CircularGauge with default values. -![](Getting-Started_images/Getting-Started_img2.png) +![ReactJS CirculaGauge with Default Value](Getting-Started_images/Getting-Started_img2.png) ## Set Height and Width @@ -142,7 +142,7 @@ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img3.png) +![ReactJS CirculaGauge Set Height and Width](Getting-Started_images/Getting-Started_img3.png) ## Set Background Color @@ -183,7 +183,7 @@ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img4.png) +![ReactJS CirculaGauge Set Background Color](Getting-Started_images/Getting-Started_img4.png) ## Provide Scale Values @@ -233,7 +233,7 @@ var scales = [{ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img5.png) +![ReactJS CirculaGauge Provide Scale Values](Getting-Started_images/Getting-Started_img5.png) ## Add Label Customization @@ -278,7 +278,7 @@ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img6.png) +![ReactJS CirculaGauge Add Label Customization](Getting-Started_images/Getting-Started_img6.png) ## Add Pointers @@ -359,7 +359,7 @@ var scales = [{ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img7.png) +![ReactJS CirculaGauge Add Pointers](Getting-Started_images/Getting-Started_img7.png) ## Add Tick Details @@ -418,7 +418,7 @@ var scales = [{ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img8.png) +!ReactJS CirculaGauge Add Tick Details[](Getting-Started_images/Getting-Started_img8.png) ## Add Range Values @@ -490,7 +490,7 @@ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img9.png) +![ReactJS CirculaGauge Add Range Values](Getting-Started_images/Getting-Started_img9.png) ## Add Indicator Details @@ -600,7 +600,7 @@ Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img10.png) +![ReactJS CirculaGauge Add Indicator Details](Getting-Started_images/Getting-Started_img10.png) ## Add Custom Label Details @@ -674,7 +674,7 @@ var scales = [{ {% endhighlight %} Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img11.png) +![ReactJS CirculaGauge Add Custom Label Details](Getting-Started_images/Getting-Started_img11.png) ## Without using jsx Template @@ -748,4 +748,4 @@ ReactDOM.render( {% endhighlight %} Run the above code example and you will see the following output. -![](Getting-Started_images/Getting-Started_img7.png) \ No newline at end of file +![ReactJS CirculaGauge Without Using jsx Template](Getting-Started_images/Getting-Started_img7.png) \ No newline at end of file