Segmented Horizontal Bar Chart With Vanilla JavaScript – syncro.js

Preview:

Description:

syncro.js is a tiny JavaScript library for generating a segmented (stepped) horizontal bar chart (progress bar).

How to use it:

1. Include the syncro.css and syncro.js on the page.

<link rel="stylesheet" href="./syncro.css" />
<script src="./syncro.js"></script>

2. Create an empty container for the segmented bar chart and define your own chart data in the data-stepped-bar attribute as follows:

<div data-stepped-bar='{"title": "Custom Title", "catagories": [ { "name": "Label 1", "value": 50, "color": "#ff6384" }, { "name": "Label 2", "value": 50, "color": "#ffcd56" } ]}'>
    </div>

3. You can also override the default chart data directly in the syncro.js.

var defaults = {
    title: "Ticket Categories",
    catagories: [
      {
        name: "Remote Support",
        value: 66,
        color: "#ff6384",
      },
      {
        name: "Contract Work",
        value: 14,
        color: "#ff9f40",
      },
      {
        name: "Network Project",
        value: 8,
        color: "#ffcd56",
      },
      {
        name: "Regular Maintenance",
        value: 6,
        color: "#4bc0c0",
      },
      {
        name: "string",
        value: 3,
        color: "#36a2eb",
      },
    ],
};