diff --git a/packages/clay-charts/demos/data/dummy-data-columns-1.json b/packages/clay-charts/demos/data/dummy-data-columns-1.json
new file mode 100644
index 0000000000..be6c9b9692
--- /dev/null
+++ b/packages/clay-charts/demos/data/dummy-data-columns-1.json
@@ -0,0 +1,21 @@
+{
+	"data": [
+		{
+			"data": [20, 60, 80, 100, 60, 40],
+			"id": "sample_data_special",
+			"name": "First data"
+		},
+		{
+			"data": [500, 230, 110, 410, 150, 250],
+			"id": "data2"
+		},
+		{
+			"data": [550, 290, 350, 240, 190, 25],
+			"id": "data3"
+		},
+		{
+			"data": [100, 130, 310, 520, 580, 210],
+			"id": "data4"
+		}
+	]
+}
\ No newline at end of file
diff --git a/packages/clay-charts/demos/data/dummy-data-columns-2.json b/packages/clay-charts/demos/data/dummy-data-columns-2.json
new file mode 100644
index 0000000000..693e0917bf
--- /dev/null
+++ b/packages/clay-charts/demos/data/dummy-data-columns-2.json
@@ -0,0 +1,14 @@
+{
+	"data": [
+		{
+			"color": "darkblue",
+			"data": [30, 90, 60, 50, 35, 80],
+			"id": "data1",
+			"name": "Data 1 (darkblue)"
+		},
+		{
+			"data": [100, 200, 300, 400, 150, 250],
+			"id": "data2"
+		}
+	]
+}
\ No newline at end of file
diff --git a/packages/clay-charts/demos/geomap.html b/packages/clay-charts/demos/geomap.html
index 732b6b3b21..69e6cc08a0 100644
--- a/packages/clay-charts/demos/geomap.html
+++ b/packages/clay-charts/demos/geomap.html
@@ -27,6 +27,12 @@ <h3>Metal Geomap</h3>
 	</div>
 
 	<script type="text/javascript">
+		var data = {
+			features: [{
+				properties: {},
+			}],
+		};
+
 		var geomap = new metal.Geomap({
 			color: {
 				range: {
@@ -36,7 +42,23 @@ <h3>Metal Geomap</h3>
 				selected: '#ff3300',
 				value: 'gdp_md_est',
 			},
-			data: 'data/world-low-res.geo.json',
+
+			// Pass data as a string
+			// data: 'data/world-low-res.geo.json',
+
+			// Pass data as an object
+			// data: {
+			//   features: [{
+			//     properties: {},
+			//   }],
+			// },
+
+			// Pass data as a Promise
+			data: () => {
+				return fetch('data/world-low-res.geo.json')
+					.then(res => res.json());
+			},
+
 		}, '#map');
 
 
diff --git a/packages/clay-charts/demos/index.html b/packages/clay-charts/demos/index.html
index ec52d6fc36..fab96fc4f3 100644
--- a/packages/clay-charts/demos/index.html
+++ b/packages/clay-charts/demos/index.html
@@ -338,8 +338,41 @@ <h2>Bubble</h2>
 			]
 		};
 
-		var lineChart = new metal.LineChart({
-			columns: dummyData.columns_1,
+		var lineChartData = {
+			columns_1: 'data/dummy-data-columns-1.json',
+			columns_2: 'data/dummy-data-columns-2.json',
+			columns_3: function() {
+				return Promise.resolve([
+					{
+						data: [230, 190, 300, 500, 300, 400],
+						id: 'data1',
+						name: 'Data 1 (this data set has 3 columns)'
+					},
+					{
+						data: [50, 20, 10, 40, 15, 25],
+						id: 'data2'
+					},
+					{
+						data: [130, 150, 200, 300, 200, 100],
+						id: 'data3'
+					}
+				])
+			},
+			columns_4: [
+				{
+					data: [50, 20, 10, 40, 15, 25],
+					id: 'data1',
+					name: 'Data 1'
+				},
+				{
+					data: [130, 150, 200, 300, 200, 100],
+					id: 'data2'
+				}
+			]
+		};
+
+		var lineChartWithData = new metal.LineChart({
+			columns: lineChartData.columns_1,
 			tooltip: {
 				format: {
 					value(d) {
@@ -352,45 +385,45 @@ <h2>Bubble</h2>
 					position: 'right'
 			},
 		}, '#line');
-		createChartControls(lineChart, 'line');
+		createChartControls(lineChartWithData, 'line', lineChartData);
 
 		var splineChart = new metal.SplineChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#spline');
 		createChartControls(splineChart, 'spline');
 
 		var stepChart = new metal.StepChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#step');
 		createChartControls(stepChart, 'step');
 
 		var areaLineChart = new metal.AreaLineChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#area');
 		createChartControls(areaLineChart, 'area');
 
 		var areaSplineChart = new metal.AreaSplineChart({
-			columns: dummyData.columns_2
+			data: dummyData.columns_2
 		}, '#area-spline');
 		createChartControls(areaSplineChart, 'area-spline');
 
 		var areaStepChart = new metal.AreaStepChart({
-			columns: dummyData.columns_3
+			data: dummyData.columns_3
 		}, '#area-step');
 		createChartControls(areaStepChart, 'area-step');
 
 		var barChart = new metal.BarChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#bar');
 		createChartControls(barChart, 'bar');
 
 		var scatterChart = new metal.ScatterChart({
-			columns: dummyData.columns_1
+			data: dummyData.columns_1
 		}, '#scatter');
 		createChartControls(scatterChart, 'scatter');
 
 		var pieChart = new metal.PieChart({
-			columns: dummyPercentData.columns_1,
+			data: dummyPercentData.columns_1,
 			color: {
 				tiles: true
 			},
@@ -409,12 +442,12 @@ <h2>Bubble</h2>
 		createChartControls(pieChart, 'pie', dummyPercentData);
 
 		var donutChart = new metal.DonutChart({
-			columns: dummyPercentData.columns_1,
+			data: dummyPercentData.columns_1,
 		}, '#donut');
 		createChartControls(donutChart, 'donut', dummyPercentData);
 
 		var gaugeChart = new metal.GaugeChart({
-			columns: dummyGaugeData.columns_1
+			data: dummyGaugeData.columns_1
 		}, '#gauge');
 		createChartControls(gaugeChart, 'gauge', dummyGaugeData);
 
@@ -422,12 +455,12 @@ <h2>Bubble</h2>
 			bubble: {
 				maxR: 50
 			},
-			columns: dummyData.columns_1,
+			data: dummyData.columns_1,
 			labels: false,
 			point: {
 				pattern: ['circle']
 			},
-			type: 'bubble',
+			type: 'bubble'
 		}, '#bubble');
 
 		function createChartControls(chart, type, data) {
@@ -451,7 +484,8 @@ <h2>Bubble</h2>
 
 			dataSelect.addEventListener('change', function(event) {
 				chart.loading = false;
-				chart.columns = data ? data[dataSelect.value] : dummyData[dataSelect.value];
+
+				chart.data = data ? data[dataSelect.value] : dummyData[dataSelect.value];
 			});
 
 			element.parentNode.appendChild(chartControls);
diff --git a/packages/clay-charts/src/ChartBase.js b/packages/clay-charts/src/ChartBase.js
index 8abeea796f..bf722465ae 100644
--- a/packages/clay-charts/src/ChartBase.js
+++ b/packages/clay-charts/src/ChartBase.js
@@ -1,4 +1,5 @@
 import {bb, d3} from 'billboard.js';
+import {isFunction, isString} from 'metal';
 import {Config} from 'metal-state';
 import types from './utils/types';
 
@@ -70,19 +71,26 @@ const ChartBase = {
 	 * @inheritDoc
 	 */
 	attached() {
-		const config = this._constructChartConfig();
+		const data = this.columns || this.data;
 
-		this.bbChart = bb.generate(config);
+		this.resolveData_(data).then(data => {
+			this.columns = data;
+			this.data = data;
 
-		this.on('columnsChanged', this._handleColumnsChanged.bind(this));
-		this.on('groupsChanged', this._handleGroupsChanged.bind(this));
-		this.on('_loadingChanged', this._handleLoadingChanged.bind(this));
-		this.on('regionsChanged', this._handleRegionsChanged.bind(this));
-		this.on('sizeChanged', this._handleSizeChanged.bind(this));
-		this.on('typeChanged', this._handleTypeChanged.bind(this));
-		this.on('xChanged', this._handleXChanged.bind(this));
+			const config = this._constructChartConfig();
+			this.bbChart = bb.generate(config);
 
-		this._loading = false;
+			this.on('columnsChanged', this._handleColumnsChanged.bind(this));
+			this.on('dataChanged', this._handleDataChanged.bind(this));
+			this.on('groupsChanged', this._handleGroupsChanged.bind(this));
+			this.on('_loadingChanged', this._handleLoadingChanged.bind(this));
+			this.on('regionsChanged', this._handleRegionsChanged.bind(this));
+			this.on('sizeChanged', this._handleSizeChanged.bind(this));
+			this.on('typeChanged', this._handleTypeChanged.bind(this));
+			this.on('xChanged', this._handleXChanged.bind(this));
+
+			this._loading = false;
+		});
 	},
 
 	/**
@@ -115,7 +123,6 @@ const ChartBase = {
 	 */
 	_constructChartConfig: function() {
 		const state = this._getStateObj();
-
 		const axis = this._constructAxisConfig();
 		const data = this._constructDataConfig();
 		const zoom = this._constructZoomConfig();
@@ -194,7 +201,6 @@ const ChartBase = {
 	 */
 	_constructColumnsConfig: function() {
 		const {columns} = this._getStateObj();
-
 		const config = {
 			columns: this._createColumnsArray(columns),
 		};
@@ -257,7 +263,6 @@ const ChartBase = {
 	_constructDataConfig: function(attachListeners = true) {
 		const state = this._getStateObj();
 		const colors = this._constructColorsConfig();
-
 		const config = {
 			color: state.colorFormatter,
 			colors: colors,
@@ -348,9 +353,7 @@ const ChartBase = {
 	 */
 	_constructZoomConfig: function() {
 		const state = this._getStateObj();
-
 		const zoom = state.zoom;
-
 		const config = zoom || {};
 
 		/**
@@ -433,7 +436,6 @@ const ChartBase = {
 	 */
 	_handleColumnsChanged: function({prevVal}) {
 		const data = this._constructDataConfig(false);
-
 		const newVal = data.columns;
 		prevVal = this._createColumnsArray(prevVal);
 
@@ -450,6 +452,18 @@ const ChartBase = {
 		}
 	},
 
+	/**
+	 * Handles `data` changes.
+	 * @param {Object} event The change event.
+	 * @protected
+	 * @return {Promise}
+	 */
+	_handleDataChanged(event) {
+		return this.resolveData_(event.newVal).then(data => {
+			this.columns = data;
+		});
+	},
+
 	/**
 	 * Maps `groups` state to chart via `bb.groups` method.
 	 * @protected
@@ -524,6 +538,24 @@ const ChartBase = {
 		}, {});
 	},
 
+	/**
+	 * Check's the data or columns option and resolves this `data_` accordingly.
+	 * @return {Promise}
+	 * @param {?Array|Function|String} data the data to resolve.
+	 * @protected
+	 */
+	resolveData_(data) {
+		if (Array.isArray(data)) {
+			return Promise.resolve(data);
+		} else if (isFunction(data)) {
+			return data().then(val => val);
+		} else if (isString(data)) {
+			return fetch(data)
+				.then(res => res.json())
+				.then(res => res.data);
+		}
+	},
+
 	/**
 	 * Determines which ids should be passed to the unload property.
 	 * @static
@@ -731,21 +763,52 @@ ChartBase.STATE = {
 	 * @memberof ChartBase
 	 * @type {?Array|undefined}
 	 * @default undefined
+	 * @deprecated since 2.0.0-rc.2
 	 */
-	columns: Config.arrayOf(
-		Config.shapeOf({
-			axis: Config.oneOf(['y', 'y2']),
-			class: Config.string(),
-			color: Config.string(),
-			data: Config.array().required(),
-			hide: Config.bool(),
-			id: Config.required().string(),
-			name: Config.string(),
-			regions: Config.array(),
-			type: Config.oneOf(types.all),
-			x: Config.string(),
-		})
-	),
+	columns: Config.oneOfType([
+		Config.arrayOf(
+			Config.shapeOf({
+				axis: Config.oneOf(['y', 'y2']),
+				class: Config.string(),
+				color: Config.string(),
+				data: Config.array().required(),
+				hide: Config.bool(),
+				id: Config.required().string(),
+				name: Config.string(),
+				regions: Config.array(),
+				type: Config.oneOf(types.all),
+				x: Config.string(),
+			})
+		),
+		Config.func(),
+		Config.string(),
+	]),
+
+	/**
+	 * Data that will be rendered to the chart.
+	 * @instance
+	 * @memberof ChartBase
+	 * @type {?Array|undefined}
+	 * @default undefined
+	 */
+	data: Config.oneOfType([
+		Config.arrayOf(
+			Config.shapeOf({
+				axis: Config.oneOf(['y', 'y2']),
+				class: Config.string(),
+				color: Config.string(),
+				data: Config.array().required(),
+				hide: Config.bool(),
+				id: Config.required().string(),
+				name: Config.string(),
+				regions: Config.array(),
+				type: Config.oneOf(types.all),
+				x: Config.string(),
+			})
+		),
+		Config.func(),
+		Config.string(),
+	]),
 
 	/**
 	 * Configuration options for donut chart.
diff --git a/packages/clay-charts/src/Geomap.js b/packages/clay-charts/src/Geomap.js
index 246f1ace75..dad47c4536 100644
--- a/packages/clay-charts/src/Geomap.js
+++ b/packages/clay-charts/src/Geomap.js
@@ -1,3 +1,4 @@
+import {isFunction, isObject, isString} from 'metal';
 import Component from 'metal-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -47,7 +48,21 @@ class Geomap extends Component {
 		this.path = d3.geoPath().projection(this.projection);
 		this._selected = null;
 
-		d3.json(this.data, this._onDataLoad.bind(this));
+		this._onDataLoadHandler = this._onDataLoad.bind(this);
+
+		if (isString(this.data)) {
+			d3.json(this.data, this._onDataLoadHandler);
+		} else if (isObject(this.data) && !isFunction(this.data)) {
+			this._onDataLoadHandler.apply(this, [null, this.data]);
+		} else if (isFunction(this.data)) {
+			this.data()
+				.then(val => {
+					this._onDataLoadHandler.apply(this, [null, val]);
+				})
+				.catch(err => {
+					this._onDataLoadHandler.apply(this, [err, null]);
+				});
+		}
 	}
 
 	/**
@@ -216,13 +231,17 @@ Geomap.STATE = {
 	}),
 
 	/**
-	 * Path to the geo-json data
+	 * Geo-json data
 	 * @instance
 	 * @memberof Geomap
-	 * @type {?String|undefined}
+	 * @type {?Function|?Object|?String}
 	 * @default undefined
 	 */
-	data: Config.string().required(),
+	data: Config.oneOfType([
+		Config.func(),
+		Config.object(),
+		Config.string(),
+	]).required(),
 };
 
 export {Geomap};
diff --git a/packages/clay-charts/src/LineChart.js b/packages/clay-charts/src/LineChart.js
index 6ff5db2e47..a0756c3e6a 100644
--- a/packages/clay-charts/src/LineChart.js
+++ b/packages/clay-charts/src/LineChart.js
@@ -16,20 +16,24 @@ LineChart.STATE = {
 	 * @type {?Array|undefined}
 	 * @default []
 	 */
-	columns: Config.arrayOf(
-		Config.shapeOf({
-			axis: Config.oneOf(['y', 'y2']),
-			class: Config.string(),
-			color: Config.string(),
-			data: Config.array().required(),
-			hide: Config.bool(),
-			id: Config.required().string(),
-			name: Config.string(),
-			regions: Config.array(),
-			type: Config.oneOf(types.point),
-			x: Config.string(),
-		})
-	),
+	columns: Config.oneOfType([
+		Config.arrayOf(
+			Config.shapeOf({
+				axis: Config.oneOf(['y', 'y2']),
+				class: Config.string(),
+				color: Config.string(),
+				data: Config.array().required(),
+				hide: Config.bool(),
+				id: Config.required().string(),
+				name: Config.string(),
+				regions: Config.array(),
+				type: Config.oneOf(types.all),
+				x: Config.string(),
+			})
+		),
+		Config.func(),
+		Config.string(),
+	]),
 
 	/**
 	 * The variety of chart that will be rendered.
diff --git a/packages/clay-charts/src/__tests__/AreaLineChart.js b/packages/clay-charts/src/__tests__/AreaLineChart.js
index 486c7d7e91..9385d93400 100644
--- a/packages/clay-charts/src/__tests__/AreaLineChart.js
+++ b/packages/clay-charts/src/__tests__/AreaLineChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('AreaLineChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new AreaLineChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new AreaLineChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/AreaSplineChart.js b/packages/clay-charts/src/__tests__/AreaSplineChart.js
index f3708ad1ce..e2f76d6623 100644
--- a/packages/clay-charts/src/__tests__/AreaSplineChart.js
+++ b/packages/clay-charts/src/__tests__/AreaSplineChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('AreaSplineChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new AreaSplineChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new AreaSplineChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/AreaStepChart.js b/packages/clay-charts/src/__tests__/AreaStepChart.js
index d461122546..1198a0a884 100644
--- a/packages/clay-charts/src/__tests__/AreaStepChart.js
+++ b/packages/clay-charts/src/__tests__/AreaStepChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('AreaStepChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new AreaStepChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new AreaStepChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/BarChart.js b/packages/clay-charts/src/__tests__/BarChart.js
index ed53a118bf..2a09af831a 100644
--- a/packages/clay-charts/src/__tests__/BarChart.js
+++ b/packages/clay-charts/src/__tests__/BarChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('BarChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new BarChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new BarChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/BubbleChart.js b/packages/clay-charts/src/__tests__/BubbleChart.js
index 3496bc640d..7c6e6082c7 100644
--- a/packages/clay-charts/src/__tests__/BubbleChart.js
+++ b/packages/clay-charts/src/__tests__/BubbleChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('BubbleChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new BubbleChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new BubbleChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/Chart.js b/packages/clay-charts/src/__tests__/Chart.js
index 876f1e1f62..0848457e5d 100644
--- a/packages/clay-charts/src/__tests__/Chart.js
+++ b/packages/clay-charts/src/__tests__/Chart.js
@@ -17,23 +17,20 @@ afterAll(() => {
 	bb.generate.mockRestore();
 });
 
-describe('Chart', function() {
-	it('should be pass correctly formatted configuration options to billboard.js', () => {
-		const chart = new Chart({
+describe.only('Chart', () => {
+	it('should be pass correctly formatted configuration options to billboard.js', async () => {
+		const chart = await new Chart({
 			columns: [],
 		});
-
 		const config = bb.generate.mock.calls[0][0];
-
 		expect(config.bindto).toBe(chart.refs.chart);
 
 		config.bindto = undefined;
-
 		expect(JSON.stringify(config)).toMatchSnapshot();
 	});
 
-	it('should format columns array into billboard.js compatible data', () => {
-		new Chart({
+	it('should format columns array into billboard.js compatible data', async () => {
+		await new Chart({
 			columns: [
 				{
 					axis: 'y',
@@ -81,14 +78,14 @@ describe('Chart', function() {
 		expect(JSON.stringify(config)).toMatchSnapshot();
 	});
 
-	it('should transform chart new type is passed', () => {
+	it('should transform chart new type is passed', async () => {
 		const transformMock = jest.fn();
 
 		bb.generate.mockReturnValue({
 			transform: transformMock,
 		});
 
-		const chart = new Chart({
+		const chart = await new Chart({
 			columns: [],
 			type: 'line',
 		});
@@ -98,14 +95,14 @@ describe('Chart', function() {
 		expect(transformMock.mock.calls[0][0]).toBe('spline');
 	});
 
-	it('should rerender chart when new columns are passed', () => {
+	it('should rerender chart when new columns are passed', async () => {
 		const loadMock = jest.fn();
 
 		bb.generate.mockReturnValue({
 			load: loadMock,
 		});
 
-		const chart = new Chart({
+		const chart = await new Chart({
 			columns: [
 				{
 					id: 'data1',
@@ -126,14 +123,14 @@ describe('Chart', function() {
 		expect(config).toMatchSnapshot();
 	});
 
-	it('should unload removed columns when new columns are passed', () => {
+	it('should unload removed columns when new columns are passed', async () => {
 		const loadMock = jest.fn();
 
 		bb.generate.mockReturnValue({
 			load: loadMock,
 		});
 
-		const chart = new Chart({
+		const chart = await new Chart({
 			columns: [
 				{
 					id: 'data1',
diff --git a/packages/clay-charts/src/__tests__/DonutChart.js b/packages/clay-charts/src/__tests__/DonutChart.js
index 0fb26023c7..78ecdb6227 100644
--- a/packages/clay-charts/src/__tests__/DonutChart.js
+++ b/packages/clay-charts/src/__tests__/DonutChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('DonutChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new DonutChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new DonutChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/GaugeChart.js b/packages/clay-charts/src/__tests__/GaugeChart.js
index 4f8729c0d2..b1740ea596 100644
--- a/packages/clay-charts/src/__tests__/GaugeChart.js
+++ b/packages/clay-charts/src/__tests__/GaugeChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('GaugeChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new GaugeChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new GaugeChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/Geomap.js b/packages/clay-charts/src/__tests__/Geomap.js
index 9253169f4a..0f9f809ed5 100644
--- a/packages/clay-charts/src/__tests__/Geomap.js
+++ b/packages/clay-charts/src/__tests__/Geomap.js
@@ -1,3 +1,4 @@
+import * as d3 from 'd3';
 import Geomap from '../Geomap';
 
 /**
@@ -10,15 +11,46 @@ function createMap(config = {}) {
 }
 
 describe('Geomap', () => {
-	it('should throw an error if required configuration is invalid', () => {
-		expect(createMap).toThrow();
+	it('should accept data as a string', () => {
+		d3.json = jest.fn();
+
+		const geomap = createMap({
+			data: './data/world-low-res.geo.json',
+		});
+
+		expect(geomap).toMatchSnapshot();
 	});
 
-	it('should not throw an error', () => {
+	it('should accept data as an object', () => {
 		const geomap = createMap({
-			data: '../../demos/data/world-low-res.geo.json',
+			data: {
+				features: [
+					{
+						properties: {},
+					},
+				],
+			},
 		});
 
 		expect(geomap).toMatchSnapshot();
 	});
+
+	it('should accept data as a function', () => {
+		const geomap = createMap({
+			data: () => {
+				return new Promise(resolve => {
+					setTimeout(() => {
+						resolve({
+							features: [
+								{
+									properties: {},
+								},
+							],
+						});
+					}, 500);
+				});
+			},
+		});
+		expect(geomap).toMatchSnapshot();
+	});
 });
diff --git a/packages/clay-charts/src/__tests__/LineChart.js b/packages/clay-charts/src/__tests__/LineChart.js
index 03de312d33..cb2c532d1f 100644
--- a/packages/clay-charts/src/__tests__/LineChart.js
+++ b/packages/clay-charts/src/__tests__/LineChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('LineChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new LineChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new LineChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/PieChart.js b/packages/clay-charts/src/__tests__/PieChart.js
index d795e05391..a324de9b3c 100644
--- a/packages/clay-charts/src/__tests__/PieChart.js
+++ b/packages/clay-charts/src/__tests__/PieChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('PieChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new PieChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new PieChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/ScatterChart.js b/packages/clay-charts/src/__tests__/ScatterChart.js
index 3ed93ad489..2bedd18e54 100644
--- a/packages/clay-charts/src/__tests__/ScatterChart.js
+++ b/packages/clay-charts/src/__tests__/ScatterChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('ScatterChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new ScatterChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new ScatterChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/SplineChart.js b/packages/clay-charts/src/__tests__/SplineChart.js
index 0f6a41facc..60c3324ee9 100644
--- a/packages/clay-charts/src/__tests__/SplineChart.js
+++ b/packages/clay-charts/src/__tests__/SplineChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('SplineChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new SplineChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new SplineChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/StepChart.js b/packages/clay-charts/src/__tests__/StepChart.js
index 301bbc20db..aef1a54549 100644
--- a/packages/clay-charts/src/__tests__/StepChart.js
+++ b/packages/clay-charts/src/__tests__/StepChart.js
@@ -18,8 +18,8 @@ afterAll(() => {
 });
 
 describe('StepChart', function() {
-	it('should be pass correct type to billboard.js', () => {
-		new StepChart({
+	it('should be pass correct type to billboard.js', async () => {
+		await new StepChart({
 			columns: [],
 		});
 
diff --git a/packages/clay-charts/src/__tests__/__snapshots__/Geomap.js.snap b/packages/clay-charts/src/__tests__/__snapshots__/Geomap.js.snap
index 1849c7346e..29fd78667b 100644
--- a/packages/clay-charts/src/__tests__/__snapshots__/Geomap.js.snap
+++ b/packages/clay-charts/src/__tests__/__snapshots__/Geomap.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Geomap should not throw an error 1`] = `
+exports[`Geomap should accept data as a function 1`] = `
 <div style="width: 100%; height: 100%;">
   <svg width="100%" height="100%">
     <rect fill="rgba(1, 1, 1, 0)" width="100%" height="100%"></rect>
@@ -10,3 +10,27 @@ exports[`Geomap should not throw an error 1`] = `
   </svg>
 </div>
 `;
+
+exports[`Geomap should accept data as a string 1`] = `
+<div style="width: 100%; height: 100%;">
+  <svg width="100%" height="100%">
+    <rect fill="rgba(1, 1, 1, 0)" width="100%" height="100%"></rect>
+    <g>
+      <g></g>
+    </g>
+  </svg>
+</div>
+`;
+
+exports[`Geomap should accept data as an object 1`] = `
+<div style="width: 100%; height: 100%;">
+  <svg width="100%" height="100%">
+    <rect fill="rgba(1, 1, 1, 0)" width="100%" height="100%"></rect>
+    <g>
+      <g>
+        <path vector-effect="non-scaling-stroke" fill="rgb(0, 0, 0)"></path>
+      </g>
+    </g>
+  </svg>
+</div>
+`;
diff --git a/packages/clay-charts/src/jsx/Chart.js b/packages/clay-charts/src/jsx/Chart.js
index 440cb2ee20..91da20013f 100644
--- a/packages/clay-charts/src/jsx/Chart.js
+++ b/packages/clay-charts/src/jsx/Chart.js
@@ -11,7 +11,7 @@ class ChartJSX extends JSXComponent {
 	 * @inheritDoc
 	 */
 	render() {
-		const loading = this.props.loading;
+		const loading = this.props._loading;
 
 		return (
 			<div class="metal-chart-container">