# CAIconTrendsWithText





## Configuration Options


#### animationDuration
Type: `number`  
Default: `2000`  
Units: `ms`

The duration of the line animation in ms.

#### chartName
Type: `string`  
Default: `"CAIconTrendsWithText"`  

Name of chart for Reporting.

#### drawFromCenter
Type: `boolean`  
Default: `true`  

Draws line chart from center of its height box

#### endPointRadius
Type: `number`  
Default: `3`  
Units: `px`

Radius of the point at the end of the sparkline.

#### generalFillBadColor
Type: `color`  
Default: `"#E4584F"`  

Color meant to indicate the line is going down.

#### generalFillGoodColor
Type: `color`  
Default: `"#80C25D"`  

Color meant to indicate the line is going up.

#### generalStrokeBadColor
Type: `color`  
Default: `"#C92E25"`  

Stroke color meant to indicate the line is going down.

#### generalStrokeGoodColor
Type: `color`  
Default: `"#559E38"`  

Stroke color meant to indicate the line is going up.

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

Height of the chart.

#### isOnMobile
Type: `boolean`  
Default: `false`  

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

#### lineWidth
Type: `number`  
Default: `2`  
Units: `px`

Thickness of the sparkline

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

Flag for turning off data validation

#### updateSizeableConfigs
Type: `boolean`  
Default: `true`  

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

#### width
Type: `number`  
Default: `250`  

Width of the chart.

## Data Definition


#### Date
Type: `date`

Default validate:  
```js
function (d) {
	          return new Date(this.accessor(d)) !== 'Invalid Date';
	        }
```

Default accessor:  
```js
function (line) {
	          return line[0];
	        }
```

#### Value
Type: `number`

Default validate:  
```js
function (d) {
	          return !isNaN(this.accessor(d));
	        }
```

Default accessor:  
```js
function (line) {
	          return parseFloat(line[1]);
	        }
```

## Events


#### Dispatch Events

#### External Events


## Example

```js  
//Setup some fake data
var data = [
  ["2014-01-01", 44.0234],
  ["2014-02-01", 40.2131],
  ["2014-03-01", 25.4532],
  ["2014-04-01", 53.0385],
  ["2014-05-01", 44.2341],
  ["2014-06-01", 40.4543],
  ["2014-07-01", 30.3234],
  ["2014-08-01", 44.2342],
  ["2014-09-01", 40.3423],
  ["2014-10-01", 56.4232]
];

//Initialze the widget
var container = d3.select('#vis');

var bBox = container.select("[id^=chartBounds]")
  .node()
  .getBBox();

var gWidgetGroup = container.select("[id^=DomoWidgetLockDomo]");

// Transform our chart's container to fit where the user placed the wiget
gWidgetGroup.attr("transform", "translate(" + bBox.x + "," + bBox.y + ")")
  .selectAll("*")
  .remove();

var chart = gWidgetGroup
  .chart('CAIconTrendsWithText')
  .c({
    width: bBox.width,
    height: bBox.height
  });

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

// setTimeout(function () { chart.draw();}, 10000);

```