diff --git a/samples/react/boxPlot/boxplot-scatter.html b/samples/react/boxPlot/boxplot-scatter.html
index 82e83845f..8ba4a626b 100644
--- a/samples/react/boxPlot/boxplot-scatter.html
+++ b/samples/react/boxPlot/boxplot-scatter.html
@@ -77,75 +77,127 @@
                 type: 'boxPlot',
                 data: [
                   {
-                    x: new Date('2017-01-01').getTime(),
-                    y: [54, 66, 69, 75, 88]
+                    x: 'Alice',
+                    y: [54, 66, 69, 75, 88],
+                    goals: [
+                      {
+                        value: 32,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                    ],
                   },
                   {
-                    x: new Date('2018-01-01').getTime(),
-                    y: [43, 65, 69, 76, 81]
+                    x: 'Bob',
+                    y: [43, 65, 69, 76, 81],
+                    goals: [
+                      {
+                        value: 35,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                      {
+                        value: 95,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                    ],
                   },
                   {
-                    x: new Date('2019-01-01').getTime(),
-                    y: [31, 39, 45, 51, 59]
+                    x: 'Charlie',
+                    y: [31, 39, 45, 51, 59],
+                    goals: [
+                      {
+                        value: 64,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                      {
+                        value: 75,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                    ],
                   },
                   {
-                    x: new Date('2020-01-01').getTime(),
-                    y: [39, 46, 55, 65, 71]
+                    x: 'David',
+                    y: [39, 46, 55, 65, 71],
+                    goals: [
+                      {
+                        value: 27,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                      {
+                        value: 77,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                    ],
                   },
                   {
-                    x: new Date('2021-01-01').getTime(),
-                    y: [29, 31, 35, 39, 44]
-                  }
-                ]
-              },
-              {
-                name: 'outliers',
-                type: 'scatter',
-                data: [
-                  {
-                    x: new Date('2017-01-01').getTime(),
-                    y: 32
-                  },
-                  {
-                    x: new Date('2018-01-01').getTime(),
-                    y: 25
-                  },
-                  {
-                    x: new Date('2019-01-01').getTime(),
-                    y: 64
-                  },
-                  {
-                    x: new Date('2020-01-01').getTime(),
-                    y: 27
+                    x: 'Ahmed',
+                    y: [29, 31, 35, 39, 44],
+                    goals: [
+                      {
+                        value: 10,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                      {
+                        value: 56,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                      {
+                        value: 62,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                      {
+                        value: 98,
+                        strokeWidth: 0,
+                        strokeHeight: 13,
+                        strokeLineCap: 'round',
+                        strokeColor: '#FEB019',
+                      },
+                    ],
                   },
-                  {
-                    x: new Date('2021-01-01').getTime(),
-                    y: 15
-                  }
-                ]
-              }
+                ],
+              },
             ],
             options: {
               chart: {
                 type: 'boxPlot',
-                height: 350
+                height: 350,
               },
               colors: ['#008FFB', '#FEB019'],
               title: {
-                text: 'BoxPlot - Scatter Chart',
-                align: 'left'
+                text: 'BoxPlot chart with outliers',
+                align: 'left',
               },
               xaxis: {
-                type: 'datetime',
-                tooltip: {
-                  formatter: function(val) {
-                    return new Date(val).getFullYear()
-                  }
-                }
-              },
-              tooltip: {
-                shared: false,
-                intersect: true
+                type: 'category',
               }
             },
           
diff --git a/samples/source/boxPlot/boxplot-scatter.xml b/samples/source/boxPlot/boxplot-scatter.xml
index 25b6cbd7d..d29b6955b 100644
--- a/samples/source/boxPlot/boxplot-scatter.xml
+++ b/samples/source/boxPlot/boxplot-scatter.xml
@@ -4,24 +4,15 @@
 <options>
 chart: {
   type: 'boxPlot',
-  height: 350
+  height: 350,
 },
 colors: ['#008FFB', '#FEB019'],
 title: {
-  text: 'BoxPlot - Scatter Chart',
-  align: 'left'
+  text: 'BoxPlot chart with outliers',
+  align: 'left',
 },
 xaxis: {
-  type: 'datetime',
-  tooltip: {
-    formatter: function(val) {
-      return new Date(val).getFullYear()
-    }
-  }
-},
-tooltip: {
-  shared: false,
-  intersect: true
+  type: 'category',
 }
 </options>
 
@@ -32,53 +23,114 @@ tooltip: {
     type: 'boxPlot',
     data: [
       {
-        x: new Date('2017-01-01').getTime(),
-        y: [54, 66, 69, 75, 88]
-      },
-      {
-        x: new Date('2018-01-01').getTime(),
-        y: [43, 65, 69, 76, 81]
+        x: 'Alice',
+        y: [54, 66, 69, 75, 88],
+        goals: [
+          {
+            value: 32,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+        ],
       },
       {
-        x: new Date('2019-01-01').getTime(),
-        y: [31, 39, 45, 51, 59]
+        x: 'Bob',
+        y: [43, 65, 69, 76, 81],
+        goals: [
+          {
+            value: 35,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+          {
+            value: 95,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+        ],
       },
       {
-        x: new Date('2020-01-01').getTime(),
-        y: [39, 46, 55, 65, 71]
+        x: 'Charlie',
+        y: [31, 39, 45, 51, 59],
+        goals: [
+          {
+            value: 64,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+          {
+            value: 75,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+        ],
       },
       {
-        x: new Date('2021-01-01').getTime(),
-        y: [29, 31, 35, 39, 44]
-      }
-    ]
-  },
-  {
-    name: 'outliers',
-    type: 'scatter',
-    data: [
-      {
-        x: new Date('2017-01-01').getTime(),
-        y: 32
+        x: 'David',
+        y: [39, 46, 55, 65, 71],
+        goals: [
+          {
+            value: 27,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+          {
+            value: 77,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+        ],
       },
       {
-        x: new Date('2018-01-01').getTime(),
-        y: 25
+        x: 'Ahmed',
+        y: [29, 31, 35, 39, 44],
+        goals: [
+          {
+            value: 10,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+          {
+            value: 56,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+          {
+            value: 62,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+          {
+            value: 98,
+            strokeWidth: 0,
+            strokeHeight: 13,
+            strokeLineCap: 'round',
+            strokeColor: '#FEB019',
+          },
+        ],
       },
-      {
-        x: new Date('2019-01-01').getTime(),
-        y: 64
-      },
-      {
-        x: new Date('2020-01-01').getTime(),
-        y: 27
-      },
-      {
-        x: new Date('2021-01-01').getTime(),
-        y: 15
-      }
-    ]
-  }
+    ],
+  },
 ]
 </series>
 </chart>
\ No newline at end of file
diff --git a/samples/vanilla-js/boxPlot/boxplot-scatter.html b/samples/vanilla-js/boxPlot/boxplot-scatter.html
index e6afca287..9498ea6ef 100644
--- a/samples/vanilla-js/boxPlot/boxplot-scatter.html
+++ b/samples/vanilla-js/boxPlot/boxplot-scatter.html
@@ -61,74 +61,126 @@
             type: 'boxPlot',
             data: [
               {
-                x: new Date('2017-01-01').getTime(),
-                y: [54, 66, 69, 75, 88]
+                x: 'Alice',
+                y: [54, 66, 69, 75, 88],
+                goals: [
+                  {
+                    value: 32,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                ],
               },
               {
-                x: new Date('2018-01-01').getTime(),
-                y: [43, 65, 69, 76, 81]
+                x: 'Bob',
+                y: [43, 65, 69, 76, 81],
+                goals: [
+                  {
+                    value: 35,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                  {
+                    value: 95,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                ],
               },
               {
-                x: new Date('2019-01-01').getTime(),
-                y: [31, 39, 45, 51, 59]
+                x: 'Charlie',
+                y: [31, 39, 45, 51, 59],
+                goals: [
+                  {
+                    value: 64,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                  {
+                    value: 75,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                ],
               },
               {
-                x: new Date('2020-01-01').getTime(),
-                y: [39, 46, 55, 65, 71]
+                x: 'David',
+                y: [39, 46, 55, 65, 71],
+                goals: [
+                  {
+                    value: 27,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                  {
+                    value: 77,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                ],
               },
               {
-                x: new Date('2021-01-01').getTime(),
-                y: [29, 31, 35, 39, 44]
-              }
-            ]
-          },
-          {
-            name: 'outliers',
-            type: 'scatter',
-            data: [
-              {
-                x: new Date('2017-01-01').getTime(),
-                y: 32
+                x: 'Ahmed',
+                y: [29, 31, 35, 39, 44],
+                goals: [
+                  {
+                    value: 10,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                  {
+                    value: 56,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                  {
+                    value: 62,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                  {
+                    value: 98,
+                    strokeWidth: 0,
+                    strokeHeight: 13,
+                    strokeLineCap: 'round',
+                    strokeColor: '#FEB019',
+                  },
+                ],
               },
-              {
-                x: new Date('2018-01-01').getTime(),
-                y: 25
-              },
-              {
-                x: new Date('2019-01-01').getTime(),
-                y: 64
-              },
-              {
-                x: new Date('2020-01-01').getTime(),
-                y: 27
-              },
-              {
-                x: new Date('2021-01-01').getTime(),
-                y: 15
-              }
-            ]
-          }
+            ],
+          },
         ],
           chart: {
           type: 'boxPlot',
-          height: 350
+          height: 350,
         },
         colors: ['#008FFB', '#FEB019'],
         title: {
-          text: 'BoxPlot - Scatter Chart',
-          align: 'left'
+          text: 'BoxPlot chart with outliers',
+          align: 'left',
         },
         xaxis: {
-          type: 'datetime',
-          tooltip: {
-            formatter: function(val) {
-              return new Date(val).getFullYear()
-            }
-          }
-        },
-        tooltip: {
-          shared: false,
-          intersect: true
+          type: 'category',
         }
         };
 
diff --git a/samples/vue/boxPlot/boxplot-scatter.html b/samples/vue/boxPlot/boxplot-scatter.html
index b2951bb1a..a76a1101c 100644
--- a/samples/vue/boxPlot/boxplot-scatter.html
+++ b/samples/vue/boxPlot/boxplot-scatter.html
@@ -80,75 +80,127 @@
               type: 'boxPlot',
               data: [
                 {
-                  x: new Date('2017-01-01').getTime(),
-                  y: [54, 66, 69, 75, 88]
+                  x: 'Alice',
+                  y: [54, 66, 69, 75, 88],
+                  goals: [
+                    {
+                      value: 32,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                  ],
                 },
                 {
-                  x: new Date('2018-01-01').getTime(),
-                  y: [43, 65, 69, 76, 81]
+                  x: 'Bob',
+                  y: [43, 65, 69, 76, 81],
+                  goals: [
+                    {
+                      value: 35,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                    {
+                      value: 95,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                  ],
                 },
                 {
-                  x: new Date('2019-01-01').getTime(),
-                  y: [31, 39, 45, 51, 59]
+                  x: 'Charlie',
+                  y: [31, 39, 45, 51, 59],
+                  goals: [
+                    {
+                      value: 64,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                    {
+                      value: 75,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                  ],
                 },
                 {
-                  x: new Date('2020-01-01').getTime(),
-                  y: [39, 46, 55, 65, 71]
+                  x: 'David',
+                  y: [39, 46, 55, 65, 71],
+                  goals: [
+                    {
+                      value: 27,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                    {
+                      value: 77,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                  ],
                 },
                 {
-                  x: new Date('2021-01-01').getTime(),
-                  y: [29, 31, 35, 39, 44]
-                }
-              ]
-            },
-            {
-              name: 'outliers',
-              type: 'scatter',
-              data: [
-                {
-                  x: new Date('2017-01-01').getTime(),
-                  y: 32
-                },
-                {
-                  x: new Date('2018-01-01').getTime(),
-                  y: 25
-                },
-                {
-                  x: new Date('2019-01-01').getTime(),
-                  y: 64
-                },
-                {
-                  x: new Date('2020-01-01').getTime(),
-                  y: 27
+                  x: 'Ahmed',
+                  y: [29, 31, 35, 39, 44],
+                  goals: [
+                    {
+                      value: 10,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                    {
+                      value: 56,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                    {
+                      value: 62,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                    {
+                      value: 98,
+                      strokeWidth: 0,
+                      strokeHeight: 13,
+                      strokeLineCap: 'round',
+                      strokeColor: '#FEB019',
+                    },
+                  ],
                 },
-                {
-                  x: new Date('2021-01-01').getTime(),
-                  y: 15
-                }
-              ]
-            }
+              ],
+            },
           ],
           chartOptions: {
             chart: {
               type: 'boxPlot',
-              height: 350
+              height: 350,
             },
             colors: ['#008FFB', '#FEB019'],
             title: {
-              text: 'BoxPlot - Scatter Chart',
-              align: 'left'
+              text: 'BoxPlot chart with outliers',
+              align: 'left',
             },
             xaxis: {
-              type: 'datetime',
-              tooltip: {
-                formatter: function(val) {
-                  return new Date(val).getFullYear()
-                }
-              }
-            },
-            tooltip: {
-              shared: false,
-              intersect: true
+              type: 'category',
             }
           },