@swim/chart
@swim/chart provides multi-plot, fully animatable, canvas rendered chart widgets, supporting line, area, and bubble graphs, with customizable axes, and kinematic multitouch scale gestures for panning and zooming with momentum. Check out the bubble chart, area chart, line chart, and chart axes demos to see multi-touch charts in action. @swim/chart is part of the @swim/vis framework.
Installation
npm
For an npm-managed project, npm install @swim/chart to make it a dependency.
TypeScript sources will be installed into node_modules/@swim/chart/main.
Transpiled JavaScript and TypeScript definition files install into
node_modules/@swim/chart/lib/main. And a pre-built UMD script can
be found in node_modules/@swim/chart/dist/main/swim-chart.js.
Browser
Browser applications can load swim-vis.js—which bundles the @swim/chart
library—along with its swim-core.js, swim-mesh.js, and swim-ui.js
dependencies, directly from the SwimOS CDN.
<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-core.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-mesh.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-vis.js"></script>
<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-core.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-mesh.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-ui.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-vis.min.js"></script>Alternatively, the swim-toolkit.js script may be loaded, along with its
swim-system.js dependency, from the SwimOS CDN. The swim-toolkit.js
script bundles @swim/chart together with all other
@swim/toolkit
frameworks.
<!-- Development -->
<script src="https://cdn.swimos.org/js/latest/swim-system.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.js"></script>
<!-- Production -->
<script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
<script src="https://cdn.swimos.org/js/latest/swim-toolkit.min.js"></script>Usage
ES6/TypeScript
@swim/chart can be imported as an ES6 module from TypeScript and other ES6-compatible environments.
import * as chart from "@swim/chart";CommonJS/Node.js
@swim/chart can also be used as a CommonJS module in Node.js applications.
var chart = require("@swim/chart");Browser
When loaded by a web browser, the swim-chart.js script adds all
@swim/chart library exports to the global swim namespace.
The swim-chart.js script requires that swim-core.js, swim-mesh.js,
and swim-ui.js have already been loaded.
The swim-toolkit.js script also adds all @swim/chart library exports to
the global swim namespace, making it a drop-in replacement for swim-ui.js
and swim-chart.js when additional @swim/toolkit frameworks are needed.