@domoinc/bar-chart

BarChart

<img src=media/Horizontal.png height=225 width=225> <img src=media/HorizontalGrouped.png height=225 width=225> <img src=media/HorizontalMultiSeries.png height=225 width=225> <img src=media/HorizontalStacked.png height=225 width=225> <img src=media/Vertical.png height=225 width=225> <img src=media/VerticalGrouped.png height=225 width=225> <img src=media/VerticalMultiSeries.png height=225 width=225> <img src=media/VerticalStacked.png height=225 width=225>

Configuration Options

axesLabelColor

Type: color
Default: #888

Color of all the labels on the Axis.

axesLabelFontFamily

Type: string
Default: Open Sans

Font family for axis labels.

axesLabelSize

Type: number
Default: 11
Units: px

Size in pixels of the labels.

axesLineColor

Type: color
Default: #E3E3E3

Color of all lines found in an Axis.

barLabelFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d.value); }

Format for the bar labels

barPadding

Type: number
Default: 0.25

Padding between the bars

chartLabelColor

Type: color
Default: #888888

Color any general chart labels.

chartName

Type: string
Default: BarChart

Name of chart for Reporting.

chartPrimarySeriesColors

Type: colorArray
Default: #D9EBFD,#B7DAF5,#90c4e4,#73B0D7,#4E8CBA,#31689B,#DDF4BA,#BBE491,#A0D771,#80C25D,#559E38,#387B26,#FDECAD,#FCCF84,#FBAD56,#FB8D34,#E45621,#A43724,#F3E4FE,#DDC8EF,#C5ACDE,#B391CA,#8F6DC0,#7940A1,#FCD7E6,#FBB6DD,#F395CD,#EE76BF,#CF51AC,#A62A92,#D8F4DE,#ABE4CA,#8DD5BE,#68BEA8,#46998A,#227872,#FDDDDD,#FCBCB7,#FD9A93,#FD7F76,#e45850,#c92e25

The primary colors used to represent series data.

colors

Type: array
Default: null

Specified colors to be used in color scale

generalSeparatorColor

Type: color
Default: #FFFFFF

Color is used to to outline bar segments filled with the washout color to distinguish the different segments.

generalWashoutColor

Type: color
Default: #E4E5E5

Color is indicate bar segments that are not being hightlighted on events such as a mouse hover.

hasSeriesData

Type: boolean
Default: false

Determines if the chart should have just one color or multiple. Used primarily with single layout

height

Type: number
Default: 100
Units: px

Height of the chart.

layout

Type: string
Default: single

Determines if the chart is stacked or grouped, or single bars

orientation

Type: string
Default: vertical

Determines if the orientation is vertical or horizontal

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation.

showXAxis

Type: boolean
Default: true

Flag to show the Axis

showYAxis

Type: boolean
Default: true

Flag to show the Y Axis

textFontFamily

Type: string
Default: Open Sans

Font family for any text.

textSize

Type: number
Default: 12
Units: px

General size in pixels for any text.

toolTipTextSize

Type: number
Default: 12
Units: px

tooltipBackgroundColor

Type: color
Default: #555555

Background color on any tool tips.

tooltipTextColor

Type: color
Default: #FFFFFF

Color of any text inside a tooltip.

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 100
Units: px

Width of the chart.

xAxisAddGridlines

Type: boolean
Default: false

Flag to show the gridlines

xAxisDisplayTicks

Type: boolean
Default: true

Flag to show the tick line

xAxisOrient

Type: string
Default: bottom

Sets the orientation of the axis

xAxisTickFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d); }

Label formatter for the ticks

xScale

Type: scale
Default: null

X Axis Scale.

yAxisAddGridlines

Type: boolean
Default: false

Flag to show the gridlines

yAxisDisplayTicks

Type: boolean
Default: true

Flag to show the tick line

yAxisOrient

Type: string
Default: left

Sets the orientation of the axis

yAxisTickFormat

Type: function
Default: function (d) { return i18n.summaryNumber(d); }

Label formatter for the ticks

yScale

Type: scale
Default: null

Y Axis Scale.

Data Definition

Example

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

  ['South', 110, 'Jan'],
  ['South', 120, 'Feb'],
  ['South', 90, 'Mar'],
  ['South', 90, 'Apr'],

  ['East', 80, 'Jan'],
  ['East', 70, 'Feb'],
  ['East', 60, 'Mar'],
  ['East', 55, 'Apr'],

  ['West', 40, 'Jan'],
  ['West', 50, 'Feb'],
  ['West', 30, 'Mar'],
  ['West', 30, 'Apr']
];
var sampleData1 = [
  ['Jan', 2],
  ['Feb', 4],
  ['Mar', 8],
  ['Apr', 13]
];
var sampleData2 = [
  ['North', 100, 'North'],
  ['South', 400, 'South'],
  ['East', 300, 'East'],
  ['West', 100, 'West']
];

var aHeight = 400;
var aWidth = 400;


//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr({
    width: aWidth + 100,
    height: aHeight + 100
  })
  .append("g")
  .attr("transform", "translate(60,45)")
  .chart("BarChart")
  .c({
    width: aWidth,
    height: aHeight
  });


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


var chartNames = [
  'DomoBarChartHorizontalDomo',
  'DomoBarChartVerticalStackedDomo',
  'DomoBarChartVerticalMultiSeriesDomo',
  'DomoBarChartVerticalGroupedDomo',
  'DomoBarChartVerticalDomo',
  'DomoBarChartHorizontalStackedDomo',
  'DomoBarChartHorizontalMultiSeriesDomo',
  'DomoBarChartHorizontalGroupedDomo'
];

//var chartName = chartNames[0];
//var chartName = chartNames[1];
//var chartName = chartNames[2];
//var chartName = chartNames[3];
//var chartName = chartNames[4];
//var chartName = chartNames[5];
//var chartName = chartNames[6];
var chartName = chartNames[7];


drawChartByName(chartName);


function drawChartByName(theChartName) {
  switch (theChartName) {
    case 'DomoBarChartHorizontalDomo':
      chart.c({
        layout: 'single',
        hasSeriesData: false,
        orientation: 'horizontal',
        yAxisAddGridlines: false
      })
        .draw(sampleData1);
      break;


    case 'DomoBarChartVerticalStackedDomo':
      chart.c({
        layout: 'single',
        hasSeriesData: true,
        yAxisAddGridlines: true
      })
        .draw(sampleData);
      break;


    case 'DomoBarChartVerticalMultiSeriesDomo':
      chart.c({
        layout: 'single',
        hasSeriesData: true,
        yAxisAddGridlines: true
      })
        .draw(sampleData2);
      break;


    case 'DomoBarChartVerticalGroupedDomo':
      chart.c({
        layout: 'grouped',
        hasSeriesData: true,
        yAxisAddGridlines: true
      })
        .draw(sampleData);
      break;


    case 'DomoBarChartVerticalDomo':
      chart.c({
        layout: 'single',
        hasSeriesData: false,
        yAxisAddGridlines: true
      })
        .draw(sampleData1);
      break;


    case 'DomoBarChartHorizontalStackedDomo':
      chart.c({
        layout: 'stacked',
        hasSeriesData: true,
        orientation: 'horizontal',
        yAxisAddGridlines: false
      })
        .draw(sampleData);
      break;


    case 'DomoBarChartHorizontalMultiSeriesDomo':
      chart.c({
        layout: 'single',
        hasSeriesData: true,
        orientation: 'horizontal',
        yAxisAddGridlines: false
      })
        .draw(sampleData2);
      break;


    case 'DomoBarChartHorizontalGroupedDomo':
      chart.c({
        layout: 'grouped',
        hasSeriesData: true,
        orientation: 'horizontal',
        yAxisAddGridlines: false
      })
        .draw(sampleData);
      break;
  }
}