Author: | nyash04 |
---|---|
Views Total: | no views |
Official Page: | Go to website |
Last Update: | August 10, 2021 |
License: | MIT |
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", }, ], };