chrt
v0.0.170
Published
Chrt is a library for creating charts in the most spontaneous way possible.
Downloads
103
Readme
chrt
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.
Observable Examples and Documentation:
Resources
Modules
chrt is composed of several modules, each focusing on specific functionality:
Core and Base Functionality
- chrt-core - Core functionality and chart management
- chrt-object - Base object class for all components
Chart Components
- chrt-line - Line charts
- chrt-bars - Bar and column charts
- chrt-points - Scatter plots and point-based visualizations
- chrt-dotplot - Dot plot visualizations
Axes and Grid
Enhancement Components
- chrt-label - Text labels and annotations
- chrt-markers - Point markers and indicators
- chrt-range - Range and threshold indicators
- chrt-annotation - Chart annotations
Utilities
- 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.
How to install
Use in vanilla HTML
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:
ESM+CDN
<!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>UMD+CDN
<!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>UMD+Local
<!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>Install from npm
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";Examples
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:
How to build
Install the dependencies
npm installBuild the package
npm buildDeveloping
If you want to develop and see the changes reloaded live into another app you can use the watch script
npm run watchUse it as a module
Method 1 - tgz package
Use the tgz provided in the repository
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.tgzCreate a tgz npm package
You can create a package for testing with
npm packThis command will create a file called chrt-VERSION.tgz in the root folder of chrt.
Method 2 - symlinked package
Create a global node module
npm linkThis creates chrt module inside your global node_modules so that you can import it with import {chrtLine} from 'chrt';
Use the module in a different app
npm link chrtThis will create a sym link to the module created in your global.
Use it in your code
After having installed or sym-linked the node you can use it as usual
import * as chrt from 'chrt';