Aeva Chart

A versatile, declarative chart library for web and mobile using Lit and Chart.js.

Features

• Declarative Web Components: Use HTML tags to configure your charts.
• Lightweight: Built with LitElement for minimum overhead.
• Full Chart.js Power: Access advanced Chart.js features via simple attributes.
• Gradient Support: Built-in support for vertical, horizontal, and conic gradients.
• TypeScript: First-class support for TypeScript.

Installation

npm install aeva-chart

Usage

Basic Usage (HTML)

Include the bundle and use the tags directly in your HTML:

<script type="module" src="node_modules/aeva-chart/dist/index.bundle.mjs"></script>

<aeva-chart type="bar">
  <chart-data labels="January, February, March">
    <data-set label="Sales" data="65, 59, 80" background-color="rgba(75, 192, 192, 0.2)" border-color="rgb(75, 192, 192)" border-width="1"></data-set>
  </chart-data>
</aeva-chart>

Advanced Configuration

You can fully customize the chart using nested components:

Theme and Plugins

Use <chart-theme> to configure global settings and plugins like Legend, Tooltips, or DataLabels.

<chart-theme 
  maintain-aspect-ratio="false" 
  legend-position="top"
  datalabels-display="true"
  datalabels-color="white"
></chart-theme>

Axis Configuration

Use <chart-axis> to customize X and Y axes.

<chart-axis axis="y" grid-display="true" begin-at-zero="true" title-display="true" title-text="Amount"></chart-axis>

Gradients

Use <chart-gradient> inside a <data-set> to apply beautiful gradients.

<data-set label="Revenue" data="100, 200, 150">
  <chart-gradient from="#ff8a00" to="#da1b60" orientation="vertical"></chart-gradient>
</data-set>

Center Labels (Doughnut/Pie)

<aeva-chart type="doughnut">
  <chart-center-label text="75%" color="#333" font-size="24"></chart-center-label>
  <chart-data labels="Used, Remaining">
     <data-set data="75, 25"></data-set>
  </chart-data>
</aeva-chart>

Development

1. Install dependencies:

   npm install

2. Run dev mode:

   npm run dev

3. Build for production:

   npm run build

Publishing to NPM

If you are a contributor and want to publish the library:

1. Build the library:

   npm run build

2. Login to your NPM account:

   npm login

3. Publish:

   npm run publish

License

ISC