Getting Started

Installation

Install the plugin via npm:

npm install eleventy-plugin-uncharted

Setup

Import and add the plugin in your Eleventy configuration:

// eleventy.config.js
import uncharted from 'eleventy-plugin-uncharted';

export default function(eleventyConfig) {
  eleventyConfig.addPlugin(uncharted);
}

The plugin automatically copies the CSS to your output directory and injects the stylesheet link into pages that contain charts.

Plugin Options

Configure the plugin by passing an options object:

eleventyConfig.addPlugin(uncharted, {
  dataDir: '_data/charts',       // CSV directory relative to root
  animate: true,                 // enable animations globally
  cssPath: '/css/uncharted.css', // output path for stylesheet
  injectCss: false,              // disable automatic CSS handling
  downloadData: true,            // enable download links globally
  dataPassthrough: true,         // copy CSV files to public path
  dataPath: '/data/'             // public URL path for CSV files
});

Manual CSS Include

If you set injectCss: false, manually include the stylesheet in your layout:

<link rel="stylesheet" href="/css/uncharted.css">

Basic Usage

Define charts in your page's frontmatter and render them with the chart shortcode:

---
charts:
  growth:
    type: stacked-bar
    title: Platform Growth
    file: charts/platform-growth.csv
---

{% chart "growth" %}

Uncharted uses the first CSV column as categories and remaining columns as data series, with column names as legend labels. See Data Sources for more ways to define chart data, and Configuration for customization options.