A Javascript library that auto-generates responsive D3 charts from Google Sheets.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



A library that auto-generates responsive D3 charts from Google Sheets.


This library has the following dependencies:

These dependencies can be called individually or via the included vendor file at js/pieFrame-vendor.min.js.


The library relies on a new HTML-like tag called <chart>. This tag will be replaced in the DOM by the library with a SVG chart, as dictated by the tag's attributes.

  • data-id: (required) The Google Sheet data ID. The spreadsheet must be publicly accessible.
  • data-type: (required) The style of chart that should be generated. Supported options are:
    • horizontal-bar
    • vertical-bar
    • pie
  • data-colorseed: (optional) A random string or integer that will ensure the same colors are generated each time. If no seed is specified, random colors will be generated on each page load.
  • data-hue: (optional) Determines which color hue is used by the chart. Supported hues (as per the randomColor library) are red, orange, yellow, green, blue, purple, pink, and monochrome.
    <link href="assets/css/pieFrame.css" rel="stylesheet">

    <chart data-id="GOOGLE-SHEET-ID" data-type="TYPE-OF-CHART">
      A short description of your chart.

    <script src="assets/js/pieFrame-vendor.min.js"></script>
    <script src="assets/js/pieFrame.min.js"></script>

An example index.html file is included in this repository.