@domoinc/nested-bar-chart

NestedBarChart

Configuration Options

axesFontColor

Type: color
Default: #8A8D8E

axesFontSize

Type: number
Default: 11
Units: px

barChartType

Type: string
Default: vertical

Type of bar chart (eg: horizontal or vertical)

chartName

Type: string
Default: NestedBarChart

Name of chart for reporting

height

Type: number
Default: 250
Units: px

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: Open Sans

tooltipBackground

Type: color
Default: #555555

tooltipFontColor

Type: color
Default: #FFFFFF

tooltipTextSize

Type: number
Default: 12
Units: px

undefined

updateSizeableConfigs

Type: boolean
Default: true

Flag for turning off the mimic of illustrator's scale functionality

width

Type: number
Default: 250
Units: px

Data Definition

Category

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[0] === undefined ? undefined : String(line[0]); }

Series

Type: string

Default validate:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

function (line) { return line[2] === undefined ? undefined : String(line[2]); }

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[1]); }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var sampleData = [
  ['North', 85, 'Jan'],
  ['North', 60, 'Feb'],

  ['South', 110, 'Jan'],
  ['South', 120, 'Feb'],

  ['East', 80, 'Jan'],
  ['East', 70, 'Feb'],

  ['West', 40, 'Jan'],
  ['West', 50, 'Feb'],
];

var aHeight = 400;
var aWidth = 400;


//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    width: '500px',
    height: '500px'
  })
  .append('g')
  .attr('transform', 'translate(61,35)')
  .chart('NestedBarChart')
  .c({
    width: aWidth,
    height: aHeight,
    // barChartType: 'horizontal',
  });


//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(sampleData)