This example shows simple horizontal line with markers and labels implemented only with HTML and CSS.

Main Features

  • pure HTML(5) and CSS3
  • no JavaScript
  • no images
  • width of lines can be easily changed


ALabel BC


Use Cases

You can use it standalone, just generate the html markup and accompanying css. However, I’d probably use it in XTemplate where length of lines, colors and labels can be generated dynamically based on the passed data.

Source Code

If you want to see the example code, login or sign-up. Free membership is available.


Follow me:
Latest posts by saki (see all)

Enter your username and password to log into your account. Don't have an account? Sign up.

Want to collaborate on an upcoming project?