Options

Options

new Options()

Source:
See:
  • bb.generate to use these options on generating the chart

Class to set options on generating chart.

  • It's instantiated internally, not exposed for public.

Members

(static) area :Object

Source:
Properties:
Name Type Attributes Default Description
area.zerobased Boolean <optional>
 true

Set if min or max value will be 0 on area chart.
area.above Boolean <optional>
 false

Set area options

Type:
  • Object
Example
area: {
     zerobased: false,
     above: true
 }

(static) axis․rotated :Boolean

Source:
Default Value:
  • false

Switch x and y axis position.

Type:
  • Boolean
Example
axis: {
  rotated: true
}

(static) axis․x․categories :Array

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․extent :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
Example
axis: {
  x: {
    // [[x0, y0], [x1, y1]], where [x0, y0] is the top-left corner and [x1, y1] is the bottom-right corner
    // https://github.com/d3/d3-brush/blob/master/src/brush.js#L521
    extent: [
        [0, 0], [200, 60]
    ]
  }
}

(static) axis․x․height :Number

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․label :String|Object

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

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

Source:
Default Value:
  • undefined

Set max value of x axis range.

Type:
  • Number
Example
axis: {
  x: {
    max: 100
  }
}

(static) axis․x․min :Number

Source:
Default Value:
  • undefined

Set min value of x axis range.

Type:
  • Number
Example
axis: {
  x: {
    min: -100
  }
}

(static) axis․x․padding :Object

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.

  • NOTE: The padding values aren't based on pixels. It differs according axis types
    • category: 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
Type:
  • Object
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
    }
  }
}

(static) axis․x․show :Boolean

Source:
Default Value:
  • true

Show or hide x axis.

Type:
  • Boolean
Example
axis: {
  x: {
    show: false
  }
}

(static) axis․x․tick․centered :Boolean

Source:
Default Value:
  • false

Centerise ticks on category axis.

Type:
  • Boolean
Example
axis: {
  x: {
    tick: {
      centered: true
    }
  }
}

(static) axis․x․tick․count :Number

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

Source:
Default Value:
  • - true for indexed axis and timeseries axis - false for category axis

Setting for culling ticks.

If true is set, the ticks will be culled, then only limitted tick text will be shown. This option does not hide the tick lines. If false is set, all of ticks will be shown.

We can change the number of ticks to be shown by axis.x.tick.culling.max.

Type:
  • Boolean
Example
axis: {
  x: {
    tick: {
      culling: false
    }
  }
}

(static) axis․x․tick․culling․max :Number

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

Source:
Default Value:
  • true

Fit x axis ticks.

If true set, the ticks will be positioned nicely. If false set, the ticks will be positioned according to x value of the data points.

Type:
  • Boolean
Example
axis: {
  x: {
    tick: {
      fit: false
    }
  }
}

(static) axis․x․tick․format :function

Source:
Default Value:
  • undefined

A function to format tick value. Format string is also available for timeseries data.

Type:
  • function
Example
axis: {
  x: {
    tick: {
      format: function(x) {
          return x.getFullYear();
      }
    }
  }
}

(static) axis․x․tick․multiline :Boolean

Source:
Default Value:
  • true

Set tick text to be multiline

Type:
  • Boolean
Example
axis: {
  x: {
    tick: {
      multiline: false
    }
  }
}

(static) axis․x․tick․outer :Boolean

Source:
Default Value:
  • true

Show x axis outer tick.

Type:
  • Boolean
Example
axis: {
  x: {
    tick: {
      outer: false
    }
  }
}

(static) axis․x․tick․rotate :Number

Source:
Default Value:
  • 0

Rotate x axis tick text.
If you set negative value, it will rotate to opposite direction.

Type:
  • Number
Example
axis: {
  x: {
    tick: {
      rotate: 60
    }
  }
}

(static) axis․x․tick․values :Array

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
Example
axis: {
  x: {
    tick: {
      values: [1, 2, 4, 8, 16, 32, ...]
    }
  }
}

(static) axis․x․tick․width :Number

Source:
Default Value:
  • null

Set tick width

Type:
  • Number
Example
axis: {
  x: {
    tick: {
      width: 50
    }
  }
}

(static) axis․x․type :String

Source:
Default Value:
  • indexed

Set type of x axis.

Available Values:

  • timeseries
  • category
  • indexed
Type:
  • String
Example
axis: {
  x: {
    type: "timeseries"
  }
}

(static) axis․y2․center :Number

Source:
Default Value:
  • undefined

Set center value of y2 axis.

Type:
  • Number
Example
axis: {
  y2: {
    center: 0
  }
}

(static) axis․y2․default :Array

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

Source:
Default Value:
  • false

Show y2 axis inside of the chart.

Type:
  • Boolean
Example
axis: {
  y2: {
    inner: true
  }
}

(static) axis․y2․inverted :Boolean

Source:
Default Value:
  • false

Change the direction of y2 axis.

If true set, the direction will be from the top to the bottom.

Type:
  • Boolean
Example
axis: {
  y2: {
    inverted: true
  }
}

(static) axis․y2․label :String|Object

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

Source:
Default Value:
  • undefined

Set max value of y2 axis.

Type:
  • Number
Example
axis: {
  y2: {
    max: 1000
  }
}

(static) axis․y2․min :Number

Source:
Default Value:
  • undefined

Set min value of y2 axis.

Type:
  • Number
Example
axis: {
  y2: {
    min: -1000
  }
}

(static) axis․y2․padding :Object

Source:
Default Value:
  • {}

Set the number of y2 axis ticks.

  • NOTE: This works in the same way as axis.y.tick.count.
Type:
  • Object
Example
axis: {
  y2: {
    padding: {
      top: 100,
      bottom: 100
    }
  }
}

(static) axis․y2․show :Boolean

Source:
Default Value:
  • false

Show or hide y2 axis.

Type:
  • Boolean
Example
axis: {
  y2: {
    show: true
  }
}

(static) axis․y2․tick․count :Number

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

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

Source:
Default Value:
  • true

Show or hide y2 axis outer tick.

Type:
  • Boolean
Example
axis: {
  y2: {
    tick: {
      outer: false
    }
  }
}

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

Source:
Default Value:
  • null

Set y2 axis tick values manually.

Type:
  • Array
Example
axis: {
  y2: {
    tick: {
      values: [100, 1000, 10000]
    }
  }
}

(static) axis․y․center :Number

Source:
Default Value:
  • undefined

Set center value of y axis.

Type:
  • Number
Example
axis: {
  y: {
    center: 0
  }
}

(static) axis․y․default :Array

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

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: {
  x: {
    tick: {
      format: function(x) {
          return x.getFullYear();
      }
    }
  }
}

(static) axis․y․inner :Boolean

Source:
Default Value:
  • false

Show y axis inside of the chart.

Type:
  • Boolean
Example
axis: {
  y: {
    inner: true
  }
}

(static) axis․y․inverted :Boolean

Source:
Default Value:
  • false

Change the direction of y axis.

If true set, the direction will be from the top to the bottom.

Type:
  • Boolean
Example
axis: {
  y: {
    inverted: true
  }
}

(static) axis․y․label :String|Object

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

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

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

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: For area and bar type charts, area.zerobased or bar.zerobased options should be set to 'false` to get padded bottom.

Type:
  • Object
Example
axis: {
  y: {
    padding: {
      top: 0,
      bottom: 0
    }
  }
}

(static) axis․y․show :Boolean

Source:
Default Value:
  • true

Show or hide y axis.

Type:
  • Boolean
Example
axis: {
  y: {
    show: false
  }
}

(static) axis․y․tick․count :Number

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

Source:
Default Value:
  • true

Show y axis outer tick.

Type:
  • Boolean
Example
axis: {
  y: {
    tick: {
      outer: false
    }
  }
}

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

Source:
Default Value:
  • null

Set y axis tick values manually.

Type:
  • Array
Example
axis: {
  y: {
    tick: {
      values: [100, 1000, 10000]
    }
  }
}

(static) axis․y․type :String

Source:
Default Value:
  • undefined

Set type of y axis.

Available Values:

  • timeseries
  • category
  • indexed
Type:
  • String
Example
axis: {
  y: {
    type: "timeseries"
  }
}

(static) bar :Object

Source:
Properties:
Name Type Attributes Default Description
bar.width Number <optional>

Change the width of bar chart.

Properties
Name Type Attributes Default Description
ratio Number <optional>
 0.6

Change the width of bar chart by ratio.
max Number <optional>
bar.zerobased Boolean <optional>
 true

Set if min or max value will be 0 on bar chart.

Set bar options

Type:
  • Object
Example
bar: {
     width: 10,
     // or
     width: {
         ratio: 0.2,
         max: 200
     },
     zerobased: false
 }

(static) bindto

Source:
Default Value:
  • #chart
Properties:
Name Type Default Description
bindto String | HTMLElement | d3.selection #chart

Specify the element where chart will be drawn.

Properties
Name Type Attributes Default Description
element String | HTMLElement | d3.selection #chart

Specify the element where chart will be drawn.
classname String <optional>
 bb

Specify the class name of bind element.
NOTE: When class name isn't bb, then you also need to update the default CSS to be rendered correctly.

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

If this option is not specified, the chart will be generated but not be set. Instead, we can access the element by chart.element and set it by ourselves.

  • NOTE:

    When chart is not bound, it'll start observing if chart.element is bound by MutationObserver.
    In this case, polyfill is required in IE9 and IE10 because they do not support MutationObserver.
    On the other hand, if chart always will be bound, polyfill will not be required because MutationObserver will never be called.

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) bubble :Object

Source:
Properties:
Name Type Attributes Default Description
bubble.maxR Number | function <optional>
 35

Set the max bubble radius value

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

(static) clipPath :Boolean

Source:
Default Value:
  • true

Set clip-path property of 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
clipPath: false

(static) color :Object

Source:
Properties:
Name Type Attributes Description
color.pattern Array <optional>

custom color pattern
color.tiles function <optional>

if defined, allows use svg's patterns to fill data area. It should return an array of SVGPatternElement.

  • Note: The pattern element's id will be defined as bb-colorize-pattern-$COLOR-VALUE.
    ex. When color pattern value is ['red', '#fff'] and defined 2 patterns,then ids for pattern elements are:
    • bb-colorize-pattern-red
    • bb-colorize-pattern-fff
color.threshold Object <optional>

color threshold

Properties
Name Type Attributes Default Description
unit String <optional>

unit
value Array <optional>

value
max Array <optional>
 100

max value

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

(static) data․axes :Object

Source:
Default Value:
  • {}

Set y axis the data related to. y and y2 can be used.

Type:
  • Object
Example
data․ {
  axes: {
    data1: "y",
    data2: "y2"
  }
}

(static) data․classes :Object

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

Source:
Default Value:
  • undefined

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

Source:
Default Value:
  • {}

Set color for each data.

Type:
  • Object
Example
data․ {
  colors: {
    data1: "#ff0000",
    ...
  }
}

(static) data․columns :Array

Source:
Default Value:
  • undefined

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

(static) data․empty․label․text :String

Source:
Default Value:
  • ""

Set text displayed when empty data.

Type:
  • String
Example
data․ {
  empty: {
    label: {
      text: "No Data"
    }
  }
}

(static) data․groups :Array

Source:
Default Value:
  • []

Set groups for the data for stacking.

Type:
  • Array
Example
data․ {
  groups: [
    ["data1", "data2"],
    ["data3"]
  ]
}

(static) data․hide :Boolean|Array

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

Source:
Default Value:
  • undefined
See:
  • data․keys

Parse a JSON object for data. See also data.keys.

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

Source:
Default Value:
  • undefined

Choose which JSON object keys correspond to desired data.

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

Source:
Default Value:
  • {}
Properties:
Name Type Attributes Default Description
donut.labels Boolean <optional>
 false

Show or hide labels on each data points

Properties
Name Type Attributes Default Description
format function <optional>
 {}

Set formatter function for data labels.
The formatter function receives 4 arguments such as v, id, i, j and it must return a string that will be shown as the label. The arguments are:

  • v is the value of the data point where the label is shown.
  • id is the id of the data where the label is shown.
  • i is the index of the data point where the label is shown.
  • j is the sub index of the data point where the label is shown.

    Formatter function can be defined for each data by specifying as an object and D3 formatter function can be set (ex. d3.format('$'))
position.x Number <optional>
 0

x coordinate position, relative the original.
position.y NUmber <optional>
 0

y coordinate position, relative the original.

Set labels options

Type:
  • Object
Example
data․ {
  labels: true,

  // or set specific options
  labels: {
    format: function(v, id, i, j) { ... },
    // it's possible to set for each data
    //format: {
    //    data1: function(v, id, i, j) { ... },
    //    ...
    //},
    position: {
       x: -10,
       y: 10
    }
  }
}

(static) data․mimeType :String

Source:
Default Value:
  • undefined

Used if loading JSON via data.url.

Type:
  • String
Example
data․ {
   {
      mimeType: "json"
   }
}

(static) data․names :Object

Source:
Default Value:
  • {}

Set custom data name.

Type:
  • Object
Example
data․ {
  names: {
    data1: "Data Name 1",
    data2: "Data Name 2"
  }
}

(static) data․onclick :function

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. In this callback, this will be the Chart object.

Type:
  • function
Example
data․ {
    onclick: function(d, element) { ... }
}

(static) data․onmax :function

Source:
Default Value:
  • undefined

Set a callback for maximum data

Type:
  • function
Example
onmax: function(data) {
       // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
       ...
   }

(static) data․onmin :function

Source:
Default Value:
  • undefined

Set a callback for minimum data

Type:
  • function
Example
onmin: function(data) {
       // data - ex) [{x: 3, value: 400, id: "data1", index: 3}, ... ]
       ...
   }

(static) data․onout :function

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. In this callback, this will be the Chart object.

Type:
  • function
Example
data․ {
    onout: function(d) { ... }
}

(static) data․onover :function

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 as the argument. d is the data where mouse cursor moves onto. In this callback, this will be the Chart object.

Type:
  • function
Example
data․ {
    onover: function(d) { ... }
}

(static) data․onselected :function

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

Source:
Default Value:
  • function() {}

Set a callback for on data un-selection.

Type:
  • function
Example
onunselected: function(d, element) {
       // d - ex) {x: 4, value: 150, id: "data1", index: 4, name: "data1"}
       // element - <circle>
       ...
   }

(static) data․order :String|function|null

Source:
Default Value:
  • desc

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
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"},
             ...
         ]
      }
  }
}

(static) data․regions :Object

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, style. If start is not set, the start will be the first data point. If end is not set, the end will be the last data point.
Currently this option supports only line chart and dashed style. If this option specified, the line will be dashed only in the regions.

Type:
  • Object
Example
data․ {
  regions: {
    data1: [{
        "start": 1,
        "end": 2,
        "style": "dashed"
    }, {
        "start":3
    }],
    ...
  }
}

(static) data․rows :Array

Source:
Default Value:
  • undefined

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

(static) data․selection․draggable :Boolean

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

Source:
Default Value:
  • false

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

Type:
  • Boolean
Example
data․ {
    selection․ {
      enabled: true
  }
}

(static) data․selection․grouped :Boolean

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

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

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

Source:
Default Value:
  • 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-spline
  • area-step
  • bar
  • bubble
  • donut
  • gauge
  • line
  • pie
  • scatter
  • spline
  • step
Type:
  • String
Example
data․ {
 type: "bar"
}

(static) data․types :Object

Source:
Default Value:
  • {}

Set chart type for each data.
This setting overwrites data.type setting.

Type:
  • Object
Example
data․ {
  types: {
    data1: "bar",
    data2: "spline"
  }
}

(static) data․url :String

Source:
Default Value:
  • undefined

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/c3_test.csv"
}

(static) data․x :String

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

Source:
Default Value:
  • %Y-%m-%d
See:

Set a format to parse string specifed as x.

Type:
  • String
Example
data․ {
  xFormat: "%Y-%m-%d %H:%M:%S"
}

(static) data․xLocaltime :Boolean

Source:
Default Value:
  • true

Set localtime format to parse x axis.

Type:
  • Boolean
Example
data․ {
  xLocaltime: false
}

(static) data․xs :Object

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) data․xSort :Boolean

Source:
Default Value:
  • true

Sort on x axis.

Type:
  • Boolean
Example
data․ {
  xSort: false
}

(static) donut :Object

Source:
Properties:
Name Type Attributes Default Description
donut.label.show Boolean <optional>
 true

Show or hide label on each donut piece.
donut.label.format function <optional>

Set formatter for the label on each donut piece.
donut.label.threshold Number <optional>
 0.05

Set threshold to show/hide labels.
donut.label.ratio Number | function <optional>

Set ratio of labels position.
donut.expand Boolean <optional>
 true

Enable or disable expanding donut pieces.
donut.width Number <optional>

Set width of donut chart.
donut.title String <optional>
 ""

Set title of donut chart. Use \n character to enter line break.
donut.padAngle Number <optional>
 0

Set padding between data.

Set donut options

Type:
  • Object
Example
donut: {
     label: {
         show: false,
         format: function(value, ratio, id) {
             return d3.format("$")(value);
         },
         threshold: 0.1,

         // set ratio callback. Should return ratio value
         ratio: function(d, radius, h) {
         	...
         	return ratio;
         },
         // or set ratio number
         ratio: 0.5
     },
     expand: false,
     width: 10,
     padAngle: 0.2,
     title: "Donut Title"

     // title with line break
     title: "Title1\nTitle2"
 }

(static) gauge :Object

Source:
Properties:
Name Type Attributes Default Description
gauge.fullCircle Boolean <optional>
 false

Show full circle as donut. When set to 'true', the max label will not be showed due to start and end points are same location.
gauge.label.show Boolean <optional>
 true

Show or hide label on gauge.
gauge.label.format function <optional>

Set formatter for the label on gauge.
gauge.label.extents function <optional>

Set customized min/max label text.
gauge.expand Boolean <optional>
 true

Enable or disable expanding gauge.

Properties
Name Type Attributes Default Description
duration Number <optional>
 50

Set the expand transition time in milliseconds.
gauge.min Number <optional>
 0

Set min value of the gauge.
gauge.max Number <optional>
 100

Set max value of the gauge.
gauge.startingAngle Number <optional>
 -1 * Math.PI / 2
gauge.units String <optional>

Set units of the gauge.
gauge.width Number <optional>

Set width of gauge chart.

Set gauge options

Type:
  • Object
Example
gauge: {
     fullCircle: false,
     label: {
         show: false,
         format: function(value, ratio) {
             return value;
         },
         extents: function(value, isMax) {
             return (isMax ? "Max:" : "Min:") + value;
         }
     },
     expand: false,

     // or set duration
     expand: {
         duration: 20
     },
     min: -100,
     max: 200,
     units: "%",
     width: 10
 }

(static) grid :Object

Source:
Default Value:
  • undefined
Properties:
Name Type Attributes Default Description
x.show Boolean <optional>
 false

Show grids along x axis.
x.lines Boolean <optional>
 []

Show additional grid lines along x axis.
This option accepts array including object that has value, text, position and class. text, position and class are optional. For position, start, middle and end (default) are available. If x axis is category axis, value can be category name. If x axis is timeseries axis, value can be date string, Date object and unixtime integer.
y.show Boolean <optional>
 false

Show grids along x axis.
y.lines Boolean <optional>
 []

Show additional grid lines along y axis.
This option accepts array including object that has value, text, position and class.
y.ticks Boolean <optional>
 10
focus.show Boolean <optional>
 true

Show grids when focus.
lines.front Boolean <optional>
 true

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
  },
  focus: {
     show: false
  },
  lines: {
     front: false
  }
}

(static) interaction :Object

Source:
Properties:
Name Type Attributes Default Description
interaction.enabled Boolean <optional>
 true

Indicate if the chart should have interactions.
If false is set, all of interactions (showing/hiding tooltip, selection, mouse events, etc) will be disabled.
interaction.brighten Boolean <optional>
 true
interaction.inputType.mouse Boolean <optional>
 true

enable or disable mouse interaction
interaction.inputType.touch Boolean <optional>
 true

enable or disable touch interaction

Properties
Name Type Attributes Default Description
preventDefault Boolean | Number <optional>
 false

enable or disable to call event.preventDefault on touchstart & touchmove event. It's usually used to prevent document scrolling.

Interaction options

Type:
  • Object
Example
interaction: {
   enabled: 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

Source:
Properties:
Name Type Attributes Default Description
legend.show Boolean <optional>
 true

Show or hide legend.
legend.hide Boolean <optional>
 false

Hide legend If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
legend.contents.bindto String | HTMLElement <optional>

Set CSS selector or element reference to bind legend items.
legend.contents.template String | function <optional>

Set item's template.
If set string value, within template the 'color' and 'title' can be replaced using template-like syntax string:

 - {=COLOR}: data color value
 - {=TITLE}: data title value
legend.position String <optional>
 bottom

Change the position of legend.
Available values are: bottom, right and inset are supported.
legend.inset Object <optional>
 {anchor: 'top-left',x: 10,y: 0,step: undefined}

Change inset legend attributes.
This option accepts object that has the keys anchor, x, y and step. anchor decides the position of the legend. These anchors are available:

 - top-left
 - top-right
 - bottom-left
 - bottom-right

x and y set the position of the legend based on the anchor.
step defines the max step the lagend has (e.g. If 2 set and legend has 3 legend item, the legend 2 columns).
legend.equally Boolean <optional>
 false

Set to all items have same width size.
legend.padding Boolean <optional>
 0

Set padding value
legend.item.onclick function <optional>

Set click event handler to the legend item.
legend.item.onover function <optional>

Set mouse/touch over event handler to the legend item.
legend.item.onout function <optional>

Set mouse/touch out event handler to the legend item.
legend.item.tile.width Number <optional>
 10

Set width of item tile element
legend.item.tile.height Number <optional>
 10

Set height of item tile element

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(title, color) {
              // if you want omit some legend, return falsy value
              if (title !== "data1") {
                   return "<li style='background-color:"+ color +">"+ title +"</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: {
         onclick: function(id) { ... },
         onover: function(id) { ... },
         onout: function(id) { ... },

         // set tile's size
         tile: {
             width: 20,
             height: 15
         }
     }
 }

(static) line :Object

Source:
Properties:
Name Type Attributes Default Description
line.connectNull Boolean <optional>
 false

Set if null data point will be connected or not.
If true set, the region of null data will be connected without any data point. If false set, the region of null data will not be connected and get empty.
line.classes Array <optional>

If set, used to set a css class on each line.
line.step.type Boolean <optional>
 step

Change step type for step chart.
Available values:

  • step
  • step-before
  • step-after

Set line options

Type:
  • Object
Example
line: {
     connectNull: true,
     classes: [
         "line-class1",
         "line-class2"
     ],
     step: {
         type: "step-after"
     }
 }

(static) onafterinit :function

Source:
Default Value:
  • function(){}

Set a callback to execute after the chart is initialized

Type:
  • function
Example
onafterinit: function() {
  ...
}

(static) onbeforeinit :function

Source:
Default Value:
  • function(){}

Set a callback to execute before the chart is initialized

Type:
  • function
Example
onbeforeinit: function() {
  ...
}

(static) oninit :function

Source:
Default Value:
  • function(){}

Set a callback to execute when the chart is initialized.

Type:
  • function
Example
oninit: function() {
  ...
}

(static) onout :function

Source:
Default Value:
  • function(){}

Set a callback to execute when mouse/touch leaves the chart.

Type:
  • function
Example
onout: function() {
  ...
}

(static) onover :function

Source:
Default Value:
  • function(){}

Set a callback to execute when mouse/touch enters the chart.

Type:
  • function
Example
onover: function() {
  ...
}

(static) onrendered :function

Source:
Default Value:
  • function(){}

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() {
  ...
}

(static) onresize :function

Source:
Default Value:
  • function(){}

Set a callback to execute when user resizes the screen.

Type:
  • function
Example
onresize: function() {
  ...
}

(static) onresized :function

Source:
Default Value:
  • function(){}

SSet a callback to execute when screen resize finished.

Type:
  • function
Example
onresized: function() {
  ...
}

(static) padding :Object

Source:
Properties:
Name Type Attributes Description
padding.top Number <optional>

padding on the top of chart
padding.right Number <optional>

padding on the right of chart
padding.bottom Number <optional>

padding on the bottom of chart
padding.left Number <optional>

padding on the left of chart

The padding of the chart element.

Type:
  • Object
Example
padding: {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
}

(static) pie :Object

Source:
Properties:
Name Type Attributes Default Description
pie.label.show Boolean <optional>
 true

Show or hide label on each pie piece.
pie.label.format function <optional>

Set formatter for the label on each pie piece.
pie.label.threshold Number <optional>
 0.05

Set threshold to show/hide labels.
pie.label.ratio Number | function <optional>

Set ratio of labels position.
pie.expand Boolean <optional>
 true

Enable or disable expanding pie pieces.
pie.padAngle Number <optional>
 0

Set padding between data.

Set pie options

Type:
  • Object
Example
pie: {
     label: {
         show: false,
         format: function(value, ratio, id) {
             return d3.format("$")(value);
         },
         threshold: 0.1,

         // set ratio callback. Should return ratio value
         ratio: function(d, radius, h) {
         	...
         	return ratio;
         },
         // or set ratio number
         ratio: 0.5
     },
     expand: false,
     padAngle: 0.1
 }

(static) point :Object

Source:
Properties:
Name Type Attributes Default Description
point.show Boolean <optional>
 true

Whether to show each point in line.
point.r Number | function <optional>
 2.5

The radius size of each point.

  • Note: Disabled for 'bubble' type
point.focus.expand.enabled Boolean <optional>
 true

Whether to expand each point on focus.
point.focus.expand.r Boolean <optional>
 point.r*1.75

The radius size of each point on focus.

  • Note: For 'bubble' type, the default is bubbleSize*1.15
point.select.r Number <optional>
 point.r*4

The radius size of each point on selected.
point.type String <optional>
 "circle"

The type of point to be drawn

  • Note:
    • If chart has 'bubble' type, only circle can be used.
    • For IE, non circle point expansions are not supported due to lack of transform support.
  • Available Values:
    • circle
    • rectangle
point.pattern Array <optional>
 []

The type of point or svg shape as string, to be drawn for each line

  • Note:
    • This is an experimental feature and can have some unexpected behaviors.
    • If chart has 'bubble' type, only circle can be used.
    • For IE, non circle point expansions are not supported due to lack of transform support.
  • Available Values:
    • circle
    • rectangle
    • svg shape tag interpreted as string
      (ex. <polygon points='2.5 0 0 5 5 5'></polygon>)

Set point options

Type:
  • Object
Example
point: {
     show: false,
     r: 5,

     // or customize the radius
     r: function(d) {
         ...
         return r;
     },

     focus: {
         expand: {
             enabled: true,
             r: 1
         }
     },
     select: {
         r: 3
     },

     // 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) regions :Array

Source:
Default Value:
  • []

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

(static) resize :Object

Source:
Properties:
Name Type Attributes Default Description
resize.auto Boolean <optional>
 true

Set chart resize automatically on viewport changes.

Set chart resize options

Type:
  • Object
Example
resize: {
     auto: false
 }

(static) size :Object

Source:
Properties:
Name Type Attributes Description
size.width Number <optional>

width of the chart element
size.height Number <optional>

height of the chart element

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

Source:
Properties:
Name Type Attributes Default Description
spline.interpolation.type String <optional>
 cardinal

Set spline options

Type:
  • Object
Example
spline: {
     interpolation: {
         type: "cardinal"
     }
 }

(static) subchart :Object

Source:
Properties:
Name Type Attributes Default Description
subchart.show Boolean <optional>
 false

Show sub chart on the bottom of the chart.
subchart.size.height Boolean <optional>

Change the height of the subchart.
subchart.onbrush Boolean <optional>

Set callback for brush event.
Specified function receives the current zoomed x domain.

Set subchart options

Type:
  • Object
Example
subchart: {
     show: true,
     size: {
         height: 20
     },
     onbrush: function(domain) { ... }
 }

(static) svg :Object

Source:
Properties:
Name Type Attributes Description
svg.classname String <optional>

class name for svg element

Set svg element's class name

Type:
  • Object
Example
svg: {
  classname: "test_class"
}

(static) title :Object

Source:
Properties:
Name Type Attributes Default Description
title.text String <optional>
title.padding.top Number <optional>
 0
title.padding.right Number <optional>
 0
title.padding.bottom Number <optional>
 0
title.padding.left Number <optional>
 0
title.position String <optional>
 top-center

Set title options

Type:
  • Object
Example
title: {
     text: "Title Text",
     padding: {
         top: 10,
         right: 10,
         bottom: 10,
         left: 10
     },
     position: "top-center"
 }

(static) tooltip :Object

Source:
Properties:
Name Type Attributes Default Description
tooltip.show Boolean <optional>
 true

Show or hide tooltip.
tooltip.grouped Boolean <optional>
 true

Set if tooltip is grouped or not for the data points.
tooltip.format.title function <optional>

Set format for the title of tooltip.
Specified function receives x of the data point to show.
tooltip.format.name function <optional>

Set format for the name of each data in tooltip.
Specified function receives name, ratio, id and index of the data point to show. ratio will be undefined if the chart is not donut/pie/gauge.
tooltip.format.value function <optional>

Set format for the value of each data in tooltip.
Specified function receives name, ratio, id and index of the data point to show. ratio will be undefined if the chart is not donut/pie/gauge. If undefined returned, the row of that value will be skipped.
tooltip.position function <optional>

Set custom position for the tooltip.
This option can be used to modify the tooltip position by returning object that has top and left.
tooltip.contents function <optional>

Set custom HTML for the tooltip.
Specified function receives data, defaultTitleFormat, defaultValueFormat and color of the data point to show. If tooltip.grouped is true, data includes multiple data points.
tooltip.order String | function | null <optional>
 null

Set tooltip data display order.

Available Values:

  • desc: In descending data value order
  • asc: In ascending data value order
  • null: It keeps the data display order
    NOTE: When data.groups is set, the order will follow as the stacked graph order.
    If want to order as data bound, set any value rather than asc, desc or null. (ex. empty string "")
  • function(data1, data2) { ... }: Array.sort compareFunction

Tooltip options

Type:
  • Object
Example
tooltip: {
     show: true,
     grouped: false,
     format: {
         title: function(x) { return "Data " + x; },
         name: function(name, ratio, id, index) { return name; },
         value: function(value, ratio, id, index) { return ratio; }
     },
     position: function(data, width, height, element) {
         return {top: 0, left: 0}
     },
     contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
         return ... // formatted html as you want
     },

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

(static) transition :Object

Source:
Properties:
Name Type Attributes Default Description
transition.duration Number <optional>
 350

duration in milliseconds

Set duration of transition (in milliseconds) for chart animation.

  • NOTE: If 0or null 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) zoom :Object

Source:
Properties:
Name Type Attributes Default Description
zoom.enabled Boolean <optional>
 false

Enable zooming.
zoom.rescale Boolean <optional>
 false

Enable to rescale after zooming.
If true set, y domain will be updated according to the zoomed region.
zoom.extent Array <optional>
 [1, 10]

Change zoom extent.
zoom.onzoom function <optional>
 function(){}

Set callback that is called when the chart is zooming.
Specified function receives the zoomed domain.
zoom.onzoomstart function <optional>
 function(){}

Set callback that is called when zooming starts.
Specified function receives the zoom event.
zoom.onzoomend function <optional>
 function(){}

Set callback that is called when zooming ends.
Specified function receives the zoomed domain.

Set zoom options

Type:
  • Object
Example
zoom: {
     enabled: true,
     rescale: true,
     extent: [1, 100]  // enable more zooming
     onzoom: function(domain) { ... },
     onzoomstart: function(event) { ... },
     onzoomend: function(domain) { ... }
 }