@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/ux framework.
For an npm-managed project,
npm install @swim/chart to make it a dependency.
TypeScript sources will be installed into
node_modules/@swim/chart/lib/main. And a pre-built UMD script can
be found in
Browser applications can load
swim-ux.js—which bundles the @swim/chart
library—along with its
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-ui.js"></script> <script src="https://cdn.swimos.org/js/latest/swim-ux.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-ui.min.js"></script> <script src="https://cdn.swimos.org/js/latest/swim-ux.min.js"></script>
Alternatively, the standalone
swim-system.js script may be loaded
from the swimOS CDN, which bundles @swim/chart together with all other
<!-- Development --> <script src="https://cdn.swimos.org/js/latest/swim-system.js"></script> <!-- Production --> <script src="https://cdn.swimos.org/js/latest/swim-system.min.js"></script>
@swim/chart can be imported as an ES6 module from TypeScript and other ES6-compatible environments.
import * as chart from "@swim/chart";
@swim/chart can also be used as a CommonJS module in Node.js applications.
var chart = require("@swim/chart");
When loaded by a web browser, the
swim-ux.js script adds all
@swim/chart library exports to the global
swim-ux.js script requires that
have already been loaded.
swim-system.js script also adds all @swim/chart library exports
to the global
swim namespace, making it a drop-in replacement for
swim-ux.js when additional
@swim/system libraries are needed.