nevera/README.md

Minimal 3kb charts as web components

# 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

```jsx
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

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

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

### Barchart

```js
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.

```css
--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.