diff --git a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts index 49e064a31eb..4632082334c 100644 --- a/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts +++ b/src/pybind/mgr/dashboard/frontend/src/app/ceph/dashboard-v3/dashboard-area-chart/dashboard-area-chart.component.ts @@ -119,6 +119,7 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit { ], yAxes: [ { + afterFit: (scaleInstance: any) => (scaleInstance.width = 100), gridLines: { display: false }, @@ -129,7 +130,7 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit { if (value === 0) { return null; } - return this.fillString(this.convertUnits(value)); + return this.convertUnits(value); } } } @@ -265,18 +266,6 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit { return dataWithUnits; } - private fillString(str: string): string { - let maxNumberOfChar: number = 8; - let numberOfChars: number = str.length; - if (str.length < 4) { - maxNumberOfChar = 11; - } - for (; numberOfChars < maxNumberOfChar; numberOfChars++) { - str = '\u00A0' + str; - } - return str + '\u00A0\u00A0'; - } - private setChartTicks() { if (!this.chart) { return; @@ -305,9 +294,9 @@ export class DashboardAreaChartComponent implements OnChanges, AfterViewInit { return null; } if (!maxValueDataUnits) { - return this.fillString(`${value}`); + return `${value}`; } - return this.fillString(`${value} ${maxValueDataUnits}`); + return `${value} ${maxValueDataUnits}`; }; this.chartDataUnits = maxValueDataUnits || ''; this.chart.chart.update();