Fix axis labels css.

Change series smooth to false.
 Make charts margin smaller to match box container.

frontend/src/app/components/incoming-transactions-graph/incoming-transactions-graph.component.ts

@@ -99,10 +99,18 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
       },
       xAxis: {
         type: 'category',
+        axisLabel: {
+          align: 'center',
+          fontSize: 11,
+          lineHeight: 12
+        },
         data: this.data.labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
       },
       yAxis: {
         type: 'value',
+        axisLabel: {
+          fontSize: 11,
+        },
         splitLine: {
           lineStyle: {
             type: 'dotted',
@@ -115,7 +123,7 @@ export class IncomingTransactionsGraphComponent implements OnInit, OnChanges {
         {
           data: this.data.series[0],
           type: 'line',
-          smooth: (this.template === 'advanced') ? false : true,
+          smooth: false,
           showSymbol: false,
           lineStyle: {
             width: 3,

frontend/src/app/components/mempool-graph/mempool-graph.component.ts

@@ -286,7 +286,12 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         {
           type: 'category',
           boundaryGap: false,
-          axisLine: { onZero: false },
+          axisLine: { onZero: true },
+          axisLabel: {
+            align: 'center',
+            fontSize: 11,
+            lineHeight: 12,
+          },
           data: labels.map((value: any) => `${formatDate(value, 'M/d', this.locale)}\n${formatDate(value, 'H:mm', this.locale)}`),
         }
       ],
@@ -294,6 +299,7 @@ export class MempoolGraphComponent implements OnInit, OnChanges {
         type: 'value',
         axisLine: { onZero: false },
         axisLabel: {
+          fontSize: 11,
           formatter: (value: number) => (`${this.vbytesPipe.transform(value, 2, 'vB', 'MvB', true)}`),
         },
         splitLine: {

frontend/src/app/components/statistics/statistics.component.html

@@ -45,7 +45,7 @@
               [template]="'advanced'"
               [limitFee]="500"
               [height]="500"
-              [left]="65"
+              [left]="50"
               [data]="mempoolStats"
             ></app-mempool-graph>
           </div>
@@ -62,7 +62,7 @@
           <div class="incoming-transactions-graph">
             <app-incoming-transactions-graph
               [height]="500"
-              [left]="65"
+              [left]="50"
               [template]="'advanced'"
               [data]="mempoolTransactionsWeightPerSecondData"
             ></app-incoming-transactions-graph>

frontend/src/app/dashboard/dashboard.component.html

@@ -51,6 +51,8 @@
               <app-mempool-graph
                 [template]="'widget'"
                 [limitFee]="150"
+                [left]="60"
+                [right]="0"
                 [data]="mempoolStats.mempool"
               ></app-mempool-graph>
             </div>
@@ -65,7 +67,8 @@
             <hr>
             <div class="mempool-graph" *ngIf="(mempoolStats$ | async) as mempoolStats; else loadingSpinner">
               <app-incoming-transactions-graph
-                [left]="50"
+                [left]="35"
+                [right]="0"
                 [data]="mempoolStats.weightPerSecond"
                 ></app-incoming-transactions-graph>
             </div>