xtal-frappe-chart | Vaadin

Web component wrapper around the Frappé chart library

Published on webcomponents.org


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  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';
``` -->


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



Link to this version
ImportedReleased 08 July 2018MIT License
Framework Support
Browser Independent
Install with
npm install xtal-frappe-chart"@0.0.9"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.9


  • frappe-charts#^1.1.0
  • xtal-latx#0.0.17