Design

d3.select('#chart')
  .append('svg')
  .chart('configurable', {
    type: 'Values',
    charts: [
      {
        type: 'Bars', 
        dataKey: 'a', 
        style: {'stroke-width': '2px'}
      },
      {
        type: 'Line', 
        dataKey: 'b', 
        labels: {format: ',.0f', style: {color: '#999'}}
      }
    ],
    axes: {
      x: {scale: {type: 'log'}, title: 'X Values'},
      y: {position: 'left', title: 'Bar Values'}
      y2: {position: 'right', dataKey: 'b', format: ',.0f', title: 'Line Values'}
    },
    legend: {
      type: 'Inset',
      position: {relative: 'top-right', x: 10, y: 10},
      dataKey: 'b'
    },
    title: 'Chart Title'
  })
  .height(400)
  .width(600);

data = {
  a: [
    {key: 'series-a-1', values: [{x: 'a', y: 10}, ...]},
    {key: 'series-a-1', values: [{x: 'a', y: 10}, ...]}
  ],
  b: [{key: 'series-b', values: [...]}]
};

chart.draw(data);

Charts

• type {String} Key for any defined d3.chart(type)
• dataKey {String} Key to pull chart series from
• labels {Object} (optional) label options, position, format, and style
• style {Object} (optional) Chart style
• class {String} (optional) CSS class for chart

Axes

axes is object with 4 options: x, y, x2, y2. By default, only x- and y-axes are shown and set scales for whole chart based on all data. x2 or y2 are only displayed if specified and set separate scale for data specified in dataKey.

• type {String} (optional) Type of axis to use (defined by d3.chart(type)). Default is Axis for XY data.
• dataKey {String|Array} key(s) to pull axis data from and bind scales to. Default is all data for x and y and is required for x2 and y2
• position {String} (optional) top, right, bottom, left. Default is bottom for x, left for y,
• display {Boolean} (optional) Set to false to hide axis (or set entire axis to false in configuration). Default is true for x and y and false for secondaryX and secondaryY unless options are specified for them, in which case the default is true
• title {String} (optional)
• scale {Object|Scale} (optional) scale or options for scale (see example below). Default is to use data min/max
• format {String|Function} (optional)

scale: d3.scale.linear() // ...
scale: {type: 'linear', domain: [0, 100], range: [0, 600]}
// For options other than type, domain, and range, pass in "arguments" array
scale: {type: 'ordinal', domain: [0, 100], rangeRoundBands: [[0, 600], 0.1, 0.05]}

Legend

• type {String} (optional) Legend (default) or Inset
• dataKey {String|Array} (optional) Filter legend to specific data key(s). Default is all data
• position {String|Object} (optional) top, right, bottom, or left or {x, y, relative: top-left, top-right, bottom-left, bottom-right}. Default is right

Label Options

• position {String} (optional) top, right, bottom, left. Default is top
• display {Boolean} (optional) Show/hide labels (or set entire labels property to false to hide). Default is false unless options are specified and then default is true.
• format {String|Function} (optional)
• style {Object} (optional) Label style

Scale Options

• type {String} (optional) linear, ordinal, log, and all available d3 scales including time. Default is linear.
• domain {Array} (optional) Default is min-max domain of data
• range {Array} (optional) Default is width/height of chart depending on x- or y-scale
• All other scale properties are available, but need "arguments" array passed in. For example, for rangeRoundBands with padding, use [[0, 100], 0.1, 0.5]