Step by Step Bar Chart Created Using Vanilla Javascript

syncro.js hierarchical bar chart is a small javascript library for creating a horizontal segmented chart or progress bar.

stacked bar chart, horizontal stacked bar chart, horizontal bar graph examples, multiple bar graph, types of bar chart, cumulative stacked bar chart

How to make use of it:

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

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

2. Create an empty container for the segmented bar chart and outline your individual chart information within 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 even override the default chart information straight within 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",
      },
    ],
};

Segmented Horizontal Bar Chart, stepped bar chart Plugin/Github, how to read a segmented bar graph


See Demo And Download

Official Website(nyash04): Click Here

This superior jQuery/javascript plugin is developed by nyash04. For extra advanced usage, please go to the official website.

Share