# linear-chart-js

> Linear chart with animation using canvas

Latest version **1.0.18** (published 2021-08-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install linear-chart-js
pnpm add linear-chart-js
yarn add linear-chart-js
bun add linear-chart-js
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.18 |
| Published | 2021-08-05 |
| First published | 2021-07-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dongjin Kim |
| Maintainers | dongqui9 |
| Keywords | graph, chart, canvas, linear, action, dynamic, animate, animation |

## Links

- npm: https://www.npmjs.com/package/linear-chart-js
- Repository: https://github.com/dongqui/linear-chart-js
- Homepage: https://github.com/dongqui/linear-chart#readme
- Issues: https://github.com/dongqui/linear-chart/issues
- npm.io page: https://npm.io/package/linear-chart-js

## 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

- 1.0.18 (latest) — 2021-08-05
- 1.0.16 — 2021-08-05
- 1.0.15 — 2021-08-05
- 1.0.14 — 2021-08-05
- 1.0.13 — 2021-08-05
- 1.0.12 — 2021-08-05
- 1.0.11 — 2021-08-05
- 1.0.8 — 2021-07-30
- 1.0.6 — 2021-07-30
- 1.0.5 — 2021-07-30
- 1.0.4 — 2021-07-29
- 1.0.3 — 2021-07-29
- 1.0.2 — 2021-07-29
- 1.0.1 — 2021-07-29
- 1.0.0 — 2021-07-29

## README

# Linear Chart JS
<p align="center">
  <img src="https://user-images.githubusercontent.com/21697238/127592629-9a9eedec-bf1a-44e6-9bd5-b79a760c6c5f.gif" alt="preview" />
</p>
<h3 align="center">Linear-Chart-JS</h3>
<p align="center">Simple Linear Chart using JavaScript and HTML5 Canvas.</p>

## Installation
```shell
yarn add linear-chart-js
```
or

```shell
npm install linear-chart-js
```

then

```js
import LinearChart from 'linear-chart-js';
```

## Usage
Create canvas element on your HTML
```html
<canvas id="target" width="500px" height="500px"></canvas>
```
then write script
```js
new LinearChart(
 document.getElementById('target'),
 [1, 2, 3, 4, 5, 6, 7], // x values
 [2345, 3463, 2343, 2352], // y values
 {
    highlightIndex: 6,
    wayPointsCount: 10,
 }
);
```

## options 
|               option | type     | default | description                                               |
| -------------------: | :------- | :------ | :-------------------------------------------------------- |
|     **`isGrid`**     | `boolean` | `true`     | Show or Hide the background grid pattern                         |
|     **`lineColor`**  | `string` | `#a0e1e0`   | Line color                                   |
| **`highlightIndex`** | `string` | `undefined`    | Set the index to highlight                                   |
|      **`textColor`** | `string` | `#626666`     | Text color   |
| **`yTopValue`**      | `number` | `MaxY+MinY`     | Maximum y value |
| **`backgroundColor`**| `string` | `#FCFCFC`     | Background color |
| **`canvasWidth`**    | `number` | `792`     |  Canvas width |
| **`canvasHeight`**   | `number` | `312`     |  Canvas height |
| **`gridXSize`**      | `number` | `33`     |  The width of one grid unit |
| **`gridYSize`**      | `number` | `26`     |  The height of one grid unit
| **`gridStrokeColor`**| `string` | `#a0e1e0`     |  The color of the background grid pattern stroke |
| **`gridXValueJump`** | `number` | `2`     |  The offset position of x value |
| **`graphPointerHighlightColor`**      | `string` | `#219A95`     |  The color of highlighed pointer |
| **`graphXValueTextColor`**      | `string` | `#8D9393`     |  The color of highlighed x value |
| **`graphPointerColor`**      | `string` | `#2AC1BC`     |  Pointer color |
| **`wayPointsCount`**      | `number` | `25`     |  The speed of chart animation |
>>>>>>> 69af5047c18dc7a8069e933738644274d835ce25

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