wani-graf

Embeddable chart web component powered by WaniGraf. Drop a live, AI-generated chart anywhere with a single HTML tag — no API key required.

Install

npm install wani-graf

or via CDN:

<script src="https://cdn.jsdelivr.net/npm/wani-graf/wani-graf.js"></script>

Usage

Render a saved chart by key

<wani-graf chart-key="abc123"></wani-graf>

Create a chart at wanigraf.com, copy the 10-char key from the share menu, done.

Feed live external data into a saved chart

<wani-graf chart-key="abc123" api-url="https://api.example.com/data"></wani-graf>
<wani-graf chart-key="abc123" data='[{"month":"Jan","revenue":1200}]'></wani-graf>

Generate a chart on-the-fly from raw data (no saved chart needed)

<wani-graf data='[{"month":"Jan","revenue":1200}]'></wani-graf>
<wani-graf api-url="https://api.example.com/data" chart-hint="bar"></wani-graf>

Attributes

| Attribute | Description | |---|---| | chart-key | Chart ID from wanigraf.com (10-char code) | | data | JSON string of an array of objects | | api-url | URL to fetch JSON data from (proxied server-side, CORS-safe) | | chart-hint | Preferred chart type for data-only mode: line | bar | pie | | height | Height in px (default: 400) | | base-url | Override wanigraf.com base URL (for self-hosted / dev) |

React

import 'wani-graf'

export default function Chart() {
  return <wani-graf chart-key="abc123" height="300" />
}

On React 18 and below, use a ref if attributes don't apply:

import { useEffect, useRef } from 'react'
import 'wani-graf'

export default function Chart() {
  const ref = useRef()
  useEffect(() => {
    ref.current.setAttribute('chart-key', 'abc123')
    ref.current.setAttribute('height', '300')
  }, [])
  return <wani-graf ref={ref} />
}

License

MIT