+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ new Chart()
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 226 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - See: +
-
+
-
+
- bb.generate for the initialization. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main chart class.
+-
+
- Note: Instantiated via
bb.generate().
+
Example
+ +var chart = bb.generate({
+ data: {
+ columns: [
+ ["x", "2015-11-02", "2015-12-01", "2016-01-01", "2016-02-01", "2016-03-01"],
+ ["count1", 11, 8, 7, 6, 5 ],
+ ["count2", 9, 3, 6, 2, 8 ]
+ ]}
+}Methods
+ + + + + + +axis․labels(labels)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12649 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set axis labels.
+Example
+ +// Update axis' label
+chart.axis.labels({
+ x: "New X Axis Label",
+ y: "New Y Axis Label"
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
labels |
+
+
+ + + +Object + + + + | + + + + + +specified axis' label to be updated. |
+
axis․max(max)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12692 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set axis max value.
+Example
+ +// Update axis' label
+chart.axis.max({
+ x: 100,
+ y: 1000,
+ y2: 10000
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
max |
+
+
+ + + +Object + + + + | + + + + + +If max is given, specified axis' max value will be updated. |
+
axis․min(min)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12670 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set axis min value.
+Example
+ +// Update axis' min
+chart.axis.min({
+ x: -10,
+ y: 1000,
+ y2: 100
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
min |
+
+
+ + + +Object + + + + | + + + + + +If min is given, specified axis' min value will be updated. |
+
axis․range(range)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12714 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set axis min and max value.
+Example
+ +// Update axis' label
+chart.axis.range({
+ min: {
+ x: -10,
+ y: -1000,
+ y2: -10000
+ },
+ max: {
+ x: 100,
+ y: 1000,
+ y2: 10000
+ },
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
range |
+
+
+ + + +Object + + + + | + + + + + +If range is given, specified axis' min and max value will be updated. If no argument is given, the current min and max values for each axis will be returned. |
+
categories(categories)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12483 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set category names on category axis.
+Example
+ +chart.categories([
+ "Category 1", "Category 2", ...
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
categories |
+
+
+ + + +Array + + + + | + + + + + +This must be an array that includes category names in string. If category names are included in the date by data.x option, this is not required. |
+
category(i, category)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12464 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set specified category name on category axis.
+Example
+ +chart.category(2, "Category 3");Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
i |
+
+
+ + + +Number + + + + | + + + + + +index of category to be changed |
+
category |
+
+
+ + + +String + + + + | + + + + + +category value to be changed |
+
color(id)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12519 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get the color
+Example
+ +chart.color("data1");Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
id |
+
+
+ + + +String + + + + | + + + + + +id to get the color |
+
config(name, valueopt, redrawopt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12928 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get or set single config option value.
+Example
+ +// Getter
+chart.config("gauge.max");
+
+// Setter
+chart.config("gauge.max", 100);
+
+// Setter & redraw with the new option
+chart.config("gauge.max", 100, true);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
name |
+
+
+ + + +String + + + + | + + ++ + + + + + | + + + + +The option key name. |
+
value |
+
+
+ + + +* + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ The value accepted for indicated option. |
+
redraw |
+
+
+ + + +Boolean + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ Set to redraw with the new option changes. +
|
+
data(targetIds)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12309 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get data loaded in the chart.
+Example
+ +// Get only data1 data
+chart.data("data1");
+
+// Get data1 and data2 data
+chart.data(["data1", "data2"]);
+
+// Get all data
+chart.data();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
targetIds |
+
+
+ + + +String +| + +Array + + + + | + + + + + +If this argument is given, this API returns the specified target data. If this argument is not given, all of data will be returned. |
+
data․axes(axes)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12425 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set axes of the data loaded in the chart.
+Example
+ +// Get current axes
+chart.data.axes();
+
+// Update axes
+chart.data.axes({
+ data1: "y",
+ data2: "y2"
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
axes |
+
+
+ + + +Object + + + + | + + + + + +If this argument is given, the axes of data will be updated. If not given, the current axes will be returned. The format of this argument is the same as |
+
data․colors(colors)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12405 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set colors of the data loaded in the chart.
+Example
+ +// Get current colors
+chart.data.colors();
+
+// Update colors
+chart.data.colors({
+ data1: "#FFFFFF",
+ data2: "#000000"
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
colors |
+
+
+ + + +Object + + + + | + + + + + +If this argument is given, the colors of data will be updated. If not given, the current colors will be returned. The format of this argument is the same as |
+
data․names(names)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12384 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set names of the data loaded in the chart.
+Example
+ +// Get current names
+chart.data.names();
+
+// Update names
+chart.data.names({
+ data1: "New Name 1",
+ data2: "New Name 2"
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
names |
+
+
+ + + +Object + + + + | + + + + + +If this argument is given, the names of data will be updated. If not given, the current names will be returned. The format of this argument is the same as |
+
data․shown(targetIds)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12338 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get data shown in the chart.
+Example
+ +// Get shown data by filtering to include only data1 data
+chart.data.shown("data1");
+
+// Get shown data by filtering to include data1 and data2 data
+chart.data.shown(["data1", "data2"]);
+
+// Get all shown data
+chart.data.shown();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
targetIds |
+
+
+ + + +String +| + +Array + + + + | + + + + + +If this argument is given, this API filters the data with specified target ids. If this argument is not given, all shown data will be returned. |
+
data․values(targetIds)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12358 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get values of the data loaded in the chart.
+Example
+ +// Get data1 values
+chart.data.values("data1");Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
targetIds |
+
+
+ + + +String +| + +Array + + + + | + + + + + +This API returns the values of specified target. If this argument is not given, null will be retruned |
+
defocus(Target)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11095 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This API fades out specified targets and reverts the others.
+You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be faded out.
Example
+ +// data1 will be faded out and the others will be reverted.
+chart.defocus("data1");
+
+// data1 and data2 will be faded out and the others will be reverted.
+chart.defocus(["data1", "data2"]);
+
+// all targets will be faded out.
+chart.defocus();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
Target |
+
+
+ + + +String +| + +Array + + + + | + + + + + +ids to be faded out. |
+
destroy()
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12908 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Reset the chart object and remove element and events completely.
+Example
+ +chart.destroy();export(mimeTypeopt, callbackopt) → {String}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 13160 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Export chart as an image.
+-
+
- NOTE:
-
+
- IE11 and below not work properly due to the lack of the feature(foreignObject) support +
- The basic CSS file(ex. billboard.css) should be at same domain as API call context to get correct styled export image. +
+
Example
+ +chart.export();
+ // --> "data:image/svg+xml;base64,PHN..."
+
+ // Initialize the download automatically
+ chart.export("image/png", dataUrl => {
+ const link = document.createElement("a");
+
+ link.download = `${Date.now()}.png`;
+ link.href = dataUrl;
+ link.innerHTML = "Download chart as image";
+
+ document.body.appendChild(link);
+ });Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + +Default | + + +Description | +
|---|---|---|---|---|
mimeType |
+
+
+ + + +String + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+
+ image/png
+
+ |
+
+
+ The desired output image format. (ex. 'image/png' for png, 'image/jpeg' for jpeg format) |
+
callback |
+
+
+ + + +function + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+ + + | + + +The callback to be invoked when export is ready. |
+
Returns:
+ + +
+
+
+
+
+dataURI
+-
+
- + Type + +
- + +String + + + +
flow(args)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11579 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Flow data to the chart.
+By this API, you can append new data points to the chart.
Example
+ +// 2 data points will be apprended to the tail and popped from the head.
+// After that, 4 data points will be appended and no data points will be poppoed.
+chart.flow({
+ columns: [
+ ["x", "2018-01-11", "2018-01-21"],
+ ["data1", 500, 200],
+ ["data2", 100, 300],
+ ["data3", 200, 120]
+ ],
+ to: "2013-01-11",
+ done: function () {
+ chart.flow({
+ columns: [
+ ["x", "2018-02-11", "2018-02-12", "2018-02-13", "2018-02-14"],
+ ["data1", 200, 300, 100, 250],
+ ["data2", 100, 90, 40, 120],
+ ["data3", 100, 100, 300, 500]
+ ],
+ length: 2,
+ duration: 1500
+ });
+ }
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
+
+
+ + + +Object + + + + | + + + + + +The object can consist with following members:
|
+
flush(softopt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12879 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Force to redraw.
+Example
+ +chart.flush();
+
+// for soft redraw
+chart.flush(true);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
soft |
+
+
+ + + +Boolean + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ For soft redraw. |
+
focus(targetIdsValue)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11068 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This API highlights specified targets and fade out the others.
+You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be highlighted.
Example
+ +// data1 will be highlighted and the others will be faded out
+ chart.focus("data1");
+
+// data1 and data2 will be highlighted and the others will be faded out
+chart.focus(["data1", "data2"]);
+
+// all targets will be highlighted
+chart.focus();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
targetIdsValue |
+
+
+ + + +String +| + +Array + + + + | + + + + + +Target ids to be highlighted. |
+
groups(groups)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12018 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Update groups for the targets.
+Example
+ +// data1 and data2 will be a new group.
+ chart.groups([
+ ["data1", "data2"]
+ ]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
groups |
+
+
+ + + +Array + + + + | + + + + + +This argument needs to be an Array that includes one or more Array that includes target ids to be grouped. |
+
hide(targetIdsValueopt, optionsopt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11206 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hide data series from chart
+Example
+ +// hide 'data1'
+chart.hide("data1");
+
+// hide 'data1' and 'data3'
+chart.hide(["data1", "data3"]);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + +Default | + + +Description | +||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
targetIdsValue |
+
+
+ + + +String +| + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+
+ all
+
+ |
+
+
+ The target id value. |
+ ||||||||
options |
+
+
+ + + +Object + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+ + + | + + +The object can consist with following members:
|
+
legend․hide(targetIds)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12811 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hide legend for each target.
+Example
+ +// Hide legend for data1.
+chart.legend.hide("data1");
+
+// Hide legend for data1 and data2.
+chart.legend.hide(["data1", "data2"]);
+
+// Hide all legend.
+chart.legend.hide();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
targetIds |
+
+
+ + + +String +| + +Array + + + + | + + + + + +
|
+
legend․show(targetIds)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12786 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show legend for each target.
+Example
+ +// Show legend for data1.
+chart.legend.show("data1");
+
+// Show legend for data1 and data2.
+chart.legend.show(["data1", "data2"]);
+
+// Show all legend.
+chart.legend.show();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
targetIds |
+
+
+ + + +String +| + +Array + + + + | + + + + + +
|
+
load(args)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11472 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Load data to the chart.
+You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be toggles.
-
+
- Note:
+unload should be used if some data needs to be unloaded simultaneously. If you call unload API soon after/before load instead of unload param, chart will not be rendered properly because of cancel of animation.
+done will be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering
+
Example
+ +// Load data1 and unload data2 and data3
+ chart.load({
+ columns: [
+ ["data1", 100, 200, 150, ...],
+ ...
+ ],
+ unload: ["data2", "data3"],
+ url: "...",
+ done: function() { ... }
+ });Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
+
+
+ + + +Object + + + + | + + + + + +The object can consist with following members:
|
+
regions(regions) → {Array}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12207 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Update regions.
+Example
+ +// Show 2 regions
+chart.regions([
+ {axis: "x", start: 5, class: "regionX"},
+ {axis: "y", end: 50, class: "regionY"}
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
regions |
+
+
+ + + +Array + + + + | + + + + + +Regions will be replaced with this argument. The format of this argument is the same as regions. |
+
Returns:
+ + +
+
+
+
+
+regions
+-
+
- + Type + +
- + +Array + + + +
regions․add(regions) → {Array}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12230 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add new region.
+This API adds new region instead of replacing like regions.
Example
+ +// Add a new region
+chart.regions.add(
+ {axis: "x", start: 5, class: "regionX"}
+);
+
+// Add new regions
+chart.regions.add([
+ {axis: "x", start: 5, class: "regionX"},
+ {axis: "y", end: 50, class: "regionY"}
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
regions |
+
+
+ + + +Array +| + +Object + + + + | + + + + + +New region will be added. The format of this argument is the same as regions and it's possible to give an Object if only one region will be added. |
+
Returns:
+ + +
+
+
+
+
+regions
+-
+
- + Type + +
- + +Array + + + +
regions․remove(regions) → {Array}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12256 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remove regions.
+This API removes regions.
Example
+ +// regions that have 'region-A' or 'region-B' will be removed.
+chart.regions.remove({
+ classes: [
+ "region-A", "region-B"
+ ]
+});
+
+// all of regions will be removed.
+chart.regions.remove();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
regions |
+
+
+ + + +Object + + + + | + + + + + +This argument should include classes. If classes is given, the regions that have one of the specified classes will be removed. If args is not given, all of regions will be removed. |
+
Returns:
+ + +
+
+
+
+
+regions
+-
+
- + Type + +
- + +Array + + + +
resize(size)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12859 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Resize the chart.
+Example
+ +// Resize to 640x480
+chart.resize({
+ width: 640,
+ height: 480
+});Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
size |
+
+
+ + + +Object + + + + | + + + + + +This argument should include width and height in pixels. |
+
revert(Target)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11122 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ This API reverts specified targets.
+You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be reverted.
Example
+ +// data1 will be reverted.
+chart.revert("data1");
+
+// data1 and data2 will be reverted.
+chart.revert(["data1", "data2"]);
+
+// all targets will be reverted.
+chart.revert();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
Target |
+
+
+ + + +String +| + +Array + + + + | + + + + + +ids to be reverted |
+
select(idsopt, indicesopt, resetOtheropt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11866 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set data points to be selected. ([data.selection.enabled](Options.html#.data%25E2%2580%25A4selection%25E2%2580%25A4enabled) option should be set true to use this method)
Example
+ +// select all data points
+ chart.select();
+
+ // select all from 'data2'
+ chart.select("data2");
+
+ // select all from 'data1' and 'data2'
+ chart.select(["data1", "data2"]);
+
+ // select from 'data1', indices 2 and unselect others selected
+ chart.select("data1", [2], true);
+
+ // select from 'data1', indices 0, 3 and 5
+ chart.select("data1", [0, 3, 5]);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
ids |
+
+
+ + + +String +| + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ id value to get selected. |
+
indices |
+
+
+ + + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ The index array of data points. If falsy value given, will select all data points. |
+
resetOther |
+
+
+ + + +Boolean + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ Unselect already selected. |
+
selected(targetIdopt) → {Array}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11837 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get selected data points.
+By this API, you can get selected data points information. To use this API, data.selection.enabled needs to be set true.
Example
+ +// all selected data points will be returned.
+ chart.selected();
+ // --> ex.) [{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ... ]
+
+ // all selected data points of data1 will be returned.
+ chart.selected("data1");Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
targetId |
+
+
+ + + +String + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ You can filter the result by giving target id that you want to get. If not given, all of data points will be returned. |
+
Returns:
+ + +
+
+
+
+
+dataPoint Array of the data points.
ex.) [{x: 1, value: 200, id: "data1", index: 1, name: "data1"}, ...]
-
+
- + Type + +
- + +Array + + + +
show(targetIdsValueopt, optionsopt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11169 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show data series on chart
+Example
+ +// show 'data1'
+chart.show("data1");
+
+// show 'data1' and 'data3'
+chart.show(["data1", "data3"]);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + +Default | + + +Description | +||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
targetIdsValue |
+
+
+ + + +String +| + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+
+ all
+
+ |
+
+
+ The target id value. |
+ ||||||||
options |
+
+
+ + + +Object + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+ + + | + + +The object can consist with following members:
|
+
toggle(targetIdsValueopt, optionsopt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11243 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle data series on chart. When target data is hidden, it will show. If is shown, it will hide in vice versa.
+Example
+ +// toggle 'data1'
+chart.toggle("data1");
+
+// toggle 'data1' and 'data3'
+chart.toggle(["data1", "data3"]);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + +Default | + + +Description | +||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
targetIdsValue |
+
+
+ + + +String +| + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+
+ all
+
+ |
+
+
+ The target id value. |
+ ||||||||
options |
+
+
+ + + +Object + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+ + + | + + +The object can consist with following members:
|
+
tooltip․hide()
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 13054 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Hide tooltip
+tooltip․show(args)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 13010 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Show tooltip
+Example
+ +// show the 2nd x Axis coordinate tooltip
+ chart.tooltip.show({
+ index: 1
+ });
+
+ // show tooltip for the 3rd x Axis in x:50 and y:100 coordinate relative the x Axis element.
+ chart.tooltip.show({
+ data: {x: 2},
+ mouse: [50, 100]
+ });
+
+ // show tooltip for timeseries x axis
+ chart.tooltip.show({
+ x: new Date("2018-01-02 00:00")
+ });Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +|||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
args |
+
+
+ + + +Object + + + + | + + + + + +The object can consist with following members:
|
+
transform(type, targetIds)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11959 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Change the type of the chart.
+Example
+ +// all targets will be bar chart.
+ chart.transform("bar");
+
+ // only data1 will be bar chart.
+ chart.transform("bar", "data1");
+
+ // only data1 and data2 will be bar chart.
+ chart.transform("bar", ["data1", "data2"]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
type |
+
+
+ + + +String + + + + | + + + + + +Specify the type to be transformed. The types listed in data.type can be used. |
+
targetIds |
+
+
+ + + +String +| + +Array + + + + | + + + + + +Specify targets to be transformed. If not given, all targets will be the candidate. |
+
unload(args)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11527 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unload data to the chart.
+You can specify multiple targets by giving an array that includes id as String. If no argument is given, all of targets will be toggles.
-
+
- Note:
+If you call load API soon after/before unload, unload param of load should be used. Otherwise chart will not be rendered properly because of cancel of animation.
+donewill be called after data loaded, but it's not after rendering. It's because rendering will finish after some transition and there is some time lag between loading and rendering.
+
Example
+ +// Unload data2 and data3
+ chart.unload({
+ ids: ["data2", "data3"]
+ });Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
args |
+
+
+ + + +Object + + + + | + + + + + +
|
+
unselect(idsopt, indicesopt)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11908 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set data points to be un-selected.
+Example
+ +// unselect all data points
+ chart.unselect();
+
+ // unselect all from 'data1'
+ chart.unselect("data1");
+
+ // unselect from 'data1', indices 2
+ chart.unselect("data1", [2]);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
ids |
+
+
+ + + +String +| + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ id value to be unselected. |
+
indices |
+
+
+ + + +Array + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ The index array of data points. If falsy value given, will select all data points. |
+
unzoom()
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11436 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Unzoom zoomed area
+Example
+ +chart.unzoom();x(x) → {Object}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12551 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set x values for the chart.
+Example
+ +// Get current x values
+ chart.x();
+
+ // Update x values for all targets
+ chart.x([100, 200, 300, 400, ...]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
x |
+
+
+ + + +Array + + + + | + + + + + +If x is given, x values of every target will be updated. If no argument is given, current x values will be returned as an Object whose keys are the target ids. |
+
Returns:
+ + +
+
+
+
+
+xs
+-
+
- + Type + +
- + +Object + + + +
xgrids(grids)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12050 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Update x grid lines.
+Example
+ +// Show 2 x grid lines
+chart.xgrids([
+ {value: 1, text: "Label 1"},
+ {value: 4, text: "Label 4"}
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
grids |
+
+
+ + + +Array + + + + | + + + + + +X grid lines will be replaced with this argument. The format of this argument is the same as grid.x.lines. |
+
xgrids․add(grids)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12074 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add x grid lines.
+This API adds new x grid lines instead of replacing like xgrids.
Example
+ +// Add a new x grid line
+chart.xgrids.add(
+ {value: 4, text: "Label 4"}
+);
+
+// Add new x grid lines
+chart.xgrids.add([
+ {value: 2, text: "Label 2"},
+ {value: 4, text: "Label 4"}
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
grids |
+
+
+ + + +Array +| + +Object + + + + | + + + + + +New x grid lines will be added. The format of this argument is the same as grid.x.lines and it's possible to give an Object if only one line will be added. |
+
xgrids․remove(params)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12097 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remove x grid lines.
+This API removes x grid lines.
Example
+ +// x grid line on x = 2 will be removed
+chart.xgrids.remove({value: 2});
+
+// x grid lines that have 'grid-A' will be removed
+chart.xgrids.remove({
+ class: "grid-A"
+});
+
+// all of x grid lines will be removed
+chart.xgrids.remove();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
params |
+
+
+ + + +Object + + + + | + + + + + +This argument should include value or class. If value is given, the x grid lines that have specified x value will be removed. If class is given, the x grid lines that have specified class will be removed. If args is not given, all of x grid lines will be removed. |
+
xs(xs) → {Object}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12575 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Get and set x values for the chart.
+Example
+ +// Get current x values
+ chart.xs();
+
+ // Update x values for all targets
+ chart.xs({
+ data1: [10, 20, 30, 40, ...],
+ data2: [100, 200, 300, 400, ...]
+ });Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
xs |
+
+
+ + + +Array + + + + | + + + + + +If xs is given, specified target's x values will be updated. If no argument is given, current x values will be returned as an Object whose keys are the target ids. |
+
Returns:
+ + +
+
+
+
+
+xs
+-
+
- + Type + +
- + +Object + + + +
ygrids(grids)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12122 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Update y grid lines.
+Example
+ +// Show 2 y grid lines
+chart.ygrids([
+ {value: 100, text: "Label 1"},
+ {value: 400, text: "Label 4"}
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
grids |
+
+
+ + + +Array + + + + | + + + + + +Y grid lines will be replaced with this argument. The format of this argument is the same as grid.y.lines. |
+
ygrids․add(grids)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12142 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Add y grid lines.
+This API adds new y grid lines instead of replacing like ygrids.
Example
+ +// Add a new x grid line
+chart.ygrids.add(
+ {value: 400, text: "Label 4"}
+);
+
+// Add new x grid lines
+chart.ygrids.add([
+ {value: 200, text: "Label 2"},
+ {value: 400, text: "Label 4"}
+]);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
grids |
+
+
+ + + +Array +| + +Object + + + + | + + + + + +New y grid lines will be added. The format of this argument is the same as grid.y.lines and it's possible to give an Object if only one line will be added. |
+
ygrids․remove(params)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 12165 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Remove y grid lines.
+This API removes x grid lines.
Example
+ +// y grid line on y = 200 will be removed
+chart.ygrids.remove({value: 200});
+
+// y grid lines that have 'grid-A' will be removed
+chart.ygrids.remove({
+ class: "grid-A"
+});
+
+// all of y grid lines will be removed
+chart.ygrids.remove();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
params |
+
+
+ + + +Object + + + + | + + + + + +This argument should include value or class. If value is given, the y grid lines that have specified y value will be removed. If class is given, the y grid lines that have specified class will be removed. If args is not given, all of y grid lines will be removed. |
+
zoom(domainValue) → {Array}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11292 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Zoom by giving x domain.
+Example
+ +// Zoom to specified domain
+ chart.zoom([10, 20]);
+
+ // Get the current zoomed domain
+ chart.zoom();Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
domainValue |
+
+
+ + + +Array + + + + | + + + + + +If domain is given, the chart will be zoomed to the given domain. If no argument is given, the current zoomed domain will be returned. |
+
Returns:
+ + +
+
+
+
+
+domain value in array
+-
+
- + Type + +
- + +Array + + + +
zoom․enable(enabled)
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11344 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Enable and disable zooming.
+Example
+ +// Enable zooming using the mouse wheel
+ chart.zoom.enable(true);
+ // Or
+ chart.zoom.enable("wheel");
+
+ // Enable zooming by dragging
+ chart.zoom.enable("drag");
+
+ // Disable zooming
+ chart.zoom.enable(false);Parameters:
+ + +| Name | + + +Type | + + + + + +Description | +
|---|---|---|
enabled |
+
+
+ + + +String +| + +Boolean + + + + | + + + + + +Possible string values are "wheel" or "drag". If enabled is true, "wheel" will be used. If false is given, zooming will be disabled. |
+
zoom․max(maxopt) → {Number}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11370 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set or get x Axis maximum zoom range value
+Example
+ +// Set maximum range value
+ chart.zoom.max(20);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
max |
+
+
+ + + +Number + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ maximum value to set for zoom |
+
Returns:
+ + +
+
+
+
+
+zoom max value
+-
+
- + Type + +
- + +Number + + + +
zoom․min(minopt) → {Number}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11389 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set or get x Axis minimum zoom range value
+Example
+ +// Set minimum range value
+ chart.zoom.min(-1);Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
min |
+
+
+ + + +Number + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ minimum value tp set for zoom |
+
Returns:
+ + +
+
+
+
+
+zoom min value
+-
+
- + Type + +
- + +Number + + + +
zoom․range(rangeopt) → {Object}
+ + + + + + +-
+
+
+
- Source: +
- + billboard.js, line 11408 +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Set zoom range
+Example
+ +chart.zoom.range({
+ min: 10,
+ max: 100
+ });Parameters:
+ + +| Name | + + +Type | + + +Attributes | + + + + +Description | +
|---|---|---|---|
range |
+
+
+ + + +Object + + + + | + + +
+
+ <optional> + + + + + + |
+
+
+
+
+ + |
Returns:
+ + +
+
+
+
+
+zoom range value +{ + min: 0, + max: 100 +}
+-
+
- + Type + +
- + +Object + + + +