@domoinc/multiline-chart/bower_components/Axis/README.md

MultiLineChart - Domo Widget

# Axis



<img src=media/widget.png height=500 width=500> 

## Configuration Options


#### addBaseline
Type: `boolean`  
Default: `false`  

Adds the baseline path above the labels

#### addGridlines
Type: `boolean`  
Default: `false`  

Flag to show vertical or horizontal grid lines.

#### addLabels
Type: `boolean`  
Default: `true`  

Flag to show the text labels on the axis

#### addTicks
Type: `boolean`  
Default: `false`  

Flag to show the tick lines on the axis.

#### addZeroline
Type: `boolean`  
Default: `false`  

Makes the gridline corresponding to the zero tick show, and have increased stroke width

#### axesLabelColor
Type: `color`  
Default: `#888`  

Color of all the labels on the axes

#### axesLabelFontFamily
Type: `string`  
Default: `Open Sans`  

Font family for axes labels

#### axesLabelLetterSpacing
Type: `number`  
Default: `0`  
Units: `px`

Letter spacing for the axes labels.

#### axesLabelSize
Type: `number`  
Default: `11`  
Units: `px`

Size of the labels

#### axesLineColor
Type: `color`  
Default: `#E3E3E3`  

Color of all lines found in the axes

#### chartName
Type: `string`  
Default: `Axis`  

Name of chart for Reporting.

#### duration
Type: `number`  
Default: `750`  
Units: `ms`

Duration of the animation

#### height
Type: `number`  
Default: `250`  
Units: `px`



#### intelligentTicks
Type: `boolean`  
Default: `true`  

Try and show an appropriate number of ticks given available space.

#### intelligentTrunc
Type: `boolean`  
Default: `true`  

Truncate the labels so they do not over lap.

#### maxLegendSpace
Type: `number`  
Default: `50`  



#### orient
Type: `string`  
Default: `bottom`  

Sets the orientation of the axis. Options: bottom, top, left, right

#### scale
Type: `scale`  
Default: `function scale(x) {
	      return output(x);
	    }`  

d3 scale object for the axis.

#### shouldValidate
Type: `boolean`  
Default: `true`  

Flag for turning off data validation

#### showTooltip
Type: `boolean`  
Default: `false`  

undefined

#### textFontFamily
Type: `string`  
Default: `Open Sans`  



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

Label format function for the tick labels.

#### tickPadding
Type: `number`  
Default: `7`  

Padding between the tick line and text.

#### tickSize
Type: `number`  
Default: `5`  

Size of the tick line.

#### tickSpacing
Type: `number`  
Default: `40`  

Space between each tick.

#### tooltipBackgroundColor
Type: `color`  
Default: `#555555`  



#### tooltipTextColor
Type: `color`  
Default: `#FFFFFF`  



#### tooltipTextSize
Type: `number`  
Default: `14`  
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`



#### x
Type: `number`  
Default: `0`  

The x coordinate for the axis.

#### y
Type: `number`  
Default: `0`  

The y coordinate for the axis.

## Data Definition


## Events


#### Dispatch Events

#### External Events


## Example

```js  
var aHeight = 400;
var aWidth = 400;

// var ascale = d3.scale.ordinal().domain(d3.range(0, 1000)).rangePoints([0,aWidth], 0);
// var ascale = d3.scale.linear().domain([-1000, 1000]).range([0, aWidth]);
var ascale = d3.time.scale().domain([new Date('2014-01-11'), new Date('2014-12-29')]).range([0,500]);
// var ascale = d3.scale.ordinal().domain(['A','B','C']).rangeRoundBands([0, aWidth], 0.25);

//Initialze the widget
var chart = d3.select("#vis")
  .append("svg")
  .attr('width', 500)
  .attr('height', 500)
  .append("g")
  .attr("transform", "translate(50,250)")
  .chart("Axis")
  .c({
    'width': aWidth,
    'height': aHeight,
    'scale': ascale,

    //'addGridlines': true,
    // 'addGridlines': false,
    //'addZeroline': true,
    // 'addZeroline': false,
    //'addTicks': true,
    // 'addTicks': false,

    //'addBaseline': true,
    // 'addBaseline': false,
    //'tickSize': 5,

    // 'orient': 'top',
    'orient': 'bottom',
    // 'orient': 'top',
    // 'orient': 'right',

    showTooltip: true,
  })


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


// var orient = 'top';
// var orient = 'bottom';
// var orient = 'left';
var orient = 'right';

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': true,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': false,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': true,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': false,
//     'addTicks': true,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': true,
//     'addZeroline': false,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': true,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

// setTimeout(function() {
//   chart.c({
//     'orient': orient,
//     'addGridlines': false,
//     'addZeroline': false,
//     'addTicks': false,
//   })
//   chart.draw();
// }, 500)

```