## Chart

### Usage

```jsx
import { Chart } from 'ui-components';

// Bar, HorizontalBar, Doughnut, Line
const data = {
	labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October'],
	datasets: [{
		label: 'Commits',
		data: [51, 65, 40, 49, 40, 33, 90, 88, 72, 85],
		backgroundColor: '#0099CC'
	}]
};

const options = Chart.Style.merge([Chart.Style.Default, Chart.Style.Axes]);

<Chart.Bar
	data={data}
	options={options}
/>

// Scatter
const data = {
	labels: 'Teams',
	datasets: [{
		label: ['Alpha', 'Bravo', 'Charlie', 'Delta', 'Echo'],
		data: [
			{ x: 10, y: 25, xPrior: 5, yPrior: 25 },
			{ x: 50, y: 75, xPrior: 65, yPrior: 75 },
			{ x: 90, y: 90, xPrior: 85, yPrior: 90 },
			{ x: 75, y: 50, xPrior: 25, yPrior: 50 },
			{ x: 25, y: 10, xPrior: 75, yPrior: 10 }
		],
		...Chart.Style.Point
	}]
};

const options = Chart.Style.merge([Chart.Style.Default, Chart.Style.Axes, Chart.Style.Scatter]);

<Chart.Scatter
	data={data}
	options={options}
/>
```

### Parameters

* `data` (required) is the data to display in the chart
* `options` (required) is an object of chart options
* `height` is the height of the canvas

### Notes

* This component uses [Chart.js](http://www.chartjs.org/docs/latest/); refer to their documentation for more information
* There are four default styles available: `Chart.Style.Default`, `Chart.Style.Axes`, `Chart.Style.Scatter` and `Chart.Style.Point`. These can be used to reduce the complexity of the `options` parameter in coordination with the `Chart.Style.merge()` function (which takes an array of option objects).