Docs: Time series panel, bar alignment docs (#30780)

* Docs: Time series panel, bar alignment docs

* Update graph-time-series-as-bars.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

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.