From ce0771efea9ba3d3f4dae64b9265e6111d5323b7 Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Fri, 26 Nov 2021 08:32:49 -0500 Subject: [PATCH] Statetimeline/TimeSeries/BarChart: Limit y label width to 40% of visualiation width (#42350) (#42368) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit 820aa3ac59f9eb7863e0114b0bdcb1b58f4d74f7) Co-authored-by: Torkel Ödegaard --- .../src/components/uPlot/config/UPlotAxisBuilder.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts index 80b245141f7..bac588eb8c7 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts @@ -75,7 +75,10 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { (acc, value) => Math.max(acc, measureText(value, UPLOT_AXIS_FONT_SIZE).width), 0 ); - axisSize += axis!.gap! + axis!.labelGap! + maxTextWidth; + // limit y tick label width to 40% of visualization + const textWidthWithLimit = Math.min(self.width * 0.4, maxTextWidth); + // Not sure why this += and not normal assignment + axisSize += axis!.gap! + axis!.labelGap! + textWidthWithLimit; } return Math.ceil(axisSize);