nevera

Minimal 3kb charts as web components. No d3, no Shadow DOM, what could go wrong?

[!IMPORTANT] This is in early alpha. Breaking changes might happen.

npm i -D nevera

Usage

import "nevera"; // imports all

<nev-barchart onMouseOver={handleMouseover} data={chartData}></nev-barchart>;

const chartData = [
  { key: "Apples", value: 250, fill: "red" },
  { key: "Bananas", value: 250, fill: "yellow" },
  { key: "Coconut", value: 125, fill: "brown" },
  { key: "Dragonfruit", value: 125, fill: "pink" },
];

Barchart

import "nevera/barchart"; // tree-shaken import

<nev-barchart onMouseOver={handleMouseover} data={chartData}></nev-barchart>;

Barchart

import "nevera/piechart"; // tree-shaken import

<nev-piechart onClick={handleClick} :data="chartData"></nev-piechart>

Css variables

Minimal customization can be achived with the css variables below. Properties from the data objects take precedence, so a fill: "red" will win over --nev-fill: white;, allowing you to have a more granular control over bars or slices.

--nev-fill: white;
--nev-bg: #333;
--nev-stroke: red;
--nev-stroke-width: 5;

Events

Hovering or clicking on parts of the chart will emit the following events: mouseover, mouseout and click. Their value can be accessed on event.detail.value, which will be the key of the slice or bar (as provided in the data array)

Made with 🍕 in Amsterdam.