# @reactivelib/chart
> HTML5 charts Library.
Latest version **1.0.1** (published 2018-04-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install @reactivelib/chart
pnpm add @reactivelib/chart
yarn add @reactivelib/chart
bun add @reactivelib/chart
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-04-18 |
| First published | 2018-04-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 5.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Christoph Rodak |
| Maintainers | reactivelib |
## Links
- npm: https://www.npmjs.com/package/@reactivelib/chart
- Repository: https://github.com/reactivelib/chart
- Homepage: https://reactivechart.com
- Issues: https://github.com/reactivelib/chart/issues
- npm.io page: https://npm.io/package/@reactivelib/chart
## Dependencies (7)
- [mocha](https://npm.io/package/mocha.md) ^5.0.5
- [tslib](https://npm.io/package/tslib.md) ^1.9.0
- [html2canvas](https://npm.io/package/html2canvas.md) ^1.0.0-alpha.9
- [promise-polyfill](https://npm.io/package/promise-polyfill.md) ^7.0.2
- [@reactivelib/core](https://npm.io/package/@reactivelib/core.md) 1.0.1
- [@reactivelib/html](https://npm.io/package/@reactivelib/html.md) 1.0.0
- [@reactivelib/reactive](https://npm.io/package/@reactivelib/reactive.md) 1.0.0
## Recent versions
- 1.0.1 (latest) — 2018-04-18
- 1.0.0 — 2018-04-11
## README
ReactiveChart is the charting library used by the reactivechart.com service and part of the reactivelib software library.
# Installation
```bash
npm install @reactivelib/chart
```
## commonjs
```javascript
var chart = require("@reactivelib/chart");
chart({});
```
## Browser
We provide a browser ready file "dist/reactivelib.min.js" in the npm package that exposes the global "reactivelib" and includes both this and the
[reactive](https://github.com/reactivelib/reactive) and [html](https://github.com/reactivelib/html) packages.
```html
```
## Typescript
```typescript
import * as chart from '@reactivelib/chart';
chart.create({});
```
### Typescript with "esModuleInterop"
When using "esModuleInterop" option, you can also import as follows:
```typescript
import chart from '@reactivelib/chart';
chart({})
```
# Creating a chart
A new chart is created with the "chart" function by passing a configuration object as follows.
```html
```
For all possible options, take a look at the interface IChartSettings in the code or the API description at reactivechart.com.
## Adding dynamic behaviour
Dynamic behaviour can be created by using the [reactive](https://github.com/reactivelib/reactive) package on the configuration.
E.g., to dynamically change the data or id, we can we can do the following:
```html
```
Most of the properties can be changed this way
## Sharing configurations
You can create complex chart systems very simply by sharing configurations. E.g., to create 2 synchronized charts by their x-axis, we can do the following:
```html
```
We create a reactive window object and pass it to the configurations of both charts as the window to use. This will cause the x-axis window of both charts to remain the same, no matter to which chart the user is zooming in.
# More information
For more information and examples, please visit https://reactivechart.com
---
_Source: https://npm.io/package/@reactivelib/chart · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._