diff --git a/docs/sources/panels-visualizations/visualizations/time-series/index.md b/docs/sources/panels-visualizations/visualizations/time-series/index.md index c9aa1234f61..1c572da9ccc 100644 --- a/docs/sources/panels-visualizations/visualizations/time-series/index.md +++ b/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. diff --git a/public/app/plugins/panel/timeseries/config.ts b/public/app/plugins/panel/timeseries/config.ts index ebb750b71cc..f749b1f6e6c 100644 --- a/public/app/plugins/panel/timeseries/config.ts +++ b/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',