Graph: Horizontal Bars

Using the same technique as for vertical bars, we can simply add flex-direction on the container with a value of column to create a set of horizontal bars. flex-direction can have a value of row (default) or column, where a row runs horizontally (→) and a column runs vertically (↓). You can also reverse the direction of both by using row-reverse (←) and column-reverse (↑) respectively.

demo

  • HTML, CSS
  • Includes: index.html and CSS file
Please check for future updates here or at my gitHub page.