@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.