diff --git a/samples/react/scatter/scatter-datetime.html b/samples/react/scatter/scatter-datetime.html
index 84f50547b..425684385 100644
--- a/samples/react/scatter/scatter-datetime.html
+++ b/samples/react/scatter/scatter-datetime.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Timeline Scatter Chart</title>
+    <title>Scatter chart with different marker shapes</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 
     <style>
       
         #chart {
-      max-width: 650px;
+      max-width: 700px;
       margin: 35px auto;
     }
       
@@ -95,35 +95,35 @@
           
             series: [
               {
-                name: 'CIRCLE',
+                name: 'DIAMOND',
                 data: generateDayWiseTimeSeries(
                   new Date('01 Feb 2017 GMT').getTime(),
-                  20,
+                  10,
                   {
                     min: 5,
-                    max: 24,
+                    max: 60,
                   }
                 ),
               },
               {
-                name: 'SQUARE',
+                name: 'TRIANGLE',
                 data: generateDayWiseTimeSeries(
                   new Date('11 Feb 2017 GMT').getTime(),
-                  18,
+                  10,
                   {
-                    min: 14,
-                    max: 50,
+                    min: 54,
+                    max: 90,
                   }
                 ),
               },
               {
                 name: 'CROSS',
                 data: generateDayWiseTimeSeries(
-                  new Date('19 Feb 2017 GMT').getTime(),
-                  30,
+                  new Date('20 Feb 2017 GMT').getTime(),
+                  8,
                   {
-                    min: 15,
-                    max: 60,
+                    min: 10,
+                    max: 50,
                   }
                 ),
               },
@@ -131,59 +131,131 @@
                 name: 'PLUS',
                 data: generateDayWiseTimeSeries(
                   new Date('28 Feb 2017 GMT').getTime(),
-                  15,
+                  16,
                   {
-                    min: 10,
-                    max: 80,
+                    min: 30,
+                    max: 99,
+                  }
+                ),
+              },
+            
+              {
+                name: 'SQUARE',
+                data: generateDayWiseTimeSeries(
+                  new Date('20 Mar 2017 GMT').getTime(),
+                  10,
+                  {
+                    min: 0,
+                    max: 59,
                   }
                 ),
               },
               {
                 name: 'LINE',
                 data: generateDayWiseTimeSeries(
-                  new Date('10 Mar 2017 GMT').getTime(),
-                  20,
+                  new Date('29 Mar 2017 GMT').getTime(),
+                  10,
                   {
-                    min: 20,
+                    min: 0,
                     max: 90,
                   }
                 ),
               },
+              {
+                name: 'CIRCLE',
+                data: generateDayWiseTimeSeries(
+                  new Date('10 Apr 2017 GMT').getTime(),
+                  10,
+                  {
+                    min: 5,
+                    max: 35,
+                  }
+                ),
+              },
+            
+              {
+                name: 'STAR',
+                data: generateDayWiseTimeSeries(
+                  new Date('20 Apr 2017 GMT').getTime(),
+                  10,
+                  {
+                    min: 15,
+                    max: 60,
+                  }
+                ),
+              },
+              {
+                name: 'SPARKLE',
+                data: generateDayWiseTimeSeries(
+                  new Date('29 Apr 2017 GMT').getTime(),
+                  10,
+                  {
+                    min: 45,
+                    max: 99,
+                  }
+                ),
+              },
             ],
             options: {
               chart: {
                 height: 350,
                 type: 'scatter',
                 zoom: {
-                  type: 'xy'
-                }
+                  type: 'xy',
+                },
               },
+              colors: [
+                '#FF5733',
+                '#33FF57',
+                '#3357FF',
+                '#FF33A1',
+                '#33FFF6', 
+                '#1E90FF', 
+                '#FFFF33',
+                '#A133FF',
+                '#FF9933',
+                '#FF3388',
+              ],
               dataLabels: {
-                enabled: false
+                enabled: false,
               },
               grid: {
                 xaxis: {
                   lines: {
-                    show: true
-                  }
+                    show: true,
+                  },
                 },
                 yaxis: {
                   lines: {
-                    show: true
-                  }
+                    show: true,
+                  },
                 },
               },
               xaxis: {
                 type: 'datetime',
               },
-              yaxis: {
-                max: 90,
+              yaxis: {},
+              legend: {
+                markers: {
+                  strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
+                },
               },
               markers: {
-                shape: ['circle', 'square', 'cross', 'plus', 'line'],
-                size: 6,
-                strokeWidth: [0, 2, 2, 2, 2],
-                radius: 2,
+                shape: [
+                  'diamond',
+                  'triangle',
+                  'cross',
+                  'plus',
+                  'square',
+                  'line',
+                  'circle',
+                  'star',
+                  'sparkle',
+                ],
+                size: 10,
+                fillOpacity: 0.8,
+                strokeColors: '#333',
+                strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
               },
             },
           
diff --git a/samples/source/scatter/scatter-datetime.xml b/samples/source/scatter/scatter-datetime.xml
index 5461d83ac..4eb810bbf 100644
--- a/samples/source/scatter/scatter-datetime.xml
+++ b/samples/source/scatter/scatter-datetime.xml
@@ -1,4 +1,11 @@
-<title>Timeline Scatter Chart</title>
+<title>Scatter chart with different marker shapes</title>
+
+<style>
+#chart {
+  max-width: 700px;
+  margin: 35px auto;
+}
+</style>
 
 <scripts>
 <script>
@@ -32,70 +39,96 @@ chart: {
   height: 350,
   type: 'scatter',
   zoom: {
-    type: 'xy'
-  }
+    type: 'xy',
+  },
 },
+colors: [
+  '#FF5733',
+  '#33FF57',
+  '#3357FF',
+  '#FF33A1',
+  '#33FFF6', 
+  '#1E90FF', 
+  '#FFFF33',
+  '#A133FF',
+  '#FF9933',
+  '#FF3388',
+],
 dataLabels: {
-  enabled: false
+  enabled: false,
 },
 grid: {
   xaxis: {
     lines: {
-      show: true
-    }
+      show: true,
+    },
   },
   yaxis: {
     lines: {
-      show: true
-    }
+      show: true,
+    },
   },
 },
 xaxis: {
   type: 'datetime',
 },
-yaxis: {
-  max: 90,
+yaxis: {},
+legend: {
+  markers: {
+    strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
+  },
 },
 markers: {
-  shape: ['circle', 'square', 'cross', 'plus', 'line'],
-  size: 6,
-  strokeWidth: [0, 2, 2, 2, 2],
-  radius: 2,
+  shape: [
+    'diamond',
+    'triangle',
+    'cross',
+    'plus',
+    'square',
+    'line',
+    'circle',
+    'star',
+    'sparkle',
+  ],
+  size: 10,
+  fillOpacity: 0.8,
+  strokeColors: '#333',
+  strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
 },
 </options>
 
 <series>
 [
   {
-    name: 'CIRCLE',
+    name: 'DIAMOND',
     data: generateDayWiseTimeSeries(
       new Date('01 Feb 2017 GMT').getTime(),
-      20,
+      10,
       {
         min: 5,
-        max: 24,
+        max: 60,
       }
     ),
   },
   {
-    name: 'SQUARE',
+    name: 'TRIANGLE',
     data: generateDayWiseTimeSeries(
       new Date('11 Feb 2017 GMT').getTime(),
-      18,
+      10,
       {
-        min: 14,
-        max: 50,
+        min: 54,
+        max: 90,
       }
     ),
   },
   {
     name: 'CROSS',
     data: generateDayWiseTimeSeries(
-      new Date('19 Feb 2017 GMT').getTime(),
-      30,
+      new Date('20 Feb 2017 GMT').getTime(),
+      8,
       {
-        min: 15,
-        max: 60,
+        min: 10,
+        max: 50,
       }
     ),
   },
@@ -103,24 +136,70 @@ markers: {
     name: 'PLUS',
     data: generateDayWiseTimeSeries(
       new Date('28 Feb 2017 GMT').getTime(),
-      15,
+      16,
       {
-        min: 10,
-        max: 80,
+        min: 30,
+        max: 99,
+      }
+    ),
+  },
+
+  {
+    name: 'SQUARE',
+    data: generateDayWiseTimeSeries(
+      new Date('20 Mar 2017 GMT').getTime(),
+      10,
+      {
+        min: 0,
+        max: 59,
       }
     ),
   },
   {
     name: 'LINE',
     data: generateDayWiseTimeSeries(
-      new Date('10 Mar 2017 GMT').getTime(),
-      20,
+      new Date('29 Mar 2017 GMT').getTime(),
+      10,
       {
-        min: 20,
+        min: 0,
         max: 90,
       }
     ),
   },
-]     
+  {
+    name: 'CIRCLE',
+    data: generateDayWiseTimeSeries(
+      new Date('10 Apr 2017 GMT').getTime(),
+      10,
+      {
+        min: 5,
+        max: 35,
+      }
+    ),
+  },
+
+  {
+    name: 'STAR',
+    data: generateDayWiseTimeSeries(
+      new Date('20 Apr 2017 GMT').getTime(),
+      10,
+      {
+        min: 15,
+        max: 60,
+      }
+    ),
+  },
+  {
+    name: 'SPARKLE',
+    data: generateDayWiseTimeSeries(
+      new Date('29 Apr 2017 GMT').getTime(),
+      10,
+      {
+        min: 45,
+        max: 99,
+      }
+    ),
+  },
+]
 </series>
 </chart>
\ No newline at end of file
diff --git a/samples/vanilla-js/scatter/scatter-datetime.html b/samples/vanilla-js/scatter/scatter-datetime.html
index 422d487ca..f6c97fb57 100644
--- a/samples/vanilla-js/scatter/scatter-datetime.html
+++ b/samples/vanilla-js/scatter/scatter-datetime.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Timeline Scatter Chart</title>
+    <title>Scatter chart with different marker shapes</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 
     <style>
       
         #chart {
-      max-width: 650px;
+      max-width: 700px;
       margin: 35px auto;
     }
       
@@ -79,35 +79,35 @@
         var options = {
           series: [
           {
-            name: 'CIRCLE',
+            name: 'DIAMOND',
             data: generateDayWiseTimeSeries(
               new Date('01 Feb 2017 GMT').getTime(),
-              20,
+              10,
               {
                 min: 5,
-                max: 24,
+                max: 60,
               }
             ),
           },
           {
-            name: 'SQUARE',
+            name: 'TRIANGLE',
             data: generateDayWiseTimeSeries(
               new Date('11 Feb 2017 GMT').getTime(),
-              18,
+              10,
               {
-                min: 14,
-                max: 50,
+                min: 54,
+                max: 90,
               }
             ),
           },
           {
             name: 'CROSS',
             data: generateDayWiseTimeSeries(
-              new Date('19 Feb 2017 GMT').getTime(),
-              30,
+              new Date('20 Feb 2017 GMT').getTime(),
+              8,
               {
-                min: 15,
-                max: 60,
+                min: 10,
+                max: 50,
               }
             ),
           },
@@ -115,58 +115,130 @@
             name: 'PLUS',
             data: generateDayWiseTimeSeries(
               new Date('28 Feb 2017 GMT').getTime(),
-              15,
+              16,
               {
-                min: 10,
-                max: 80,
+                min: 30,
+                max: 99,
+              }
+            ),
+          },
+        
+          {
+            name: 'SQUARE',
+            data: generateDayWiseTimeSeries(
+              new Date('20 Mar 2017 GMT').getTime(),
+              10,
+              {
+                min: 0,
+                max: 59,
               }
             ),
           },
           {
             name: 'LINE',
             data: generateDayWiseTimeSeries(
-              new Date('10 Mar 2017 GMT').getTime(),
-              20,
+              new Date('29 Mar 2017 GMT').getTime(),
+              10,
               {
-                min: 20,
+                min: 0,
                 max: 90,
               }
             ),
           },
+          {
+            name: 'CIRCLE',
+            data: generateDayWiseTimeSeries(
+              new Date('10 Apr 2017 GMT').getTime(),
+              10,
+              {
+                min: 5,
+                max: 35,
+              }
+            ),
+          },
+        
+          {
+            name: 'STAR',
+            data: generateDayWiseTimeSeries(
+              new Date('20 Apr 2017 GMT').getTime(),
+              10,
+              {
+                min: 15,
+                max: 60,
+              }
+            ),
+          },
+          {
+            name: 'SPARKLE',
+            data: generateDayWiseTimeSeries(
+              new Date('29 Apr 2017 GMT').getTime(),
+              10,
+              {
+                min: 45,
+                max: 99,
+              }
+            ),
+          },
         ],
           chart: {
           height: 350,
           type: 'scatter',
           zoom: {
-            type: 'xy'
-          }
+            type: 'xy',
+          },
         },
+        colors: [
+          '#FF5733',
+          '#33FF57',
+          '#3357FF',
+          '#FF33A1',
+          '#33FFF6', 
+          '#1E90FF', 
+          '#FFFF33',
+          '#A133FF',
+          '#FF9933',
+          '#FF3388',
+        ],
         dataLabels: {
-          enabled: false
+          enabled: false,
         },
         grid: {
           xaxis: {
             lines: {
-              show: true
-            }
+              show: true,
+            },
           },
           yaxis: {
             lines: {
-              show: true
-            }
+              show: true,
+            },
           },
         },
         xaxis: {
           type: 'datetime',
         },
-        yaxis: {
-          max: 90,
+        yaxis: {},
+        legend: {
+          markers: {
+            strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
+          },
         },
         markers: {
-          shape: ['circle', 'square', 'cross', 'plus', 'line'],
-          size: 6,
-          strokeWidth: [0, 2, 2, 2, 2],
-          radius: 2,
+          shape: [
+            'diamond',
+            'triangle',
+            'cross',
+            'plus',
+            'square',
+            'line',
+            'circle',
+            'star',
+            'sparkle',
+          ],
+          size: 10,
+          fillOpacity: 0.8,
+          strokeColors: '#333',
+          strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
         },
         };
 
diff --git a/samples/vue/scatter/scatter-datetime.html b/samples/vue/scatter/scatter-datetime.html
index b82c18c90..86ce3ab7d 100644
--- a/samples/vue/scatter/scatter-datetime.html
+++ b/samples/vue/scatter/scatter-datetime.html
@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Timeline Scatter Chart</title>
+    <title>Scatter chart with different marker shapes</title>
 
     <link href="../../assets/styles.css" rel="stylesheet" />
 
     <style>
       
         #chart {
-      max-width: 650px;
+      max-width: 700px;
       margin: 35px auto;
     }
       
@@ -98,35 +98,35 @@
           
           series: [
             {
-              name: 'CIRCLE',
+              name: 'DIAMOND',
               data: generateDayWiseTimeSeries(
                 new Date('01 Feb 2017 GMT').getTime(),
-                20,
+                10,
                 {
                   min: 5,
-                  max: 24,
+                  max: 60,
                 }
               ),
             },
             {
-              name: 'SQUARE',
+              name: 'TRIANGLE',
               data: generateDayWiseTimeSeries(
                 new Date('11 Feb 2017 GMT').getTime(),
-                18,
+                10,
                 {
-                  min: 14,
-                  max: 50,
+                  min: 54,
+                  max: 90,
                 }
               ),
             },
             {
               name: 'CROSS',
               data: generateDayWiseTimeSeries(
-                new Date('19 Feb 2017 GMT').getTime(),
-                30,
+                new Date('20 Feb 2017 GMT').getTime(),
+                8,
                 {
-                  min: 15,
-                  max: 60,
+                  min: 10,
+                  max: 50,
                 }
               ),
             },
@@ -134,59 +134,131 @@
               name: 'PLUS',
               data: generateDayWiseTimeSeries(
                 new Date('28 Feb 2017 GMT').getTime(),
-                15,
+                16,
                 {
-                  min: 10,
-                  max: 80,
+                  min: 30,
+                  max: 99,
+                }
+              ),
+            },
+          
+            {
+              name: 'SQUARE',
+              data: generateDayWiseTimeSeries(
+                new Date('20 Mar 2017 GMT').getTime(),
+                10,
+                {
+                  min: 0,
+                  max: 59,
                 }
               ),
             },
             {
               name: 'LINE',
               data: generateDayWiseTimeSeries(
-                new Date('10 Mar 2017 GMT').getTime(),
-                20,
+                new Date('29 Mar 2017 GMT').getTime(),
+                10,
                 {
-                  min: 20,
+                  min: 0,
                   max: 90,
                 }
               ),
             },
+            {
+              name: 'CIRCLE',
+              data: generateDayWiseTimeSeries(
+                new Date('10 Apr 2017 GMT').getTime(),
+                10,
+                {
+                  min: 5,
+                  max: 35,
+                }
+              ),
+            },
+          
+            {
+              name: 'STAR',
+              data: generateDayWiseTimeSeries(
+                new Date('20 Apr 2017 GMT').getTime(),
+                10,
+                {
+                  min: 15,
+                  max: 60,
+                }
+              ),
+            },
+            {
+              name: 'SPARKLE',
+              data: generateDayWiseTimeSeries(
+                new Date('29 Apr 2017 GMT').getTime(),
+                10,
+                {
+                  min: 45,
+                  max: 99,
+                }
+              ),
+            },
           ],
           chartOptions: {
             chart: {
               height: 350,
               type: 'scatter',
               zoom: {
-                type: 'xy'
-              }
+                type: 'xy',
+              },
             },
+            colors: [
+              '#FF5733',
+              '#33FF57',
+              '#3357FF',
+              '#FF33A1',
+              '#33FFF6', 
+              '#1E90FF', 
+              '#FFFF33',
+              '#A133FF',
+              '#FF9933',
+              '#FF3388',
+            ],
             dataLabels: {
-              enabled: false
+              enabled: false,
             },
             grid: {
               xaxis: {
                 lines: {
-                  show: true
-                }
+                  show: true,
+                },
               },
               yaxis: {
                 lines: {
-                  show: true
-                }
+                  show: true,
+                },
               },
             },
             xaxis: {
               type: 'datetime',
             },
-            yaxis: {
-              max: 90,
+            yaxis: {},
+            legend: {
+              markers: {
+                strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
+              },
             },
             markers: {
-              shape: ['circle', 'square', 'cross', 'plus', 'line'],
-              size: 6,
-              strokeWidth: [0, 2, 2, 2, 2],
-              radius: 2,
+              shape: [
+                'diamond',
+                'triangle',
+                'cross',
+                'plus',
+                'square',
+                'line',
+                'circle',
+                'star',
+                'sparkle',
+              ],
+              size: 10,
+              fillOpacity: 0.8,
+              strokeColors: '#333',
+              strokeWidth: [1, 1, 3, 3, 1, 4, 1, 1, 1],
             },
           },