TimeSeries: Expose option for "Bar width factor" (#77338)

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

docs/sources/panels-visualizations/visualizations/time-series/index.md

@@ -123,6 +123,10 @@ Set the position of the bar relative to a data point. In the examples below, **S
 - **After** ![Bar alignment after icon](/static/img/docs/time-series-panel/bar-alignment-after.png)
   The bar is drawn after the point. The point is placed on the leading corner of the bar.
 
+### Bar width factor
+
+Set the width of the bar relative to minimum space between data points. A factor of 0.5 means that the bars take up half of the available space between data points. A factor of 1.0 means that the bars take up all available space.
+
 ### Line width
 
 Line width is a slider that controls the thickness for series lines or the outline for bars.

public/app/plugins/panel/timeseries/config.ts

@@ -32,6 +32,7 @@ export const defaultGraphConfig: GraphFieldConfig = {
   fillOpacity: 0,
   gradientMode: GraphGradientMode.None,
   barAlignment: BarAlignment.Center,
+  barWidthFactor: 0.6,
   stacking: {
     mode: StackingMode.None,
     group: 'A',
@@ -90,6 +91,19 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig, isTime = true): SetFi
           },
           showIf: (config) => config.drawStyle === GraphDrawStyle.Bars,
         })
+        .addSliderInput({
+          path: 'barWidthFactor',
+          name: 'Bar width factor',
+          category: categoryStyles,
+          defaultValue: cfg.barWidthFactor,
+          settings: {
+            min: 0.1,
+            max: 1.0,
+            step: 0.1,
+            ariaLabelForHandle: 'Bar width factor',
+          },
+          showIf: (config) => config.drawStyle === GraphDrawStyle.Bars,
+        })
         .addSliderInput({
           path: 'lineWidth',
           name: 'Line width',