New example: two left-aligned bars

[julien-deramond]

Context

A topic has been discussed with a project and designers to define how to render a bar chart containing for example only 2 bars.

In https://system.design.orange.com/0c1af118d/p/68a692-bar-chart, it's the perfect world with a balanced rendering of several bars on a given surface. In reality, it happens a lot, but we also have use cases where you want to display only 2 bars.

Designers generally recommend keeping the width of the bars the same across all the bar charts being used. In the case of using two bars, this would mean reducing the width of the bars (so they do not fill the width) and positioning the bars to the left, closer to the Y-axis. The remaining space along the X-axis would be empty.

The effect of this is that when the number of bars on the chart increases (up to 14), the width of the bars remains the same, but the space to the right of the bars (along the X-axis) will decrease due to the number of bars in the chart.

Keeping the width of the bars consistent may also help to not distract users who may think that the increase in the width of the bars, from one bar chart to another, has some meaning in terms of its value.

Description

The aim of this issue would be to add an example of how to do it with our library in the documentation. Representing 2 left-aligned bars (fixed width) and a fixed gap as well.