Options

Members

(static) arc :object

Description:

• Set arc options

Source:

• config/Options/shape/arc.ts, line 10

See:

• Demo: Donut corner radius

• Demo: Gauge corner radius

• Demo: Donut corner radius

• Demo: Donut needle

• Demo: Gauge needle

Properties:

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

(static) area :object

Description:

• Set area options

Source:

• config/Options/shape/area.ts, line 10

See:

• MDN's <linearGradient>, <stop>

• Demo

• Demo: above

• Demo: below

• Demo: linearGradient

Properties:

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

• config/Options/axis/axis.ts, line 13

Default Value:

• false

Type:

• boolean

Example

axis: {
  rotated: true
}

(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:

• config/Options/axis/x.ts, line 634

See:

• Demo

• Demo: Domain

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:

• config/Options/axis/x.ts, line 80

Default Value:

• []

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:

• config/Options/axis/x.ts, line 10

Default Value:

• true

See:

• Demo

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:

• config/Options/axis/x.ts, line 563

Default Value:

• undefined

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․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:

• config/Options/axis/x.ts, line 548

Default Value:

• undefined

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 be right -> left.

Source:

• config/Options/axis/x.ts, line 489

Default Value:

• false

See:

• Demo

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

Source:

• config/Options/axis/x.ts, line 592

Default Value:

• undefined

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:

• config/Options/axis/x.ts, line 65

Default Value:

• true

Type:

• boolean

Example

axis: {
  x: {
    localtime: false
  }
}

(static) axis․x․max

Description:

• Set max value of x axis range.

Source:

• config/Options/axis/x.ts, line 441

Properties:

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:

• config/Options/axis/x.ts, line 465

Properties:

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

Source:

• config/Options/axis/x.ts, line 505

Default Value:

• {}

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:

• config/Options/axis/x.ts, line 22

Default Value:

• true

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

Source:

• config/Options/axis/x.ts, line 313

Default Value:

• false

See:

• Demo

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:

• config/Options/axis/x.ts, line 95

Default Value:

• false

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:

• config/Options/axis/x.ts, line 196

Default Value:

• undefined

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, set axis.x.tick.culling.lines=false.
  • false: all of ticks will be shown.
    
    The number of ticks to be shown can be chaned by axis.x.tick.culling.max.

Source:

• config/Options/axis/x.ts, line 139

Default Value:

• `true` for indexed axis and timeseries axis, `false` for category axis

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:

• config/Options/axis/x.ts, line 178

Default Value:

• true

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:

• config/Options/axis/x.ts, line 160

Default Value:

• 10

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:

• config/Options/axis/x.ts, line 270

Default Value:

• true

See:

• Demo

• Demo: for timeseries zoom

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:

• config/Options/axis/x.ts, line 111

Default Value:

• undefined

See:

• D3's time specifier

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:

• config/Options/axis/x.ts, line 377

Default Value:

• true

See:

• Demo

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:

• config/Options/axis/x.ts, line 361

Default Value:

• true

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 is false.
  • As long as axis_x_tick_fit is set to true it will calculate an overflow for the y2 axis and add this value to the right padding.

Source:

• config/Options/axis/x.ts, line 341

Default Value:

• 0

See:

• Demo

Type:

• number

Example

axis: {
  x: {
    tick: {
      rotate: 60
    }
  }
}

(static) axis․x․tick․show :boolean

Description:

• Show or hide x axis tick line.

Source:

• config/Options/axis/x.ts, line 213

Default Value:

• true

See:

• Demo

Type:

• boolean

Example

axis: {
  x: {
    tick: {
      show: false
    }
  }
}

(static) axis․x․tick․text․position :object

Description:

• Set the x Axis tick text's position relatively its original position

Source:

• config/Options/axis/x.ts, line 249

Default Value:

• {x: 0, y:0}

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:

• config/Options/axis/x.ts, line 230

Default Value:

• true

See:

• Demo

Type:

• boolean

Example

axis: {
  x: {
    tick: {
      text: {
          show: false
      }
    }
  }
}

(static) axis․x․tick․tooltip :boolean

Description:

• Set to display system tooltip(via 'title' attribute) for tick text

  • NOTE: Only available for category axis type (axis.x.type='category')

Source:

• config/Options/axis/x.ts, line 424

Default Value:

• false

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 with timeseries data and the x values will be parsed accoding to the type of the value and data.xFormat option.

Source:

• config/Options/axis/x.ts, line 290

Default Value:

• null

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:

• config/Options/axis/x.ts, line 406

Default Value:

• null

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.

Source:

• config/Options/axis/x.ts, line 36

Default Value:

• indexed

See:

• Demo: indexed

• Demo: timeseries

• Demo: category

• Demo: log

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:

• config/Options/axis/y2.ts, line 412

See:

• Demo

• Demo: Domain

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:

• config/Options/axis/y2.ts, line 97

Default Value:

• undefined

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:

• config/Options/axis/y2.ts, line 397

Default Value:

• undefined

Type:

• Array

Example

axis: {
  y2: {
    default: [0, 1000]
  }
}

(static) axis․y2․inner :boolean

Description:

• Show y2 axis inside of the chart.

Source:

• config/Options/axis/y2.ts, line 111

Default Value:

• false

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 be top -> bottom.

Source:

• config/Options/axis/y2.ts, line 81

Default Value:

• false

See:

• Demo

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:

• config/Options/axis/y2.ts, line 125

Default Value:

• {}

See:

• axis.x.label for position string value.

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:

• config/Options/axis/y2.ts, line 53

Default Value:

• undefined

Type:

• number

Example

axis: {
  y2: {
    max: 1000
  }
}

(static) axis․y2․min :number

Description:

• Set min value of y2 axis.

Source:

• config/Options/axis/y2.ts, line 67

Default Value:

• undefined

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.

Source:

• config/Options/axis/y2.ts, line 372

Default Value:

• {}

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.

Source:

• config/Options/axis/y2.ts, line 10

Default Value:

• false

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:

• config/Options/axis/y2.ts, line 279

Default Value:

• undefined

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, set axis.y2.tick.culling.lines=false.
  • false: all of ticks will be shown.
    
    The number of ticks to be shown can be chaned by axis.y2.tick.culling.max.

Source:

• config/Options/axis/y2.ts, line 168

Default Value:

• false

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:

• config/Options/axis/y2.ts, line 206

Default Value:

• true

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:

• config/Options/axis/y2.ts, line 188

Default Value:

• 5

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:

• config/Options/axis/y2.ts, line 150

Default Value:

• undefined

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:

• config/Options/axis/y2.ts, line 224

Default Value:

• true

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 is true.

Source:

• config/Options/axis/y2.ts, line 261

Default Value:

• 0

Type:

• number

Example

axis: {
  y2: {
    tick: {
      rotate: 60
    }
  }
}

(static) axis․y2․tick․show :boolean

Description:

• Show or hide y2 axis tick line.

Source:

• config/Options/axis/y2.ts, line 296

Default Value:

• true

See:

• Demo

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 or axis.y2.tick.values options are set.

Source:

• config/Options/axis/y2.ts, line 313

See:

• Demo

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:

• config/Options/axis/y2.ts, line 351

Default Value:

• {x: 0, y:0}

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:

• config/Options/axis/y2.ts, line 332

Default Value:

• true

See:

• Demo

Type:

• boolean

Example

axis: {
  y2: {
    tick: {
      text: {
          show: false
      }
    }
  }
}

(static) axis․y2․tick․values :Array|function

Description:

• Set y2 axis tick values manually.

Source:

• config/Options/axis/y2.ts, line 240

Default Value:

• null

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:

• config/Options/axis/y2.ts, line 27

Default Value:

• "indexed"

See:

• Demo: log

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:

• config/Options/axis/y.ts, line 450

See:

• Demo

• Demo: Domain

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:

• config/Options/axis/y.ts, line 109

Default Value:

• undefined

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 when axis.y.inner option is true.

Source:

• config/Options/axis/y.ts, line 10

Default Value:

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

• config/Options/axis/y.ts, line 435

Default Value:

• undefined

Type:

• Array

Example

axis: {
  y: {
    default: [0, 1000]
  }
}

(static) axis․y․inner :boolean

Description:

• Show y axis inside of the chart.

Source:

• config/Options/axis/y.ts, line 123

Default Value:

• false

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 be top -> bottom.

Source:

• config/Options/axis/y.ts, line 93

Default Value:

• false

See:

• Demo

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:

• config/Options/axis/y.ts, line 137

Default Value:

• {}

See:

• axis.x.label for position string value.

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:

• config/Options/axis/y.ts, line 62

Default Value:

• undefined

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:

• config/Options/axis/y.ts, line 77

Default Value:

• undefined

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.

Source:

• config/Options/axis/y.ts, line 409

Default Value:

• {}

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:

• config/Options/axis/y.ts, line 22

Default Value:

• true

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:

• config/Options/axis/y.ts, line 292

Default Value:

• undefined

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, set axis.y.tick.culling.lines=false.
  • false: all of ticks will be shown.
    
    The number of ticks to be shown can be chaned by axis.y.tick.culling.max.

Source:

• config/Options/axis/y.ts, line 181

Default Value:

• false

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:

• config/Options/axis/y.ts, line 219

Default Value:

• true

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:

• config/Options/axis/y.ts, line 201

Default Value:

• 5

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:

• config/Options/axis/y.ts, line 162

Default Value:

• undefined

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:

• config/Options/axis/y.ts, line 237

Default Value:

• true

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 is true.

Source:

• config/Options/axis/y.ts, line 274

Default Value:

• 0

Type:

• number

Example

axis: {
  y: {
    tick: {
      rotate: 60
    }
  }
}

(static) axis․y․tick․show :boolean

Description:

• Show or hide y axis tick line.

Source:

• config/Options/axis/y.ts, line 309

Default Value:

• true

See:

• Demo

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 or axis.y.tick.values options are set.

Source:

• config/Options/axis/y.ts, line 326

See:

• Demo

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:

• config/Options/axis/y.ts, line 364

Default Value:

• {x: 0, y:0}

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:

• config/Options/axis/y.ts, line 345

Default Value:

• true

See:

• Demo

Type:

• boolean

Example

axis: {
  y: {
    tick: {
      text: {
          show: false
      }
    }
  }
}

(static) axis․y․tick․values :Array|function

Description:

• Set y axis tick values manually.

Source:

• config/Options/axis/y.ts, line 253

Default Value:

• null

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:

• config/Options/axis/y.ts, line 36

Default Value:

• "indexed"

See:

• Demo: log

Type:

• string

Example

axis: {
  y: {
    type: "log"
  }
}

(static) background

Description:

• Set chart background.

Source:

• config/Options/common/main.ts, line 37

See:

• Demo

Properties:

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:

• config/Options/shape/bar.ts, line 10

See:

• Demo: bar front

• Demo: bar indices

• Demo: bar overlap

• Demo: bar padding

• Demo: bar radius

• Demo: bar width

• Demo: bar width variant

Properties:

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

Source:

• config/Options/common/main.ts, line 10

Default Value:

• #chart

Properties:

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:

• config/Options/common/boost.ts, line 10

Properties:

Type:

• object

Example

boost: {
     useCssRule: true,
     useWorker: false
 }

(static) bubble :object

Description:

• Set bubble options

Source:

• config/Options/shape/bubble.ts, line 10

Properties:

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:

• config/Options/shape/candlestick.ts, line 10

See:

• Demo

Properties:

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:

• config/Options/common/main.ts, line 57

Default Value:

• true

See:

• Demo

Type:

• boolean

Example

// don't set 'clip-path' attribute
clipPath: false

(static) color :object

Description:

• Set color of the data values

Source:

• config/Options/common/color.ts, line 10

Properties:

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:

• config/Options/data/axis.ts, line 83

Default Value:

• {}

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:

• config/Options/data/data.ts, line 56

Default Value:

• {}

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:

• config/Options/data/data.ts, line 267

Default Value:

• undefined

See:

• Demo

Type:

• function

Example

data: {
  color: function(color, d) { ... }
}

(static) data․colors :object

Description:

• Set color for each data.

Source:

• config/Options/data/data.ts, line 281

Default Value:

• {}

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:

• config/Options/data/data.ts, line 718

Default Value:

• undefined

See:

• Demo

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

• config/Options/data/data.ts, line 825

Default Value:

• ""

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:

• config/Options/data/data.ts, line 432

Default Value:

• undefined

See:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

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:

• config/Options/data/data.ts, line 235

Default Value:

• []

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:

• config/Options/data/data.ts, line 250

Default Value:

• "positive"

See:

• Demo

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

Source:

• config/Options/data/data.ts, line 586

Default Value:

• undefined

See:

• https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader

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:

• config/Options/data/data.ts, line 415

Default Value:

• false

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:

• config/Options/data/data.ts, line 19

Default Value:

• function(id) { return id; }

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:

• config/Options/data/data.ts, line 604

Default Value:

• undefined

See:

• data․keys

• Demo

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: {
      // x: "name", // it's possible to specify 'x' when 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:

• config/Options/data/data.ts, line 803

Default Value:

• undefined

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: {
      // x: "name", // it's possible to specify 'x' when category axis
      value: ["upload", "download"]
    }
}

(static) data․labels :object

Description:

• Set labels options

Source:

• config/Options/data/data.ts, line 299

Default Value:

• {}

See:

• Demo

• Demo: label colors

• Demo: label format

• Demo: label multiline

• Demo: label overlap

• Demo: label position

• Demo: label rotate

Properties:

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

Source:

• config/Options/data/data.ts, line 787

Default Value:

• csv

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:

• config/Options/data/data.ts, line 39

Default Value:

• {}

See:

• Demo

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

Source:

• config/Options/data/data.ts, line 451

Default Value:

• function() {}

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:

• config/Options/data/data.ts, line 527

Default Value:

• undefined

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' and 'area-spline-range', mid data will be taken for the comparison

Source:

• config/Options/data/data.ts, line 558

Default Value:

• undefined

See:

• Demo

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' and 'area-spline-range', mid data will be taken for the comparison

Source:

• config/Options/data/data.ts, line 543

Default Value:

• undefined

See:

• Demo

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

Source:

• config/Options/data/data.ts, line 491

Default Value:

• function() {}

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

Source:

• config/Options/data/data.ts, line 471

Default Value:

• function() {}

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:

• config/Options/data/selection.ts, line 99

Default Value:

• function() {}

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:

• config/Options/data/data.ts, line 511

Default Value:

• undefined

Type:

• function

Example

data: {
   onshown: function(ids) {
     // ids - ["data1", "data2", ...]
     ...
   }
 }

(static) data․onunselected :function

Description:

• Set a callback for on data un-selection.

Source:

• config/Options/data/selection.ts, line 115

Default Value:

• function() {}

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 order
  • asc: In ascending order
  • null: It keeps the data load order
  • function(data1, data2) { ... }: Array.sort compareFunction

  NOTE: order function, only works for Axis based types & Arc types, except Radar type.

Source:

• config/Options/data/data.ts, line 184

Default Value:

• desc

See:

• Demo

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 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"] {object}: The first number specifies a distance for the filled area, and the second a distance for the unfilled area.
  • NOTE: Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.

Source:

• config/Options/data/axis.ts, line 99

Default 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:

• config/Options/data/data.ts, line 627

Default Value:

• undefined

See:

• Demo

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

• config/Options/data/selection.ts, line 83

Default Value:

• false

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()

Source:

• config/Options/data/selection.ts, line 10

Default Value:

• false

See:

• Demo

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:

• config/Options/data/selection.ts, line 38

Default Value:

• false

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:

• config/Options/data/selection.ts, line 53

Default Value:

• function() { return true; }

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:

• config/Options/data/selection.ts, line 68

Default Value:

• true

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

Source:

• config/Options/data/axis.ts, line 128

Default Value:

• false

See:

• Demo

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
  • bar
  • bubble
  • candlestick
  • donut
  • gauge
  • line
  • pie
  • polar
  • radar
  • scatter
  • spline
  • step
  • treemap

Source:

• config/Options/data/data.ts, line 72

Default Value:

• "line"
  NOTE: When importing shapes by ESM, `line()` should be specified for type.

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,
  bar,
  bubble,
  candlestick,
  donut,
  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 and treemap type can't be combined with other types.

Source:

• config/Options/data/data.ts, line 134

Default Value:

• {}

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,
  bar,
  bubble,
  candlestick,
  donut,
  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:

• config/Options/data/data.ts, line 573

Default Value:

• undefined

See:

• Demo

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:

• config/Options/data/data.ts, line 6

Default Value:

• undefined

Type:

• string

Example

data: {
  x: "date"
}

(static) data․xFormat :string

Description:

• Set a format specifier to parse string specifed as x.

Source:

• config/Options/data/axis.ts, line 26

Default Value:

• %Y-%m-%d

See:

• D3's time specifier

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:

• config/Options/data/axis.ts, line 50

Default Value:

• true

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:

• config/Options/data/axis.ts, line 62

Default Value:

• true

See:

• Demo

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:

• config/Options/data/axis.ts, line 10

Default Value:

• {}

Type:

• object

Example

data: {
  xs: {
     data1: "x1",
     data2: "x2"
  }
}

(static) donut :object

Description:

• Set donut options

Source:

• config/Options/shape/donut.ts, line 10

Properties:

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) gauge :object

Description:

• Set gauge options

Source:

• config/Options/shape/gauge.ts, line 10

See:

• Demo: archLength

• Demo: startingAngle

Properties:

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

     // disable expand transition for interaction
     expand: false,

     expand: {
     	// set duration of expand transition to 500ms.
         duration: 500,

     	// set expand area rate
         rate: 1
     },

     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:

• config/Options/common/grid.ts, line 3

Default Value:

• undefined

See:

• Demo

• Demo: X Grid Lines

• Demo: Y Grid Lines

Properties:

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:

• config/Options/interaction/interaction.ts, line 10

See:

• Demo: touch.preventDefault

Properties:

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:

• config/Options/common/legend.ts, line 10

See:

• Demo: item.interaction

• Demo: item.tile.type

• Demo: position

• Demo: contents.template

• Demo: usePoint

Properties:

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
         }
     },
     usePoint: true
 }

(static) line :object

Description:

• Set line options

Source:

• config/Options/shape/line.ts, line 10

Properties:

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:

• config/Options/common/main.ts, line 274

Default Value:

• undefined

Type:

• function

Example

onafterinit: function() {
  this; // chart instance itself
  ...
}

(static) onbeforeinit :function

Description:

• Set a callback to execute before the chart is initialized

Source:

• config/Options/common/main.ts, line 248

Default Value:

• undefined

Type:

• function

Example

onbeforeinit: function() {
  this; // chart instance itself
  ...
}

(static) onclick :function

Description:

• Set a callback to execute when the chart is clicked.

Source:

• config/Options/common/main.ts, line 180

Default Value:

• undefined

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:

• config/Options/common/main.ts, line 261

Default Value:

• undefined

Type:

• function

Example

oninit: function() {
  this; // chart instance itself
  ...
}

(static) onout :function