WizeChart

WizeChart is a simple, lightweight jQuery + Bootstrap plugin that renders clean and customizable horizontal progress bar charts.

Ideal for dashboards, reports, or anything needing a visual breakdown with tooltips, colors, and formatting control.

🚀 Features

• ✅ Simple jQuery plugin
• ✅ Uses Bootstrap progress for styling
• ✅ Supports static data or dynamic AJAX
• ✅ Custom formatting: labels, values, popovers
• ✅ Auto-scaled ruler
• ✅ Multi-color support with Bootstrap or CSS colors
• ✅ UMD + ESM support (npm, Vite, or CDN-ready)

📦 Installation

Via npm

npm install wizechart

Then in your JS file:

import "wizechart";

📋 Basic Usage

Static Data Example

<div id="chart"></div>

<script>
  $("#chart").WizeChart({
    data: {
      labels: ["Ibuprofen", "Paracetamol", "Amoxicillin"],
      values: [180, 240, 90],
    },
    label: "{label} 💊",
    value: (v) => `${v}x`,
    colors: ["primary", "success", "orange"],
    popover: {
      title: (l) => `Info for ${l}`,
      content: (v) => `Total given: ${v}`,
      placement: "top",
    },
  });
</script>

AJAX Data Example

<div id="chart"></div>

<script>
  $("#chart").WizeChart({
    ajax: {
      url: "/api/top-medicines",
      data: () => ({ filter: "weekly" }), // optional filter
    },
    color: "info",
    value: (v) => `${v} doses`,
    rulerPoints: [0, 100, 200, 300, 400],
  });
</script>

Expected server response format:

{
  "success": true,
  "data": {
    "labels": ["Cetirizine", "Metformin"],
    "values": [120, 290]
  }
}

⚙️ Options

| Option | Type | Description | | ------------- | ------------------------------- | ---------------------------------------------------- | | data | { labels, values } | Static data for chart | | ajax | { url, data? } | Dynamic fetch. Data can be function | | label | `string | function` | | value | `string | function` | | color | string | Default Bootstrap class or CSS color | | colors | string[] | List of colors (per bar) | | popover | { title, content, placement } | Bootstrap popover config. Can use string or function | | rulerPoints | `number | number[]` |

🛠 Requirements

• jQuery ^3.6
• Bootstrap 5.x (uses progress + popover)

📝 License

MIT — © WildanMZaki

🔗 Links

• GitHub: https://github.com/WildanMZaki/WizeChart
• NPM: https://www.npmjs.com/package/wizechart