diff --git a/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md b/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md index 89733744b19..bb81573f17d 100644 --- a/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md +++ b/docs/sources/panels/visualizations/time-series/graph-time-series-as-bars.md @@ -27,6 +27,34 @@ For more information about applying these options, refer to: Some field options will not affect the visualization until you click outside of the field option box you are editing or press Enter. +### Bar alignment + +Set the position of the bar relative to a data point. In the examples below, **Show points** is set to **Always** to make it easier to see the difference this setting makes. The points do not change; the bars change in relationship to the points. + +#### Before + +![Bar alignment before icon](/img/docs/time-series-panel/bar-alignment-icon-before-7-4.png) + +The bar is drawn before the point. The point is placed on the trailing corner of the bar. + +![Bar alignment before example](/img/docs/time-series-panel/bar-alignment-before-7-4.png) + +#### Center + +![Bar alignment center icon](/img/docs/time-series-panel/bar-alignment-icon-center-7-4.png) + +The bar is drawn around the point. The point is placed in the center of the bar. This is the default. + +![Bar alignment center](/img/docs/time-series-panel/bar-alignment-center-7-4.png) + +#### After + +![Bar alignment after icon](/img/docs/time-series-panel/bar-alignment-icon-after-7-4.png) + +The bar is drawn after the point. The point is placed on the leading corner of the bar. + +![Bar alignment after](/img/docs/time-series-panel/bar-alignment-after-7-4.png) + ### Line width Set the thickness of the lines bar outlines, from 0 to 10 pixels. **Fill opacity** is set to 10 in the examples below.