Directory

← Back

xtal-frappe-chart

Web component wrapper around the Frappé chart library

Author

Rating

Popularity

<100

Published on webcomponents.org

<xtal-frappe-chart>

Web component wrapper around the cool Frappe chart library.

Things I like about this chart library:

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

NB Tooltips don't display properly within ShadowDOM.

    <script defer src="https://cdn.jsdelivr.net/npm/es-module-shims@0.2.0/dist/es-module-shims.js"></script>
    <script type="importmap-shim">
      {
        "imports": {
          "xtal-element/": "https://cdn.jsdelivr.net/npm/xtal-element@0.0.43/",
          "xtal-json-merge/": "https://cdn.jsdelivr.net/npm/xtal-json-merge@0.2.34/",
          "xtal-json-editor/": "https://cdn.jsdelivr.net/npm/xtal-json-editor@0.0.33/",
          "p-d.p-u/": "https://cdn.jsdelivr.net/npm/p-d.p-u@0.0.110/",
          "xtal-frappe-chart/": "https://cdn.jsdelivr.net/npm/xtal-frappe-chart@0.0.22/",
          "frappe-charts/": "https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/"
        }
      }
      </script>
    <script  type="module-shim">
      import 'xtal-frappe-chart/xtal-frappe-chart.js';
      import 'xtal-json-merge/xtal-insert-json.js';
      import 'xtal-json-editor/xtal-json-editor.js';
      import 'p-d.p-u/p-d.js';
    </script>
</div>
``` -->

Syntax

Install the Polymer-CLI

First, make sure you have the Polymer CLI and npm (packaged with Node.js) installed. Run npm install to install your element's dependencies, then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

WIP

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • frappe-charts#1.1.0
  • xtal-element#0.0.54
  • trans-render#0.0.102
Released
2019-04-17
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

xtal-frappe-chart - Vaadin Add-on Directory

Web component wrapper around the Frappé chart library xtal-frappe-chart - Vaadin Add-on Directory
[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/bahrus/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, unlike chartist, it has nice interactive features. 2) It supports ES6 Modules (and iffe). 3) The charts look nice. **NB** Tooltips [don't](https://github.com/frappe/charts/issues/222) display properly within ShadowDOM.
``` --> # Syntax ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally. ## Viewing Your Element ``` $ polymer serve ``` ## Running Tests WIP
Online