It might be the case that you want to create support for another chart library or you want to register a chart you have in your project. This can be done using decorators.

In aurelia charts world a chart is a class which is extended by the aurelia-charts Chart class. This class takes care of getting access to the element.

Let's have a look at the base class of c3 named C3Chart. Notice that it has some methods defined. These are lifecycle methods.

  import {logger, chart, Chart} from 'aurelia-charts';
  import c3 from 'c3';

  /* @todo: consider naming the Chart class of aurelia-charts an AureliaChart */

  /* graph adapter for a graph lib. In this case for C3 */
  /* the generic version of a graph does not have a type defined*/
  export class C3Chart extends Chart {

    settings = {
      data: {
        columns: []

    create() {
      this.settings.bindto = this.element;
      this.instance        = c3.generate(this.settings);
      if (this.data && this.dimensions) {

    calculateSettings() {
      logger.error(`'calculateSettings' method is not defined for ${this.constructor.name}`);

    update() {

    destroy() {

    typeChanged(type) {


The create, update and destroy methods are required lifecycle methods. When not defined it will throw an show you an error message in the console.

  • create is responsible for instantiating the chart. In the case of c3 it

           also calls the update lifecycle method
  • update should be called when render options or data is updated

  • destroy should remove the chart dom elements and the event listeners

You can always checkout aurelia-graphs-c3 repositories for more information on how to implement support for your favorite chart library. The code is relatively simple.

results matching ""

    No results matching ""