# chartino

> Coming soon! Simple timeseries library

Latest version **0.3.0** (published 2023-07-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install chartino
pnpm add chartino
yarn add chartino
bun add chartino
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2023-07-30 |
| First published | 2023-07-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Verschueren Tom |
| Maintainers | tomverschueren |
| Keywords | timeseries, chart, interactable, javascript, simple |

## Links

- npm: https://www.npmjs.com/package/chartino
- Repository: https://github.com/VerschuerenTom/Chartino
- Homepage: https://github.com/VerschuerenTom/Chartino#readme
- Issues: https://github.com/VerschuerenTom/Chartino/issues
- npm.io page: https://npm.io/package/chartino

## Dependencies (1)

- [d3](https://npm.io/package/d3.md) ^7.8.5

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2023-07-30
- 0.2.1 — 2023-07-28
- 0.1.1 — 2023-07-26
- 0.1.0 — 2023-07-26
- 0.0.1 — 2023-07-23

## README

# Chartino

> :warning: **This repository is under construction**: This repository is being build and therefore is at this point in time incomplete and lacks proper testing.

## Documentation

This is library is an ES module, not a CommonJS one.

### Installation

```sh
npm i chartino
```

### Examples
#### Basic line chart

Creating a simple linechart with one line in typescript can be done as follows:

```typescript
import { ChartLine, LineChart } from "chartino";

//data object where the keys are timestamps in milliseconds.
const data = {
    1672502400000: 5, // September 1, 2023
    1672588800000: 10, // September 2, 2023
    1672675200000: 13, // September 3, 2023
    1672761600000: 9, // September 4, 2023
    1672848000000: 4, // September 5, 2023
};

const lineChart = new LineChart("chart"); // "chart" points to a div with chart as id.
const chartLine: ChartLine = new ChartLine(data);
chartLineTwo.color = "#008000"; //color green

lineChart
    .addChartLine(chartLine)
    .draw();
```

The corresponding html will be as follows:

```html
<div id="chart"></div>
```

#### Chart with multiple lines

Adding lines is possible. This can be done as follows:
```typescript
const chartLine = new ChartLine(data);
const anotherChartLine = new ChartLine(data);

lineChart
    .addChartLine(chartLine)
    .addChartLine(anotherChartLine)
    .draw()
```

#### Chart with a mouse tooltip

This library allows you to configure a custom mouse tooltip. Create a new object from the class MouseTooltip and pass in a function as argument.
This function should return a string which represents the html code for the tooltip.
```typescript
class MouseTooltip(callback: ((time: Date, tooltipData: TooltipData) => string))
```
Example: 
```typescript
const getTooltipHtml = (time: Date, tooltipData: {value: number, color: string}[]) => {
    return "<div><p>" + time.toString() +": " + tooltipData[0].value + "</p></div>";
}

//new MouseTooltip
const tooltip = new MouseTooltip(getTooltipHtml)
//position the tooltip 10 pixels to the bottom and 10 pixels to the top of the mouse.
tooltip.positionCallback = (x:number,y:number) => ({x: x +10, y: y +10})
lineChart
    .setTooltip(tooltip)
    .draw()
```

---
_Source: https://npm.io/package/chartino · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._