Type aliases
AnyAreaGraphView
Type parameters
AnyAxisView
Type parameters
AnyBubblePlotView
Type parameters
AnyChartView
Type parameters
AnyDatumView
Type parameters
AnyGraphView
Type parameters
AnyLineGraphView
Type parameters
AnyPlotView
Type parameters
AnyTickView
Type parameters
AxisOrientation
AxisOrientation: "top" | "right" | "bottom" | "left"
ChartDomainBounds
ChartDomainBounds<D>: [D | boolean, D | boolean]
Type parameters
ChartDomainPadding
ChartDomainPadding<D>: [D | null, D | null]
Type parameters
DatumCategory
DatumCategory: "flat" | "increasing" | "decreasing" | "maxima" | "minima"
DatumLabelPlacement
DatumLabelPlacement: "auto" | "above" | "below"
GraphType
GraphType: "line" | "area"
PlotType
PlotType: "bubble" | "line" | "area"
TickOrientation
TickOrientation: "top" | "right" | "bottom" | "left"
@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/ux framework.
Installation
npm
For an npm-managed project,
npm install @swim/chart
to make it a dependency. TypeScript sources will be installed intonode_modules/@swim/chart/main
. Transpiled JavaScript and TypeScript definition files install intonode_modules/@swim/chart/lib/main
. And a pre-built UMD script can be found innode_modules/@swim/chart/dist/main/swim-chart.js
.Browser
Browser applications can load
swim-ux.js
—which bundles the @swim/chart library—along with itsswim-core.js
andswim-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 @swim/system libraries.<!-- 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>
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-ux.js
script adds all @swim/chart library exports to the globalswim
namespace. Theswim-ux.js
script requires thatswim-core.js
andswim-ui.js
have already been loaded.The
swim-system.js
script also adds all @swim/chart library exports to the globalswim
namespace, making it a drop-in replacement for 'swim-core.js',swim-ui.js
, andswim-ux.js
when additional @swim/system libraries are needed.