Merge pull request #452 from Syncfusion-Content/hotfix/hotfix-v24.1.41

DOCINFRA-2341_merged_using_automation

Author: SyncfusionBuild

js/Chart/Getting-Started.md

@@ -76,7 +76,7 @@ Initialize the chart by using the ejChart method. The chart is rendered to the s
 
 Now, the Chart is rendered with some auto-generated random values and with default Column chart type.
 
-![JavaScript Chart getting started](Getting-Started_images/Getting-Started_img1.png)
+![JavaScript Chart getting started.](Getting-Started_images/javascript-chart-getting-started.png)
 
 
 ## Populate chart with data
@@ -143,7 +143,7 @@ Now, map the month and sales values in the data source to the line series by set
 
 {% endhighlight %}
 
-![JavaScript Chart Populate chart with data](Getting-Started_images/Getting-Started_img2.png)
+![JavaScript Chart Populate chart with data.](Getting-Started_images/javascript-chart-data.png)
 
 
 Since the data is related to sales, format the vertical axis labels by adding ‘$’ as a prefix and ‘K’ as a suffix to each label. This can be achieved by setting the "${value}K" to the [`labelFormat`](../api/ejchart#members:primaryxaxis-labelformat) option of the axis. Here, {value} acts as a placeholder for each axis label, "$" and "K" are the actual prefix and suffix added to each axis label. 
@@ -165,7 +165,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![JavaScript Chart axis](Getting-Started_images/Getting-Started_img3.png)
+![JavaScript Chart axis.](Getting-Started_images/javascript-chart-axis.png)
 
 
 Refer to the [`Axis`](axis) section to know more about axis types, adding multiple axes and other customization options.
@@ -197,7 +197,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![JavaScript Chart Add Data Labels](Getting-Started_images/Getting-Started_img4.png)
+![JavaScript Chart Add Data Labels.](Getting-Started_images/javascript-chart-data-labels.png)
 
 
 There are situations where the default label content is not sufficient to the user. In this case, you can use the [`template`](../api/ejchart#members:series-marker-datalabel-template) option to format the label content with some additional information.
@@ -241,7 +241,7 @@ The following code example shows how to set the id of the above template to [`te
 
 {% endhighlight %}
 
-![JavaScript Chart data marker](Getting-Started_images/Getting-Started_img5.png)
+![JavaScript Chart data marker.](Getting-Started_images/javascript-chart-data-marker.png)
 
 
 Refer to the [`Data Markers`](Data-Markers.html) section to know more about the options available to customize it.
@@ -272,7 +272,7 @@ You can enable or disable the legend by using the [`visible`](../api/ejchart#mem
 
 {% endhighlight %}
 
-![JavaScript Chart Enable Legend](Getting-Started_images/Getting-Started_img6.png)
+![JavaScript Chart Enable Legend.](Getting-Started_images/javascript-chart-legend.png)
 
 
 Refer to the [`Legend`](Legend.html) section to know more about how to position legend and customize its appearance.
@@ -300,7 +300,7 @@ The following code example illustrates this,
 
 {% endhighlight %}
 
-![JavaScript Chart Enable Tooltip](Getting-Started_images/Getting-Started_img7.png)
+![JavaScript Chart Enable Tooltip.](Getting-Started_images/javascript-chart-tooltip.png)
 
 
 Refer to the [`Tooltip`](user-interactions.html) section to know more about formatting tooltip contents and customizing its appearance.
@@ -324,7 +324,7 @@ You need to add a title to the chart to provide quick information to the user ab
 
 {% endhighlight %}
 
-![JavaScript Chart Add Chart Title](Getting-Started_images/Getting-Started_img8.png)
+![JavaScript Chart Add Chart Title.](Getting-Started_images/javascript-chart-title.png)
 
 
 Refer to the [`Chart Title`](chart-title.html) section to know more about aligning title, customizing its appearance and adding subtitle to the chart.

js/Chart/Getting-Started_images/Getting-Started_img3.png renamed to js/Chart/Getting-Started_images/javascript-chart-axis.png

@@ -1,20 +1,20 @@
 ---
 layout: post
-title: Getting-Started
-description: getting started
+title: Getting Started with JavaScript Color Picker | Syncfusion
+description: Learn here all about getting started with Syncfusion Essential Studio JavaScript Color Picker control, its elements, and more details.
 platform: js
 control: ColorPicker
 documentation: ug
 api: /api/js/ejcolorpicker
 ---
 
-# Getting Started
+# Getting Started with JavaScript Color Picker
 
 This section explains briefly about how to create a **ColorPicker** in your application with **JavaScript**. The **Essential JavaScript ColorPicker** control provides you support for selecting the colors in different sources such as palettes, picker or custom palettes. You can also render the color value from control in three formats such as RGB, HSV and HEXCODE. 
 
 In this example, you can learn how to customize **ColorPicker** control in a category Application. 
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img1.png) 
+![Getting Started with JavaScript Color Picker.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-getting-started.png) 
 
 In the following sections you can learn, How to:
 
@@ -79,7 +79,7 @@ Initialize **ColorPicker** element in **<script>** tag.
 
 Run the above code to render the following output.
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img2.png) 
+![JavaScript Color Picker output.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-output.png) 
 
 ## Initialize the other widgets
 
@@ -245,7 +245,7 @@ Add the following style section to align form fields.
 
 Run the above code to render the following output.
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img3.png) 
+![JavaScript Color Picker output render.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-output-render.png) 
 
 ## Add value with Selected Color 
 
@@ -278,5 +278,5 @@ Initialize the click event for the button element in **<script>** tag.
 
 The following screenshot illustrates the resultant output after you click **Add** button.
 
-![](/js/ColorPicker/Getting-Started_images/Getting-Started_img4.png) 
+![Javascript Color Picker resultant output.](/js/ColorPicker/Getting-Started_images/javascript-color-picker-resultant-output.png)