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/CircularGauge/Getting-Started.md b/ReactJS/CircularGauge/Getting-Started.md index 4a4c5bdf..a899a7e6 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 -platform: React JS +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: ReactJS 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