ui: chart alignments

frontend/app/components/Charts/BarChart.tsx

@@ -54,7 +54,7 @@ function ORBarChart(props: BarChartProps) {
       data: undefined,
       name: props.label ?? 'Number of Sessions',
       nameLocation: 'middle',
-      nameGap: 35,
+      nameGap: 45,
     };
 
     chart.setOption({

frontend/app/components/Charts/ColumnChart.tsx

@@ -75,7 +75,7 @@ function ColumnChart(props: ColumnChartProps) {
         type: 'value',
         name: label ?? 'Total',
         nameLocation: 'middle',
-        nameGap: 35,
+        nameGap: 45,
       },
       yAxis: {
         type: 'category',

frontend/app/components/Charts/LineChart.tsx

@@ -70,7 +70,7 @@ function ORLineChart(props: Props) {
       yAxis: {
         name: props.label ?? 'Number of Sessions',
         nameLocation: 'middle',
-        nameGap: 35,
+        nameGap: 45,
       },
       tooltip: {
         ...defaultOptions.tooltip,

frontend/app/components/Charts/init.ts

@@ -44,7 +44,7 @@ const defaultOptions = {
   grid: {
     bottom: 20,
     top: 40,
-    left: 55,
+    left: 35,
     right: 15,
     containLabel: true,
   },

frontend/app/components/Dashboard/components/WidgetChart/WidgetChart.tsx

@@ -315,7 +315,6 @@ function WidgetChart(props: Props) {
 
       if (viewType === 'lineChart') {
         return (
-          <div className='pt-3'>
           <LineChart
             chartName={_metric.name}
             inGrid={!props.isPreview}
@@ -328,12 +327,10 @@ function WidgetChart(props: Props) {
                 : 'Number of Users'
             }
           />
-          </div>
         );
       }
       if (viewType === 'areaChart') {
         return (
-          <div className='pt-3'>
           <LineChart
             isArea
             chartName={_metric.name}
@@ -346,12 +343,10 @@ function WidgetChart(props: Props) {
                 : 'Number of Users'
             }
           />
-          </div>
         );
       }
       if (viewType === 'barChart') {
         return (
-          <div className='pt-3'>
           <BarChart
             inGrid={!props.isPreview}
             data={chartData}
@@ -365,7 +360,6 @@ function WidgetChart(props: Props) {
                 : 'Number of Users'
             }
           />
-          </div>
         );
       }
      
@@ -389,7 +383,6 @@ function WidgetChart(props: Props) {
       }
       if (viewType === 'pieChart') {
         return (
-          <div className='pt-3'>
           <PieChart
             inGrid={!props.isPreview}
             data={chartData}
@@ -400,7 +393,6 @@ function WidgetChart(props: Props) {
                 : 'Number of Users'
             }
           />
-          </div>
         );
       }
       if (viewType === 'progress') {