Chart

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

(static) $ :object

Description:

• Access instance's primary node elements

Source:

• Chart/Chart.ts, line 33

Properties:

Type:

• object

Examples

const chart = bb.generate({ ... });

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

// Update arc needle position
const chart = bb.generate({
  data: {
    type: "donut"
  },
  arc: {
    needle: {
      show: true,
      ...
    }
  }
});

chart.$.needle.updateHelper(70);  // update needle position to point value 70.

// update needle position to point value 70 and the config value.
// NOTE: updating config value, will update needle pointer initial value too.
chart.$.needle.updateHelper(70, true);

// update needle point position every 1 second
let i = 0;
setInterval(() => {
  chart.$.needle.updateHelper(i += 10);
}, 1000)

(static) plugins :Array

Description:

• Plugin instance array

Source:

• Chart/Chart.ts, line 91

Type:

• Array

Example

var chart = bb.generate({
    ...
    plugins: [
       new bb.plugin.stanford({ ... }),
       new PluginA()
    ]
 });

 chart.plugins; // [Stanford, PluginA] - instance array

Methods

axis․labels(labels) → {object|undefined}

Description:

• Get and set axis labels.

  • NOTE: Only applicable for chart types which has x and y axes.

Source:

• Chart/api/axis.ts, line 60

Example

// Update axis' label
chart.axis.labels({
  x: "New X Axis Label",
  y: "New Y Axis Label",
  y2: "New Y2 Axis Label"
});

chart.axis.labels();
// --> {
//  x: "New X Axis Label",
//  y: "New Y Axis Label",
//  y2: "New Y2 Axis Label"
// }

Parameters:

Returns:

Type

object | undefined

axis․max(max) → {object|undefined}

Description:

• Get and set axis max value.

  • NOTE: Only applicable for chart types which has x and y axes.

Source:

• Chart/api/axis.ts, line 140

Example

// Update axis' label
chart.axis.max({
   x: 100,
   y: 1000,
   y2: 10000
});

// To unset specific axis max, set false to each of them.
chart.axis.max({
  x: false,
  y: false,
  y2: false
});

// shorthand (only affects y and y2 axis)
chart.axis.max(10);
chart.axis.max(false);

Parameters:

Returns:

Type

object | undefined

axis․min(min) → {object|undefined}

Description:

• Get and set axis min value.

  • NOTE: Only applicable for chart types which has x and y axes.

Source:

• Chart/api/axis.ts, line 104

Example

// Update axis' min
chart.axis.min({
  x: -10,
  y: 1000,
  y2: 100
});

// To unset specific axis min, set false to each of them.
chart.axis.min({
  x: false,
  y: false,
  y2: false
});

// shorthand (only affects y and y2 axis)
chart.axis.min(-50);
chart.axis.min(false);

Parameters:

Returns:

Type

object | undefined

axis․range(range) → {object|undefined}

Description:

• Get and set axis min and max value.

  • NOTE: Only applicable for chart types which has x and y axes.

Source:

• Chart/api/axis.ts, line 176

Example

// Update axis' label
chart.axis.range({
  min: {
    x: -10,
    y: -1000,
    y2: -10000
  },
  max: {
    x: 100,
    y: 1000,
    y2: 10000
  },
});

// To unset specific axis max, set false to each of them.
chart.axis.range({
  min: {
    x: false,
    y: false,
    y2: false
  },
  max: {
    x: false,
    y: false,
    y2: false
  },
});

// shorthand (only affects y and y2 axis)
chart.axis.range({ min: -50, max: 1000 });
chart.axis.range({ min: false, max: false });

Parameters:

Returns:

Type

object | undefined

categories(categories) → {Array}

Description:

• Set or get category names on category axis.

Source:

• Chart/api/category.ts, line 28

Example

chart.categories([
     "Category 1", "Category 2", ...
]);

Parameters:

Returns:

Type

Array

category(i, category) → {string}

Description:

• Set specified category name on category axis.

Source:

• Chart/api/category.ts, line 8

Example

chart.category(2, "Category 3");

Parameters:

Returns:

Type

string

color(id) → {string}

Description:

• Get the color

Source:

• Chart/api/color.ts, line 7

Example

chart.color("data1");

Parameters:

Returns:

Type

string

config(name, valueopt, redrawopt) → {*}

Description:

• Get or set config option value.

  • NOTE
  • The option key name must be specified as the last level.
  • when no argument is given, will return all specified generation options object only. (will exclude any other options not specified at the initialization)

Source:

• Chart/api/chart.ts, line 127

Example

// Getter
chart.config("gauge.max");

// Getter specified with top level key name will not work.
// The option key name must be specified as the last level.
// chart.config("gauge"); // will not work

// without any arguments, it returns generation config object
chart.config();  // {data: { ... }, axis: { ... }, ...}

// Setter
chart.config("gauge.max", 100);

// Setter specified with top level key name will not work.
// The option key name must be specified as the last level.
// chart.config("gauge", {min: 10, max: 20}); // will not work

// Setter & redraw with the new option
chart.config("gauge.max", 100, true);

Parameters:

Returns:

Type

*

data(targetIds) → {Array}

Description:

• Get data loaded in the chart.

Source:

• Chart/api/data.ts, line 3

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:

Returns:

Type

Array

data․axes(axes) → {object}

Description:

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

  • NOTE: If all data is related to one of the axes, the domain of axis without related data will be replaced by the domain from the axis with related data

Source:

• Chart/api/data.ts, line 121

Example

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

// Update axes
chart.data.axes({
 data1: "y",
 data2: "y2"
});

Parameters:

Returns:

Type

object

data․colors(colors) → {object}

Description:

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

Source:

• Chart/api/data.ts, line 100

Example

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

// Update colors
chart.data.colors({
 data1: "#FFFFFF",
 data2: "#000000"
});

Parameters:

Returns:

Type

object

data․max() → {Array}

Description:

• Get the maximum data value bound to the chart

Source:

• Chart/api/data.ts, line 157

Example

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

Returns:

Type

Array

data․min() → {Array}

Description:

• Get the minimum data value bound to the chart

Source:

• Chart/api/data.ts, line 143

Example

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

Returns:

Type

Array

data․names(names) → {object}

Description:

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

Source:

• Chart/api/data.ts, line 78

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:

Returns:

Type

object

data․shown(targetIds) → {Array}

Description:

• Get data shown in the chart.

Source:

• Chart/api/data.ts, line 30

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:

Returns:

Type

Array

data․values(targetIds, flatopt) → {Array}

Description:

• Get values of the data loaded in the chart.

Source:

• Chart/api/data.ts, line 51

Example

// Get data1 values
chart.data.values("data1");
// --> [10, 20, 30, 40]

Parameters:

Returns:

Type

Array

defocus(targetIdsValue)

Description:

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

Source:

• Chart/api/focus.ts, line 43

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:

destroy() → {null}

Description:

• Reset the chart object and remove element and events completely.

Source:

• Chart/api/chart.ts, line 85

Example

chart.destroy();

Returns:

Type

null

export(option, callbackopt) → {string}

Description:

• Export chart as an image.

  • NOTE:
    • IE11 and below not work properly due to the lack of the feature(foreignObject) support
    • Every style applied to the chart & the basic CSS file(ex. billboard.css) should be at same domain as API call context to get correct styled export image.

Source:

• Chart/api/export.ts, line 152

Example

chart.export();
 // --> "data:image/svg+xml;base64,PHN..."

 // Initialize the download automatically
 chart.export({mimeType: "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);
 });

 // Resize the exported image
 chart.export(
   {
     width: 800,
     height: 600,
     preserveAspectRatio: false,
     preserveFontStyle: false,
     mimeType: "image/png"
   },
   dataUrl => { ... }
 );

Parameters:

Returns:

Type

string

flow(args)

Description:

• Flow data to the chart.
  
  By this API, you can append new data points to the chart.

Source:

• Chart/api/flow.ts, line 8

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:

flush(softopt)

Description:

• Force to redraw.

  • NOTE: When zoom/subchart is used, the zoomed state will be resetted.

Source:

• Chart/api/chart.ts, line 35

Example

chart.flush();

// for soft redraw
chart.flush(true);

Parameters:

focus(targetIdsValue)

Description:

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

Source:

• Chart/api/focus.ts, line 9

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:

groups(groups) → {Array}

Description:

• Update groups for the targets.

Source:

• Chart/api/group.ts, line 8

Example

// data1 and data2 will be a new group.
 chart.groups([
    ["data1", "data2"]
 ]);

Parameters:

Returns:

Type

Array

hide(targetIdsValueopt, optionsopt)

Description:

• Hide data series from chart

Source:

• Chart/api/show.ts, line 69

Example

// hide 'data1'
chart.hide("data1");

// hide 'data1' and 'data3'
chart.hide(["data1", "data3"]);

Parameters:

legend․hide(targetIds)

Description:

• Hide legend for each target.

Source:

• Chart/api/legend.ts, line 36

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:

legend․show(targetIds)

Description:

• Show legend for each target.

  • NOTE: Legend APIs aren't supported for treemap type.

Source:

• Chart/api/legend.ts, line 11

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:

load(args)

Description:

• 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

Source:

• Chart/api/load.ts, line 10

See:

• Demo

Examples

// Load data1 and unload data2 and data3
chart.load({
    columns: [
       ["data1", 100, 200, 150, ...],
       ...
   ],
   unload: ["data2", "data3"],
   url: "...",
   done: function() { ... }
   resizeAfter: true  // will resize after load
});

const chart = bb.generate({
  data: {
    columns: [
      ["data1", 20, 30, 40]
    ]
  }
});

chart.load({
   columns: [
       // with 'append' option, the 'data1' will have `[20,30,40,50,60]`.
       ["data1", 50, 60]
   ],
   append: true
});

const chart = bb.generate({
  data: {
    x: "x",
    xFormat: "%Y-%m-%dT%H:%M:%S",
    columns: [
      ["x", "2021-01-03T03:00:00", "2021-01-04T12:00:00", "2021-01-05T21:00:00"],
      ["data1", 36, 30, 24]
    ]
  },
  axis: {
    x: {
      type: "timeseries"
    }
  }
};

chart.load({
  columns: [
    // when existing chart has `x` value, should provide correponding 'x' value.
    // with 'append' option, the 'data1' will have `[36,30,24,37]`.
    ["x", "2021-02-01T08:00:00"],
    ["data1", 37]
  ],
  append: true
});

// myAPI.json
// {
//   "data1": [220, 240, 270, 250, 280],
//   "data2": [180, 150, 300, 70, 120]
// }

chart.load({
    url: './data/myAPI.json',
    mimeType: "json",

    // set request header if is needed
    headers: {
      "Content-Type": "text/json"
    }
});

chart.load({
    data: [
      // equivalent as: columns: [["data1", 30, 200, 100]]
      {"data1": 30}, {"data1": 200}, {"data1": 100}

      // or
      // equivalent as: columns: [["data1", 10, 20], ["data2", 13, 30]]
      // {"data1": 10, "data2": 13}, {"data1": 20, "data2": 30}}
    ]
});

chart.load({
    json: [
         {name: "www.site1.com", upload: 800, download: 500, total: 400},
    ],
    keys: {
        x: "name",
        value: ["upload", "download"]
    }
});

chart.load({
  json: {
      data1:[30, 20, 50, 40, 60, 50],
      data2:[200, 130, 90, 240, 130, 220],
  }
});

Parameters:

regions(regions) → {Array}

Description:

• Update regions.

Source:

• Chart/api/regions.ts, line 27

Example

// Show 2 regions
chart.regions([
   {axis: "x", start: 5, class: "regionX"},
   {axis: "y", end: 50, class: "regionY"}
]);

Parameters:

Returns:

Type

Array

regions․add(regions) → {Array}

Description:

• Add new region.
  
  This API adds new region instead of replacing like regions.

Source:

• Chart/api/regions.ts, line 45

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:

Returns:

Type

Array

regions․remove(optionsValue) → {Array}

Description:

• Remove regions.
  
  This API removes regions.

Source:

• Chart/api/regions.ts, line 68

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:

Returns:

Type

Array

resize(size)

Description:

• Resize the chart.

Source:

• Chart/api/chart.ts, line 9

Example

// Resize to 640x480
chart.resize({
   width: 640,
   height: 480
});

Parameters:

revert(targetIdsValue)

Description:

• Revert focused or defocused state to initial state.
  
  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.

Source:

• Chart/api/focus.ts, line 75

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:

select(idsopt, indicesopt, resetOtheropt)

Description:

• Set data points to be selected. (data.selection.enabled option should be set true to use this method)

Source:

• Chart/api/selection.ts, line 81

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:

selected(targetIdopt) → {Array}

Description:

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

Source:

• Chart/api/selection.ts, line 54

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:

Returns:

Type

Array

show(targetIdsValueopt, optionsopt)

Description:

• Show data series on chart

Source:

• Chart/api/show.ts, line 47

Example

// show 'data1'
chart.show("data1");

// show 'data1' and 'data3'
chart.show(["data1", "data3"]);

Parameters:

subchart(domainValue) → {Array}

Description:

• Select subchart by giving x domain range.

  • ℹ️ NOTE:
  • Due to the limitations of floating point precision, domain value may not be exact returning approximately values.

Source:

• Chart/api/subchart.ts, line 8

Example

// Specify domain for subchart selection
 chart.subchart([1, 2]);

 // Get the current subchart selection domain range
 // Domain value may not be exact returning approximately values.
 chart.subchart();

Parameters:

Returns:

Type

Array

subchart․hide()

Description:

• Hide generated subchart

  • NOTE: for ESM imports, needs to import 'subchart' exports and instantiate it by calling subchart().

Source:

• Chart/api/subchart.ts, line 93

Example

chart.subchart.hide();

subchart․reset()

Description:

• Reset subchart selection

Source:

• Chart/api/subchart.ts, line 127

Example

// Reset subchart selection
chart.subchart.reset();

subchart․show()

Description:

• Show subchart

  • NOTE: for ESM imports, needs to import 'subchart' exports and instantiate it by calling subchart().

Source:

• Chart/api/subchart.ts, line 49

Example

// for ESM imports, needs to import 'subchart' and must be instantiated first to enable subchart's API.
import {subchart} from "billboard.js";

const chart = bb.generate({
  ...
  subchart: {
     // need to be instantiated by calling 'subchart()'
     enabled: subchart()

     // in case don't want subchart to be shown at initialization, instantiate with '!subchart()'
     enabled: !subchart()
  }
});

chart.subchart.show();

subchart․toggle()

Description:

• Toggle the visiblity of subchart

  • NOTE: for ESM imports, needs to import 'subchart' exports and instantiate it by calling subchart().

Source:

• Chart/api/subchart.ts, line 111

Example

// When subchart is hidden, will be shown
// When subchart is shown, will be hidden
chart.subchart.toggle();

toggle(targetIdsopt, optionsopt)

Description:

• Toggle data series on chart. When target data is hidden, it will show. If is shown, it will hide in vice versa.

Source:

• Chart/api/show.ts, line 91

Example

// toggle 'data1'
chart.toggle("data1");

// toggle 'data1' and 'data3'
chart.toggle(["data1", "data3"]);

Parameters:

tooltip․hide()

Description:

• Hide tooltip

Source:

• Chart/api/tooltip.ts, line 113

tooltip․show(args)

Description:

• Show tooltip

Source:

• Chart/api/tooltip.ts, line 12

Example

// show the 2nd x Axis coordinate tooltip
 // for Arc(gauge, donut & pie) and radar type, approch showing tooltip by using "index" number.
 chart.tooltip.show({
   index: 1
 });

 // show tooltip for the 3rd x Axis in x:50 and y:100 coordinate of '.bb-event-rect' of the x Axis.
 chart.tooltip.show({
   x: 2,
   mouse: [50, 100]
 });

 // show tooltip for timeseries x axis
 chart.tooltip.show({
   x: new Date("2018-01-02 00:00")
 });

 // treemap type can be shown by using "id" only.
 chart.tooltip.show({
   data: {
       id: "data1"  // data id
   }
 });

 // for Arc types, specify 'id' or 'index'
 chart.tooltip.show({ data: { id: "data2" }});
 chart.tooltip.show({ data: { index: 2 }});

 // when data.xs is used
 chart.tooltip.show({
   data: {
       x: 3,  // x Axis value
       id: "data1",  // data id
       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: "data1",  // data id
       value: 500  // data value
   }
 });

Parameters:

unload(argsValue)

Description:

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

Source:

• Chart/api/load.ts, line 182

Example

// Unload data2 and data3
 chart.unload({
   ids: ["data2", "data3"],
   done: function() {
      // called after the unloaded
   },
   resizeAfter: true  // will resize after unload
 });

Parameters:

unselect(idsopt, indicesopt)

Description:

• Set data points to be un-selected.

Source:

• Chart/api/selection.ts, line 109

Example

// unselect all data points
 chart.unselect();

 // unselect all from 'data1'
 chart.unselect("data1");

 // unselect from 'data1', indices 2
 chart.unselect("data1", [2]);

Parameters:

unzoom()

Description:

• Unzoom zoomed area

  • NOTE: Calling .unzoom() will not trigger zoom events.

Source:

• Chart/api/zoom.ts, line 176

Example

chart.unzoom();

x(x) → {object}

Description:

• Get and set x values for the chart.

Source:

• Chart/api/x.ts, line 8

Example

// Get current x values
 chart.x();

 // Update x values for all targets
 chart.x([100, 200, 300, 400, ...]);

Parameters:

Returns:

Type

object

xgrids(grids) → {Array}

Description:

• Update x grid lines.

Source:

• Chart/api/grid.ts, line 47

Example

// Show 2 x grid lines
chart.xgrids([
   {value: 1, text: "Label 1"},
   {value: 4, text: "Label 4"}
]);
// --> Returns: [{value: 1, text: "Label 1"}, {value: 4, text: "Label 4"}]

Parameters:

Returns:

Type

Array

xgrids․add(grids) → {Array}

Description:

• Add x grid lines.
  This API adds new x grid lines instead of replacing like xgrids.

Source:

• Chart/api/grid.ts, line 66

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:

Returns:

Type

Array

xgrids․remove(grids) → {void}

Description:

• Remove x grid lines.
  This API removes x grid lines.

Source:

• Chart/api/grid.ts, line 89

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:

Returns:

Type

void

xs(xs) → {object}

Description:

• Get and set x values for the chart.

Source:

• Chart/api/x.ts, line 40

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:

Returns:

Type

object

ygrids(grids) → {object}

Description:

• Update y grid lines.

Source:

• Chart/api/grid.ts, line 115

Example

// Show 2 y grid lines
chart.ygrids([
   {value: 100, text: "Label 1"},
   {value: 400, text: "Label 4"}
]);
// --> Returns: [{value: 100, text: "Label 1"}, {value: 400, text: "Label 4"}]

Parameters:

Returns:

Type

object

ygrids․add(grids) → {object}

Description:

• Add y grid lines.
  This API adds new y grid lines instead of replacing like ygrids.

Source:

• Chart/api/grid.ts, line 134

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:

Returns:

Type

object

ygrids․remove(grids) → {void}

Description:

• Remove y grid lines.
  This API removes x grid lines.

Source:

• Chart/api/grid.ts, line 157

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:

Returns:

Type

void

zoom(domainValue) → {Array}

Description:

• Zoom by giving x domain range.

  • ℹ️ NOTE:
  • For wheel type zoom, the minimum zoom range will be set as the given domain range. To get the initial state, .unzoom() should be called.
  • To be used zoom.enabled option should be set as truthy.
  • When x axis type is category, domain range should be specified as index numbers.
  • Due to the limitations of floating point precision, domain value may not be exact returning approximately values.

Source:

• Chart/api/zoom.ts, line 8

Example

// Zoom to specified domain range
 chart.zoom([10, 20]);

 // For timeseries x axis, the domain value can be string, but the format should match with the 'data.xFormat' option.
 chart.zoom(["2021-02-03", "2021-02-08"]);

 // For category x axis, the domain value should be index number.
 chart.zoom([0, 3]);

 // Get the current zoomed domain range
 // Domain value may not be exact returning approximately values.
 chart.zoom();

Parameters:

Returns:

Type

Array

zoom․enable(enabled)

Description:

• Enable and disable zooming.

Source:

• Chart/api/zoom.ts, line 72

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:

zoom․max(maxopt) → {number}

Description:

• Set or get x Axis maximum zoom range value

Source:

• Chart/api/zoom.ts, line 106

Example

// Set maximum range value
 chart.zoom.max(20);

Parameters:

Returns:

Type

number

zoom․min(minopt) → {number}

Description:

• Set or get x Axis minimum zoom range value

Source:

• Chart/api/zoom.ts, line 125

Example

// Set minimum range value
 chart.zoom.min(-1);

Parameters:

Returns:

Type

number

zoom․range(rangeopt) → {object}

Description:

• Set zoom range

Source:

• Chart/api/zoom.ts, line 144

Example

chart.zoom.range({
     min: 10,
     max: 100
 });

Parameters:

Returns:

Type

object