Segmented Horizontal Bar Graph Library – liner-bar.js

The Segmented Horizontal Bar Graph is a graph type that displays percentages in terms of segments of a given length within a specified interval.

It is used to visualize and compare multiple data sets. The data is put into a set of bars, each of them representing a single data point.

In this post, I’d like to share with you a vanilla JavaScript library that helps you build this type of chart using plain HTML, CSS, and JavaScript. Let’s get started.

How to use it:

1. Install and import the liner-bar.js library.

# NPM
$ npm install @kikytokamuro/liner-bar

import { LinerBar } from '@kikytokamuro/liner-bar';
import '@kikytokamuro/liner-bar/liner-bar.css';

2. Or load the stylesheet liner-bar.css and JavaScript liner-bar.js in the document.

<link rel="stylesheet" href="liner-bar.css" />
<script src="liner-bar.js"></script>

3. Create a container to hold the segmented bar graph.

<div id="liner-bar">
</div>

4. Prepare your data containing names, values, and background colors as follows:

const myData = [
      { name: "CSS", value: 50, color: "#222" },
      { name: "Script", value: 60, color: "#333" },
      { name: "Com", value: 30, color: "#444" },
      // ...
]

5. Initialize the liner-bar.js library and pass options as follows.

const myChart = new LinerBar("#liner-bar", {
      title: "My Chart",
      items: data,
      dark: true, // dark mode
});

5. Render the segmented bar graph on the page.

myChart.render();

6. Enable the built-in dark mode.

const myChart = new LinerBar("#liner-bar", {
      title: "My Chart",
      items: data,
      dark: true,
});

Changelog:

v2.0.1 (07/08/2026)

• Rewrite liner-bar to npm package
• Refactor source to es6 class
• Rewrite styles

09/04/2022

• Fix bug in multiple liner-bars