Design

d3.select('#chart')
  .append('svg')
  .chart('configurable', {
    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'}
      secondaryY: {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: 0, y: 10}, ...]},
    {key: 'series-a-1', values: [{x: 0, y: 10}, ...]}
  ],
  b: [{key: 'series-b', values: [...]}]
};

chart.draw(data);

Charts

Available options:

• 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, secondaryX, secondaryY. By default, only x- and y-axes are shown and set scales for whole chart based on all data. secondaryX or secondaryY are only displayed if specified and set separate scale for data specified in dataKey.

Available options:

• dataKey {String|Array}: (optional) key(s) to pull axis data from and bind scales to. Default is all data
• 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

Available options:

• 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

Available 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

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