Home Chart & Graphs Plugins Step by Step Bar Chart Created Using Vanilla Javascript

Step by Step Bar Chart Created Using Vanilla Javascript

Chart & Graphs Plugins webcodeflow · October 23, 2022 · 0 Comment

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

Pure CSS Making A Flexbox Bar Graphs Plugin

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