new Options()
- Description:
Class to set options on generating chart.
- It's instantiated internally, not exposed for public.
- Source:
- See:
-
- bb.generate to use these options on generating the chart
Members
(static) arc :object
- Description:
Set arc options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
arc |
object | Arc object Properties
|
Set arc options
Type:
- object
Example
arc: {
cornerRadius: 12,
// can customize corner radius for each data with function callback
//
// The function will receive:
// - id {string}: Data id
// - value {number}: Data value
// - outerRadius {number}: Outer radius value
cornerRadius: function(id, value, outerRadius) {
return (id === "data1" && value > 10) ?
50 : outerRadius * 1.2;
},
// set ratio relative of outer radius
cornerRadius: {
ratio: 0.5
},
needle: {
show: true,
color: "red", // any valid CSS color
path: function(length) {
const len = length - 20;
// will return upper arrow shape path
// Note: The path should begun from '0,0' coordinate to top center.
const path = `M 0 -${len + 20}
L -12 -${len}
L -5 -${len}
L -5 0
A 1 1 0 0 0 5 0
L 5 -${len}
L 12 -${len} Z`;
return path;
},
value: 40, // will make needle to point value 40.
length: 80, // needle length in percentages relative to radius.
top: {
// rx and ry are the two radii of the ellipse;
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
rx: 1,
ry: 1,
width: 5
},
bottom: {
// rx and ry are the two radii of the ellipse;
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#elliptical_arc_curve
rx: 1,
ry: 1,
width: 10
len: 10
}
},
rangeText: {
values: [15, 30, 50, 75, 95],
unit: "%",
fixed: false, // only available for gauge chart
format: function(v) {
return v === 15 ? "Fifteen" : v;
},
position: function(v) {
return v === 15 ? {x: 20, y: 10} : null; // can return one props value also.
},
position: {x: 10, y: 15},
position: {x: 10}
}
}
(static) area :object
- Description:
Set area options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
area |
object | Area object Properties
|
Set area options
Type:
- object
Example
area: {
above: true,
below: false,
zerobased: false,
// <g class='bb-areas'> will be positioned behind the line <g class='bb-lines'> in stacking order
front: false,
// will generate follwing linearGradient:
// for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
// <linearGradient x1="0" x2="0" y1="0" y2="1">
// <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
// <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
// </linearGradient>
linearGradient: true,
// Or customized gradient
linearGradient: {
x: [0, 0], // x1, x2 attributes
y: [0, 0], // y1, y2 attributes
stops: [
// offset, stop-color, stop-opacity
[0, "#7cb5ec", 1],
// setting 'null' for stop-color, will set its original data color
[0.5, null, 0],
// setting 'function' for stop-color, will pass data id as argument.
// It should return color string or null value
[1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
]
}
}
(static) axis․rotated :boolean
- Description:
Switch x and y axis position.
- Source:
- Default Value:
- false
Switch x and y axis position.
Type:
- boolean
Example
axis: {
rotated: true
}
(static) axis․tooltip :boolean
- Description:
Set axis tooltip.
- NOTE:
- When enabled, will disable default focus grid line.
- For
timeseries
x Axis, tootlip will be formatted using x Axis' tick format. - For
category
x Axis, tootlip will be displaying scales' value text.
- NOTE:
- Source:
- Default Value:
- false
- See:
Properties:
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
axis |
object | Axis object Properties
|
Set axis tooltip.
- NOTE:
- When enabled, will disable default focus grid line.
- For
timeseries
x Axis, tootlip will be formatted using x Axis' tick format. - For
category
x Axis, tootlip will be displaying scales' value text.
Type:
- boolean
Example
axis: {
tooltip: true, // default background color is
// set backgound color for axis tooltip texts
tooltip: {
backgroundColor: "red",
// set differenct backround colors per axes
// NOTE: In this case, only specified axes tooltip will appear.
backgroundColor: {
x: "green",
y: "yellow",
y2: "red"
}
}
}
(static) axis․x․axes :Array
- Description:
Set additional axes for x Axis.
- NOTE: Axis' scale is based on x Axis value if domain option isn't set.
Each axis object should consist with following options:
Name Type Default Description domain Array - Set the domain value tick.outer boolean true Show outer tick tick.format Function - Set formatter for tick text tick.count Number - Set the number of y axis ticks tick.values Array - Set tick values manually
- Source:
- See:
Set additional axes for x Axis.
- NOTE: Axis' scale is based on x Axis value if domain option isn't set.
Each axis object should consist with following options:
Name | Type | Default | Description |
---|---|---|---|
domain | Array | - | Set the domain value |
tick.outer | boolean | true | Show outer tick |
tick.format | Function | - | Set formatter for tick text |
tick.count | Number | - | Set the number of y axis ticks |
tick.values | Array | - | Set tick values manually |
Type:
- Array
Example
x: {
axes: [
{
// if set, will not be correlated with the main x Axis domain value
domain: [0, 1000],
tick: {
outer: false,
format: function(x) {
return x + "%";
},
count: 2,
values: [10, 20, 30]
}
},
...
]
}
(static) axis․x․categories :Array
- Description:
Set category names on category axis. 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.
- Source:
- Default Value:
- []
Set category names on category axis. 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.
Type:
- Array
Example
axis: {
x: {
categories: ["Category 1", "Category 2", ...]
}
}
(static) axis․x․clipPath :boolean
- Description:
Set clip-path attribute for x axis element
- Source:
- Default Value:
- true
- See:
Set clip-path attribute for x axis element
Type:
- boolean
Example
// don't set 'clip-path' attribute
clipPath: false
(static) axis․x․extent :Array|function
- Description:
Set default extent for subchart and zoom. This can be an array or function that returns an array.
- Source:
- Default Value:
- undefined
Set default extent for subchart and zoom. This can be an array or function that returns an array.
Type:
- Array | function
Example
axis: {
x: {
// extent range as a pixel value
extent: [0, 200],
// when axis is 'timeseries', parsable datetime string
extent: ["2019-03-01", "2019-03-05"],
// return extent value
extent: function(domain, scale) {
var extent = domain.map(function(v) {
return scale(v);
});
// it should return a format of array
// ex) [0, 584]
return extent;
}
}
}
(static) axis․x․forceAsSingle :boolean
- Description:
Force the x axis to interact as single rather than multiple x axes.
- NOTE: The tooltip event will be triggered nearing each data points(for multiple xs) rather than x axis based(as single x does) in below condition:
- for
bubble
&scatter
type - when
data.xs
is set - when
tooltip.grouped=false
is settooltip.grouped
options will take precedence overaxis.forceSingleX
option.
- for
- NOTE: The tooltip event will be triggered nearing each data points(for multiple xs) rather than x axis based(as single x does) in below condition:
- Source:
- Default Value:
- false
- See:
Force the x axis to interact as single rather than multiple x axes.
- NOTE: The tooltip event will be triggered nearing each data points(for multiple xs) rather than x axis based(as single x does) in below condition:
- for
bubble
&scatter
type - when
data.xs
is set - when
tooltip.grouped=false
is settooltip.grouped
options will take precedence overaxis.forceSingleX
option.
- for
Type:
- boolean
Example
axis: {
x: {
// will work as single x axis
forceAsSingle: true
}
}
(static) axis․x․height :number
- Description:
Set height of x axis.
The height of x axis can be set manually by this option. If you need more space for x axis, please use this option for that. The unit is pixel.
- Source:
- Default Value:
- undefined
Set height of x axis.
The height of x axis can be set manually by this option. If you need more space for x axis, please use this option for that. The unit is pixel.
Type:
- number
Example
axis: {
x: {
height: 20
}
}
(static) axis․x․inverted :boolean
- Description:
Change the direction of x axis.
If true set, the direction will beright -> left
.
- Source:
- Default Value:
- false
- See:
Change the direction of x axis.
If true set, the direction will be right -> left
.
Type:
- boolean
Example
axis: {
x: {
inverted: true
}
}
(static) axis․x․label :string|object
- Description:
Set label on x axis.
You can set x axis label and change its position by this option.string
andobject
can be passed and we can change the poisiton by passing object that has position key.
Available position differs according to the axis direction (vertical or horizontal). If string set, the position will be the default.- If it's horizontal axis:
- inner-right [default]
- inner-center
- inner-left
- outer-right
- outer-center
- outer-left
- If it's vertical axis:
- inner-top [default]
- inner-middle
- inner-bottom
- outer-top
- outer-middle
- outer-bottom
- If it's horizontal axis:
- Source:
- Default Value:
- undefined
Set label on x axis.
You can set x axis label and change its position by this option.
string
and object
can be passed and we can change the poisiton by passing object that has position key.
Available position differs according to the axis direction (vertical or horizontal).
If string set, the position will be the default.
- If it's horizontal axis:
- inner-right [default]
- inner-center
- inner-left
- outer-right
- outer-center
- outer-left
- If it's vertical axis:
- inner-top [default]
- inner-middle
- inner-bottom
- outer-top
- outer-middle
- outer-bottom
Type:
- string | object
Example
axis: {
x: {
label: "Your X Axis"
}
}
axis: {
x: {
label: {
text: "Your X Axis",
position: "outer-center"
}
}
}
(static) axis․x․localtime :boolean
- Description:
Set how to treat the timezone of x values.
If true, treat x value as localtime. If false, convert to UTC internally.
- Source:
- Default Value:
- true
Set how to treat the timezone of x values.
If true, treat x value as localtime. If false, convert to UTC internally.
Type:
- boolean
Example
axis: {
x: {
localtime: false
}
}
(static) axis․x․max
- Description:
Set max value of x axis range.
- Source:
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
max |
number | Set the max value Properties
|
Set max value of x axis range.
Example
axis: {
x: {
max: 100,
max: {
// 'fit=true' will make x axis max to be limited as the bound data value max when 'max.value' is greater.
// - when bound data max is '10' and max.value: '100' ==> x axis max will be '10'
// - when bound data max is '1000' and max.value: '100' ==> x axis max will be '100'
fit: true,
value: 100
}
}
}
(static) axis․x․min
- Description:
Set min value of x axis range.
- Source:
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
min |
number | Set the min value Properties
|
Set min value of x axis range.
Example
axis: {
x: {
min: -100,
min: {
// 'fit=true' will make x axis min to be limited as the bound data value min when 'min.value' is lower.
// - when bound data min is '-10' and min.value: '-100' ==> x axis min will be '-10'
// - when bound data min is '-1000' and min.value: '-100' ==> x axis min will be '-100'
fit: true,
value: -100
}
}
}
(static) axis․x․padding :object|number
- Description:
Set padding for x axis.
If this option is set, the range of x axis will increase/decrease according to the values. If no padding is needed in the rage of x axis, 0 should be set. By default, left/right padding are set depending on x axis type or chart types.- NOTE:
- The meaning of padding values, differs according axis types:
- category/indexed: The unit of tick value
ex. the given value
1
, is same as the width of 1 tick width - timeseries: Numeric time value
ex. the given value
1000*60*60*24
, which is numeric time equivalent of a day, is same as the width of 1 tick width
- category/indexed: The unit of tick value
ex. the given value
- If want values to be treated as pixels, specify
unit:"px"
.- The pixel value will be convered based on the scale values. Hence can not reflect accurate padding result.
- The meaning of padding values, differs according axis types:
- NOTE:
- Source:
- Default Value:
- {}
Set padding for x axis.
If this option is set, the range of x axis will increase/decrease according to the values.
If no padding is needed in the rage of x axis, 0 should be set.
By default, left/right padding are set depending on x axis type or chart types.
- NOTE:
- The meaning of padding values, differs according axis types:
- category/indexed: The unit of tick value
ex. the given value
1
, is same as the width of 1 tick width - timeseries: Numeric time value
ex. the given value
1000*60*60*24
, which is numeric time equivalent of a day, is same as the width of 1 tick width
- category/indexed: The unit of tick value
ex. the given value
- If want values to be treated as pixels, specify
unit:"px"
.- The pixel value will be convered based on the scale values. Hence can not reflect accurate padding result.
- The meaning of padding values, differs according axis types:
Type:
- object | number
Example
axis: {
x: {
padding: {
// when axis type is 'category'
left: 1, // set left padding width of equivalent value of a tick's width
right: 0.5 // set right padding width as half of equivalent value of tick's width
// when axis type is 'timeseries'
left: 1000*60*60*24, // set left padding width of equivalent value of a day tick's width
right: 1000*60*60*12 // set right padding width as half of equivalent value of a day tick's width
},
// or set both values at once.
padding: 10,
// or set padding values as pixel unit.
padding: {
left: 100,
right: 50,
unit: "px"
},
}
}
(static) axis․x․show :boolean
- Description:
Show or hide x axis.
- Source:
- Default Value:
- true
Show or hide x axis.
Type:
- boolean
Example
axis: {
x: {
show: false
}
}
(static) axis․x․tick․autorotate :boolean
- Description:
Rotate x axis tick text if there is not enough space for 'category' and 'timeseries' type axis.
- NOTE: The conditions where
autorotate
is enabled are:- axis.x.type='category' or 'timeseries
- axis.x.tick.multiline=false
- axis.x.tick.culling=false
- axis.x.tick.fit=true
- NOTE: axis.x.tick.clippath=false is necessary for calculating the overflow padding between the end of x axis and the width of the SVG
- NOTE: The conditions where
- Source:
- Default Value:
- false
- See:
Rotate x axis tick text if there is not enough space for 'category' and 'timeseries' type axis.
- NOTE: The conditions where
autorotate
is enabled are:- axis.x.type='category' or 'timeseries
- axis.x.tick.multiline=false
- axis.x.tick.culling=false
- axis.x.tick.fit=true
- NOTE: axis.x.tick.clippath=false is necessary for calculating the overflow padding between the end of x axis and the width of the SVG
Type:
- boolean
Example
axis: {
x: {
tick: {
rotate: 15,
autorotate: true,
multiline: false,
culling: false,
fit: true
},
clipPath: false
}
}
(static) axis․x․tick․centered :boolean
- Description:
centerize ticks on category axis.
- Source:
- Default Value:
- false
centerize ticks on category axis.
Type:
- boolean
Example
axis: {
x: {
tick: {
centered: true
}
}
}
(static) axis․x․tick․count :number
- Description:
The number of x axis ticks to show.
This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value).
- Source:
- Default Value:
- undefined
The number of x axis ticks to show.
This option hides tick lines together with tick text. If this option is used on timeseries axis, the ticks position will be determined precisely and not nicely positioned (e.g. it will have rough second value).
Type:
- number
Example
axis: {
x: {
tick: {
count: 5
}
}
}
(static) axis․x․tick․culling :boolean
- Description:
Setting for culling ticks.
true
: the ticks will be culled, then only limited tick text will be shown.
This option does not hide the tick lines by default, if want to hide tick lines, setaxis.x.tick.culling.lines=false
.false
: all of ticks will be shown.
The number of ticks to be shown can be chaned byaxis.x.tick.culling.max
.
- Source:
- Default Value:
- `true` for indexed axis and timeseries axis, `false` for category axis
Setting for culling ticks.
true
: the ticks will be culled, then only limited tick text will be shown.
This option does not hide the tick lines by default, if want to hide tick lines, setaxis.x.tick.culling.lines=false
.false
: all of ticks will be shown.
The number of ticks to be shown can be chaned byaxis.x.tick.culling.max
.
Type:
- boolean
Example
axis: {
x: {
tick: {
culling: false
}
}
}
(static) axis․x․tick․culling․lines :boolean
- Description:
Control visibility of tick lines within culling option, along with tick text.
- Source:
- Default Value:
- true
Control visibility of tick lines within culling option, along with tick text.
Type:
- boolean
Example
axis: {
x: {
tick: {
culling: {
lines: false,
}
}
}
}
(static) axis․x․tick․culling․max :number
- Description:
The number of tick texts will be adjusted to less than this value.
- Source:
- Default Value:
- 10
The number of tick texts will be adjusted to less than this value.
Type:
- number
Example
axis: {
x: {
tick: {
culling: {
max: 5
}
}
}
}
(static) axis․x․tick․fit :boolean
- Description:
Fit x axis ticks.
- true: ticks will be shown according to x value of the data points.
- false: ticks will be shown as to have same intervals.
- Source:
- Default Value:
- true
- See:
Fit x axis ticks.
- true: ticks will be shown according to x value of the data points.
- false: ticks will be shown as to have same intervals.
Type:
- boolean
Example
axis: {
x: {
tick: {
fit: false
}
}
}
(static) axis․x․tick․format :function|string
- Description:
A function to format tick value. Format string is also available for timeseries data.
- Source:
- Default Value:
- undefined
- See:
A function to format tick value. Format string is also available for timeseries data.
Type:
- function | string
Example
axis: {
x: {
tick: {
// for timeseries, a 'datetime' object is given as parameter
format: function(x) {
return x.getFullYear();
}
// for category, index(Number) and categoryName(String) are given as parameter
format: function(index, categoryName) {
return categoryName.substr(0, 10);
},
// for timeseries format specifier
format: "%Y-%m-%d %H:%M:%S"
}
}
}
(static) axis․x․tick․multiline :boolean
- Description:
Set tick text to be multiline
- NOTE:
When x tick text contains
\n
, it's used as line break and 'axis.x.tick.width' option is ignored.
- Source:
- Default Value:
- true
- See:
Set tick text to be multiline
- NOTE:
When x tick text contains
\n
, it's used as line break and 'axis.x.tick.width' option is ignored.
Type:
- boolean
Examples
axis: {
x: {
tick: {
multiline: false
}
}
}
// example of line break with '\n'
// In this case, 'axis.x.tick.width' is ignored
data: {
x: "x",
columns: [
["x", "long\ntext", "Another\nLong\nText"],
...
],
}
(static) axis․x․tick․outer :boolean
- Description:
Show x axis outer tick.
- Source:
- Default Value:
- true
Show x axis outer tick.
Type:
- boolean
Example
axis: {
x: {
tick: {
outer: false
}
}
}
(static) axis․x․tick․rotate :number
- Description:
Rotate x axis tick text.
- If you set negative value, it will rotate to opposite direction.
- Applied when
axis.rotated
option isfalse
. - As long as
axis_x_tick_fit
is set totrue
it will calculate an overflow for the y2 axis and add this value to the right padding.
- Source:
- Default Value:
- 0
- See:
Rotate x axis tick text.
- If you set negative value, it will rotate to opposite direction.
- Applied when
axis.rotated
option isfalse
. - As long as
axis_x_tick_fit
is set totrue
it will calculate an overflow for the y2 axis and add this value to the right padding.
Type:
- number
Example
axis: {
x: {
tick: {
rotate: 60
}
}
}
(static) axis․x․tick․show :boolean
- Description:
Show or hide x axis tick line.
- Source:
- Default Value:
- true
- See:
Show or hide x axis tick line.
Type:
- boolean
Example
axis: {
x: {
tick: {
show: false
}
}
}
(static) axis․x․tick․text․inner :boolean|object
- Description:
Set the first/last axis tick text to be positioned inside of the chart on non-rotated axis.
- Source:
- Default Value:
- false
- See:
Set the first/last axis tick text to be positioned inside of the chart on non-rotated axis.
Type:
- boolean | object
Example
axis: {
x: {
tick: {
text: {
inner: true,
// or specify each position of the first and last tick text
inner: {
first: true,
last: true
}
}
}
}
}
(static) axis․x․tick․text․position :object
- Description:
Set the x Axis tick text's position relatively its original position
- Source:
- Default Value:
- {x: 0, y:0}
Set the x Axis tick text's position relatively its original position
Type:
- object
Example
axis: {
x: {
tick: {
text: {
position: {
x: 10,
y: 10
}
}
}
}
}
(static) axis․x․tick․text․show :boolean
- Description:
Show or hide x axis tick text.
- Source:
- Default Value:
- true
- See:
Show or hide x axis tick text.
Type:
- boolean
Example
axis: {
x: {
tick: {
text: {
show: false
}
}
}
}
(static) axis․x․tick․tooltip :boolean
- Description:
Set to display system tooltip(via
<title>
element) for tick text- NOTE: Only available for category axis type (
axis.x.type='category'
)
- NOTE: Only available for category axis type (
- Source:
- Default Value:
- false
Set to display system tooltip(via <title>
element) for tick text
- NOTE: Only available for category axis type (
axis.x.type='category'
)
Type:
- boolean
Example
axis: {
x: {
tick: {
tooltip: true
}
}
}
(static) axis․x․tick․values :Array|function
- Description:
Set the x values of ticks manually.
If this option is provided, the position of the ticks will be determined based on those values.
This option works withtimeseries
data and the x values will be parsed accoding to the type of the value and data.xFormat option.
- Source:
- Default Value:
- null
Set the x values of ticks manually.
If this option is provided, the position of the ticks will be determined based on those values.
This option works with timeseries
data and the x values will be parsed accoding to the type of the value and data.xFormat option.
Type:
- Array | function
Example
axis: {
x: {
tick: {
values: [1, 2, 4, 8, 16, 32, ...],
// an Array value should be returned
values: function() {
return [ ... ];
}
}
}
}
(static) axis․x․tick․width :number
- Description:
Set tick width
- NOTE:
When x tick text contains
\n
, this option is ignored.
- Source:
- Default Value:
- null
Set tick width
- NOTE:
When x tick text contains
\n
, this option is ignored.
Type:
- number
Example
axis: {
x: {
tick: {
width: 50
}
}
}
(static) axis․x․type :string
- Description:
Set type of x axis.
Available Values:- category
- indexed
- log
- timeseries
NOTE:
- log type:
- the x values specified by
data.x
(or by any equivalent option), must be exclusively-positive. - x axis min value should be >= 0.
- for 'category' type,
data.xs
option isn't supported.
- the x values specified by
- Source:
- Default Value:
- indexed
- See:
Set type of x axis.
Available Values:
- category
- indexed
- log
- timeseries
NOTE:
- log type:
- the x values specified by
data.x
(or by any equivalent option), must be exclusively-positive. - x axis min value should be >= 0.
- for 'category' type,
data.xs
option isn't supported.
- the x values specified by
Type:
- string
Example
axis: {
x: {
type: "timeseries"
}
}
(static) axis․y2․axes :Array
- Description:
Set additional axes for y2 Axis.
- NOTE: Axis' scale is based on y2 Axis value if domain option isn't set.
Each axis object should consist with following options:
Name Type Default Description domain Array - Set the domain value tick.outer boolean true Show outer tick tick.format Function - Set formatter for tick text tick.count Number - Set the number of y axis ticks tick.values Array - Set tick values manually
- Source:
- See:
Set additional axes for y2 Axis.
- NOTE: Axis' scale is based on y2 Axis value if domain option isn't set.
Each axis object should consist with following options:
Name | Type | Default | Description |
---|---|---|---|
domain | Array | - | Set the domain value |
tick.outer | boolean | true | Show outer tick |
tick.format | Function | - | Set formatter for tick text |
tick.count | Number | - | Set the number of y axis ticks |
tick.values | Array | - | Set tick values manually |
Type:
- Array
Example
y2: {
axes: [
{
// if set, will not be correlated with the main y2 Axis domain value
domain: [0, 1000],
tick: {
outer: false,
format: function(x) {
return x + "%";
},
count: 2,
values: [10, 20, 30]
}
},
...
]
}
(static) axis․y2․center :number
- Description:
Set center value of y2 axis.
- Source:
- Default Value:
- undefined
Set center value of y2 axis.
Type:
- number
Example
axis: {
y2: {
center: 0
}
}
(static) axis․y2․default :Array
- Description:
Set default range of y2 axis.
This option set the default value for y2 axis when there is no data on init.
- Source:
- Default Value:
- undefined
Set default range of y2 axis.
This option set the default value for y2 axis when there is no data on init.
Type:
- Array
Example
axis: {
y2: {
default: [0, 1000]
}
}
(static) axis․y2․inner :boolean
- Description:
Show y2 axis inside of the chart.
- Source:
- Default Value:
- false
Show y2 axis inside of the chart.
Type:
- boolean
Example
axis: {
y2: {
inner: true
}
}
(static) axis․y2․inverted :boolean
- Description:
Change the direction of y2 axis.
If true set, the direction will betop -> bottom
.
- Source:
- Default Value:
- false
- See:
Change the direction of y2 axis.
If true set, the direction will be top -> bottom
.
Type:
- boolean
Example
axis: {
y2: {
inverted: true
}
}
(static) axis․y2․label :string|object
- Description:
Set label on y2 axis.
You can set y2 axis label and change its position by this option. This option works in the same way as axis.x.label.
- Source:
- Default Value:
- {}
- See:
-
axis.x.label for position string value.
Set label on y2 axis.
You can set y2 axis label and change its position by this option. This option works in the same way as axis.x.label.
Type:
- string | object
Example
axis: {
y2: {
label: "Your Y2 Axis"
}
}
axis: {
y2: {
label: {
text: "Your Y2 Axis",
position: "outer-middle"
}
}
}
(static) axis․y2․max :number
- Description:
Set max value of y2 axis.
- Source:
- Default Value:
- undefined
Set max value of y2 axis.
Type:
- number
Example
axis: {
y2: {
max: 1000
}
}
(static) axis․y2․min :number
- Description:
Set min value of y2 axis.
- Source:
- Default Value:
- undefined
Set min value of y2 axis.
Type:
- number
Example
axis: {
y2: {
min: -1000
}
}
(static) axis․y2․padding :object|number
- Description:
Set padding for y2 axis.
You can set padding for y2 axis to create more space on the edge of the axis. This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.- NOTE:
- Given values are translated relative to the y2 Axis domain value for padding
- For area and bar type charts, area.zerobased or bar.zerobased options should be set to 'false` to get padded bottom.
- NOTE:
- Source:
- Default Value:
- {}
Set padding for y2 axis.
You can set padding for y2 axis to create more space on the edge of the axis.
This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
- NOTE:
- Given values are translated relative to the y2 Axis domain value for padding
- For area and bar type charts, area.zerobased or bar.zerobased options should be set to 'false` to get padded bottom.
Type:
- object | number
Example
axis: {
y2: {
padding: {
top: 100,
bottom: 100
}
// or set both values at once.
padding: 10
}
(static) axis․y2․show :boolean
- Description:
Show or hide y2 axis.
- NOTE:
- When set to
false
will not generate y2 axis node. In this case, all 'y2' axis related functionality won't work properly. - If need to use 'y2' related options while y2 isn't visible, set the value
true
and control visibility by css display property.
- When set to
- NOTE:
- Source:
- Default Value:
- false
Show or hide y2 axis.
- NOTE:
- When set to
false
will not generate y2 axis node. In this case, all 'y2' axis related functionality won't work properly. - If need to use 'y2' related options while y2 isn't visible, set the value
true
and control visibility by css display property.
- When set to
Type:
- boolean
Example
axis: {
y2: {
show: true
}
}
(static) axis․y2․tick․count :number
- Description:
Set the number of y2 axis ticks.
- NOTE: This works in the same way as axis.y.tick.count.
- Source:
- Default Value:
- undefined
Set the number of y2 axis ticks.
- NOTE: This works in the same way as axis.y.tick.count.
Type:
- number
Example
axis: {
y2: {
tick: {
count: 5
}
}
}
(static) axis․y2․tick․culling :boolean
- Description:
Setting for culling ticks.
true
: the ticks will be culled, then only limited tick text will be shown.
This option does not hide the tick lines by default, if want to hide tick lines, setaxis.y2.tick.culling.lines=false
.false
: all of ticks will be shown.
The number of ticks to be shown can be chaned byaxis.y2.tick.culling.max
.
- Source:
- Default Value:
- false
Setting for culling ticks.
true
: the ticks will be culled, then only limited tick text will be shown.
This option does not hide the tick lines by default, if want to hide tick lines, setaxis.y2.tick.culling.lines=false
.false
: all of ticks will be shown.
The number of ticks to be shown can be chaned byaxis.y2.tick.culling.max
.
Type:
- boolean
Example
axis: {
y2: {
tick: {
culling: false
}
}
}
(static) axis․y2․tick․culling․lines :boolean
- Description:
Control visibility of tick lines within culling option, along with tick text.
- Source:
- Default Value:
- true
Control visibility of tick lines within culling option, along with tick text.
Type:
- boolean
Example
axis: {
y2: {
tick: {
culling: {
lines: false,
}
}
}
}
(static) axis․y2․tick․culling․max :number
- Description:
The number of tick texts will be adjusted to less than this value.
- Source:
- Default Value:
- 5
The number of tick texts will be adjusted to less than this value.
Type:
- number
Example
axis: {
y2: {
tick: {
culling: {
max: 5
}
}
}
}
(static) axis․y2․tick․format :function
- Description:
Set formatter for y2 axis tick text.
This option works in the same way as axis.y.format.
- Source:
- Default Value:
- undefined
Set formatter for y2 axis tick text.
This option works in the same way as axis.y.format.
Type:
- function
Example
axis: {
y2: {
tick: {
format: d3.format("$,")
//or format: function(d) { return "$" + d; }
}
}
}
(static) axis․y2․tick․outer :boolean
- Description:
Show or hide y2 axis outer tick.
- Source:
- Default Value:
- true
Show or hide y2 axis outer tick.
Type:
- boolean
Example
axis: {
y2: {
tick: {
outer: false
}
}
}
(static) axis․y2․tick․rotate :number
- Description:
Rotate y2 axis tick text.
- If you set negative value, it will rotate to opposite direction.
- Applied when
axis.rotated
option istrue
.
- Source:
- Default Value:
- 0
Rotate y2 axis tick text.
- If you set negative value, it will rotate to opposite direction.
- Applied when
axis.rotated
option istrue
.
Type:
- number
Example
axis: {
y2: {
tick: {
rotate: 60
}
}
}
(static) axis․y2․tick․show :boolean
- Description:
Show or hide y2 axis tick line.
- Source:
- Default Value:
- true
- See:
Show or hide y2 axis tick line.
Type:
- boolean
Example
axis: {
y2: {
tick: {
show: false
}
}
}
(static) axis․y2․tick․stepSize :number
- Description:
Set axis tick step(interval) size.
- NOTE: Will be ignored if
axis.y2.tick.count
oraxis.y2.tick.values
options are set.
- NOTE: Will be ignored if
- Source:
- See:
Set axis tick step(interval) size.
- NOTE: Will be ignored if
axis.y2.tick.count
oraxis.y2.tick.values
options are set.
Type:
- number
Example
axis: {
y2: {
tick: {
// tick value will step as indicated interval value.
// ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
stepSize: 15
}
}
}
(static) axis․y2․tick․text․position :object
- Description:
Set the y2 Axis tick text's position relatively its original position
- Source:
- Default Value:
- {x: 0, y:0}
Set the y2 Axis tick text's position relatively its original position
Type:
- object
Example
axis: {
y2: {
tick: {
text: {
position: {
x: 10,
y: 10
}
}
}
}
}
(static) axis․y2․tick․text․show :boolean
- Description:
Show or hide y2 axis tick text.
- Source:
- Default Value:
- true
- See:
Show or hide y2 axis tick text.
Type:
- boolean
Example
axis: {
y2: {
tick: {
text: {
show: false
}
}
}
}
(static) axis․y2․tick․values :Array|function
- Description:
Set y2 axis tick values manually.
- Source:
- Default Value:
- null
Set y2 axis tick values manually.
Type:
- Array | function
Example
axis: {
y2: {
tick: {
values: [100, 1000, 10000],
// an Array value should be returned
values: function() {
return [ ... ];
}
}
}
}
(static) axis․y2․type :string
- Description:
Set type of y2 axis.
Available Values:- indexed
- log
- timeseries
NOTE:
- log type:
- the bound data values must be exclusively-positive.
- y2 axis min value should be >= 0.
data.groups
(stacked data) option aren't supported.
- Source:
- Default Value:
- "indexed"
- See:
Set type of y2 axis.
Available Values:
- indexed
- log
- timeseries
NOTE:
- log type:
- the bound data values must be exclusively-positive.
- y2 axis min value should be >= 0.
data.groups
(stacked data) option aren't supported.
Type:
- string
Example
axis: {
y2: {
type: "indexed"
}
}
(static) axis․y․axes :Array
- Description:
Set additional axes for y Axis.
- NOTE: Axis' scale is based on y Axis value if domain option isn't set.
Each axis object should consist with following options:
Name Type Default Description domain Array - Set the domain value tick.outer boolean true Show outer tick tick.format Function - Set formatter for tick text tick.count Number - Set the number of y axis ticks tick.values Array - Set tick values manually
- Source:
- See:
Set additional axes for y Axis.
- NOTE: Axis' scale is based on y Axis value if domain option isn't set.
Each axis object should consist with following options:
Name | Type | Default | Description |
---|---|---|---|
domain | Array | - | Set the domain value |
tick.outer | boolean | true | Show outer tick |
tick.format | Function | - | Set formatter for tick text |
tick.count | Number | - | Set the number of y axis ticks |
tick.values | Array | - | Set tick values manually |
Type:
- Array
Example
y: {
axes: [
{
// if set, will not be correlated with the main y Axis domain value
domain: [0, 1000],
tick: {
outer: false,
format: function(x) {
return x + "%";
},
count: 2,
values: [10, 20, 30]
}
},
...
]
}
(static) axis․y․center :number
- Description:
Set center value of y axis.
- Source:
- Default Value:
- undefined
Set center value of y axis.
Type:
- number
Example
axis: {
y: {
center: 0
}
}
(static) axis․y․clipPath :boolean
- Description:
Set clip-path attribute for y axis element
- NOTE:
clip-path
attribute for y Axis is set only whenaxis.y.inner
option is true.
- NOTE:
- Source:
- Default Value:
- true
Set clip-path attribute for y axis element
- NOTE:
clip-path
attribute for y Axis is set only whenaxis.y.inner
option is true.
Type:
- boolean
Example
// don't set 'clip-path' attribute
clipPath: false
(static) axis․y․default :Array
- Description:
Set default range of y axis.
This option set the default value for y axis when there is no data on init.
- Source:
- Default Value:
- undefined
Set default range of y axis.
This option set the default value for y axis when there is no data on init.
Type:
- Array
Example
axis: {
y: {
default: [0, 1000]
}
}
(static) axis․y․inner :boolean
- Description:
Show y axis inside of the chart.
- Source:
- Default Value:
- false
Show y axis inside of the chart.
Type:
- boolean
Example
axis: {
y: {
inner: true
}
}
(static) axis․y․inverted :boolean
- Description:
Change the direction of y axis.
If true set, the direction will betop -> bottom
.
- Source:
- Default Value:
- false
- See:
Change the direction of y axis.
If true set, the direction will be top -> bottom
.
Type:
- boolean
Example
axis: {
y: {
inverted: true
}
}
(static) axis․y․label :string|object
- Description:
Set label on y axis.
You can set y axis label and change its position by this option. This option works in the same way as axis.x.label.
- Source:
- Default Value:
- {}
- See:
-
axis.x.label for position string value.
Set label on y axis.
You can set y axis label and change its position by this option. This option works in the same way as axis.x.label.
Type:
- string | object
Example
axis: {
y: {
label: "Your Y Axis"
}
}
axis: {
y: {
label: {
text: "Your Y Axis",
position: "outer-middle"
}
}
}
(static) axis․y․max :number
- Description:
Set max value of y axis.
- NOTE: Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
- Source:
- Default Value:
- undefined
Set max value of y axis.
- NOTE: Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
Type:
- number
Example
axis: {
y: {
max: 1000
}
}
(static) axis․y․min :number
- Description:
Set min value of y axis.
- NOTE: Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
- Source:
- Default Value:
- undefined
Set min value of y axis.
- NOTE: Padding will be added based on this value, so if you don't need the padding, please set axis.y.padding to disable it (e.g. axis.y.padding = 0).
Type:
- number
Example
axis: {
y: {
min: 1000
}
}
(static) axis․y․padding :object|number
- Description:
Set padding for y axis.
You can set padding for y axis to create more space on the edge of the axis. This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.- NOTE:
- Given values are translated relative to the y Axis domain value for padding
- For area and bar type charts, area.zerobased or bar.zerobased options should be set to 'false` to get padded bottom.
- NOTE:
- Source:
- Default Value:
- {}
Set padding for y axis.
You can set padding for y axis to create more space on the edge of the axis.
This option accepts object and it can include top and bottom. top, bottom will be treated as pixels.
- NOTE:
- Given values are translated relative to the y Axis domain value for padding
- For area and bar type charts, area.zerobased or bar.zerobased options should be set to 'false` to get padded bottom.
Type:
- object | number
Example
axis: {
y: {
padding: {
top: 0,
bottom: 0
},
// or set both values at once.
padding: 10
}
}
(static) axis․y․show :boolean
- Description:
Show or hide y axis.
- Source:
- Default Value:
- true
Show or hide y axis.
Type:
- boolean
Example
axis: {
y: {
show: false
}
}
(static) axis․y․tick․count :number
- Description:
Set the number of y axis ticks.
- NOTE: The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
- Source:
- Default Value:
- undefined
Set the number of y axis ticks.
- NOTE: The position of the ticks will be calculated precisely, so the values on the ticks will not be rounded nicely. In the case, axis.y.tick.format or axis.y.tick.values will be helpful.
Type:
- number
Example
axis: {
y: {
tick: {
count: 5
}
}
}
(static) axis․y․tick․culling :boolean
- Description:
Setting for culling ticks.
true
: the ticks will be culled, then only limited tick text will be shown.
This option does not hide the tick lines by default, if want to hide tick lines, setaxis.y.tick.culling.lines=false
.false
: all of ticks will be shown.
The number of ticks to be shown can be chaned byaxis.y.tick.culling.max
.
- Source:
- Default Value:
- false
Setting for culling ticks.
true
: the ticks will be culled, then only limited tick text will be shown.
This option does not hide the tick lines by default, if want to hide tick lines, setaxis.y.tick.culling.lines=false
.false
: all of ticks will be shown.
The number of ticks to be shown can be chaned byaxis.y.tick.culling.max
.
Type:
- boolean
Example
axis: {
y: {
tick: {
culling: false
}
}
}
(static) axis․y․tick․culling․lines :boolean
- Description:
Control visibility of tick lines within culling option, along with tick text.
- Source:
- Default Value:
- true
Control visibility of tick lines within culling option, along with tick text.
Type:
- boolean
Example
axis: {
y: {
tick: {
culling: {
lines: false,
}
}
}
}
(static) axis․y․tick․culling․max :number
- Description:
The number of tick texts will be adjusted to less than this value.
- Source:
- Default Value:
- 5
The number of tick texts will be adjusted to less than this value.
Type:
- number
Example
axis: {
y: {
tick: {
culling: {
max: 5
}
}
}
}
(static) axis․y․tick․format :function
- Description:
Set formatter for y axis tick text.
This option accepts d3.format object as well as a function you define.
- Source:
- Default Value:
- undefined
Set formatter for y axis tick text.
This option accepts d3.format object as well as a function you define.
Type:
- function
Example
axis: {
y: {
tick: {
format: function(x) {
return x.getFullYear();
}
}
}
}
(static) axis․y․tick․outer :boolean
- Description:
Show y axis outer tick.
- Source:
- Default Value:
- true
Show y axis outer tick.
Type:
- boolean
Example
axis: {
y: {
tick: {
outer: false
}
}
}
(static) axis․y․tick․rotate :number
- Description:
Rotate y axis tick text.
- If you set negative value, it will rotate to opposite direction.
- Applied when
axis.rotated
option istrue
.
- Source:
- Default Value:
- 0
Rotate y axis tick text.
- If you set negative value, it will rotate to opposite direction.
- Applied when
axis.rotated
option istrue
.
Type:
- number
Example
axis: {
y: {
tick: {
rotate: 60
}
}
}
(static) axis․y․tick․show :boolean
- Description:
Show or hide y axis tick line.
- Source:
- Default Value:
- true
- See:
Show or hide y axis tick line.
Type:
- boolean
Example
axis: {
y: {
tick: {
show: false
}
}
}
(static) axis․y․tick․stepSize :number
- Description:
Set axis tick step(interval) size.
- NOTE: Will be ignored if
axis.y.tick.count
oraxis.y.tick.values
options are set.
- NOTE: Will be ignored if
- Source:
- See:
Set axis tick step(interval) size.
- NOTE: Will be ignored if
axis.y.tick.count
oraxis.y.tick.values
options are set.
Type:
- number
Example
axis: {
y: {
tick: {
// tick value will step as indicated interval value.
// ex) 'stepSize=15' ==> [0, 15, 30, 45, 60]
stepSize: 15
}
}
}
(static) axis․y․tick․text․position :object
- Description:
Set the y Axis tick text's position relatively its original position
- Source:
- Default Value:
- {x: 0, y:0}
Set the y Axis tick text's position relatively its original position
Type:
- object
Example
axis: {
y: {
tick: {
text: {
position: {
x: 10,
y: 10
}
}
}
}
}
(static) axis․y․tick․text․show :boolean
- Description:
Show or hide y axis tick text.
- Source:
- Default Value:
- true
- See:
Show or hide y axis tick text.
Type:
- boolean
Example
axis: {
y: {
tick: {
text: {
show: false
}
}
}
}
(static) axis․y․tick․values :Array|function
- Description:
Set y axis tick values manually.
- Source:
- Default Value:
- null
Set y axis tick values manually.
Type:
- Array | function
Example
axis: {
y: {
tick: {
values: [100, 1000, 10000],
// an Array value should be returned
values: function() {
return [ ... ];
}
}
}
}
(static) axis․y․type :string
- Description:
Set type of y axis.
Available Values:- indexed
- log
- timeseries
NOTE:
- log type:
- the bound data values must be exclusively-positive.
- y axis min value should be >= 0.
data.groups
(stacked data) option aren't supported.
- Source:
- Default Value:
- "indexed"
- See:
Set type of y axis.
Available Values:
- indexed
- log
- timeseries
NOTE:
- log type:
- the bound data values must be exclusively-positive.
- y axis min value should be >= 0.
data.groups
(stacked data) option aren't supported.
Type:
- string
Example
axis: {
y: {
type: "log"
}
}
(static) background
- Description:
Set chart background.
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
background |
object | background object Properties
|
Set chart background.
Example
background: {
class: "myClass",
color: "red",
// Set image url for background.
// If specified, 'color' option will be ignored.
imgUrl: "https://naver.github.io/billboard.js/img/logo/billboard.js.svg",
}
(static) bar :object
- Description:
Set bar options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
bar |
object | Bar object Properties
|
Set bar options
Type:
- object
Example
bar: {
// make bar shape to be positioned over the other shape elements
front: true,
// remove nullish data on bar indices postions
indices: {
removeNull: true
},
// will generate follwing linearGradient:
// for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient
// <linearGradient x1="0" x2="0" y1="0" y2="1">
// <stop offset="0" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
// <stop offset="1" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
// </linearGradient>
linearGradient: true,
// Or customized gradient
linearGradient: {
x: [0, 0], // x1, x2 attributes
y: [0, 0], // y1, y2 attributes
stops: [
// offset, stop-color, stop-opacity
[0, "#7cb5ec", 1],
// setting 'null' for stop-color, will set its original data color
[0.5, null, 0],
// setting 'function' for stop-color, will pass data id as argument.
// It should return color string or null value
[1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
]
},
// remove nullish da
overlap: true,
padding: 1,
// bar radius
radius: 10,
// or
radius: {
ratio: 0.5
}
label: {
// 0.1(10%) ratio value means, the minimum ratio to show text label relative to the y Axis domain range value.
// if data value is below than 0.1, text label will be hidden.
threshold: 0.1,
},
// will not have offset between each bar elements for interaction
sensitivity: 0,
width: 10,
// or specify width callback. The callback will receive width, targetsNum, maxDataCount as arguments.
// - width: chart area width
// - targetsNum: number of targets
// - maxDataCount: maximum data count among targets
width: function(width, targetsNum, maxDataCount) {
return width / (targetsNum * maxDataCount);
}
// or specify ratio & max
width: {
ratio: 0.2,
max: 20
},
// or specify width per dataset
width: {
data1: 20,
data2: {
ratio: 0.2,
max: 20
}
},
zerobased: false
}
(static) bindto
- Description:
Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.
If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).- NOTE: In case of element doesn't exist or not specified, will add a
<div>
element to the body.
- NOTE: In case of element doesn't exist or not specified, will add a
- Source:
- Default Value:
- #chart
Properties:
Name | Type | Attributes | Default | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
bindto |
string | HTMLElement | d3.selection | object |
<optional> |
"#chart"
|
Specify the element where chart will be drawn. Properties
|
Specify the CSS selector or the element which the chart will be set to. D3 selection object can be specified also.
If other chart is set already, it will be replaced with the new one (only one chart can be set in one element).
- NOTE: In case of element doesn't exist or not specified, will add a
<div>
element to the body.
Example
bindto: "#myContainer"
// or HTMLElement
bindto: document.getElementById("myContainer")
// or D3 selection object
bindto: d3.select("#myContainer")
// or to change default classname
bindto: {
element: "#chart",
classname: "bill-board" // ex) <div id='chart' class='bill-board'>
}
(static) boost :object
- Description:
Set boost options
- Source:
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
boost |
object | boost object Properties
|
Set boost options
Type:
- object
Example
boost: {
useCssRule: true,
useWorker: false
}
(static) bubble :object
- Description:
Set bubble options
- Source:
Properties:
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
bubble |
object | bubble object Properties
|
Set bubble options
Type:
- object
Example
bubble: {
// ex) If 100 is the highest value among data bound, the representation bubble of 100 will have radius of 50.
// And the lesser will have radius relatively from tha max value.
maxR: 50,
// or set radius callback
maxR: function(d) {
// ex. of d param - {x: Fri Oct 06 2017 00:00:00 GMT+0900, value: 80, id: "data2", index: 5}
...
return Math.sqrt(d.value * 2);
},
zerobased: false
}
(static) candlestick :object
- Description:
Set candlestick options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
candlestick |
object | Candlestick object Properties
|
Set candlestick options
Type:
- object
Example
candlestick: {
width: 10,
// or
width: {
ratio: 0.2,
max: 20
},
// or specify width per dataset
width: {
data1: 20,
data2: {
ratio: 0.2,
max: 20
}
},
color: {
// spcify bearish color
down: "red",
// or specify color per dataset
down: {
data1: "red",
data2: "blue",
}
}
}
(static) clipPath :boolean
- Description:
Set 'clip-path' attribute for chart element
- NOTE:
When is false, chart node element is positioned after the axis node in DOM tree hierarchy. Is to make chart element positioned over axis element.
- Source:
- Default Value:
- true
- See:
Set 'clip-path' attribute for chart element
- NOTE:
When is false, chart node element is positioned after the axis node in DOM tree hierarchy. Is to make chart element positioned over axis element.
Type:
- boolean
Example
// don't set 'clip-path' attribute
clipPath: false
(static) color :object
- Description:
Set color of the data values
- Source:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
color |
object | color object Properties
|
Set color of the data values
Type:
- object
Example
color: {
pattern: ["#1f77b4", "#aec7e8", ...],
// Set colors' patterns
// it should return an array of SVGPatternElement
tiles: function() {
var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
var g = document.createElementNS("http://www.w3.org/2000/svg", "g");
var circle1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
pattern.setAttribute("patternUnits", "userSpaceOnUse");
pattern.setAttribute("width", "32");
pattern.setAttribute("height", "32");
g.style.fill = "#000";
g.style.opacity = "0.2";
circle1.setAttribute("cx", "3");
circle1.setAttribute("cy", "3");
circle1.setAttribute("r", "3");
g.appendChild(circle1);
pattern.appendChild(g);
return [pattern];
},
// for threshold usage, pattern values should be set for each steps
pattern: ["grey", "green", "yellow", "orange", "red"],
threshold: {
unit: "value",
// when value is 20 => 'green', value is 40 => 'orange' will be set.
values: [10, 20, 30, 40, 50],
// the equation for max:
// - unit == 'value': max => 30
// - unit != 'value': max => value*100/30
max: 30
},
// set all data to 'red'
onover: "red",
// set different color for data
onover: {
data1: "red",
data2: "yellow"
},
// will pass data object to the callback
onover: function(d) {
return d.id === "data1" ? "red" : "green";
}
}
(static) data․axes :object
- Description:
Set y axis the data related to. y and y2 can be used.
- 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:
- Default Value:
- {}
Set y axis the data related to. y and y2 can be used.
- 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
Type:
- object
Example
data: {
axes: {
data1: "y",
data2: "y2"
}
}
(static) data․classes :object
- Description:
Set custom data class.
If this option is specified, the element g for the data has an additional class that has the prefix 'bb-target-' (eg. bb-target-additional-data1-class).
- Source:
- Default Value:
- {}
Set custom data class.
If this option is specified, the element g for the data has an additional class that has the prefix 'bb-target-' (eg. bb-target-additional-data1-class).
Type:
- object
Example
data: {
classes: {
data1: "additional-data1-class",
data2: "additional-data2-class"
}
}
(static) data․color :function
- Description:
Set color converter function.
This option should a function and the specified function receives color (e.g. '#ff0000') and d that has data parameters like id, value, index, etc. And it must return a string that represents color (e.g. '#00ff00').
- Source:
- Default Value:
- undefined
- See:
Set color converter function.
This option should a function and the specified function receives color (e.g. '#ff0000') and d that has data parameters like id, value, index, etc. And it must return a string that represents color (e.g. '#00ff00').
Type:
- function
Example
data: {
color: function(color, d) { ... }
}
(static) data․colors :object
- Description:
Set color for each data.
- Source:
- Default Value:
- {}
Set color for each data.
Type:
- object
Example
data: {
colors: {
data1: "#ff0000",
data2: function(d) {
return "#000";
}
...
}
}
(static) data․columns :Array
- Description:
Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.
- Source:
- Default Value:
- undefined
- See:
Load data from a multidimensional array, with each element containing an array consisting of a datum name and associated data values.
Type:
- Array
Example
data: {
columns: [
["data1", 30, 20, 50, 40, 60, 50],
["data2", 200, 130, 90, 240, 130, 220],
["data3", 300, 200, 160, 400, 250, 250]
]
}
// for 'bar' type, data can contain:
// - an array of [start, end] data following the order
data: {
columns: [
["data1", -100, 50, [100, 200], [200, 300]],
["data2", -200, 300, [-100, 100], [-50, -30]],
],
type: "bar"
}
// for 'range' types('area-line-range' or 'area-step-range' or 'area-spline-range'), data should contain:
// - an array of [high, mid, low] data following the order
// - or an object with 'high', 'mid' and 'low' key value
data: {
columns: [
["data1",
[150, 140, 110], // or {high:150, mid: 140, low: 110}
[150, 140, 110],
[150, 140, 110]
]
],
type: "area-line-range"
}
// for 'bubble' type, data can contain dimension value:
// - an array of [y, z] data following the order
// - or an object with 'y' and 'z' key value
// 'y' is for y axis coordination and 'z' is the bubble radius value
data: {
columns: [
["data1",
[10, 140], // or {y:10, z: 140}
[100, 30],
[50, 100]
]
],
type: "bubble"
}
// for 'canlestick' type, data should contain:
// - an array of [open, high, low, close, volume(optional)] data following the order
// - or an object with 'open', 'high', 'low', 'close' and 'value'(optional) key value
data: {
columns: [
["data1",
[1000, 1100, 850, 870, 100], // or {open:1000, high: 1100, low: 870, volume: 100}
[870, 1250, 830, 1200] // 'volume' can be omitted
]
],
type: "candlestick"
}
(static) data․empty․label․text :string
- Description:
Set text label to be displayed when there's no data to show.
- ex. Toggling all visible data to not be shown, unloading all current data, etc.
- Source:
- Default Value:
- ""
Set text label to be displayed when there's no data to show.
- ex. Toggling all visible data to not be shown, unloading all current data, etc.
Type:
- string
Example
data: {
empty: {
label: {
text: "No Data"
}
}
}
(static) data․filter :function
- Description:
Filter values to be shown The data value is the same as the returned by
.data()
.
- Source:
- Default Value:
- undefined
- See:
Filter values to be shown
The data value is the same as the returned by .data()
.
Type:
- function
Example
data: {
// filter for id value
filter: function(v) {
// v: [{id: "data1", id_org: "data1", values: [
// {x: 0, value: 130, id: "data2", index: 0}, ...]
// }, ...]
return v.id !== "data1";
}
(static) data․groups :Array
- Description:
Set groups for the data for stacking.
- Source:
- Default Value:
- []
Set groups for the data for stacking.
Type:
- Array
Example
data: {
groups: [
["data1", "data2"],
["data3"]
]
}
(static) data․groupsZeroAs :string
- Description:
Set how zero value will be treated on groups.
Possible values:zero
: 0 will be positioned at absolute axis zero point.positive
: 0 will be positioned at the top of a stack.negative
: 0 will be positioned at the bottom of a stack.
- Source:
- Default Value:
- "positive"
- See:
Set how zero value will be treated on groups.
Possible values:
zero
: 0 will be positioned at absolute axis zero point.positive
: 0 will be positioned at the top of a stack.negative
: 0 will be positioned at the bottom of a stack.
Type:
- string
Example
data: {
groupsZeroAs: "zero" // "positive" or "negative"
}
(static) data․headers :string
- Description:
XHR header value
- NOTE: Should be used with
data.url
option
- NOTE: Should be used with
- Source:
- Default Value:
- undefined
- See:
XHR header value
- NOTE: Should be used with
data.url
option
Type:
- string
Example
data: {
url: "/data/test.csv",
headers: {
"Content-Type": "text/xml",
...
}
}
(static) data․hide :boolean|Array
- Description:
Hide each data when the chart appears.
If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
- Source:
- Default Value:
- false
Hide each data when the chart appears.
If true specified, all of data will be hidden. If multiple ids specified as an array, those will be hidden.
Type:
- boolean | Array
Example
data: {
// all of data will be hidden
hide: true
// specified data will be hidden
hide: ["data1", ...]
}
(static) data․idConverter :function
- Description:
Converts data id value
- Source:
- Default Value:
- function(id) { return id; }
Converts data id value
Type:
- function
Example
data: {
idConverter: function(id) {
// when id is 'data1', converts to be 'data2'
// 'data2' should be given as the initial data value
if (id === "data1") {
return "data2";
} else {
return id;
}
}
}
(static) data․json :Array
- Description:
Parse a JSON object for data. See also data.keys.
- Source:
- Default Value:
- undefined
- See:
Parse a JSON object for data. See also data.keys.
Type:
- Array
Example
data: {
json: [
{name: "www.site1.com", upload: 200, download: 200, total: 400},
{name: "www.site2.com", upload: 100, download: 300, total: 400},
{name: "www.site3.com", upload: 300, download: 200, total: 500},
{name: "www.site4.com", upload: 400, download: 100, total: 500}
],
keys: {
// case 1: specify 'x' key for category axis
x: "name", // 'name' key will be used as category x axis values
value: ["upload", "download"]
// case 2: without 'x' key for non-category axis
value: ["upload", "download"]
}
}
(static) data․keys :string
- Description:
Choose which JSON object keys correspond to desired data.
- NOTE: Only for JSON object given as array.
- Source:
- Default Value:
- undefined
Choose which JSON object keys correspond to desired data.
- NOTE: Only for JSON object given as array.
Type:
- string
Example
data: {
json: [
{name: "www.site1.com", upload: 200, download: 200, total: 400},
{name: "www.site2.com", upload: 100, download: 300, total: 400},
{name: "www.site3.com", upload: 300, download: 200, total: 500},
{name: "www.site4.com", upload: 400, download: 100, total: 500}
],
keys: {
// case 1: specify 'x' key for category axis
x: "name", // 'name' key will be used as category x axis values
value: ["upload", "download"]
// case 2: without 'x' key for non-category axis
value: ["upload", "download"]
}
}
(static) data․labels :object
- Description:
Set labels options
- Source:
- Default Value:
- {}
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
data |
object | Data object Properties
|
Set labels options
Type:
- object
Example
data: {
labels: true,
// or set specific options
labels: {
format: function(v, id, i, texts) {
...
// to multiline, return with '\n' character
return "Line1\nLine2";
},
// it's possible to set for each data
format: {
data1: function(v, id, i, texts) { ... },
...
},
// align text to center of the 'bar' shape (works only for 'bar' type)
centered: true,
// apply backgound color for label texts
backgroundColors: "red",
// set differenct backround colors per dataset
backgroundColors: {
data1: "green",
data2: "yellow"
}
// apply for all label texts
colors: "red",
// set different colors per dataset
// for not specified dataset, will have the default color value
colors: {
data1: "yellow",
data3: "green"
},
// call back for label text color
colors: function(color, d) {
// color: the default data label color string
// data: ex) {x: 0, value: 200, id: "data3", index: 0}
....
return d.value > 200 ? "cyan" : color;
},
// return x, y coordinate position
// apt to handle each text position manually
position: function(type, v, id, i, texts) {
...
return type == "x" ? 10 : 20;
},
// set x, y coordinate position
position: {
x: -10,
y: 10
},
// or set x, y coordinate position by each dataset
position: {
data1: {x: 5, y: 5},
data2: {x: 10, y: -20}
},
// rotate degree for label text
rotate: 90
}
}
(static) data․mimeType :string
- Description:
Used if loading JSON via data.url.
- Available Values:
- json
- csv
- tsv
- Available Values:
- Source:
- Default Value:
- csv
Used if loading JSON via data.url.
- Available Values:
- json
- csv
- tsv
Type:
- string
Example
data: {
mimeType: "json"
}
(static) data․names :object
- Description:
Set custom data name. If a name is set to
null
, the series is omitted from the legend.
- Source:
- Default Value:
- {}
- See:
Set custom data name.
If a name is set to null
, the series is omitted from the legend.
Type:
- object
Example
data: {
names: {
data1: "Data Name 1",
data2: "Data Name 2"
}
}
(static) data․onclick :function
- Description:
Set a callback for click event on each data point.
This callback will be called when each data point clicked and will received
and element as the arguments.d
is the data clicked and element is the element clicked.element
is the current interacting svg element.- In this callback,
this
will be the Chart object.
- Source:
- Default Value:
- function() {}
Set a callback for click event on each data point.
This callback will be called when each data point clicked and will receive d
and element as the arguments.
d
is the data clicked and element is the element clicked.element
is the current interacting svg element.- In this callback,
this
will be the Chart object.
Type:
- function
Example
data: {
onclick: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
// element - <circle>
...
}
}
(static) data․onhidden :function
- Description:
Set a callback for when data is hidden.
The callback will receive hidden data ids in array.
- Source:
- Default Value:
- undefined
Set a callback for when data is hidden.
The callback will receive hidden data ids in array.
Type:
- function
Example
data: {
onhidden: function(ids) {
// ids - ["data1", "data2", ...]
...
}
}
(static) data․onmax :function
- Description:
Set a callback for maximum data
- NOTE: For 'area-line-range', 'area-step-range' and 'area-spline-range',
mid
data will be taken for the comparison
- NOTE: For 'area-line-range', 'area-step-range' and 'area-spline-range',
- Source:
- Default Value:
- undefined
- See:
Set a callback for maximum data
- NOTE: For 'area-line-range', 'area-step-range' and 'area-spline-range',
mid
data will be taken for the comparison
Type:
- function
Example
onmax: function(data) {
// data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
...
}
(static) data․onmin :function
- Description:
Set a callback for minimum data
- NOTE: For 'area-line-range', 'area-step-range' and 'area-spline-range',
mid
data will be taken for the comparison
- NOTE: For 'area-line-range', 'area-step-range' and 'area-spline-range',
- Source:
- Default Value:
- undefined
- See:
Set a callback for minimum data
- NOTE: For 'area-line-range', 'area-step-range' and 'area-spline-range',
mid
data will be taken for the comparison
Type:
- function
Example
onmin: function(data) {
// data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
...
}
(static) data․onout :function
- Description:
Set a callback for mouse/touch out event on each data point.
This callback will be called when mouse cursor or via touch moves out each data point and will received
as the argument.d
is the data where mouse cursor moves out.element
is the current interacting svg element.- In this callback,
this
will be the Chart object.
- Source:
- Default Value:
- function() {}
Set a callback for mouse/touch out event on each data point.
This callback will be called when mouse cursor or via touch moves out each data point and will receive d
as the argument.
d
is the data where mouse cursor moves out.element
is the current interacting svg element.- In this callback,
this
will be the Chart object.
Type:
- function
Example
data: {
onout: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4}
// element - <circle>
...
}
}
(static) data․onover :function
- Description:
Set a callback for mouse/touch over event on each data point.
This callback will be called when mouse cursor or via touch moves onto each data point and will received
andelement
as the argument.d
is the data where mouse cursor moves onto.element
is the current interacting svg element.- In this callback,
this
will be the Chart object.
- Source:
- Default Value:
- function() {}
Set a callback for mouse/touch over event on each data point.
This callback will be called when mouse cursor or via touch moves onto each data point and will receive d
and element
as the argument.
d
is the data where mouse cursor moves onto.element
is the current interacting svg element.- In this callback,
this
will be the Chart object.
Type:
- function
Example
data: {
onover: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4}
// element - <circle>
...
}
}
(static) data․onselected :function
- Description:
Set a callback for on data selection.
- Source:
- Default Value:
- function() {}
Set a callback for on data selection.
Type:
- function
Example
data: {
onselected: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
// element - <circle>
...
}
}
(static) data․onshown :function
- Description:
Set a callback for when data is shown.
The callback will receive shown data ids in array.
- Source:
- Default Value:
- undefined
Set a callback for when data is shown.
The callback will receive shown data ids in array.
Type:
- function
Example
data: {
onshown: function(ids) {
// ids - ["data1", "data2", ...]
...
}
}
(static) data․onunselected :function
- Description:
Set a callback for on data un-selection.
- Source:
- Default Value:
- function() {}
Set a callback for on data un-selection.
Type:
- function
Example
data: {
onunselected: function(d, element) {
// d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
// element - <circle>
...
}
}
(static) data․order :string|function|null
- Description:
This option changes the order of stacking data and pieces of pie/donut.
- If
null
specified, it will be the order the data loaded. - If function specified, it will be used as Array.sort compareFunction
Available Values:
desc
: In descending orderasc
: In ascending ordernull
: It keeps the data load orderfunction(data1, data2) { ... }
: Array.sort compareFunction
NOTE: order function, only works for Axis based types & Arc types, except
Radar
type.- If
- Source:
- Default Value:
- desc
- See:
This option changes the order of stacking data and pieces of pie/donut.
- If
null
specified, it will be the order the data loaded. - If function specified, it will be used as Array.sort compareFunction
Available Values:
desc
: In descending orderasc
: In ascending ordernull
: It keeps the data load orderfunction(data1, data2) { ... }
: Array.sort compareFunction
NOTE: order function, only works for Axis based types & Arc types, except Radar
type.
Type:
- string | function | null
Example
data: {
// in descending order (default)
order: "desc"
// in ascending order
order: "asc"
// keeps data input order
order: null
// specifying sort function
order: function(a, b) {
// param data passed format
// {
// id: "data1", id_org: "data1", values: [
// {x: 5, value: 250, id: "data1", index: 5, name: "data1"},
// ...
// ]
// }
const reducer = (p, c) => p + Math.abs(c.value);
const aSum = a.values.reduce(reducer, 0);
const bSum = b.values.reduce(reducer, 0);
// ascending order
return aSum - bSum;
// descending order
// return bSum - aSum;
}
}
(static) data․regions :object
- Description:
Define regions for each data.
The values must be an array for each data and it should include an object that hasstart
,end
andstyle
.- The object type should be as:
- start {number}: Start data point number. If not set, the start will be the first data point.
- [end] {number}: End data point number. If not set, the end will be the last data point.
- [style.dasharray="2 2"] {string}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area.
- NOTE:
- Supports only line type.
start
andend
values should be in the exact x value range.- Dashes will be applied using
stroke-dasharray
css property when data doesn't contain nullish value(or nullish value withline.connectNull=true
set). - Dashes will be applied via path command when data contains nullish value.
- The object type should be as:
- Source:
- Default Value:
- {}
Define regions for each data.
The values must be an array for each data and it should include an object that has start
, end
and style
.
- The object type should be as:
- start {number}: Start data point number. If not set, the start will be the first data point.
- [end] {number}: End data point number. If not set, the end will be the last data point.
- [style.dasharray="2 2"] {string}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area.
- NOTE:
- Supports only line type.
start
andend
values should be in the exact x value range.- Dashes will be applied using
stroke-dasharray
css property when data doesn't contain nullish value(or nullish value withline.connectNull=true
set). - Dashes will be applied via path command when data contains nullish value.
Type:
- object
Example
data: {
regions: {
data1: [{
start: 1,
end: 2,
style: {
dasharray: "5 2"
}
}, {
start: 3
}],
...
}
}
(static) data․rows :Array
- Description:
Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.
- Source:
- Default Value:
- undefined
- See:
Load data from a multidimensional array, with the first element containing the data names, the following containing related data in that order.
Type:
- Array
Example
data: {
rows: [
["A", "B", "C"],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320]
]
}
// for 'bar' type, data can contain:
// - an array of [start, end] data following the order
data: {
rows: [
["data1", "data2"],
[[100, 150], 120],
[[200, 300], 55],
[[-400, 500], 60]
],
type: "bar"
}
// for 'range' types('area-line-range' or 'area-step-range' or 'area-spline-range'), data should contain:
// - an array of [high, mid, low] data following the order
// - or an object with 'high', 'mid' and 'low' key value
data: {
rows: [
["data1", "data2"],
[
// or {high:150, mid: 140, low: 110}, 120
[150, 140, 110], 120
],
[[155, 130, 115], 55],
[[160, 135, 120], 60]
],
types: {
data1: "area-line-range",
data2: "line"
}
}
// for 'bubble' type, data can contain dimension value:
// - an array of [y, z] data following the order
// - or an object with 'y' and 'z' key value
// 'y' is for y axis coordination and 'z' is the bubble radius value
data: {
rows: [
["data1", "data2"],
[
// or {y:10, z: 140}, 120
[10, 140], 120
],
[[100, 30], 55],
[[50, 100], 60]
],
types: {
data1: "bubble",
data2: "line"
}
}
// for 'canlestick' type, data should contain:
// - an array of [open, high, low, close, volume(optional)] data following the order
// - or an object with 'open', 'high', 'low', 'close' and 'value'(optional) key value
data: {
rows: [
["data1", "data2"],
[
// open, high, low, close, volume (optional)
{open: 1300, high: 1369, low: 1200, close: 1339, volume: 100},
[1000, 1100, 850, 870]
],
[
{open: 1348, high: 1371, low: 1271, close: 1320},
[870, 1250, 830, 1200, 50]
]
],
type: "candlestick"
}
(static) data․selection․draggable :boolean
- Description:
Enable to select data points by dragging. If this option set true, data points can be selected by dragging.
- NOTE: If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
- Source:
- Default Value:
- false
Enable to select data points by dragging. If this option set true, data points can be selected by dragging.
- NOTE: If this option set true, scrolling on the chart will be disabled because dragging event will handle the event.
Type:
- boolean
Example
data: {
selection: {
draggable: true
}
}
(static) data․selection․enabled :boolean
- Description:
Set data selection enabled
If this option is set true, we can select the data points and get/set its state of selection by API (e.g. select, unselect, selected).- NOTE: for ESM imports, needs to import 'selection' exports and instantiate it by calling
selection()
.enabled: selection()
- NOTE: for ESM imports, needs to import 'selection' exports and instantiate it by calling
- Source:
- Default Value:
- false
- See:
Set data selection enabled
If this option is set true, we can select the data points and get/set its state of selection by API (e.g. select, unselect, selected).
- NOTE: for ESM imports, needs to import 'selection' exports and instantiate it by calling
selection()
.enabled: selection()
Type:
- boolean
Examples
data: {
selection: {
enabled: true
}
}
// importing ESM
import bb, {selection} from "billboard.js";
data: {
selection: {
enabled: selection(),
...
}
}
(static) data․selection․grouped :boolean
- Description:
Set grouped selection enabled.
If this option set true, multiple data points that have same x value will be selected by one selection.
- Source:
- Default Value:
- false
Set grouped selection enabled.
If this option set true, multiple data points that have same x value will be selected by one selection.
Type:
- boolean
Example
data: {
selection: {
grouped: true
}
}
(static) data․selection․isselectable :function
- Description:
Set a callback for each data point to determine if it's selectable or not.
The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
- Source:
- Default Value:
- function() { return true; }
Set a callback for each data point to determine if it's selectable or not.
The callback will receive d as an argument and it has some parameters like id, value, index. This callback should return boolean.
Type:
- function
Example
data: {
selection: {
isselectable: function(d) { ... }
}
}
(static) data․selection․multiple :boolean
- Description:
Set multiple data points selection enabled.
If this option set true, multile data points can have the selected state at the same time. If false set, only one data point can have the selected state and the others will be unselected when the new data point is selected.
- Source:
- Default Value:
- true
Set multiple data points selection enabled.
If this option set true, multile data points can have the selected state at the same time. If false set, only one data point can have the selected state and the others will be unselected when the new data point is selected.
Type:
- boolean
Example
data: {
selection: {
multiple: false
}
}
(static) data․stack․normalize :boolean
- Description:
Set the stacking to be normalized
- NOTE:
- For stacking, 'data.groups' option should be set
- y Axis will be set in percentage value (0 ~ 100%)
- Must have postive values
- NOTE:
- Source:
- Default Value:
- false
- See:
Set the stacking to be normalized
- NOTE:
- For stacking, 'data.groups' option should be set
- y Axis will be set in percentage value (0 ~ 100%)
- Must have postive values
Type:
- boolean
Example
data: {
stack: {
normalize: true
}
}
(static) data․type :string
- Description:
Set chart type at once.
If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.
Available Values:- area
- area-line-range
- area-spline
- area-spline-range
- area-step
- area-step-range
- bar
- bubble
- candlestick
- donut
- funnel
- gauge
- line
- pie
- polar
- radar
- scatter
- spline
- step
- treemap
- Source:
- Default Value:
- "line"
NOTE: When importing shapes by ESM, `line()` should be specified for type.
- "line"
Set chart type at once.
If this option is specified, the type will be applied to every data. This setting can be overwritten by data.types.
Available Values:
- area
- area-line-range
- area-spline
- area-spline-range
- area-step
- area-step-range
- bar
- bubble
- candlestick
- donut
- funnel
- gauge
- line
- pie
- polar
- radar
- scatter
- spline
- step
- treemap
Type:
- string
Examples
data: {
type: "bar"
}
// Generate chart by importing ESM
// Import types to be used only, where this will make smaller bundle size.
import bb, {
area,
areaLineRange,
areaSpline,
areaSplineRange,
areaStep,
areaStepRange,
bar,
bubble,
candlestick,
donut,
funnel,
gauge,
line,
pie,
polar,
radar,
scatter,
spline,
step,
treemap
}
bb.generate({
...,
data: {
type: bar()
}
});
(static) data․types :object
- Description:
Set chart type for each data.
This setting overwrites data.type setting.- NOTE:
radar
andtreemap
type can't be combined with other types.
- NOTE:
- Source:
- Default Value:
- {}
Set chart type for each data.
This setting overwrites data.type setting.
- NOTE:
radar
andtreemap
type can't be combined with other types.
Type:
- object
Examples
data: {
types: {
data1: "bar",
data2: "spline"
}
}
// Generate chart by importing ESM
// Import types to be used only, where this will make smaller bundle size.
import bb, {
area,
areaLineRange,
areaSpline,
areaSplineRange,
areaStep,
areaStepRange,
bar,
bubble,
candlestick,
donut,
funnel,
gauge,
line,
pie,
polar,
radar,
scatter,
spline,
step,
treemap
}
bb.generate({
...,
data: {
types: {
data1: bar(),
data1: spline()
}
}
});
(static) data․url :string
- Description:
Load a CSV or JSON file from a URL. NOTE that this will not work if loading via the "file://" protocol as the most browsers will block XMLHTTPRequests.
- Source:
- Default Value:
- undefined
- See:
Load a CSV or JSON file from a URL. NOTE that this will not work if loading via the "file://" protocol as the most browsers will block XMLHTTPRequests.
Type:
- string
Example
data: {
url: "/data/test.csv"
}
(static) data․x :string
- Description:
Specify the key of x values in the data.
We can show the data with non-index x values by this option. This option is required when the type of x axis is timeseries. If this option is set on category axis, the values of the data on the key will be used for category names.
- Source:
- Default Value:
- undefined
Specify the key of x values in the data.
We can show the data with non-index x values by this option. This option is required when the type of x axis is timeseries. If this option is set on category axis, the values of the data on the key will be used for category names.
Type:
- string
Example
data: {
x: "date"
}
(static) data․xFormat :string
- Description:
Set a format specifier to parse string specifed as x.
- Source:
- Default Value:
- %Y-%m-%d
- See:
Set a format specifier to parse string specifed as x.
Type:
- string
Example
data: {
x: "x",
columns: [
["x", "01012019", "02012019", "03012019"],
["data1", 30, 200, 100]
],
// Format specifier to parse as datetime for given 'x' string value
xFormat: "%m%d%Y"
},
axis: {
x: {
type: "timeseries"
}
}
(static) data․xLocaltime :boolean
- Description:
Set localtime format to parse x axis.
- Source:
- Default Value:
- true
Set localtime format to parse x axis.
Type:
- boolean
Example
data: {
xLocaltime: false
}
(static) data․xSort :boolean
- Description:
Sort on x axis.
- NOTE: This option works for lineish(area/line/spline/step) types only.
- Source:
- Default Value:
- true
- See:
Sort on x axis.
- NOTE: This option works for lineish(area/line/spline/step) types only.
Type:
- boolean
Example
data: {
xSort: false,
x: "x",
columns: [
// The line graph will start to be drawn following the x axis sequence
// Below data, wil start drawing x=1: 200, x=2: 300, x=3: 100
["x", 3, 1, 2],
["data1", 100, 200, 300]
]
}
(static) data․xs :object
- Description:
Specify the keys of the x values for each data.
This option can be used if we want to show the data that has different x values.
- Source:
- Default Value:
- {}
Specify the keys of the x values for each data.
This option can be used if we want to show the data that has different x values.
Type:
- object
Example
data: {
xs: {
data1: "x1",
data2: "x2"
}
}
(static) donut :object
- Description:
Set donut options
- Source:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
donut |
object | Donut object Properties
|
Set donut options
Type:
- object
Example
donut: {
label: {
show: false,
format: function(value, ratio, id) {
return d3.format("$")(value);
// to multiline, return with '\n' character
// return value +"%\nLine1\n2Line2";
},
// 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value.
// if data value is below than 0.1, text label will be hidden.
threshold: 0.1,
// set ratio callback. Should return ratio value
ratio: function(d, radius, h) {
...
return ratio;
},
// or set ratio number
ratio: 0.5
},
// disable expand transition for interaction
expand: false,
expand: {
// set duration of expand transition to 500ms.
duration: 500,
// set expand area rate
rate: 1
},
width: 10,
padAngle: 0.2,
startingAngle: 1,
title: "Donut Title"
// when 'arc.needle.show=true' is set, can show current needle value.
title: "Needle value:\n{=NEEDLE_VALUE}",
// title with line break
title: "Title1\nTitle2"
}
(static) funnel :object
- Description:
Set funnel options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
funnel |
object | Funnel object Properties
|
Set funnel options
Type:
- object
Example
funnel: {
neck: {
width: 200,
height: 100,
// or specify as ratio value (relative to the chart size)
width: {
ratio: 0.5
},
height: {
ratio: 0.5
}
}
}
(static) gauge :object
- Description:
Set gauge options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
gauge |
object | Gauge object Properties
|
Set gauge options
Type:
- object
Example
gauge: {
background: "#eee", // will set 'fill' css prop for '.bb-chart-arcs-background' classed element.
fullCircle: false,
label: {
show: false,
format: function(value, ratio, id) {
return value;
// to multiline, return with '\n' character
// return value +"%\nLine1\n2Line2";
},
extents: function(value, isMax) {
return (isMax ? "Max:" : "Min:") + value;
},
// 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value.
// if data value is below than 0.1, text label will be hidden.
threshold: 0.1,
// set ratio callback. Should return ratio value
ratio: function(d, radius, h) {
...
return ratio;
},
// or set ratio number
ratio: 0.5
},
// disable expand transition for interaction
expand: false,
expand: {
// set duration of expand transition to 500ms.
duration: 500,
// set expand area rate
rate: 1
},
// enforce min/max value.
// when given value < min, will render as empty value.
// when value > max, will render to given max value not surpassing it.
enforceMinMax: true,
min: -100,
max: 200,
type: "single" // or 'multi'
title: "Title Text",
// when 'arc.needle.show=true' is set, can show current needle value.
title: "Needle value:\n{=NEEDLE_VALUE}",
units: "%",
width: 10,
startingAngle: -1 * Math.PI / 2,
arcLength: 100,
arcs: {
minWidth: 5
}
}
(static) grid :object
- Description:
Set related options
- Source:
- Default Value:
- undefined
- See:
Properties:
Name | Type | Attributes | Default | Description | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
front |
boolean |
<optional> |
false
|
Set 'grid & focus lines' to be positioned over grid lines and chart elements. |
||||||||||||||||||||
x |
object | Grid x object Properties
|
||||||||||||||||||||||
y |
object | Grid y object Properties
|
||||||||||||||||||||||
focus |
object | Grid focus object Properties
|
||||||||||||||||||||||
lines |
object | Grid lines object Properties
|
Set related options
Type:
- object
Example
grid: {
x: {
show: true,
lines: [
{value: 2, text: "Label on 2"},
{value: 5, text: "Label on 5", class: "label-5"},
{value: 6, text: "Label on 6", position: "start"}
]
},
y: {
show: true,
lines: [
{value: 100, text: "Label on 100"},
{value: 200, text: "Label on 200", class: "label-200"},
{value: 300, text: "Label on 300", position: 'middle'}
],
ticks: 5
},
front: true,
focus: {
show: false,
// Below options are available when 'tooltip.grouped=false' option is set
edge: true,
y: true
},
lines: {
front: false
}
}
(static) interaction :object
- Description:
Interaction options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
interaction |
object | Intersection object Properties
|
Interaction options
Type:
- object
Example
interaction: {
enabled: false,
brighten: false,
inputType: {
mouse: true,
touch: false
// or declare preventDefault explicitly.
// In this case touch inputType is enabled by default
touch: {
preventDefault: true
// or threshold pixel value (pixel moved from touchstart to touchmove)
preventDefault: 5
}
}
}
(static) legend :object
- Description:
Legend options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
legend |
object | Legend object Properties
|
Legend options
Type:
- object
Example
legend: {
show: true,
hide: true,
//or hide: "data1"
//or hide: ["data1", "data2"]
contents: {
bindto: "#legend", // <ul id='legend'></ul>
// will be as: <li style='background-color:#1f77b4'>data1</li>
template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
// or using function
template: function(id, color, data) {
// if you want omit some legend, return falsy value
if (id !== "data1") {
return "<li style='background-color:"+ color +">"+ id +"</li>";
}
}
},
position: "bottom", // bottom, right, inset
inset: {
anchor: "top-right" // top-left, top-right, bottom-left, bottom-right
x: 20,
y: 10,
step: 2
},
equally: false,
padding: 10,
item: {
// will disable default interaction
interaction: false,
// set legend interact on double click
// by double clicking, will make focused clicked dataseries only, hiding all others.
interaction: {
dblclick: true
}
// when set below callback, will disable corresponding default interactions
onclick: function(id) { ... },
onover: function(id) { ... },
onout: function(id) { ... },
// set tile's size
tile: {
// set tile type
type: "circle" // or "rectangle" (default)
// width & height, are only applicable for 'rectangle' legend type
width: 15,
height: 15
// radis is only applicable for 'circle' legend type
r: 10
}
},
format: function(id, dataId) {
// set ellipsis string when length is > 5
// to get full legend value, combine with 'legend.tooltip=true'
if (id.length > 5) {
id = id.substr(0, 5) + "...";
}
return id;
},
tooltip: true,
usePoint: true
}
(static) line :object
- Description:
Set line options
- Source:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
line |
object | Line object Properties
|
Set line options
Type:
- object
Example
line: {
connectNull: true,
classes: [
"line-class1",
"line-class2"
],
step: {
type: "step-after",
// to have cursor/tooltip match to hovered step's point instead of nearest point.
tooltipMatch: true
},
// hide all data points ('point.show=false' also has similar effect)
point: false,
// show data points for only indicated datas
point: [
"data1", "data3"
],
zerobased: false
}
(static) onafterinit :function
- Description:
Set a callback to execute after the chart is initialized
- Source:
- Default Value:
- undefined
Set a callback to execute after the chart is initialized
Type:
- function
Example
onafterinit: function() {
this; // chart instance itself
...
}
(static) onbeforeinit :function
- Description:
Set a callback to execute before the chart is initialized
- Source:
- Default Value:
- undefined
Set a callback to execute before the chart is initialized
Type:
- function
Example
onbeforeinit: function() {
this; // chart instance itself
...
}
(static) onclick :function
- Description:
Set a callback to execute when the chart is clicked.
- Source:
- Default Value:
- undefined
Set a callback to execute when the chart is clicked.
Type:
- function
Example
onclick: function(event) {
this; // chart instance itself
event; // native event object
...
}
(static) oninit :function
- Description:
Set a callback to execute when the chart is initialized.
- Source:
- Default Value:
- undefined
Set a callback to execute when the chart is initialized.
Type:
- function
Example
oninit: function() {
this; // chart instance itself
...
}
(static) onout :function
- Description:
Set a callback to execute when mouse/touch leaves the chart.
- Source:
- Default Value:
- undefined
Set a callback to execute when mouse/touch leaves the chart.
Type:
- function
Example
onout: function(event) {
this; // chart instance itself
event; // native event object
...
}
(static) onover :function
- Description:
Set a callback to execute when mouse/touch enters the chart.
- Source:
- Default Value:
- undefined
Set a callback to execute when mouse/touch enters the chart.
Type:
- function
Example
onover: function(event) {
this; // chart instance itself
event; // native event object
...
}
(static) onrendered :function
- Description:
Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
- Source:
- Default Value:
- undefined
Set a callback which is executed when the chart is rendered. Basically, this callback will be called in each time when the chart is redrawed.
Type:
- function
Example
onrendered: function() {
this; // chart instance itself
...
}
(static) onresize :function
- Description:
Set a callback to execute when user resizes the screen.
- Source:
- Default Value:
- undefined
Set a callback to execute when user resizes the screen.
Type:
- function
Example
onresize: function() {
this; // chart instance itself
...
}
(static) onresized :function
- Description:
Set a callback to execute when screen resize finished.
- Source:
- Default Value:
- undefined
Set a callback to execute when screen resize finished.
Type:
- function
Example
onresized: function() {
this; // chart instance itself
...
}
(static) padding :object
- Description:
The padding of the chart element.
- NOTE: for more information, see the "
Understanding padding
"" wiki documentaion.
- NOTE: for more information, see the "
- Source:
- See:
Properties:
Name | Type | Attributes | Default | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
padding |
object | boolean |
<optional> |
true
|
Set padding of chart, and accepts object or boolean type.
Properties
|
The padding of the chart element.
- NOTE: for more information, see the "
Understanding padding
"" wiki documentaion.
Type:
- object
Example
// remove padding completely.
padding: false,
padding: {
// specifying mode value, will reduce padding and make fit to the container element.
mode: "fit"
// when mode is "fit", all padding values will be relative from fitted value.
// so, 0 will be initial fitted value.
top: 20,
right: 20,
bottom: 20,
left: 20
}
// or specify padding value for each side
padding: {
top: 20,
right: 20,
bottom: 20,
left: 20
}
(static) pie :object
- Description:
Set pie options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
pie |
object | Pie object Properties
|
Set pie options
Type:
- object
Example
pie: {
label: {
show: false,
format: function(value, ratio, id) {
return d3.format("$")(value);
// to multiline, return with '\n' character
// return value +"%\nLine1\n2Line2";
},
// 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value.
// if data value is below than 0.1, text label will be hidden.
threshold: 0.1,
// set ratio callback. Should return ratio value
ratio: function(d, radius, h) {
...
return ratio;
},
// or set ratio number
ratio: 0.5
},
// disable expand transition for interaction
expand: false,
expand: {
// set duration of expand transition to 500ms.
duration: 500,
// set expand area rate
rate: 1
},
innerRadius: 0,
// set different innerRadius for each data
innerRadius: {
data1: 10,
data2: 0
},
outerRadius: 100,
// set different outerRadius for each data
outerRadius: {
data1: 50,
data2: 100
}
padAngle: 0.1,
padding: 0,
startingAngle: 1
}
(static) plugins :Array
- Description:
Set plugins
- Source:
Set plugins
Type:
- Array
Example
plugins: [
new bb.plugin.stanford({ ... }),
new PluginA(),
...
]
(static) point :object
- Description:
Set point options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
point |
object | Point object Properties
|
Set point options
Type:
- object
Example
point: {
show: false,
r: 5,
// or customize the radius
r: function(d) {
...
return r;
},
// will generate follwing radialGradient:
// for more info: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient
// <radualGradient cx="0.3" cy="0.3" r="0.7">
// <stop offset="0.1" stop-color="$DATA_COLOR" stop-opacity="1"></stop>
// <stop offset="0.9" stop-color="$DATA_COLOR" stop-opacity="0"></stop>
// </radialrGradient>
radialGradient: true,
// Or customized gradient
radialGradient: {
cx: 0.3, // cx attributes
cy: 0.5, // cy attributes
r: 0.7, // r attributes
stops: [
// offset, stop-color, stop-opacity
[0, "#7cb5ec", 1],
// setting 'null' for stop-color, will set its original data color
[0.5, null, 0],
// setting 'function' for stop-color, will pass data id as argument.
// It should return color string or null value
[1, function(id) { return id === "data1" ? "red" : "blue"; }, 0],
]
},
focus: {
expand: {
enabled: true,
r: 1
},
only: true
},
// do not set inline 'opacity' css prop setting
opacity: null,
// set every data point's opacity value
opacity: 0.7,
select: {
r: 3
},
// having lower value, means how closer to be for interaction
sensitivity: 3,
// sensitivity based on point's radius
sensitivity: "radius",
// callback for each point to determine the sensitivity
sensitivity: function(d) {
// ex. of argument d:
// ==> {x: 2, value: 55, id: 'data3', index: 2, r: 19.820624179302296}
// returning d.r, will make sensitivity same as point's radius value.
return d.r;
}
// valid values are "circle" or "rectangle"
type: "rectangle",
// or indicate as pattern
pattern: [
"circle",
"rectangle",
"<polygon points='0 6 4 0 -4 0'></polygon>"
],
}
(static) polar :object
- Description:
Set polar options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
polar |
object | Polar object Properties
|
Set polar options
Type:
- object
Example
polar: {
label: {
show: false,
format: function(value, ratio, id) {
return d3.format("$")(value);
// to multiline, return with '\n' character
// return value +"%\nLine1\n2Line2";
},
// 0.1(10%) ratio value means, the minimum ratio to show text label relative to the total value.
// if data value is below than 0.1, text label will be hidden.
threshold: 0.1,
// set ratio callback. Should return ratio value
ratio: function(d, radius, h) {
...
return ratio;
},
// or set ratio number
ratio: 0.5
},
level: {
depth: 3,
max: 500,
show: true,
text: {
format: function(x) {
return x + "%";
},
show: true,
backgroundColor: "red"
}
},
padAngle: 0.1,
padding: 0,
startingAngle: 1
}
(static) radar :object
- Description:
Set radar options
- NOTE:
When x tick text contains
\n
, it's used as line break.
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
radar |
object | Radar object Properties
|
Set radar options
- NOTE:
When x tick text contains
\n
, it's used as line break.
Type:
- object
Example
radar: {
axis: {
max: 50,
line: {
show: false
},
text: {
position: {
x: 0,
y: 0
},
show: false
}
},
direction: {
clockwise: true
},
level: {
show: false,
text: {
format: function(x) {
return x + "%";
},
show: true
}
},
size: {
ratio: 0.7
}
}
(static) regions :Array
- Description:
Show rectangles inside the chart.
This option accepts array including object that has axis, start, end and class. The keys start, end and class are optional. axis must be x, y or y2. start and end should be the value where regions start and end. If not specified, the edge values will be used. If timeseries x axis, date string, Date object and unixtime integer can be used. If class is set, the region element will have it as class.
- Source:
- Default Value:
- []
- See:
Show rectangles inside the chart.
This option accepts array including object that has axis, start, end and class.
The keys start, end and class are optional.
axis must be x, y or y2. start and end should be the value where regions start and end.
If not specified, the edge values will be used.
If timeseries x axis, date string, Date object and unixtime integer can be used.
If class is set, the region element will have it as class.
Type:
- Array
Example
regions: [
{
axis: "x",
start: 1,
end: 4,
class: "region-1-4",
label: {
text: "Region Text",
x: 5, // position relative of the initial x coordinate
y: 5, // position relative of the initial y coordinate
color: "red", // color string
rotated: true // make text to show in vertical or horizontal
}
}
]
(static) render :object
- Description:
Control the render timing
- Source:
- See:
Properties:
Name | Type | Attributes | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
render |
object |
<optional> |
render object Properties
|
Control the render timing
Type:
- object
Examples
render: {
lazy: true,
observe: true
}
// <!-- render.lazy will detect visibility defined -->
// (a) <div id='chart' class='hide'></div>
// (b) <div id='chart' style='display:none'></div>
// render.lazy enabled by default when element is hidden
var chart = bb.generate({ ... });
// chart will be rendered automatically when element's visibility changes
// Note: works only for inlined css property or class attribute changes
document.getElementById('chart').classList.remove('hide') // (a)
document.getElementById('chart').style.display = 'block'; // (b)
// chart won't be rendered and not observing bind element's visiblity changes
var chart = bb.generate({
render: {
lazy: true,
observe: false
}
});
// call at any point when you want to render
chart.flush();
(static) resize :object
- Description:
Set chart resize options
- Source:
Properties:
Name | Type | Attributes | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
resize |
object |
<optional> |
resize object Properties
|
Set chart resize options
Type:
- object
Example
resize: {
auto: false,
// set resize function will be triggered using `setTimer()`
timer: true,
// set resize function will be triggered using `requestIdleCallback()`
timer: false,
// set resize function will be triggered using `setTimer()` with a delay of `100ms`.
timer: 100
}
(static) scatter :object
- Description:
Set scatter options
- Source:
Properties:
Name | Type | Attributes | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
scatter |
object |
<optional> |
scatter object Properties
|
Set scatter options
Type:
- object
Example
scatter: {
connectNull: true,
step: {
type: "step-after"
},
// hide all data points ('point.show=false' also has similar effect)
point: false,
// show data points for only indicated datas
point: [
"data1", "data3"
],
zerobased: false
}
(static) size :object
- Description:
The desired size of the chart element. If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.
- Source:
- See:
Properties:
Name | Type | Attributes | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
size |
object |
<optional> |
size object Properties
|
The desired size of the chart element. If value is not specified, the width of the chart will be calculated by the size of the parent element it's appended to.
Type:
- object
Example
size: {
width: 640,
height: 480
}
(static) spline :object
- Description:
Set spline options
- Available interpolation type values:
- basis (d3.curveBasis)
- basis-closed (d3.curveBasisClosed)
- basis-open (d3.curveBasisOpen)
- bundle (d3.curveBundle)
- cardinal (d3.curveCardinal)
- cardinal-closed (d3.curveCardinalClosed)
- cardinal-open (d3.curveCardinalOpen)
- catmull-rom (d3.curveCatmullRom)
- catmull-rom-closed (d3.curveCatmullRomClosed)
- catmull-rom-open (d3.curveCatmullRomOpen)
- monotone-x (d3.curveMonotoneX)
- monotone-y (d3.curveMonotoneY)
- natural (d3.curveNatural)
- linear-closed (d3.curveLinearClosed)
- linear (d3.curveLinear)
- step (d3.curveStep)
- step-after (d3.curveStepAfter)
- step-before (d3.curveStepBefore)
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
spline |
object | Spline object Properties
|
Set spline options
- Available interpolation type values:
- basis (d3.curveBasis)
- basis-closed (d3.curveBasisClosed)
- basis-open (d3.curveBasisOpen)
- bundle (d3.curveBundle)
- cardinal (d3.curveCardinal)
- cardinal-closed (d3.curveCardinalClosed)
- cardinal-open (d3.curveCardinalOpen)
- catmull-rom (d3.curveCatmullRom)
- catmull-rom-closed (d3.curveCatmullRomClosed)
- catmull-rom-open (d3.curveCatmullRomOpen)
- monotone-x (d3.curveMonotoneX)
- monotone-y (d3.curveMonotoneY)
- natural (d3.curveNatural)
- linear-closed (d3.curveLinearClosed)
- linear (d3.curveLinear)
- step (d3.curveStep)
- step-after (d3.curveStepAfter)
- step-before (d3.curveStepBefore)
Type:
- object
Example
spline: {
interpolation: {
type: "cardinal"
}
}
(static) subchart :object
- Description:
Set subchart options.
- NOTE: Not supported for
bubble
,scatter
and non-Axis based(pie, donut, gauge, radar) types.
- NOTE: Not supported for
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
subchart |
object | Subchart object Properties
|
Set subchart options.
- NOTE: Not supported for
bubble
,scatter
and non-Axis based(pie, donut, gauge, radar) types.
Type:
- object
Examples
subchart: {
show: true,
showHandle: true,
size: {
height: 20
},
init: {
// specify initial range domain selection
range: [1, 2]
},
axis: {
x: {
show: true,
tick: {
show: true,
format: (x) => d3Format(".1f")(x)
text: {
show: false
}
}
}
},
onbrush: function(domain) { ... }
}
// importing ESM
import bb, {subchart} from "billboard.js";
subchart: {
show: subchart(),
...
}
(static) svg :object
- Description:
Set svg element's class name
- Source:
Properties:
Name | Type | Attributes | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
svg |
object |
<optional> |
svg object Properties
|
Set svg element's class name
Type:
- object
Example
svg: {
classname: "test_class"
}
(static) title :object
- Description:
Set title options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
title |
object | Title object Properties
|
Set title options
Type:
- object
Example
title: {
text: "Title Text",
// or Multiline title text
text: "Main title text\nSub title text",
padding: {
top: 10,
right: 10,
bottom: 10,
left: 10
},
position: "center"
}
(static) tooltip :object
- Description:
Tooltip options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
tooltip |
object | Tooltip object Properties
|
Tooltip options
Type:
- object
Example
tooltip: {
show: true,
doNotHide: true,
grouped: false,
format: {
title: function(x) { return "Data " + x; },
name: function(name, ratio, id, index) { return name; },
// If data row contains multiple or ranged(ex. candlestick, area range, etc.) value,
// formatter will be called as value length times.
value: function(value, ratio, id, index) { return ratio; }
},
position: function(data, width, height, element, pos) {
// data: [{x, index, id, name, value}, ...]
// width: Tooltip width
// height: Tooltip height
// element: Tooltip event bound element
// pos: {
// x: Current mouse event x position,
// y: Current mouse event y position,
// xAxis: Current x Axis position (the value is given for axis based chart type only)
// yAxis: Current y Axis position value or function(the value is given for axis based chart type only)
// }
// yAxis will work differently per data lenghts
// - a) Single data: `yAxis` will return `number` value
// - b) Multiple data: `yAxis` will return a function with property value
// a) Single data:
// Get y coordinate
pos.yAxis; // y axis coordinate value of current data point
// b) Multiple data:
// Get y coordinate of value 500, where 'data1' scales(y or y2).
// When 'data.axes' option is used, data can bound to different axes.
// - when "data.axes={data1: 'y'}", wil return y value from y axis scale.
// - when "data.axes={data1: 'y2'}", wil return y value from y2 axis scale.
pos.yAxis(500, "data1"); // will return y coordinate value of data1
pos.yAxis(500); // get y coordinate with value of 500, using y axis scale
pos.yAxis(500, null, "y2"); // get y coordinate with value of 500, using y2 axis scale
return {
top: 0,
left: 0
}
},
contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
return ... // formatted html as you want
},
// specify tooltip contents using template
// - example of HTML returned:
// <ul class="bb-tooltip">
// <li class="bb-tooltip-name-data1"><span>250</span><br><span style="color:#00c73c">data1</span></li>
// <li class="bb-tooltip-name-data2"><span>50</span><br><span style="color:#fa7171">data2</span></li>
// </ul>
contents: {
bindto: "#tooltip",
template: '<ul class={=CLASS_TOOLTIP}>{{' +
'<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span><br>' +
'<span style=color:{=COLOR}>{=NAME}</span></li>' +
'}}</ul>'
}
// with additional text value
// - example of HTML returned:
// <ul class="bb-tooltip">
// <li class="bb-tooltip-name-data1"><span>250</span><br>comment1<span style="color:#00c73c">data1</span>text1</li>
// <li class="bb-tooltip-name-data2"><span>50</span><br>comment2<span style="color:#fa7171">data2</span>text2</li>
// </ul>
contents: {
bindto: "#tooltip",
text: {
// a) 'key' name is used as substitution within template as '{=KEY}'
// b) the length should match with the data length
VAR1: ["text1", "text2"],
VAR2: ["comment1", "comment2"],
},
template: '<ul class={=CLASS_TOOLTIP}>{{' +
'<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span>{=VAR2}<br>' +
'<span style=color:{=COLOR}>{=NAME}</span>{=VAR1}</li>' +
'}}</ul>'
}
// sort tooltip data value display in ascending order
order: "asc",
// specifying sort function
order: function(a, b) {
// param data passed format
{x: 5, value: 250, id: "data1", index: 5, name: "data1"}
...
},
// show at the initialization
init: {
show: true,
x: 2, // x Axis index (or index for Arc(donut, gauge, pie) types)
position: {
top: "150px", // specify as number or as string with 'px' unit string
left: 250 // specify as number or as string with 'px' unit string
}
},
// fires prior tooltip is shown
onshow: function(selectedData) {
// current dataset selected
// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
selectedData;
},
// fires prior tooltip is hidden
onhide: function(selectedData) {
// current dataset selected
// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
selectedData;
},
// fires after tooltip is shown
onshown: function(selectedData) {
// current dataset selected
// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
selectedData;
},
// fires after tooltip is hidden
onhidden: function(selectedData) {
// current dataset selected
// ==> [{x: 4, value: 150, id: "data2", index: 4, name: "data2"}, ...]
selectedData;
},
// Link any tooltips when multiple charts are on the screen where same x coordinates are available
// Useful for timeseries correlation
linked: true,
// Specify name to interact those with the same name only.
linked: {
name: "some-group"
}
}
(static) transition :object
- Description:
Set duration of transition (in milliseconds) for chart animation.
- NOTE: If
0
ornull
set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.
- NOTE: If
- Source:
Properties:
Name | Type | Attributes | Description | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
transition |
object |
<optional> |
transition object Properties
|
Set duration of transition (in milliseconds) for chart animation.
- NOTE: If
0
ornull
set, transition will be skipped. So, this makes initial rendering faster especially in case you have a lot of data.
Type:
- object
Example
transition: {
duration: 500
}
(static) treemap :object
- Description:
Set treemap options
- Source:
- See:
Properties:
Name | Type | Description | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
treemap |
object | Treemap object Properties
|
Set treemap options
Type:
- object
Example
treemap: {
// "binary", "dice", "slice", "sliceDice", "squrify", "resquarify"
tile: "dice",
label: {
// show or hide label text
show: false,
// set label text formatter
format: function(value, ratio, id) {
return d3.format("$")(value);
// to multiline, return with '\n' character
// return value +"%\nLine1\n2Line2";
},
// set ratio number
ratio: 0.05
}
}
(static) zoom :object
- Description:
Set zoom options
- Source:
- See:
Properties:
Name | Type | Description | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
zoom |
object | Zoom object Properties
|
Set zoom options
Type:
- object
Examples
zoom: {
enabled: true,
type: "drag",
rescale: true,
extent: [1, 100] // enable more zooming
x: {
min: -1, // set min range
max: 10 // set max range
},
onzoomstart: function(event) { ... },
onzoom: function(domain) { ... },
onzoomend: function(domain) { ... },
// show reset button when is zoomed-in
resetButton: true,
resetButton: {
// onclick callback when reset button is clicked
onclick: function(button) {
button; // Reset button element reference
...
},
// customized text value for reset zoom button
text: "Unzoom"
}
}
// importing ESM
import bb, {zoom} from "billboard.js";
zoom: {
enabled: zoom(),
...
}