# xtal-frappe-chart

> Web component wrapper around the Frappé chart library

Latest version **0.0.109** (published 2025-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install xtal-frappe-chart
pnpm add xtal-frappe-chart
yarn add xtal-frappe-chart
bun add xtal-frappe-chart
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.109 |
| Published | 2025-02-10 |
| First published | 2017-11-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 15.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | bahrus |
| Maintainers | bahrus |
| Keywords | web-components, web-component, custom-element, custom-elements |

## Links

- npm: https://www.npmjs.com/package/xtal-frappe-chart
- Repository: https://github.com/bahrus/xtal-frappe-chart
- Homepage: https://github.com/bahrus/xtal-frappe-chart#readme
- Issues: https://github.com/bahrus/xtal-frappe-chart/issues
- npm.io page: https://npm.io/package/xtal-frappe-chart

## Dependencies (2)

- [trans-render](https://npm.io/package/trans-render.md) 0.0.884
- [frappe-charts](https://npm.io/package/frappe-charts.md) 1.6.2

## Recent versions

- 0.0.109 (latest) — 2025-02-10
- 0.0.108 — 2025-02-09
- 0.0.107 — 2022-11-13
- 0.0.106 — 2022-02-19
- 0.0.105 — 2022-02-06
- 0.0.104 — 2021-12-18
- 0.0.103 — 2021-12-18
- 0.0.102 — 2021-12-18
- 0.0.101 — 2021-12-18
- 0.0.100 — 2021-12-18
- 0.0.98 — 2021-09-24
- 0.0.97 — 2021-09-24
- 0.0.96 — 2021-09-24
- 0.0.95 — 2021-09-24
- 0.0.94 — 2021-09-24
- … 89 more at https://npm.io/package/xtal-frappe-chart/versions

## README

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/xtal-frappe-chart)

<a href="https://nodei.co/npm/xtal-frappe-chart/"><img src="https://nodei.co/npm/xtal-frappe-chart.png"></a>

[![Actions Status](https://github.com/bahrus/xtal-frappe-chart/workflows/CI/badge.svg)](https://github.com/bahrus/xtal-frappe-chart/actions?query=workflow%3ACI)

<img src="https://badgen.net/bundlephobia/minzip/xtal-frappe-chart">

# \<xtal-frappe-chart\>

Web component wrapper around the cool [Frappe chart](https://frappe.io/charts) library.

Things I like about this chart library:

1)  It is quite small (17kb), yet it has nice interactive features.
2)  It supports ES6 Modules.
3)  The charts look nice.

[Demo](https://codepen.io/bahrus/pen/dyRqxQq)

<!--
```
<custom-element-demo>
  <template>
    <h3>Basic xtal-frappe-chart demo</h3>
    <xtal-frappe-chart chart-title="My Awesome Chart" type=bar height=250 is-navigable data='
    {
      "labels": ["12am-3am", "3am-6am", "6am-9am", "9am-12pm",
        "12pm-3pm", "3pm-6pm", "6pm-9pm", "9pm-12am"],
  
      "datasets": [
        {
          "name": "Some Data", "color": "light-blue",
          "values": [25, 40, 30, 35, 8, 52, 17, -4]
        },
        {
          "name": "Another Set", "color": "violet",
          "values": [25, 50, -10, 15, 18, 32, 27, 14]
        },
        {
          "name": "Yet Another", "color": "blue",
          "values": [15, 20, -3, -15, 58, 12, -17, 37]
        }
      ]
    }
    '></xtal-frappe-chart>
      <script  type=module>
        import 'https://cdn.skypack.dev/xtal-frappe-chart';
      </script>
  </template>
</custom-element-demo>
```
-->

# [API Reference](https://cf-sw.bahrus.workers.dev/?href=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fxtal-frappe-chart%400.0.106%2Fcustom-elements.json&stylesheet=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Fsimple-ce-style.css&embedded=false&tags=&ts=2022-02-19T12%3A41%3A50.241Z&tocXSLT=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fwc-info%2Ftoc.xsl)

# [Syntax](https://bahrus.github.io/api-viewer/index.html?npmPackage=xtal-frappe-chart&jsPath=xtal-frappe-chart-example1.js&jsonPath=custom-elements-example1.json)

<!--
```
<custom-element-demo>
  <template>
      <div>
        <api-viewer src="https://unpkg.com/xtal-frappe-chart@0.0.51/custom-elements.json"></api-viewer>
        <script type=module src=https://unpkg.com/api-viewer-element@0.3.3/lib/api-viewer.js?module></script>
        <script type=module src=https://unpkg.com/xtal-frappe-chart/xtal-frappe-chart.js?module></script>
    </div>
  </template>
</custom-element-demo>
```
-->


## Referencing from CDN:

<!--
Optimized:

```html
<script type="module" src="https://cdn.pika.dev/xtal-frappe-chart"></script>
```

or

Easy to debug:
-->

```html
<script type="module" src="https://unpkg.com/xtal-frappe-chart/xtal-frappe-chart.js?module"></script>
```


## Viewing Your Element Locally

```
$ npm install
$ npm run serve
```

## Running Tests

WIP

---
_Source: https://npm.io/package/xtal-frappe-chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._