@domoinc/bar-chart

BarChart - Domo Widget

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@domoinc/bar-chart
2.3.16 years ago7 years agoMinified + gzip package size for @domoinc/bar-chart in KB

Readme

BarChart

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

```js
//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 = chartNames0; //var chartName = chartNames1; //var chartName = chartNames2; //var chartName = chartNames3; //var chartName = chartNames4; //var chartName = chartNames5; //var chartName = chartNames6; var chartName = chartNames7;
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;
} }
```