Custom element that upgrades table to a chart
JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
components
docs
.babelrc
.gitignore
LICENSE
README.md
define.js
dev.html
element.js
imports.html
index.js
package.json
webpack.config.js

README.md

Installation

Without HTML Imports (recommended)

<!-- Custom Elements v1 polyfill -->
<script src="https://unpkg.com/@webcomponents/custom-elements@1.0.0-alpha.3"></script>
<script src="https://unpkg.com/chart.js@2.4.0/dist/Chart.min.js"></script>
<script src="https://unpkg.com/shaf-chart@1.1.5/index.js"></script>

With HTML Imports

<!-- HTML Imports and Custom Elements v1 polyfills -->
<script src="https://unpkg.com/webcomponents.js@0.7.23/HTMLImports.min.js"></script>
<script src="https://unpkg.com/@webcomponents/custom-elements@1.0.0-alpha.3"></script>
<link href="https://unpkg.com/shaf-chart@1.1.5/imports.html" rel="import">

Basic usage

<shaf-chart>
  <table>
    <thead>
      <tr>
        <th>Date</th>
        <th>Unique visitors</th>
        <th>Pageviews</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>2016-11-18</th>
        <td>31</td>
        <td>51</td>
      </tr>
      <tr>
        <th>2016-11-19</th>
        <td>34</td>
        <td>76</td>
      </tr>
    </tbody>
  </table>
</shaf-chart>

Roadmap

  • Inherit width/height from element attributes
  • show-table attribute