A standardized way of leveraging multiple frameworks.

Aurelia-charts is not about reinventing the wheel. To be able to customize the charts, one is required to read the docs of the chart library being implemented.

Aurelia charts standardizes the way charts are used in your projects. It does so by letting others define sane defaults. It is still up to you to make sure the data received from somewhere is formatted in a way that your preferred chart library can use.

Supported libraries

Aurelia-chart by itself is useless. It is only when installing a plugin that leverages aurelia-chart that you get the desired features. Read more about the supported libraries in the libraries section.

Quick start

For this example we will use aurelia-charts-c3 which basically wraps the c3 library.

1. jspm install aurelia-charts aurelia-charts-c3
2. .plugin('aurelia-charts') and .plugin('aurelia-charts-c3');
3. create a model with definitions and data (how to do this depends on the chart library one is using)
4. <chart-element settings.bind="vmSettings" type="line"></chart-element>

Documentation

You can find usage examples and the documentation at aurelia-charts.

The changelog provides you with information about important changes.

Contributing

Report bugs, request features, send pull requests for fixes and features and read the CONTRIBUTING.md

License

MIT

Installation

Uses

Aurelia-chart needs following plugins installed and configured:

• aurelia-form.

Aureli-Cli

Run npm i aurelia-charts --save from your project root.

Aurelia-view-manager uses extend, array-equal and typer, so add following to the build.bundles.dependencies section of aurelia-project/aurelia.json:

"dependencies": [
  "extend",
  "array-equal",
  "typer",
  {
    "name": "aurelia-charts",
    "path": "../node_modules/aurelia-charts/dist/amd",
    "main": "aurelia-charts",
    "resources": [
      "component/chart-element.html",
      "component/chart-picker.html",
      "component/dimensions-picker.html"
    ]
  },
  // ...
],

Jspm

Run jspm i aurelia-charts from your project root.

Aurelia-view-manager uses extend, array-equal and typer, so add following to the bundles.dist.aurelia.includes section of build/bundles.js:

  "extend",
  "array-equal",
  "typer",
  "aurelia-charts",
  "[aurelia-charts/**/*.js]",
  "aurelia-charts/**/*.html!text",

If the installation results in having forks, try resolving them by running:

jspm inspect --forks
jspm resolve --only registry:package-name@version

Webpack

Run npm i aurelia-charts --save from your project root.

And add aurelia-charts in the coreBundles.aurelia section of your webpack.config.js.

Typescript

Npm-based installations pick up the typings automatically. For Jspm-based installations, run typings i github:spoonx/aurelia-charts or add "aurelia-charts": "github:spoonx/aurelia-charts", to your typings.json and run typings i.