Options

Members

(static) area :Object

Source:

• config/Options.js, line 3042

See:

• MDN's <linearGradient>, <stop>

• Demo

• Demo: above

• Demo: linearGradient

Properties:

Type:

• Object

Example

area: {
     zerobased: false,
     above: 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],
     	]
     }
 }

(static) axis․rotated :Boolean

Source:

• config/Options.js, line 1416

Default Value:

• false

Type:

• Boolean

Example

axis: {
  rotated: true
}

(static) axis․x․axes :Array

Source:

• config/Options.js, line 1968

See:

• Demo

Type:

• Array

Example

x: {
   axes: [
     {
       tick: {
         outer: false,
         format: function(x) {
            return x + "%";
         },
         count: 2,
         values: [10, 20, 30]
       }
     },
     ...
   ]
}

(static) axis․x․categories :Array

Source:

• config/Options.js, line 1495

Default Value:

• []

Type:

• Array

Example

axis: {
  x: {
    categories: ["Category 1", "Category 2", ...]
  }
}

(static) axis․x․clipPath :Boolean

Source:

• config/Options.js, line 1429

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

(static) axis․x․extent :Array|function

Source:

• config/Options.js, line 1895

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

Source:

• config/Options.js, line 1879

Default Value:

• undefined

Type:

• Number

Example

axis: {
  x: {
    height: 20
  }
}

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

Source:

• config/Options.js, line 1925

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

Source:

• config/Options.js, line 1479

Default Value:

• true

Type:

• Boolean

Example

axis: {
  x: {
    localtime: false
  }
}

(static) axis․x․max :Number

Source:

• config/Options.js, line 1818

Default Value:

• undefined

Type:

• Number

Example

axis: {
  x: {
    max: 100
  }
}

(static) axis․x․min :Number

Source:

• config/Options.js, line 1833

Default Value:

• undefined

Type:

• Number

Example

axis: {
  x: {
    min: -100
  }
}

(static) axis․x․padding :Object

Source:

• config/Options.js, line 1848

Default Value:

• {}

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:

• config/Options.js, line 1442

Default Value:

• true

Type:

• Boolean

Example

axis: {
  x: {
    show: false
  }
}

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

Source:

• config/Options.js, line 1511

Default Value:

• false

Type:

• Boolean

Example

axis: {
  x: {
    tick: {
      centered: true
    }
  }
}

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

Source:

• config/Options.js, line 1597

Default Value:

• undefined

Type:

• Number

Example

axis: {
  x: {
    tick: {
      count: 5
    }
  }
}

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

Source:

• config/Options.js, line 1557

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

Source:

• config/Options.js, line 1578

Default Value:

• 10

Type:

• Number

Example

axis: {
  x: {
    tick: {
      culling: {
          max: 5
      }
    }
  }
}

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

Source:

• config/Options.js, line 1675

Default Value:

• true

See:

• Demo

• Demo: for timeseries zoom

Type:

• Boolean

Example

axis: {
  x: {
    tick: {
      fit: false
    }
  }
}

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

Source:

• config/Options.js, line 1528

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

Source:

• config/Options.js, line 1750

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

Source:

• config/Options.js, line 1733

Default Value:

• true

Type:

• Boolean

Example

axis: {
  x: {
    tick: {
      outer: false
    }
  }
}

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

Source:

• config/Options.js, line 1714

Default Value:

• 0

See:

• Demo

Type:

• Number

Example

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

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

Source:

• config/Options.js, line 1615

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

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

Source:

• config/Options.js, line 1653

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

Source:

• config/Options.js, line 1633

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

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

Source:

• config/Options.js, line 1800

Default Value:

• false

Type:

• Boolean

Example

axis: {
  x: {
    tick: {
      tooltip: true
    }
  }
}

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

Source:

• config/Options.js, line 1696

Default Value:

• null

Type:

• Array

Example

axis: {
  x: {
    tick: {
      values: [1, 2, 4, 8, 16, 32, ...]
    }
  }
}

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

Source:

• config/Options.js, line 1781

Default Value:

• null

Type:

• Number

Example

axis: {
  x: {
    tick: {
      width: 50
    }
  }
}

(static) axis․x․type :String

Source:

• config/Options.js, line 1457

Default Value:

• indexed

See:

• Demo: indexed

• Demo: timeseries

• Demo: category

Type:

• String

Example

axis: {
  x: {
    type: "timeseries"
  }
}

(static) axis․y2․axes :Array

Source:

• config/Options.js, line 2746

See:

• Demo

Type:

• Array

Example

y2: {
   axes: [
     {
       tick: {
         outer: false,
         format: function(x) {
            return x + "%";
         },
         count: 2,
         values: [10, 20, 30]
       }
     },
     ...
   ]
}

(static) axis․y2․center :Number

Source:

• config/Options.js, line 2486

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y2: {
    center: 0
  }
}

(static) axis․y2․default :Array

Source:

• config/Options.js, line 2730

Default Value:

• undefined

Type:

• Array

Example

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

(static) axis․y2․inner :Boolean

Source:

• config/Options.js, line 2501

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y2: {
    inner: true
  }
}

(static) axis․y2․inverted :Boolean

Source:

• config/Options.js, line 2470

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y2: {
    inverted: true
  }
}

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

Source:

• config/Options.js, line 2516

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

Source:

• config/Options.js, line 2440

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y2: {
    max: 1000
  }
}

(static) axis․y2․min :Number

Source:

• config/Options.js, line 2455

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y2: {
    min: -1000
  }
}

(static) axis․y2․padding :Object

Source:

• config/Options.js, line 2711

Default Value:

• {}

Type:

• Object

Example

axis: {
  y2: {
    padding: {
      top: 100,
      bottom: 100
    }
  }
}

(static) axis․y2․show :Boolean

Source:

• config/Options.js, line 2422

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y2: {
    show: true
  }
}

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

Source:

• config/Options.js, line 2633

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y2: {
    tick: {
      count: 5
    }
  }
}

(static) axis․y2․tick․culling :Boolean

Source:

• config/Options.js, line 2561

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y2: {
    tick: {
      culling: false
    }
  }
}

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

Source:

• config/Options.js, line 2580

Default Value:

• 5

Type:

• Number

Example

axis: {
  y2: {
    tick: {
      culling: {
          max: 5
      }
    }
  }
}

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

Source:

• config/Options.js, line 2542

Default Value:

• undefined

Type:

• function

Example

axis: {
  y2: {
    tick: {
      format: d3.format("$,")
      //or format: function(d) { return "$" + d; }
    }
  }
}

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

Source:

• config/Options.js, line 2599

Default Value:

• true

Type:

• Boolean

Example

axis: {
  y2: {
    tick: {
      outer: false
    }
  }
}

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

Source:

• config/Options.js, line 2651

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

(static) axis․y2․tick․text․position :Object

Source:

• config/Options.js, line 2689

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

Source:

• config/Options.js, line 2669

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

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

Source:

• config/Options.js, line 2616

Default Value:

• null

Type:

• Array

Example

axis: {
  y2: {
    tick: {
      values: [100, 1000, 10000]
    }
  }
}

(static) axis․y․axes :Array

Source:

• config/Options.js, line 2387

See:

• Demo

Type:

• Array

Example

y: {
   axes: [
     {
       tick: {
         outer: false,
         format: function(x) {
            return x + "%";
         },
         count: 2,
         values: [10, 20, 30]
       }
     },
     ...
   ]
}

(static) axis․y․center :Number

Source:

• config/Options.js, line 2098

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y: {
    center: 0
  }
}

(static) axis․y․clipPath :Boolean

Source:

• config/Options.js, line 2003

Default Value:

• true

Type:

• Boolean

Example

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

(static) axis․y․default :Array

Source:

• config/Options.js, line 2371

Default Value:

• undefined

Type:

• Array

Example

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

(static) axis․y․inner :Boolean

Source:

• config/Options.js, line 2113

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y: {
    inner: true
  }
}

(static) axis․y․inverted :Boolean

Source:

• config/Options.js, line 2082

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y: {
    inverted: true
  }
}

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

Source:

• config/Options.js, line 2128

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

Source:

• config/Options.js, line 2049

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y: {
    max: 1000
  }
}

(static) axis․y․min :Number

Source:

• config/Options.js, line 2065

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y: {
    min: 1000
  }
}

(static) axis․y․padding :Object

Source:

• config/Options.js, line 2349

Default Value:

• {}

Type:

• Object

Example

axis: {
  y: {
    padding: {
      top: 0,
      bottom: 0
    }
  }
}

(static) axis․y․show :Boolean

Source:

• config/Options.js, line 2015

Default Value:

• true

Type:

• Boolean

Example

axis: {
  y: {
    show: false
  }
}

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

Source:

• config/Options.js, line 2247

Default Value:

• undefined

Type:

• Number

Example

axis: {
  y: {
    tick: {
      count: 5
    }
  }
}

(static) axis․y․tick․culling :Boolean

Source:

• config/Options.js, line 2174

Default Value:

• false

Type:

• Boolean

Example

axis: {
  y: {
    tick: {
      culling: false
    }
  }
}

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

Source:

• config/Options.js, line 2193

Default Value:

• 5

Type:

• Number

Example

axis: {
  y: {
    tick: {
      culling: {
          max: 5
      }
    }
  }
}

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

Source:

• config/Options.js, line 2154

Default Value:

• undefined

Type:

• function

Example

axis: {
  y: {
    tick: {
      format: function(x) {
          return x.getFullYear();
      }
    }
  }
}

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

Source:

• config/Options.js, line 2212

Default Value:

• true

Type:

• Boolean

Example

axis: {
  y: {
    tick: {
      outer: false
    }
  }
}

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

Source:

• config/Options.js, line 2265

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

(static) axis․y․tick․text․position :Object

Source:

• config/Options.js, line 2303

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

Source:

• config/Options.js, line 2283

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

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

Source:

• config/Options.js, line 2229

Default Value:

• null

Type:

• Array

Example

axis: {
  y: {
    tick: {
      values: [100, 1000, 10000]
    }
  }
}

(static) axis․y․type :String

Source:

• config/Options.js, line 2030

Default Value:

• undefined

Type:

• String

Example

axis: {
  y: {
    type: "timeseries"
  }
}

(static) bar :Object

Source:

• config/Options.js, line 2953

See:

• Demo: bar padding

• Demo: bar radius

• Demo: bar width

• Demo: bar width variant

Properties:

Type:

• Object

Example

bar: {
     padding: 1,

     // the 'radius' option can be used only for non-stacking bars
     radius: 10,
     // or
     radius: {
         ratio: 0.5
     }

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

Source:

• config/Options.js, line 14

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

Source:

• config/Options.js, line 3020

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

(static) clipPath :Boolean

Source:

• config/Options.js, line 42

Default Value:

• true

See:

• Demo

Type:

• Boolean

Example

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

(static) color :Object

Source:

• config/Options.js, line 1236

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

Source:

• config/Options.js, line 499

Default Value:

• {}

Type:

• Object

Example

data: {
  axes: {
    data1: "y",
    data2: "y2"
  }
}

(static) data․classes :Object

Source:

• config/Options.js, line 466

Default Value:

• {}

Type:

• Object

Example

data: {
  classes: {
    data1: "additional-data1-class",
    data2: "additional-data2-class"
  }
}

(static) data․color :function

Source:

• config/Options.js, line 696

Default Value:

• undefined

See:

• Demo

Type:

• function

Example

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

(static) data․colors :Object

Source:

• config/Options.js, line 711

Default Value:

• {}

Type:

• Object

Example

data: {
  colors: {
    data1: "#ff0000",
    data2: function(d) {
       return "#000";
    }
    ...
  }
}

(static) data․columns :Array

Source:

• config/Options.js, line 1095

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

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

Source:

• config/Options.js, line 1178

Default Value:

• ""

Type:

• String

Example

data: {
  empty: {
    label: {
      text: "No Data"
    }
  }
}

(static) data․filter :function

Source:

• config/Options.js, line 748

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

Source:

• config/Options.js, line 483

Default Value:

• []

Type:

• Array

Example

data: {
  groups: [
    ["data1", "data2"],
    ["data3"]
  ]
}

(static) data․headers :String

Source:

• config/Options.js, line 991

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

Source:

• config/Options.js, line 730

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

Source:

• config/Options.js, line 428

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

Source:

• config/Options.js, line 1010

Default Value:

• undefined

See:

• data․keys

• Demo

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:

• config/Options.js, line 1155

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

Source:

• config/Options.js, line 563

Default Value:

• {}

See:

• Demo

• Demo: label colors

• Demo: label format

• Demo: label position

Properties:

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

    // align text to center of the 'bar' shape (works only for 'bar' type)
    centered: true,

    // apply for all label texts
    colors: "red",

    // or set different colors per dataset
    // for not specified dataset, will have the default color value
    colors: {
       data1: "yellow",
       data3: "green"
    },

    // set x, y coordinate position
    position: {
       x: -10,
       y: 10
    }
  }
}

(static) data․mimeType :String

Source:

• config/Options.js, line 1142

Default Value:

• undefined

Type:

• String

Example

data: {
    mimeType: "json"
}

(static) data․names :Object

Source:

• config/Options.js, line 449

Default Value:

• {}

See:

• Demo

Type:

• Object

Example

data: {
  names: {
    data1: "Data Name 1",
    data2: "Data Name 2"
  }
}

(static) data․onclick :function

Source:

• config/Options.js, line 869

Default Value:

• function() {}

Type:

• function

Example

data: {
    onclick: function(d, element) { ... }
}

(static) data․onmax :function

Source:

• config/Options.js, line 961

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

Source:

• config/Options.js, line 945

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

Source:

• config/Options.js, line 897

Default Value:

• function() {}

Type:

• function

Example

data: {
    onout: function(d) { ... }
}

(static) data․onover :function

Source:

• config/Options.js, line 883

Default Value:

• function() {}

Type:

• function

Example

data: {
    onover: function(d) { ... }
}

(static) data․onselected :function

Source:

• config/Options.js, line 911

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

Source:

• config/Options.js, line 928

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

Source:

• config/Options.js, line 626

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

(static) data․regions :Object

Source:

• config/Options.js, line 666

Default Value:

• {}

Type:

• Object

Example

data: {
  regions: {
    data1: [{
        start: 1,
        end: 2,
        style: {
            dasharray: "5 2"
        }
    }, {
        start: 3
    }],
    ...
  }
}

(static) data․rows :Array

Source:

• config/Options.js, line 1034

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

(static) data․selection․draggable :Boolean

Source:

• config/Options.js, line 852

Default Value:

• false

Type:

• Boolean

Example

data: {
   selection: {
      draggable: true
  }
}

(static) data․selection․enabled :Boolean

Source:

• config/Options.js, line 787

Default Value:

• false

See:

• Demo

Type:

• Boolean

Example

data: {
   selection: {
      enabled: true
   }
}

(static) data․selection․grouped :Boolean

Source:

• config/Options.js, line 804

Default Value:

• false

Type:

• Boolean

Example

data: {
   selection: {
      grouped: true
   }
}

(static) data․selection․isselectable :function

Source:

• config/Options.js, line 820

Default Value:

• function() { return true; }

Type:

• function

Example

data: {
   selection: {
      isselectable: function(d) { ... }
   }
}

(static) data․selection․multiple :Boolean

Source:

• config/Options.js, line 836

Default Value:

• true

Type:

• Boolean

Example

data: {
   selection: {
      multiple: false
   }
}

(static) data․stack․normalize :Boolean

Source:

• config/Options.js, line 768

Default Value:

• false

See:

• Demo

Type:

• Boolean

Example

data: {
  stack: {
     normalize: true
  }
}

(static) data․type :String

Source:

• config/Options.js, line 515

Default Value:

• line

Type:

• String

Example

data: {
   type: "bar"
}

(static) data․types :Object

Source:

• config/Options.js, line 545

Default Value:

• {}

Type:

• Object

Example

data: {
  types: {
    data1: "bar",
    data2: "spline"
  }
}

(static) data․url :String

Source:

• config/Options.js, line 977

Default Value:

• undefined

See:

• Demo

Type:

• String

Example

data: {
    url: "/data/test.csv"
}

(static) data․x :String

Source:

• config/Options.js, line 346

Default Value:

• undefined

Type:

• String

Example

data: {
  x: "date"
}

(static) data․xFormat :String

Source:

• config/Options.js, line 377

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

Source:

• config/Options.js, line 402

Default Value:

• true

Type:

• Boolean

Example

data: {
  xLocaltime: false
}

(static) data․xs :Object

Source:

• config/Options.js, line 360

Default Value:

• {}

Type:

• Object

Example

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

(static) data․xSort :Boolean

Source:

• config/Options.js, line 415

Default Value:

• true

Type:

• Boolean

Example

data: {
  xSort: false
}

(static) donut :Object

Source:

• config/Options.js, line 3230

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";
         },
         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:

• config/Options.js, line 3171

Properties:

Type:

• Object

Example

gauge: {
     fullCircle: false,
     label: {
         show: false,
         format: function(value, ratio) {
             return value;

             // to multiline, return with '\n' character
             // return value +"%\nLine1\n2Line2";
         },
         extents: function(value, isMax) {
             return (isMax ? "Max:" : "Min:") + value;
         }
     },
     expand: false,

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

(static) grid :Object

Source:

• config/Options.js, line 2781

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

(static) interaction :Object

Source:

• config/Options.js, line 184

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

Source:

• config/Options.js, line 1314

See:

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

(static) line :Object

Source:

• config/Options.js, line 2914

Properties:

Type:

• Object

Example

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

     // hide all data points ('point.show=false' also has similar effect)
     point: false,

     // show data points for only indicated datas
     point: [
         "data1", "data3"
     ]
 }

(static) onafterinit :function

Source:

• config/Options.js, line 304

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onafterinit: function(ctx) {
  ...
}

(static) onbeforeinit :function

Source:

• config/Options.js, line 276

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onbeforeinit: function(ctx) {
  ...
}

(static) oninit :function

Source:

• config/Options.js, line 290

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
oninit: function(ctx) {
  ...
}

(static) onout :function

Source:

• config/Options.js, line 234

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onout: function(ctx) {
  ...
}

(static) onover :function

Source:

• config/Options.js, line 220

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onover: function(ctx) {
  ...
}

(static) onrendered :function

Source:

• config/Options.js, line 318

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onrendered: function(ctx) {
  ...
}

(static) onresize :function

Source:

• config/Options.js, line 248

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onresize: function(ctx) {
  ...
}

(static) onresized :function

Source:

• config/Options.js, line 262

Default Value:

• undefined

Type:

• function

Example

// @param {Chart} ctx - Instance itself
onresized: function(ctx) {
  ...
}

(static) padding :Object

Source:

• config/Options.js, line 89

Properties:

Type:

• Object

Example

padding: {
  top: 20,
  right: 20,
  bottom: 20,
  left: 20
}

(static) pie :Object

Source:

• config/Options.js, line 3092

Properties:

Type:

• Object

Example

pie: {
     label: {
         show: false,
         format: function(value, ratio, id) {
             return d3.format("$")(value);

             // to multiline, return with '\n' character
             // return value +"%\nLine1\n2Line2";
         },
         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,

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

     innerRadius: 0,

     // set different innerRadius for each data
     innerRadius: {
     	data1: 10,
     	data2: 0
     }

     padAngle: 0.1,
     padding: 0
 }

(static) plugins :Array

Source:

• config/Options.js, line 3157

Type:

• Array

Example

plugins: [
   new bb.plugin.stanford({ ... }),
   new PluginA(),
   ...
]

(static) point :Object

Source:

• config/Options.js, line 2839

See:

• Demo: point type

Properties:

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

     // having lower value, means how closer to be for interaction
     sensitivity: 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) radar :Object

Source:

• config/Options.js, line 3317

See:

• Demo

• Demo: radar axis

• Demo: radar level

• Demo: radar size

• Demo: radar axis multiline

Properties:

Type:

• Object

Example

radar: {
     axis: {
         max: 50,
         line: {
             show: false
         },
         text: {
             position: {
             	x: 0,
             	y: 0
             },
             show: false
         }
     },
     direction: {
         clockwise: true
     },
     level: {
         show: false,
         text: {
             format: function(x) {
                 return x + "%";
             },
             show: true
         }
     },
     size: {
         ratio: 0.7
     }
 }

(static) regions :Array

Source:

• config/Options.js, line 3383

Default Value:

• []

Type:

• Array

Example

regions: [
   {
     axis: "x",
     start: 1,
     end: 4,
     class: "region-1-4"
   }
 ]

(static) resize :Object

Source:

• config/Options.js, line 111

Properties:

Type:

• Object

Example

resize: {
     auto: false
 }

(static) size :Object

Source:

• config/Options.js, line 71

See:

• Demo

Properties:

Type:

• Object

Example

size: {
  width: 640,
  height: 480
}

(static) spline :Object

Source:

• config/Options.js, line 3282

See:

• Interpolation (d3 v4)

Properties:

Type:

• Object

Example

spline: {
     interpolation: {
         type: "cardinal"
     }
 }

(static) subchart :Object

Source:

• config/Options.js, line 1196

See:

• Demo

Properties:

Type:

• Object

Example

subchart: {
		axis: {
			x: {
				show: true,
				tick: {
					show: true,
					text: {
						show: false
					}
				}
			}
		},
     show: true,
     size: {
         height: 20
     },
     onbrush: function(domain) { ... }
 }

(static) svg :Object

Source:

• config/Options.js, line 58

Properties:

Type:

• Object

Example

svg: {
  classname: "test_class"
}

(static) title :Object

Source:

• config/Options.js, line 3572

See:

• Demo

Properties:

Type:

• Object

Example

title: {
     text: "Title Text",

     // or Multiline title text
     text: "Main title text\nSub title text",

     padding: {
         top: 10,
         right: 10,
         bottom: 10,
         left: 10
     },
     position: "center"
 }

(static) tooltip :Object

Source:

• config/Options.js, line 3403

See:

• Demo: Hide Tooltip

• Demo: Tooltip Grouping

• Demo: Tooltip Format

• Demo: Linked Tooltip

• Demo: Tooltip Template

Properties:

Type:

• Object

Example

tooltip: {
     show: true,
     doNotHide: true,
     grouped: false,
     format: {
         title: function(x) { return "Data " + x; },
         name: function(name, ratio, id, index) { return name; },
         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
     },

      // specify tooltip contents using template
      // - example of HTML returned:
      // <ul class="bb-tooltip">
      //   <li class="bb-tooltip-name-data1"><span>250</span><br><span style="color:#00c73c">data1</span></li>
      //   <li class="bb-tooltip-name-data2"><span>50</span><br><span style="color:#fa7171">data2</span></li>
      // </ul>
      contents: {
     	bindto: "#tooltip",
     	template: '<ul class={=CLASS_TOOLTIP}>{{' +
     			'<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span><br>' +
     			'<span style=color:{=COLOR}>{=NAME}</span></li>' +
     		'}}</ul>'
     }

      // with additional text value
      // - example of HTML returned:
      // <ul class="bb-tooltip">
      //   <li class="bb-tooltip-name-data1"><span>250</span><br>comment1<span style="color:#00c73c">data1</span>text1</li>
      //   <li class="bb-tooltip-name-data2"><span>50</span><br>comment2<span style="color:#fa7171">data2</span>text2</li>
      // </ul>
      contents: {
     	bindto: "#tooltip",
     	text: {
     		// a) 'key' name is used as substitution within template as '{=KEY}'
     		// b) the length should match with the data length
     		VAR1: ["text1", "text2"],
     		VAR2: ["comment1", "comment2"],
     	},
     	template: '<ul class={=CLASS_TOOLTIP}>{{' +
     			'<li class="{=CLASS_TOOLTIP_NAME}"><span>{=VALUE}</span>{=VAR2}<br>' +
     			'<span style=color:{=COLOR}>{=NAME}</span>{=VAR1}</li>' +
     		'}}</ul>'
     }

     // sort tooltip data value display in ascending order
     order: "asc",

     // specifying sort function
     order: function(a, b) {
        // param data passed format
        {x: 5, value: 250, id: "data1", index: 5, name: "data1"}
          ...
     },

     // show at the initialization
     init: {
         show: true,
         x: 2,
         position: {
             top: "150px",
             left: "250px"
         }
     },

     // fires prior tooltip is shown
     onshow: function() { ...},
     // fires prior tooltip is hidden
     onhide: function() { ... },
     // fires after tooltip is shown
     onshown: function() { ... },
     // fires after tooltip is hidden
     onhidden: function() { ... },

     // Link any tooltips when multiple charts are on the screen where same x coordinates are available
     // Useful for timeseries correlation
     linked: true,

     // Specify name to interact those with the same name only.
     linked: {
         name: "some-group"
     }
 }

(static) transition :Object

Source:

• config/Options.js, line 332

Properties:

Type:

• Object

Example

transition: {
   duration: 500
}

(static) zoom :Object

Source:

• config/Options.js, line 124

See:

• Demo:zoom

• Demo:drag zoom

Properties:

Type:

• Object

Example

zoom: {
     enabled: {
         type: "drag"
     },
     rescale: true,
     extent: [1, 100]  // enable more zooming
     x: {
         min: -1,  // set min range
         max: 10  // set max range
     },
     onzoomstart: function(event) { ... },
     onzoom: function(domain) { ... },
     onzoomend: function(domain) { ... },

     // show reset button when is zoomed-in
     resetButton: true,

     // customized text value for reset zoom button
     resetButton: {
         text: "Unzoom"
     }
 }