Migration Guide to v2

There're 2 main changes to migrate v2.

NOTE: If you haven't read v2 CHANGELOG, checkout the detailed changes before continuing with this document.

1) Update your callbacks options context

• All callback-ish options' context has been updated to bound to the current chart instance by default.
• Those callback options where passing a context param, was removed.

Ref: v2 CHANGELOG > Callbacks context

tooltip: {
    position: function() {
        this;  // <-- current chart instance
    },

    // v1
    onshow: function(ctx, selectedData) {
        ctx;
    },

    // v2
    onshow: function(selectedData) {
        this;
    }
}

2) Update your ESM imports

// v1
import bb from "billboard.js";

bb.generate({
  ...,
  data: {
    type: "line",
    
    // or spcifying type for each data
    types: {
      data1: "bar",
      data1: "area-spline"
    }
  }
});

v2, every chart types modules will named exported and just import only used chart types modules. This will make beneficial tree-shake unused codes making smaller the bundle size.

Ref: v2 CHANGELOG > Example of size reduction by types

// v2 - import used chart types only
import bb, {
  area,
  areaLineRange,
  areaSpline,
  areaSplineRange,
  areaStep,
  bar,
  bubble,
  donut,
  gauge,
  line,
  pie,
  radar,
  scatter,
  spline,
  step
}

bb.generate({
  ...,
  data: {
    // by calling `line()`, will make internally extend 'line' type related functionality.
    // line() will return "line" string.
    type: line(),
    
    // or spcifying type for each data
    types: {
      data1: bar(),
      data1: areaSpline()
    }
  }
});

3) Specify data.type/data.types for ESM import

If data.type option not specified, v1 treat as "line" type by default.

// v1
import bb from "billboard.js";

bb.generate({
  ...,
  data: {
    /// There's no need to explicitly specify 'data.type' option for 'line'
    // type: "line",
  }
});

As of the changes in chart types modules(named exports), need specify explicitly data.type/data.types option value.

// v2
import bb, {line} from "billboard.js";

bb.generate({
  ...,
  data: {
    /// Specify 'data.type' option value
    type: line(),
  }
});