diff --git a/ui/package.json b/ui/package.json
index b417f1d2..4d09a589 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@radicalbit/formbit": "1.0.0",
-    "@radicalbit/radicalbit-design-system": "1.0.0",
+    "@radicalbit/radicalbit-design-system": "1.1.0",
     "@reduxjs/toolkit": "^2.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "ace-builds": "^1.33.2",
diff --git a/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js
index c3888c04..f2113946 100644
--- a/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js
+++ b/ui/src/container/models/Details/binary-classification/current/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,6 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
@@ -20,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
index 197326cb..1cc08bbc 100644
--- a/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
+++ b/ui/src/container/models/Details/binary-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js
index 7d8664df..8b590991 100644
--- a/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js
+++ b/ui/src/container/models/Details/multi-classification/current/data-quality/data-point-distribution/options.js
@@ -17,24 +17,15 @@ export default function chartOptions(title, referenceDataset, currentDataset) {
     series: [
       {
         ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, title, CHART_COLOR.REFERENCE_LIGHT, referenceData),
-        color: CHART_COLOR.REFERENCE_LIGHT,
       },
       {
         ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, `${title}_current`, CHART_COLOR.CURRENT_LIGHT, currentData),
-        color: CHART_COLOR.CURRENT_LIGHT,
       },
     ],
   };
 
   if (currentData.length >= 20 || referenceData.length >= 20) {
-    options.dataZoom = [
-      {
-        show: true,
-      },
-      {
-        type: 'inside',
-      },
-    ];
+    options.dataZoom = commonChartOptions.dataZoomOptions();
     options.grid.bottom = 40;
   }
 
diff --git a/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js
index 91e8c49f..f2113946 100644
--- a/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js
+++ b/ui/src/container/models/Details/multi-classification/current/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,14 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
-
-    barCategoryGap: '0',
-    barGap: 0,
-    itemStyle: {
-      borderWidth: 1,
-      borderColor: 'rgba(201, 25, 25, 1)',
-    },
-
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
@@ -28,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx
index c9c7da0f..234a678a 100644
--- a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx
+++ b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/chart.jsx
@@ -28,7 +28,7 @@ echarts.use([
 ]);
 
 function LineChart({
-  title, color, currentData, referenceData = [],
+  title, currentData, referenceData = [],
 }) {
   const handleOnChartReady = (echart) => {
     // To handle the second opening of a modal when the rtkq hook read from cache
@@ -48,7 +48,7 @@ function LineChart({
           echarts={echarts}
           notMerge
           onChartReady={handleOnChartReady}
-          option={lineChartOptions(color, currentData, referenceData)}
+          option={lineChartOptions(currentData, referenceData)}
           style={{ height: '24rem' }}
         />
       )}
diff --git a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx
index 00831e32..28b710ff 100644
--- a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx
+++ b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/index.jsx
@@ -1,5 +1,4 @@
 import { MODEL_QUALITY_FIELD } from '@Container/models/Details/constants';
-import { CHART_COLOR } from '@Helpers/common-chart-options';
 import useGetDataCharts from '../use-get-data-charts';
 import LineChart from './chart';
 
@@ -22,9 +21,8 @@ function MulticlassChartMetrics() {
 function RecallChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items;
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.recall }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.recall }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.recall.map((o) => ({
       timestamp: o.timestamp,
@@ -34,7 +32,6 @@ function RecallChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.RECALL}
@@ -45,9 +42,8 @@ function RecallChart() {
 function F1MeasureChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.fMeasure }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.fMeasure }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.fMeasure.map((o) => ({
       timestamp: o.timestamp,
@@ -57,7 +53,6 @@ function F1MeasureChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.F1}
@@ -68,9 +63,8 @@ function F1MeasureChart() {
 function PrecisionChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.precision }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.precision }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.precision.map((o) => ({
       timestamp: o.timestamp,
@@ -80,7 +74,6 @@ function PrecisionChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.PRECISION}
@@ -91,9 +84,8 @@ function PrecisionChart() {
 function FalsePositiveRateChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.falsePositiveRate }));
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.falsePositiveRate }));
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.falsePositiveRate.map((o) => ({
       timestamp: o.timestamp,
@@ -103,7 +95,6 @@ function FalsePositiveRateChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.FALSE_POSITIVE_RATE}
@@ -114,10 +105,9 @@ function FalsePositiveRateChart() {
 function TruePositiveRateChart() {
   const items = useGetDataCharts();
 
-  const cappedSeries = items.slice(0, 13);
-  const currentSeries = cappedSeries.map(({ className, currentData }) => ({ className, data: currentData.truePositiveRate }));
+  const currentSeries = items.map(({ className, currentData }) => ({ className, data: currentData.truePositiveRate }));
 
-  const referenceSeries = cappedSeries.map(({ className, referenceData, currentData }) => ({
+  const referenceSeries = items.map(({ className, referenceData, currentData }) => ({
     className,
     data: currentData.truePositiveRate.map((o) => ({
       timestamp: o.timestamp,
@@ -127,7 +117,6 @@ function TruePositiveRateChart() {
 
   return (
     <LineChart
-      color={CHART_COLOR.CURRENT}
       currentData={currentSeries}
       referenceData={referenceSeries}
       title={MODEL_QUALITY_FIELD.TRUE_POSITIVE_RATE}
diff --git a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/options.js b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/options.js
index 0e7e5aa6..01251ca7 100644
--- a/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/options.js
+++ b/ui/src/container/models/Details/multi-classification/current/model-quality/class-chart-metrics/options.js
@@ -2,12 +2,14 @@ import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-opt
 import { numberFormatter } from '@Src/constants';
 import * as commonChartOptions from '@Helpers/common-chart-options';
 
-export default function lineChartOptions(color, currentDataset, referenceDataset) {
+export default function lineChartOptions(currentDataset, referenceDataset) {
   let dataSeries = currentDataset.map((el) => {
     const currentSeries = el.data.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]);
     return commonChartOptions.seriesOptions(CHART_TYPE.LINE, el.className, null, currentSeries);
   });
 
+  const legendLabel = dataSeries.map(({ name }) => name);
+
   if (referenceDataset) {
     const series = referenceDataset.map((el) => {
       const referenceSeries = el.data.map(({ timestamp, value }) => [timestamp, numberFormatter().format(value)]);
@@ -31,38 +33,13 @@ export default function lineChartOptions(color, currentDataset, referenceDataset
   }
 
   const options = {
-    // color: [color],
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.TIME),
     ...commonChartOptions.gridOptions(CHART_TYPE.LINE),
     ...commonChartOptions.colorList,
-    series: dataSeries,
-
-    tooltip: {
-      trigger: 'axis',
-    },
-
-    emphasis: {
-      focus: 'series',
-    },
-    legend: {
-      right: 0,
-      top: 16,
-      bottom: 0,
-      orient: 'vertical',
-      type: 'scroll',
-      scrollDataIndex: 'scroll',
-      pageIconSize: 8,
-      pageTextStyle: {
-        fontSize: 8,
-      },
-      data: dataSeries.map(({ name }) => name),
-      textStyle: {
-        fontSize: 10,
-        fontWeight: '300',
-      },
-    },
-
+    ...commonChartOptions.legendOptions(legendLabel),
+    tooltip: { trigger: 'axis' },
+    emphasis: { focus: 'series' },
     title: {
       text: '••• Reference',
       textStyle: {
@@ -72,6 +49,7 @@ export default function lineChartOptions(color, currentDataset, referenceDataset
       right: 0,
     },
 
+    series: dataSeries,
   };
 
   options.grid.right = 140;
diff --git a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js
index 00eb9b46..a657a6a9 100644
--- a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js
+++ b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-point-distribution/options.js
@@ -1,6 +1,5 @@
-import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-options';
-import { numberFormatter } from '@Src/constants';
 import * as commonChartOptions from '@Helpers/common-chart-options';
+import { CHART_COLOR, CHART_TYPE, OPTIONS_TYPE } from '@Helpers/common-chart-options';
 
 export default function chartOptions(title, dataset) {
   const xAxisLabel = dataset?.map(({ name }) => name);
@@ -16,28 +15,12 @@ export default function chartOptions(title, dataset) {
     series: [
       {
         ...commonChartOptions.seriesOptions(CHART_TYPE.BAR, title, CHART_COLOR.REFERENCE_LIGHT, referenceData),
-        color: CHART_COLOR.REFERENCE_LIGHT,
-        label: {
-          show: false,
-          position: 'top',
-          fontWeight: 'bold',
-          rotate: 45,
-          offset: [25, 5],
-          formatter: (el) => (el.data.count > 0) ? `${el.data.count} (${numberFormatter().format(el.data.percentage)}%)` : '',
-        },
       },
     ],
   };
 
   if (referenceData.length >= 30) {
-    options.dataZoom = [
-      {
-        show: true,
-      },
-      {
-        type: 'inside',
-      },
-    ];
+    options.dataZoom = commonChartOptions.dataZoomOptions();
     options.grid.bottom = 40;
   }
 
diff --git a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
index 6b959c0b..2ea99f74 100644
--- a/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
+++ b/ui/src/container/models/Details/multi-classification/reference/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,20 +13,14 @@ export default function chartOptions(dataset, color) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
-
-    barCategoryGap: '0',
-    barGap: 0,
-    itemStyle: {
-      borderWidth: 1,
-      borderColor: 'rgba(201, 25, 25, 1)',
-    },
-
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx
index b1cf0df4..14a58c9a 100644
--- a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx
+++ b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/index.jsx
@@ -107,11 +107,11 @@ function DataPointDistributionChart() {
             echarts={echarts}
             onChartReady={handleOnChartReady}
             option={chartOptions(dataset, CHART_COLOR.REFERENCE, CHART_COLOR.CURRENT)}
-            style={{ height: '100%' }}
+            style={{ height: '12rem', width: '100%' }}
           />
         </div>
       )}
-      modifier="w-full h-full shadow"
+      modifier="w-full h-full shadow overflow-auto max-w-full "
       size="small"
     />
   );
diff --git a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js
index f2706144..938ff6a5 100644
--- a/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js
+++ b/ui/src/container/models/Details/regression/current/data-quality/data-point-distribution/options.js
@@ -13,6 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
@@ -20,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js
index 645d17b7..2275c3e6 100644
--- a/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js
+++ b/ui/src/container/models/Details/regression/current/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,6 +13,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', referenceColor, dataset.referenceValues),
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'current', currentColor, dataset.currentValues),
@@ -20,6 +21,7 @@ export default function chartOptions(dataset, referenceColor, currentColor) {
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx
index 2f0ee804..27bc8bf4 100644
--- a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx
+++ b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/index.jsx
@@ -109,7 +109,7 @@ function DataPointDistributionChart() {
             echarts={echarts}
             onChartReady={handleOnChartReady}
             option={chartOptions(classMetrics, CHART_COLOR.REFERENCE)}
-            style={{ height: '20rem', width: '100%' }}
+            style={{ height: '12rem', width: '100%' }}
           />
         </div>
       )}
diff --git a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js
index 90f22928..142354ae 100644
--- a/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js
+++ b/ui/src/container/models/Details/regression/reference/data-quality/data-point-distribution/options.js
@@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js b/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js
index b3b18a88..ab577e51 100644
--- a/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js
+++ b/ui/src/container/models/Details/regression/reference/data-quality/data-quality-list/numerical/chart/options.js
@@ -13,12 +13,14 @@ export default function chartOptions(dataset, color) {
     ...commonChartOptions.gridOptions(CHART_TYPE.BAR),
     ...commonChartOptions.xAxisOptions(OPTIONS_TYPE.CATEGORY, xAxisData),
     ...commonChartOptions.yAxisOptions(OPTIONS_TYPE.VALUE),
+    ...commonChartOptions.commonOptions(CHART_TYPE.BAR),
     series: [
       commonChartOptions.seriesOptions(CHART_TYPE.BAR, 'reference', color, dataset.referenceValues),
     ],
   };
 
   options.xAxis.axisLabel.rotate = 20;
+  options.barCategoryGap = '0';
 
   return options;
 }
diff --git a/ui/src/helpers/common-chart-options.js b/ui/src/helpers/common-chart-options.js
index c5f61063..c413843c 100644
--- a/ui/src/helpers/common-chart-options.js
+++ b/ui/src/helpers/common-chart-options.js
@@ -146,10 +146,6 @@ const heatmapVisualMapOptions = (dataMax, colors, itemHeight) => {
   return options;
 };
 
-const colorList = {
-  color: ['#00BFFF', '#1E90FF', '#00CED1', '#20B2AA', '#4169E1', '#6A5ACD', '#8A2BE2', '#9400D3', '#BA55D3'],
-};
-
 const tooltipOptions = () => ({
   tooltip: {
     trigger: 'axis',
@@ -163,6 +159,42 @@ const tooltipOptions = () => ({
   },
 });
 
+const dataZoomOptions = () => ([
+  {
+    show: true,
+  },
+  {
+    type: 'inside',
+  },
+]);
+
+const legendOptions = (data) => {
+  const options = {
+    legend: {
+      right: 0,
+      top: 16,
+      bottom: 0,
+      orient: 'vertical',
+      type: 'scroll',
+      scrollDataIndex: 'scroll',
+      pageIconSize: 8,
+      pageTextStyle: {
+        fontSize: 8,
+      },
+      textStyle: {
+        fontSize: 10,
+        fontWeight: '300',
+      },
+    },
+  };
+
+  if (data) {
+    options.legend.data = data;
+  }
+
+  return options;
+};
+
 const barSeriesOptions = (title, color, data) => {
   const options = {
     title,
@@ -215,8 +247,6 @@ const barChartCommonOptions = () => ({
   emphasis: { disabled: true },
   barCategoryGap: '21%',
   barGap: '0',
-  overflow: 'truncate',
-  lineOverflow: 'truncate',
   itemStyle: {
     borderWidth: 1,
     borderColor: 'rgba(201, 25, 25, 1)',
@@ -321,6 +351,20 @@ const CHART_TYPE = {
   LINE: 'line',
 };
 
+const colorList = {
+  color: [
+    '#00BFFF',
+    '#1E90FF',
+    '#00CED1',
+    '#20B2AA',
+    '#4169E1',
+    '#6A5ACD',
+    '#8A2BE2',
+    '#9400D3',
+    '#BA55D3',
+  ],
+};
+
 export {
   yAxisOptions,
   xAxisOptions,
@@ -329,6 +373,8 @@ export {
   commonOptions,
   visualMapOptions,
   tooltipOptions,
+  dataZoomOptions,
+  legendOptions,
   colorList,
   OPTIONS_TYPE,
   CHART_COLOR,
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 50cad6c8..ca0ed854 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -604,10 +604,10 @@
   dependencies:
     yup "^1.4.0"
 
-"@radicalbit/radicalbit-design-system@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@radicalbit/radicalbit-design-system/-/radicalbit-design-system-1.0.0.tgz#e89b4c574df9beb547c88b447783e05bfe987933"
-  integrity sha512-CGTAVJjBL8eVH+X3wOUmLlgMaxgPHIqV/UjmT9IvILEPQb/MQYXQMXpTcnMk6wcjawvSH0wUsctY/8wmBb2T+g==
+"@radicalbit/radicalbit-design-system@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radicalbit/radicalbit-design-system/-/radicalbit-design-system-1.1.0.tgz#2506608ee3b4bfe7cbf6c81da6ea4fba0e0ee76a"
+  integrity sha512-GBX5ch7gXpFU20ZM4YpLjCwhV/e0boRxl5cgXiWuBh+NR6rh7HC2rOfsPPRu/1tuaTUU8vwBD8KImQc9SvVBJQ==
   dependencies:
     "@babel/polyfill" "7.12.1"
     "@fortawesome/fontawesome-svg-core" "^6.5.1"
@@ -5140,7 +5140,16 @@ string-convert@^0.2.0:
   resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
   integrity sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -5220,7 +5229,14 @@ stringify-entities@^4.0.0:
     character-entities-html4 "^2.0.0"
     character-entities-legacy "^3.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==