Chart

Chart

new Chart()

Source:
See:

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 ]
  ]}
}

Members

$ :Object

Source:
Properties:
Name Type Description
$ Object
Properties
Name Type Description
chart d3.selection

Wrapper element

svg d3.selection

Main svg element

defs d3.selection

Definition element

main d3.selection

Main grouping element

tooltip d3.selection

Tooltip element

legend d3.selection

Legend element

title d3.selection

Title element

grid d3.selection

Grid element

arc d3.selection

Arc element

bar Object
Properties
Name Type Description
bars d3.selection

Bar elements

line Object
Properties
Name Type Description
lines d3.selection

Line elements

areas d3.selection

Areas elements

circles d3.selection

Data point circle elements

text Object
Properties
Name Type Description
texts d3.selection

Data label text elements

Access primary node elements

Type:
  • Object
Example
var chart = bb.generate({ ... });

chart.$.chart; // wrapper element
chart.$.line.circles;  // all data point circle elements

Methods

axis․labels(labels)

Source:

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:

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.
If no argument is given, the max values set on generating option for each axis will be returned. If not set any max values on generation, it will return undefined.

axis․min(min)

Source:

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.
If no argument is given, the min values set on generating option for each axis will be returned. If not set any min values on generation, it will return undefined.

axis․range(range)

Source:

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:

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:

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:

Get the color

Example
chart.color("data1");
Parameters:
Name Type Description
id String

id to get the color

config(name, valueopt, redrawopt)

Source:

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.

  • NOTE: Doesn't guarantee work in all circumstances. It can be applied for limited options only.

data(targetIds) → {Array}

Source:

Get data loaded in the chart.

Example
// Get only data1 data
chart.data("data1");
// --> [{id: "data1", id_org: "data1", values: Array(6)}, ...]

// 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.

Returns:

Data objects

Type
Array

data․axes(axes) → {Object}

Source:

Get and set axes of the data loaded in the chart.

Example
// Get current axes
chart.data.axes();
// --> {data1: "y"}

// 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

Returns:

Corresponding axes value for data, if specified axes value.

Type
Object

data․colors(colors) → {Object}

Source:

Get and set colors of the data loaded in the chart.

Example
// Get current colors
chart.data.colors();
// --> {data1: "#00c73c", data2: "#fa7171"}

// 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.colors.

Returns:

Corresponding data color value according its key value.

Type
Object

data․max() → {Array}

Source:

Get the maximum data value bound to the chart

Example
// Get current axes
chart.data.max();
// --> [{x: 3, value: 400, id: "data1", index: 3}, ...]
Returns:

Data objects

Type
Array

data․min() → {Array}

Source:

Get the minimum data value bound to the chart

Example
// Get current axes
chart.data.min();
// --> [{x: 0, value: 30, id: "data1", index: 0}, ...]
Returns:

Data objects

Type
Array

data․names(names) → {Object}

Source:

Get and set names of the data loaded in the chart.

Example
// Get current names
chart.data.names();
// --> {data1: "test1", data2: "test2"}

// 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

Returns:

Corresponding names according its key value, if specified names values.

Type
Object

data․shown(targetIds) → {Array}

Source:

Get data shown in the chart.

Example
// Get shown data by filtering to include only data1 data
chart.data.shown("data1");
// --> [{id: "data1", id_org: "data1", values: Array(6)}, ...]

// 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.

Returns:

Data objects

Type
Array

data․values(targetIds) → {Array}

Source:

Get values of the data loaded in the chart.

Example
// Get data1 values
chart.data.values("data1");
// --> [10, 20, 30, 40]
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

Returns:

Data values

Type
Array

defocus(Target)

Source:

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:

Reset the chart object and remove element and events completely.

Example
chart.destroy();

export(mimeTypeopt, callbackopt) → {String}

Source:

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:

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:

Key Type Description
json Object Data as JSON format (@see data․json)
rows Array Data in array as row format (@see data․rows)
columns Array Data in array as column format (@see data․columns)
to String The lower x edge will move to that point. If not given, the lower x edge will move by the number of given data points
length Number The lower x edge will move by the number of this argument
duration Number The duration of the transition will be specified value. If not given, transition.duration will be used as default
done Function The specified function will be called when flow ends
  • NOTE: If json, rows and columns given, the data will be loaded.
    If data that has the same target id is given, the chart will be appended.
    Otherwise, new target will be added. One of these is required when calling.
    If json specified, keys is required as well as data.json.

flush(softopt, isFromResizeopt)

Source:

Force to redraw.

Example
chart.flush();

// for soft redraw
chart.flush(true);
Parameters:
Name Type Attributes Description
soft Boolean <optional>

For soft redraw.

isFromResize Boolean <optional>

For soft redraw.

focus(targetIdsValue)

Source:

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) → {Array}

Source:

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.

Returns:

Grouped data names array

Type
Array

hide(targetIdsValueopt, optionsopt)

Source:

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:

Key Type default Description
withLegend Boolean false whether or not display legend

legend․hide(targetIds)

Source:

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
  • If targetIds is given, specified target's legend will be hidden.
  • If only one target is the candidate, String can be passed.
  • If no argument is given, all of target's legend will be hidden.

legend․show(targetIds)

Source:

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
  • If targetIds is given, specified target's legend will be shown.
  • If only one target is the candidate, String can be passed.
  • If no argument is given, all of target's legend will be shown.

load(args)

Source:

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:

Key Description
- url
- json
- rows
- columns
The data will be loaded. If data that has the same target id is given, the chart will be updated. Otherwise, new target will be added
data Data objects to be loaded
names Same as data.names()
xs Same as data.xs option
classes The classes specified by data.classes will be updated. classes must be Object that has target id as keys.
categories The categories specified by axis.x.categories or data.x will be updated. categories must be Array.
axes The axes specified by data.axes will be updated. axes must be Object that has target id as keys.
colors The colors specified by data.colors will be updated. colors must be Object that has target id as keys.
- type
- types
The type of targets will be updated. type must be String and types must be Object.
unload Specify the data will be unloaded before loading new data. If true given, all of data will be unloaded. If target ids given as String or Array, specified targets will be unloaded. If absent or false given, unload will not occur.
done The specified function will be called after data loaded.

regions(regions) → {Array}

Source:

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:

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:

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 Removed regions

Type
Array

resize(size)

Source:

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:

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:

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:

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:

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:

Key Type default Description
withLegend Boolean false whether or not display legend

toggle(targetIdsValueopt, optionsopt)

Source:

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:

Key Type default Description
withLegend Boolean false whether or not display legend

tooltip․hide()

Source:

Hide tooltip

tooltip․show(args)

Source:

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")
 });

 // when data.xs is used
 chart.tooltip.show({
   data: {
       x: 3,  // x Axis value
       id: "y",  // axis id. 'y' or 'y2' (default 'y')
       value: 500  // data value
   }
 });

 // when data.xs isn't used, but tooltip.grouped=false is set
 chart.tooltip.show({
   data: {
       index: 3,  // or 'x' key value
       id: "y",  // axis id. 'y' or 'y2' (default 'y')
       value: 500  // data value
   }
 });
Parameters:
Name Type Description
args Object

The object can consist with following members:

Key Type Description
index Number Determine focus by index
x Number | Date Determine focus by x Axis index
mouse Array Determine x and y coordinate value relative the targeted x Axis element.
It should be used along with data, index or x value. The default value is set as [0,0]
data Object When data.xs option is used or tooltip.grouped set to 'false', should be used giving this param.

Key:
- x {Number | Date}: x Axis value
- index {Number}: x Axis index (useless for data.xs)
- id {String}: Axis id. 'y' or 'y2'(default 'y')
- value {Number}: The corresponding value for tooltip.

transform(type, targetIds)

Source:

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:

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.
    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
// Unload data2 and data3
 chart.unload({
   ids: ["data2", "data3"],
   done: function() {
      // called after the unloaded
   }
 });
Parameters:
Name Type Description
args Object
key Type Description
ids String | Array Target id data to be unloaded. If not given, all data will be unloaded.
done Fuction Callback after data is unloaded.

unselect(idsopt, indicesopt)

Source:

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:

Unzoom zoomed area

Example
chart.unzoom();

x(x) → {Object}

Source:

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:

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:

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:

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:

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:

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:

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:

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:

Zoom by giving x domain.

  • NOTE: For wheel type zoom, the minimum zoom range will be set as the given domain.
    To get the initial state, .unzoom() should be called.
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:

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.
When set to false, the current zooming status will be reset.

zoom․max(maxopt) → {Number}

Source:

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:

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:

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