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 and html packages.

`html






`




Typescript

`typescript
import * as chart from '@reactivelib/chart';
chart.create({});
`

$3

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