@reactivelib/chart
v1.0.1
Published
HTML5 charts Library.
Readme
ReactiveChart is the charting library used by the reactivechart.com service and part of the reactivelib software library.
Installation
npm install @reactivelib/chartcommonjs
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.
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@reactivelib/chart@latest/dist/reactivelib.min.js"></script>
</head>
<body>
<script type="text/javascript">
//reactive package
var reactive = reactivelib.reactive;
//html package
var html = reactivelib.html;
//chart package
var chart = reactivelib.chart;
</script>
</body>Typescript
import * as chart from '@reactivelib/chart';
chart.create({});Typescript with "esModuleInterop"
When using "esModuleInterop" option, you can also import as follows:
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>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@reactivelib/chart@latest/dist/reactivelib.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;">
</div>
<script type="text/javascript">
var chart = reactivelib.chart({
type: "x",
xAxis: {
type: "discrete"
},
title: "Chart title",
series: {
shape: "column"
},
data: {
content: ",Series 1,Series 2,Series 3\nCategory 1,5,6,7\nCategory 2,6,2,4\nCategory 3,6,2,5"
}
});
reactivelib.html.attach(document.getElementById("chart"), chart);
</script>
</body>
</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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@reactivelib/chart@latest/dist/reactivelib.min.js"></script>
</head>
<body>
<div id="chart" style="padding: 40px; width: 400px; height: 400px"></div>
<script type="text/javascript">
var chart;
window.onload = function(){
var series = reactivelib.reactive({
id: "series id",
data: [1, 5, 6, 2],
shape: "column"
})
chart = reactivelib.chart({
type: "x",
xAxis: {
type: "discrete",
categories: ["A", "B", "C", "D"]
},
series: [series]
});
// Some time later
setTimeout(function(){
series.data = [2, 4, 6, 8];
series.id = "new series id";
}, 2000);
reactivelib.html.attach(document.getElementById("chart"), chart);
};
</script>
</body>
</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:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@reactivelib/chart@latest/dist/reactivelib.min.js"></script>
</head>
<body>
<div id="chart" style="padding: 40px; width: 400px; height: 200px"></div>
<div id="chart2" style="padding: 40px; width: 400px; height: 200px"></div>
<script type="text/javascript">
window.onload = function() {
var wind = reactivelib.reactive({start: 0, end: 4});
var chart1 = reactivelib.chart({
type: "x",
xAxis: {
type: "discrete",
categories: ["A", "B", "C", "D"],
window: wind
},
series: [{
id: "series id",
data: [3, 6, 3, 2],
shape: "column"
}]
});
reactivelib.html.attach(document.getElementById("chart"), chart1);
var chart2 = reactivelib.chart({
type: "x",
xAxis: {
type: "discrete",
categories: ["E", "F", "G", "H"],
window: wind
},
series: [{
id: "series id",
data: [6, 2, 4, 8],
shape: "column"
}]
});
reactivelib.html.attach(document.getElementById("chart2"), chart2);
}
</script>
</body>
</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