bb

Members

(static) instance

Description:

• An array containing instance created

Source:

• core.ts, line 203

Properties:

Example

// generate charts
 var chart1 = bb.generate(...);
 var chart2 = bb.generate(...);

 bb.instance;  // [ chart1, chart2, ... ]

(static) plugin

Description:

• Namespace for plugins

Source:

• core.ts, line 212

Properties:

Example

// Stanford diagram plugin
 bb.plugin.stanford;

(static) version

Description:

• Version information

Source:

• core.ts, line 21

Properties:

Example

bb.version;  // "1.0.0"

Methods

(static) defaults(options) → {Options}

Description:

• Set or get global default options.

  • NOTE:
    • The options values settings are valid within page context only.
    • If is called multiple times, will override the last value.

Source:

• core.ts, line 186

See:

• Options

Example

// Set same option value as for `.generate()`
bb.defaults({
  data: {
    type: "bar"
  }
});

bb.defaults();  // {data:{type: "bar"}}

// data.type defaults to 'bar'
var chart = bb.generate({ ... });

Parameters:

Returns:

Type

Options

(static) generate(config) → {Chart}

Description:

• Generate chart

  • NOTE: Bear in mind for the possibility of throwing an error, during the generation when:
    • Unused option value is given.
      • ex) For data.type="pie" option, setting 'axis' option can cause unexpected generation error.
    • Insufficient value is given for certain option used.
      • ex) data: { x: "x", columns: [["x"], ["data1", 30, 200, 100]] }

Source:

• core.ts, line 157

See:

• Options for different generation options
• Chart for different methods API

Examples

<!-- chart holder -->
<div id="LineChart"></div>

// Generate chart with options
 var chart = bb.generate({
     "bindto": "#LineChart"
     "data": {
         "columns": [
             ["data1", 30, 200, 100, 400, 150, 250],
             ["data2", 50, 20, 10, 40, 15, 25]
          ],
         "type": "line"
     }
 });

 // call some API
 // ex) get the data of 'data1'
 chart.data("data1");

// Generate chart by importing ESM.
// Import only the shape and API resolvers you use for a smaller bundle.
import bb, {
  bar,
  category,
  exportApi,
  flow,
  grid,
  line,
  regions,
  step
} from "billboard.js";

const chart = bb.generate({
  ...category(),
  ...exportApi(),
  ...flow(),
  ...grid(),
  ...regions(),
  bindto: "#LineChart",
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ],
    type: line(),

    // or specify per-series types
    types: {
      data1: bar(),
      data2: step()
    }
  },
  axis: {
    x: {
      type: "category",
      categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
    }
  },
  grid: {
    x: {show: true}
  },
  regions: [
    {axis: "x", start: "Feb", end: "Apr"}
  ]
});

chart.export();

// Generate a canvas-rendered chart by importing the canvas ESM entry.
import bb, {
  bar,
  canvas,
  category,
  exportApi,
  flow,
  grid,
  regions,
  subchart
} from "billboard.js/canvas";

const chart = bb.generate({
  render: {
    mode: canvas()
  },
  ...category(),
  ...exportApi(),
  ...flow(),
  ...grid(),
  ...regions(),
  bindto: "#LineChart",
  data: {
    columns: [
      ["data1", 30, 200, 100, 400]
    ],
    type: bar()
  },
  axis: {
    x: {
      type: "category",
      categories: ["Jan", "Feb", "Mar", "Apr"]
    }
  },
  grid: {
    x: {show: true, lines: [{value: "Feb", text: "Milestone"}]},
    y: {show: true}
  },
  regions: [
    {axis: "x", start: "Feb", end: "Mar", label: {text: "Campaign"}}
  ],
  subchart: {
    show: subchart()
  }
});

chart.xgrids([{value: "Mar", text: "API grid"}]);
chart.regions([{axis: "x", start: "Jan", end: "Feb"}]);
chart.flow({columns: [["data1", 120]]});
chart.export();

// Arc-family chart types (`pie`, `donut`, `gauge`, `polar`, `radar`)
// stay SVG-only because canvas mode doesn't provide meaningful benefit.

Parameters:

Returns:

Type

Chart