Chrt is a free, open source JavaScript library with the goal of creating a more spontaneous experience to make charts. Coding with chrt should be as simple as snapping together building blocks, where each block is an element of the chart.
chrt is composed of several modules, each focusing on specific functionality:
- chrt-core - Core functionality and chart management
- chrt-object - Base object class for all components
- chrt-line - Line charts
- chrt-bars - Bar and column charts
- chrt-points - Scatter plots and point-based visualizations
- chrt-dotplot - Dot plot visualizations
- chrt-label - Text labels and annotations
- chrt-markers - Point markers and indicators
- chrt-range - Range and threshold indicators
- chrt-annotation - Chart annotations
- chrt-set - Grouping and stacking functionality
- chrt-interpolations - Line interpolation methods
Each module is independently maintained and documented. Visit the individual repositories for detailed documentation and examples.
In vanilla HTML, you can load chrt from a CDN such as jsDelivr or you can download it locally. The following examples show how use chrt in your HTML page:
<!doctype html>
<div id="container"></div>
<script type="module">
import * as chrt from "https://cdn.jsdelivr.net/npm/chrt/+esm";
chrt
.Chrt()
.add(chrt.line().data([3, 2, 5, 1, 2, 4, 5]))
.node(document.getElementById("container"));
</script><!doctype html>
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/chrt@latest"></script>
<script type="module">
chrt
.Chrt()
.add(chrt.line().data([3, 2, 5, 1, 2, 4, 5]))
.node(document.getElementById("container"));
</script><!doctype html>
<div id="container"></div>
<script src="chrt.js"></script>
<script type="module">
chrt
.Chrt()
.add(chrt.line().data([3, 2, 5, 1, 2, 4, 5]))
.node(document.getElementById("container"));
</script>If you’re developing a web application using Node, you can install chrt via yarn, npm, or your preferred package manager.
npm install chrtAfter the installation, you can use it as:
import * as chrt from "chrt";import * as chrt from "chrt";
// Create a basic line chart
const chart = chrt
.Chrt()
.node(document.querySelector("#chart"))
.size(600, 400)
.data([1, 2, 3, 4, 5])
.add(chrt.xAxis())
.add(chrt.yAxis())
.add(chrt.line());For detailed documentation and examples, visit:
npm install
npm build
If you want to develop and see the changes reloaded live into another app you can use the watch script
npm run watch
You can use the chrt-VERSION.tgz package. The following commands will expand the chrt module in the node_modules folder of your project. Ready to be used with the usual import command:
cp chrt-VERSION.tgz SOMEWHERE
cd myproject
npm install SOMEWHERE/chrt-VERSION.tgz
You can create a package for testing with
npm pack
This command will create a file called chrt-VERSION.tgz in the root folder of chrt.
npm link
This creates chrt module inside your global node_modules so that you can import it with import {chrtLine} from 'chrt';
npm link chrt
This will create a sym link to the module created in your global.
After having installed or sym-linked the node you can use it as usual
import * as chrt from 'chrt';