From 20ec19a6ee239127b68fcf6016245f5fd0df37d5 Mon Sep 17 00:00:00 2001
From: Ryan Mackey <ryan.o.mackey@gmail.com>
Date: Tue, 28 Jul 2020 12:39:49 -0500
Subject: [PATCH 1/5] feat: add skeleton error states

---
 packages/core/demo/data/bar.ts                | 19 ++++
 packages/core/demo/data/donut.ts              | 19 ++++
 packages/core/demo/data/index.ts              | 24 +++++
 packages/core/demo/data/line.ts               | 26 +++++
 packages/core/demo/data/pie.ts                | 14 +++
 .../core/src/components/graphs/skeleton.ts    | 95 ++++++++++++++++++-
 packages/core/src/interfaces/charts.ts        |  7 ++
 .../src/styles/components/_error-message.scss | 18 ++++
 .../core/src/styles/components/index.scss     |  1 +
 9 files changed, 222 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/src/styles/components/_error-message.scss

diff --git a/packages/core/demo/data/bar.ts b/packages/core/demo/data/bar.ts
index 75c4318c16..cc8c194588 100644
--- a/packages/core/demo/data/bar.ts
+++ b/packages/core/demo/data/bar.ts
@@ -478,6 +478,25 @@ export const simpleBarSkeletonOptions = {
 	}
 };
 
+// simple bar - error
+export const simpleBarErrorData = [];
+export const simpleBarErrorOptions = {
+	title: "Simple bar (error)",
+	axes: {
+		left: {},
+		bottom: {
+			scaleType: "labels"
+		}
+	},
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};
+
 // grouped bar - empty state
 export const groupedBarEmptyStateData = [];
 export const groupedBarEmptyStateOptions = {
diff --git a/packages/core/demo/data/donut.ts b/packages/core/demo/data/donut.ts
index 92f4d8d841..835460b25b 100644
--- a/packages/core/demo/data/donut.ts
+++ b/packages/core/demo/data/donut.ts
@@ -54,3 +54,22 @@ export const donutSkeletonOptions = {
 		loading: true
 	}
 };
+
+// donut - error
+export const donutErrorData = [];
+export const donutErrorOptions = {
+	title: "Donut (error)",
+	resizable: true,
+	donut: {
+		center: {
+			label: "Browsers"
+		}
+	},
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};
diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
index b04a3081e1..dab5b65198 100644
--- a/packages/core/demo/data/index.ts
+++ b/packages/core/demo/data/index.ts
@@ -194,6 +194,12 @@ let allDemoGroups = [
 				chartType: chartTypes.SimpleBarChart,
 				isDemoExample: false
 			},
+			{
+				options: barDemos.simpleBarErrorOptions,
+				data: barDemos.simpleBarErrorData,
+				chartType: chartTypes.SimpleBarChart,
+				isDemoExample: false
+			},
 			{
 				description:
 					"A grouped bar chart, also known as a clustered bar graph, multi-set bar chart, or grouped column chart, is a type of bar graph that is used to compare values across multiple categories.",
@@ -385,6 +391,12 @@ let allDemoGroups = [
 				data: donutDemos.donutSkeletonData,
 				chartType: chartTypes.DonutChart,
 				isDemoExample: false
+			},
+			{
+				options: donutDemos.donutErrorOptions,
+				data: donutDemos.donutErrorData,
+				chartType: chartTypes.DonutChart,
+				isDemoExample: false
 			}
 		]
 	},
@@ -467,6 +479,12 @@ let allDemoGroups = [
 				data: lineDemos.lineSkeletonData,
 				chartType: chartTypes.LineChart,
 				isDemoExample: false
+			},
+			{
+				options: lineDemos.lineErrorOptions,
+				data: lineDemos.lineErrorData,
+				chartType: chartTypes.LineChart,
+				isDemoExample: false
 			}
 		]
 	},
@@ -509,6 +527,12 @@ let allDemoGroups = [
 				data: pieDemos.pieSkeletonData,
 				chartType: chartTypes.PieChart,
 				isDemoExample: false
+			},
+			{
+				options: pieDemos.pieErrorOptions,
+				data: pieDemos.pieErrorData,
+				chartType: chartTypes.PieChart,
+				isDemoExample: false
 			}
 		]
 	},
diff --git a/packages/core/demo/data/line.ts b/packages/core/demo/data/line.ts
index 52f06d83ba..e5c3482898 100644
--- a/packages/core/demo/data/line.ts
+++ b/packages/core/demo/data/line.ts
@@ -422,3 +422,29 @@ export const lineSkeletonOptions = {
 		loading: true
 	}
 };
+
+// line - error
+export const lineErrorData = [];
+export const lineErrorOptions = {
+	title: "Line (error)",
+	axes: {
+		bottom: {
+			title: "2019 Annual Sales Figures",
+			mapsTo: "date",
+			scaleType: "time"
+		},
+		left: {
+			mapsTo: "value",
+			title: "Conversion rate",
+			scaleType: "linear"
+		}
+	},
+	curve: "curveMonotoneX",
+	data: {
+		loading: false,
+		error: {
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
+		}
+	}
+};
diff --git a/packages/core/demo/data/pie.ts b/packages/core/demo/data/pie.ts
index ed9dba7c26..e0ab526232 100644
--- a/packages/core/demo/data/pie.ts
+++ b/packages/core/demo/data/pie.ts
@@ -41,3 +41,17 @@ export const pieSkeletonOptions = {
 		loading: true
 	}
 };
+
+// pie - error
+export const pieErrorData = [];
+export const pieErrorOptions = {
+	title: "Pie (error)",
+	resizable: true,
+	data: {
+		loading: false,
+		error: {
+			title: 'No data available',
+			subtitle: 'Lorem ipsum dolor sit.'
+		}
+	}
+};
diff --git a/packages/core/src/components/graphs/skeleton.ts b/packages/core/src/components/graphs/skeleton.ts
index e7c7efbcb2..f97a78ef07 100644
--- a/packages/core/src/components/graphs/skeleton.ts
+++ b/packages/core/src/components/graphs/skeleton.ts
@@ -28,12 +28,23 @@ export class Skeleton extends Component {
 			"data",
 			"loading"
 		);
+		const error = Tools.getProperty(this.model.getOptions(), 'data', 'error');
 
 		// display a skeleton if there is no chart data or the loading flag is set to true
 		if (isDataLoading) {
 			this.renderSkeleton(isDataLoading);
-		} else {
+		}
+
+		// if we're done loading, and there's an error, render the skeleton (no shimmer) with an error message
+		if (!isDataLoading && error) {
+			this.renderSkeleton(false);
+			this.renderErrorMesssage(error);
+		}
+
+		// if neither are true, clean up
+		if (!isDataLoading && !error) {
 			this.removeSkeleton();
+			this.removeErrorMessage();
 		}
 	}
 
@@ -301,4 +312,86 @@ export class Skeleton extends Component {
 		const container = this.parent.select(".chart-skeleton");
 		container.remove();
 	}
+
+	renderErrorMesssage(error) {
+		const skeleton = this.parent.select('.chart-skeleton')
+		const height = skeleton.attr("height");
+		const width = skeleton.attr("width");
+
+		const errorContainer = DOMUtils.appendOrSelect(skeleton, "svg.bx--cc--error-message")
+			.attr('width', width)
+			.attr('height', height)
+
+		// Error icon
+		const errorIcon = errorContainer.selectAll("circle.bx--cc--error-message__icon")
+			.data([{
+				cx: '1em',
+				cy: (height / 2) - 5,
+				r: '.625em'
+			}]);
+
+		errorIcon.enter()
+			.append('circle')
+			.classed('bx--cc--error-message__icon', true)
+			.merge(errorIcon)
+			.attr('cx', d => d.cx)
+			.attr('cy', d => d.cy)
+			.attr('r', d => d.r)
+
+		DOMUtils.appendOrSelect(errorContainer, 'circle.bx--cc--error-message__icon')
+
+		errorIcon.exit().remove();
+
+		// Exclamation point
+
+		const exclamationPoint = errorContainer.selectAll('text.bx--cc--error-message__exclamation-point').data(['!'])
+
+		exclamationPoint.enter()
+			.append('text')
+			.classed('bx--cc--error-message__exclamation-point', true)
+			.merge(exclamationPoint)
+			.attr("x", '.75em')
+			.attr('y', (height / 2) + 1)
+			.html(d => d)
+
+		DOMUtils.appendOrSelect(errorContainer, 'text.bx--cc--error-message__exclamation-point')
+
+		exclamationPoint.exit().remove();
+
+		// Title
+		const errorTitle = errorContainer.selectAll("text.bx--cc--error-message__title").data([error.title]);
+
+		errorTitle.enter()
+			.append("text")
+			.classed("bx--cc--error-message__title", true)
+			.merge(errorTitle)
+			.attr("x", "2.25em")
+			.attr("y", height / 2)
+			.html(d => d);
+
+		DOMUtils.appendOrSelect(errorContainer, "text.bx--cc--error-message__title");
+
+		errorTitle.exit().remove();
+
+		// Subtitle
+		const errorSubtitle = errorContainer.selectAll("text.bx--cc--error-message__subtitle").data([error.subtitle]);
+
+		errorSubtitle.enter()
+			.append("text")
+			.classed("bx--cc--error-message__subtitle", true)
+			.merge(errorSubtitle)
+			.attr("x", "2.65em")
+			.attr("y", (height / 2) + 18)
+			.html(d => d);
+
+		DOMUtils.appendOrSelect(errorContainer, "text.bx--cc--error-message__subtitle");
+
+		errorSubtitle.exit().remove();
+	}
+
+
+	removeErrorMessage() {
+		const container = this.parent.select(".bx--cc--error-message");
+		container.remove();
+	}
 }
diff --git a/packages/core/src/interfaces/charts.ts b/packages/core/src/interfaces/charts.ts
index e34ba14cb6..6e708ca12b 100644
--- a/packages/core/src/interfaces/charts.ts
+++ b/packages/core/src/interfaces/charts.ts
@@ -89,6 +89,13 @@ export interface BaseChartOptions {
 		 * used to simulate data loading
 		 */
 		loading?: Boolean;
+		/**
+		 * a message to be rendered when data is unavailable for whatever reason
+		 */
+		error?: {
+			title: string;
+			subtitle: string;
+		};
 		/**
 		 * options related to pre-selected data groups
 		 * Remains empty if every legend item is active or dataset doesn't have the data groups.
diff --git a/packages/core/src/styles/components/_error-message.scss b/packages/core/src/styles/components/_error-message.scss
new file mode 100644
index 0000000000..c1ad3d6e85
--- /dev/null
+++ b/packages/core/src/styles/components/_error-message.scss
@@ -0,0 +1,18 @@
+svg.#{$prefix}--#{$charts-prefix}--error-message {
+	circle.#{$prefix}--#{$charts-prefix}--error-message__icon {
+		fill: $support-03;
+	}
+
+	text.#{$prefix}--#{$charts-prefix}--error-message__exclamation-point {
+		fill: black;
+		font-size: 1.125rem;
+	}
+
+	text.#{$prefix}--#{$charts-prefix}--error-message__title {
+		@include carbon--type-style('productive-heading-01');
+	}
+
+	text.#{$prefix}--#{$charts-prefix}--error-message__subtitle {
+		@include carbon--type-style('helper-text-01');
+	}
+}
diff --git a/packages/core/src/styles/components/index.scss b/packages/core/src/styles/components/index.scss
index 6ce5409e1d..5e8c3ea3b9 100644
--- a/packages/core/src/styles/components/index.scss
+++ b/packages/core/src/styles/components/index.scss
@@ -1,5 +1,6 @@
 @import "./axis";
 @import "./callouts";
+@import "./error-message";
 @import "./grid-brush";
 @import "./grid";
 @import "./ruler";

From af4f9e533fb09cd99eeb7c27f093dddebe4ff2fd Mon Sep 17 00:00:00 2001
From: Ryan Mackey <ryan.o.mackey@gmail.com>
Date: Tue, 28 Jul 2020 12:41:34 -0500
Subject: [PATCH 2/5] chore: format

---
 packages/core/CHANGELOG.md                    |   8 +-
 packages/core/demo/data/pie.ts                |   4 +-
 .../core/src/components/graphs/skeleton.ts    | 105 ++++++++++++------
 .../src/styles/components/_error-message.scss |   4 +-
 packages/vue/CHANGELOG.md                     |   4 -
 5 files changed, 74 insertions(+), 51 deletions(-)

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 556f294a2d..b81504a66a 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,16 +1,12 @@
 # Change Log
 
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
 ## [0.34.8](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.7...v0.34.8) (2020-07-30)
 
 **Note:** Version bump only for package @carbon/charts
 
-
-
-
-
 # Change Log
 
 All notable changes to this project will be documented in this file. See
diff --git a/packages/core/demo/data/pie.ts b/packages/core/demo/data/pie.ts
index e0ab526232..92d7c66dbe 100644
--- a/packages/core/demo/data/pie.ts
+++ b/packages/core/demo/data/pie.ts
@@ -50,8 +50,8 @@ export const pieErrorOptions = {
 	data: {
 		loading: false,
 		error: {
-			title: 'No data available',
-			subtitle: 'Lorem ipsum dolor sit.'
+			title: "No data available",
+			subtitle: "Lorem ipsum dolor sit."
 		}
 	}
 };
diff --git a/packages/core/src/components/graphs/skeleton.ts b/packages/core/src/components/graphs/skeleton.ts
index f97a78ef07..60a6719940 100644
--- a/packages/core/src/components/graphs/skeleton.ts
+++ b/packages/core/src/components/graphs/skeleton.ts
@@ -28,7 +28,11 @@ export class Skeleton extends Component {
 			"data",
 			"loading"
 		);
-		const error = Tools.getProperty(this.model.getOptions(), 'data', 'error');
+		const error = Tools.getProperty(
+			this.model.getOptions(),
+			"data",
+			"error"
+		);
 
 		// display a skeleton if there is no chart data or the loading flag is set to true
 		if (isDataLoading) {
@@ -314,82 +318,109 @@ export class Skeleton extends Component {
 	}
 
 	renderErrorMesssage(error) {
-		const skeleton = this.parent.select('.chart-skeleton')
+		const skeleton = this.parent.select(".chart-skeleton");
 		const height = skeleton.attr("height");
 		const width = skeleton.attr("width");
 
-		const errorContainer = DOMUtils.appendOrSelect(skeleton, "svg.bx--cc--error-message")
-			.attr('width', width)
-			.attr('height', height)
+		const errorContainer = DOMUtils.appendOrSelect(
+			skeleton,
+			"svg.bx--cc--error-message"
+		)
+			.attr("width", width)
+			.attr("height", height);
 
 		// Error icon
-		const errorIcon = errorContainer.selectAll("circle.bx--cc--error-message__icon")
-			.data([{
-				cx: '1em',
-				cy: (height / 2) - 5,
-				r: '.625em'
-			}]);
-
-		errorIcon.enter()
-			.append('circle')
-			.classed('bx--cc--error-message__icon', true)
+		const errorIcon = errorContainer
+			.selectAll("circle.bx--cc--error-message__icon")
+			.data([
+				{
+					cx: "1em",
+					cy: height / 2 - 5,
+					r: ".625em"
+				}
+			]);
+
+		errorIcon
+			.enter()
+			.append("circle")
+			.classed("bx--cc--error-message__icon", true)
 			.merge(errorIcon)
-			.attr('cx', d => d.cx)
-			.attr('cy', d => d.cy)
-			.attr('r', d => d.r)
+			.attr("cx", (d) => d.cx)
+			.attr("cy", (d) => d.cy)
+			.attr("r", (d) => d.r);
 
-		DOMUtils.appendOrSelect(errorContainer, 'circle.bx--cc--error-message__icon')
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"circle.bx--cc--error-message__icon"
+		);
 
 		errorIcon.exit().remove();
 
 		// Exclamation point
 
-		const exclamationPoint = errorContainer.selectAll('text.bx--cc--error-message__exclamation-point').data(['!'])
+		const exclamationPoint = errorContainer
+			.selectAll("text.bx--cc--error-message__exclamation-point")
+			.data(["!"]);
 
-		exclamationPoint.enter()
-			.append('text')
-			.classed('bx--cc--error-message__exclamation-point', true)
+		exclamationPoint
+			.enter()
+			.append("text")
+			.classed("bx--cc--error-message__exclamation-point", true)
 			.merge(exclamationPoint)
-			.attr("x", '.75em')
-			.attr('y', (height / 2) + 1)
-			.html(d => d)
+			.attr("x", ".75em")
+			.attr("y", height / 2 + 1)
+			.html((d) => d);
 
-		DOMUtils.appendOrSelect(errorContainer, 'text.bx--cc--error-message__exclamation-point')
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"text.bx--cc--error-message__exclamation-point"
+		);
 
 		exclamationPoint.exit().remove();
 
 		// Title
-		const errorTitle = errorContainer.selectAll("text.bx--cc--error-message__title").data([error.title]);
+		const errorTitle = errorContainer
+			.selectAll("text.bx--cc--error-message__title")
+			.data([error.title]);
 
-		errorTitle.enter()
+		errorTitle
+			.enter()
 			.append("text")
 			.classed("bx--cc--error-message__title", true)
 			.merge(errorTitle)
 			.attr("x", "2.25em")
 			.attr("y", height / 2)
-			.html(d => d);
+			.html((d) => d);
 
-		DOMUtils.appendOrSelect(errorContainer, "text.bx--cc--error-message__title");
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"text.bx--cc--error-message__title"
+		);
 
 		errorTitle.exit().remove();
 
 		// Subtitle
-		const errorSubtitle = errorContainer.selectAll("text.bx--cc--error-message__subtitle").data([error.subtitle]);
+		const errorSubtitle = errorContainer
+			.selectAll("text.bx--cc--error-message__subtitle")
+			.data([error.subtitle]);
 
-		errorSubtitle.enter()
+		errorSubtitle
+			.enter()
 			.append("text")
 			.classed("bx--cc--error-message__subtitle", true)
 			.merge(errorSubtitle)
 			.attr("x", "2.65em")
-			.attr("y", (height / 2) + 18)
-			.html(d => d);
+			.attr("y", height / 2 + 18)
+			.html((d) => d);
 
-		DOMUtils.appendOrSelect(errorContainer, "text.bx--cc--error-message__subtitle");
+		DOMUtils.appendOrSelect(
+			errorContainer,
+			"text.bx--cc--error-message__subtitle"
+		);
 
 		errorSubtitle.exit().remove();
 	}
 
-
 	removeErrorMessage() {
 		const container = this.parent.select(".bx--cc--error-message");
 		container.remove();
diff --git a/packages/core/src/styles/components/_error-message.scss b/packages/core/src/styles/components/_error-message.scss
index c1ad3d6e85..f8c1c68405 100644
--- a/packages/core/src/styles/components/_error-message.scss
+++ b/packages/core/src/styles/components/_error-message.scss
@@ -9,10 +9,10 @@ svg.#{$prefix}--#{$charts-prefix}--error-message {
 	}
 
 	text.#{$prefix}--#{$charts-prefix}--error-message__title {
-		@include carbon--type-style('productive-heading-01');
+		@include carbon--type-style("productive-heading-01");
 	}
 
 	text.#{$prefix}--#{$charts-prefix}--error-message__subtitle {
-		@include carbon--type-style('helper-text-01');
+		@include carbon--type-style("helper-text-01");
 	}
 }
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 87af27d4de..fa164693ff 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -7,10 +7,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.34.7](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.6...v0.34.7) (2020-07-29)
 
 **Note:** Version bump only for package @carbon/charts-vue

From 0e2d871886614e061a780fa18737deb121337835 Mon Sep 17 00:00:00 2001
From: Ryan Mackey <ryan.o.mackey@gmail.com>
Date: Wed, 5 Aug 2020 13:41:07 -0500
Subject: [PATCH 3/5] fix(error): persist fill color when 'hovered' class is
 applied

---
 packages/core/src/styles/components/_error-message.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/core/src/styles/components/_error-message.scss b/packages/core/src/styles/components/_error-message.scss
index f8c1c68405..4ffb3bc8de 100644
--- a/packages/core/src/styles/components/_error-message.scss
+++ b/packages/core/src/styles/components/_error-message.scss
@@ -1,6 +1,10 @@
 svg.#{$prefix}--#{$charts-prefix}--error-message {
 	circle.#{$prefix}--#{$charts-prefix}--error-message__icon {
 		fill: $support-03;
+
+		&.hovered  {
+			fill: $support-03;
+		}
 	}
 
 	text.#{$prefix}--#{$charts-prefix}--error-message__exclamation-point {

From 9460330521cafe2013c755f8b3d7046633cdf7ae Mon Sep 17 00:00:00 2001
From: Ryan Mackey <ryan.o.mackey@gmail.com>
Date: Thu, 13 Aug 2020 22:17:03 -0500
Subject: [PATCH 4/5] chore: format

---
 packages/core/CHANGELOG.md                           |  8 --------
 packages/core/demo/data/index.ts                     |  2 +-
 packages/core/src/components/essentials/legend.ts    |  6 ++++--
 packages/core/src/model.ts                           |  4 +++-
 .../core/src/styles/components/_error-message.scss   |  2 +-
 packages/vue/CHANGELOG.md                            | 12 ------------
 6 files changed, 9 insertions(+), 25 deletions(-)

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 499ab09ec5..571d022dc2 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -7,18 +7,10 @@ All notable changes to this project will be documented in this file. See
 
 **Note:** Version bump only for package @carbon/charts
 
-
-
-
-
 ## [0.34.11](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.10...v0.34.11) (2020-08-12)
 
 **Note:** Version bump only for package @carbon/charts
 
-
-
-
-
 ## [0.34.10](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.9...v0.34.10) (2020-08-11)
 
 **Note:** Version bump only for package @carbon/charts
diff --git a/packages/core/demo/data/index.ts b/packages/core/demo/data/index.ts
index c3246c9afb..009018906b 100644
--- a/packages/core/demo/data/index.ts
+++ b/packages/core/demo/data/index.ts
@@ -158,7 +158,7 @@ let allDemoGroups = [
 			{
 				options: barDemos.simpleBarCustomLegendOrderOptions,
 				data: barDemos.simpleBarData,
-				chartType: chartTypes.SimpleBarChart,
+				chartType: chartTypes.SimpleBarChart
 			},
 			{
 				options: barDemos.simpleBarCenteredLegendOptions,
diff --git a/packages/core/src/components/essentials/legend.ts b/packages/core/src/components/essentials/legend.ts
index 5e0ebfaf77..dac086ddcf 100644
--- a/packages/core/src/components/essentials/legend.ts
+++ b/packages/core/src/components/essentials/legend.ts
@@ -134,8 +134,10 @@ export class Legend extends Component {
 
 	sortDataGroups(dataGroups, legendOrder) {
 		// Sort data in user defined order
-		dataGroups.sort((dataA, dataB) => 
-			legendOrder.indexOf(dataA.name) - legendOrder.indexOf(dataB.name)
+		dataGroups.sort(
+			(dataA, dataB) =>
+				legendOrder.indexOf(dataA.name) -
+				legendOrder.indexOf(dataB.name)
 		);
 
 		// If user only defined partial ordering, ordered items are placed before unordered ones
diff --git a/packages/core/src/model.ts b/packages/core/src/model.ts
index 834eddc69f..82446e4689 100644
--- a/packages/core/src/model.ts
+++ b/packages/core/src/model.ts
@@ -95,7 +95,9 @@ export class ChartModel {
 
 		return allDataFromDomain.filter((datum) => {
 			return dataGroups.find(
-				(dataGroup) => dataGroup.name === datum[groupMapsTo] && dataGroup.status === ACTIVE
+				(dataGroup) =>
+					dataGroup.name === datum[groupMapsTo] &&
+					dataGroup.status === ACTIVE
 			);
 		});
 	}
diff --git a/packages/core/src/styles/components/_error-message.scss b/packages/core/src/styles/components/_error-message.scss
index 4ffb3bc8de..f0e8e3f1c6 100644
--- a/packages/core/src/styles/components/_error-message.scss
+++ b/packages/core/src/styles/components/_error-message.scss
@@ -2,7 +2,7 @@ svg.#{$prefix}--#{$charts-prefix}--error-message {
 	circle.#{$prefix}--#{$charts-prefix}--error-message__icon {
 		fill: $support-03;
 
-		&.hovered  {
+		&.hovered {
 			fill: $support-03;
 		}
 	}
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 9a97b5cdad..4e35d97baf 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -7,26 +7,14 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.34.11](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.10...v0.34.11) (2020-08-12)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.34.10](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.9...v0.34.10) (2020-08-11)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
-
-
-
-
 ## [0.34.9](https://github.com/carbon-design-system/carbon-charts/compare/v0.34.8...v0.34.9) (2020-08-06)
 
 **Note:** Version bump only for package @carbon/charts-vue

From bcbb21a2b69882f4d7e4d393595d4a4c1f8b9555 Mon Sep 17 00:00:00 2001
From: Ryan Mackey <ryan.o.mackey@gmail.com>
Date: Thu, 13 Aug 2020 22:19:09 -0500
Subject: [PATCH 5/5] refactor(error-state): update messages, less magic
 numbers, fix hover bug for good

---
 packages/core/demo/data/donut.ts              |  4 +-
 packages/core/demo/data/line.ts               |  4 +-
 packages/core/demo/data/pie.ts                |  4 +-
 .../core/src/components/graphs/scatter.ts     |  2 +-
 .../core/src/components/graphs/skeleton.ts    | 46 +++++++++++--------
 .../src/styles/components/_error-message.scss |  9 +---
 6 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/packages/core/demo/data/donut.ts b/packages/core/demo/data/donut.ts
index 835460b25b..f42c6b7bb5 100644
--- a/packages/core/demo/data/donut.ts
+++ b/packages/core/demo/data/donut.ts
@@ -68,8 +68,8 @@ export const donutErrorOptions = {
 	data: {
 		loading: false,
 		error: {
-			title: "No data available",
-			subtitle: "Lorem ipsum dolor sit."
+			title: "No usage available",
+			subtitle: "Spending summary is not available for trial accounts"
 		}
 	}
 };
diff --git a/packages/core/demo/data/line.ts b/packages/core/demo/data/line.ts
index e5c3482898..1779bfb963 100644
--- a/packages/core/demo/data/line.ts
+++ b/packages/core/demo/data/line.ts
@@ -443,8 +443,8 @@ export const lineErrorOptions = {
 	data: {
 		loading: false,
 		error: {
-			title: "No data available",
-			subtitle: "Lorem ipsum dolor sit."
+			title: "No usage available",
+			subtitle: "Spending summary is not available for trial accounts"
 		}
 	}
 };
diff --git a/packages/core/demo/data/pie.ts b/packages/core/demo/data/pie.ts
index 92d7c66dbe..8c4bfbb162 100644
--- a/packages/core/demo/data/pie.ts
+++ b/packages/core/demo/data/pie.ts
@@ -50,8 +50,8 @@ export const pieErrorOptions = {
 	data: {
 		loading: false,
 		error: {
-			title: "No data available",
-			subtitle: "Lorem ipsum dolor sit."
+			title: "No usage available",
+			subtitle: "Spending summary is not available for trial accounts"
 		}
 	}
 };
diff --git a/packages/core/src/components/graphs/scatter.ts b/packages/core/src/components/graphs/scatter.ts
index 24880e12c8..eb49c5ac7c 100644
--- a/packages/core/src/components/graphs/scatter.ts
+++ b/packages/core/src/components/graphs/scatter.ts
@@ -298,7 +298,7 @@ export class Scatter extends Component {
 		const domainIdentifier = this.services.cartesianScales.getDomainIdentifier();
 
 		this.parent
-			.selectAll("circle")
+			.selectAll("circle.dot")
 			.on("mouseover", function (datum) {
 				const hoveredElement = select(this);
 
diff --git a/packages/core/src/components/graphs/skeleton.ts b/packages/core/src/components/graphs/skeleton.ts
index 60a6719940..0f181b51bb 100644
--- a/packages/core/src/components/graphs/skeleton.ts
+++ b/packages/core/src/components/graphs/skeleton.ts
@@ -319,24 +319,25 @@ export class Skeleton extends Component {
 
 	renderErrorMesssage(error) {
 		const skeleton = this.parent.select(".chart-skeleton");
-		const height = skeleton.attr("height");
-		const width = skeleton.attr("width");
 
 		const errorContainer = DOMUtils.appendOrSelect(
 			skeleton,
 			"svg.bx--cc--error-message"
 		)
-			.attr("width", width)
-			.attr("height", height);
+			.attr("width", "90%")
+			.attr("height", "25%")
+			.attr("x", "16") // usually 1rem
+			.attr("y", "45%");
 
 		// Error icon
+		const radius = 8;
 		const errorIcon = errorContainer
 			.selectAll("circle.bx--cc--error-message__icon")
 			.data([
 				{
-					cx: "1em",
-					cy: height / 2 - 5,
-					r: ".625em"
+					cx: "0",
+					cy: "0",
+					r: radius
 				}
 			]);
 
@@ -347,7 +348,8 @@ export class Skeleton extends Component {
 			.merge(errorIcon)
 			.attr("cx", (d) => d.cx)
 			.attr("cy", (d) => d.cy)
-			.attr("r", (d) => d.r);
+			.attr("r", (d) => d.r)
+			.attr("transform", (d) => `translate(${d.r}, ${d.r})`);
 
 		DOMUtils.appendOrSelect(
 			errorContainer,
@@ -358,22 +360,23 @@ export class Skeleton extends Component {
 
 		// Exclamation point
 
-		const exclamationPoint = errorContainer
-			.selectAll("text.bx--cc--error-message__exclamation-point")
-			.data(["!"]);
+		const exclamationPoint = errorContainer.selectAll(
+			"path.bx--cc--error-message__exclamation-point"
+		);
 
 		exclamationPoint
 			.enter()
-			.append("text")
+			.append("path")
 			.classed("bx--cc--error-message__exclamation-point", true)
 			.merge(exclamationPoint)
-			.attr("x", ".75em")
-			.attr("y", height / 2 + 1)
-			.html((d) => d);
+			.attr(
+				"d",
+				"M7.9375,11.125 C7.41973305,11.125 7,11.544733 7,12.0625 C7,12.580267 7.41973305,13 7.9375,13 C8.45526695,13 8.875,12.580267 8.875,12.0625 C8.875,11.544733 8.45526695,11.125 7.9375,11.125 M7.3125, 3 8.5625, 3 8.5625, 9.875 7.3125, 9.875, 7.3125, 3 Z"
+			);
 
 		DOMUtils.appendOrSelect(
 			errorContainer,
-			"text.bx--cc--error-message__exclamation-point"
+			"path.bx--cc--error-message__exclamation-point"
 		);
 
 		exclamationPoint.exit().remove();
@@ -383,13 +386,16 @@ export class Skeleton extends Component {
 			.selectAll("text.bx--cc--error-message__title")
 			.data([error.title]);
 
+		const textHorizontalOffset = radius + 16;
+		const textVerticalOffset = 12.5; // this roughly centers our text with the icon
+
 		errorTitle
 			.enter()
 			.append("text")
 			.classed("bx--cc--error-message__title", true)
 			.merge(errorTitle)
-			.attr("x", "2.25em")
-			.attr("y", height / 2)
+			.attr("x", textHorizontalOffset)
+			.attr("y", textVerticalOffset)
 			.html((d) => d);
 
 		DOMUtils.appendOrSelect(
@@ -409,8 +415,8 @@ export class Skeleton extends Component {
 			.append("text")
 			.classed("bx--cc--error-message__subtitle", true)
 			.merge(errorSubtitle)
-			.attr("x", "2.65em")
-			.attr("y", height / 2 + 18)
+			.attr("x", textHorizontalOffset)
+			.attr("y", textVerticalOffset + 16)
 			.html((d) => d);
 
 		DOMUtils.appendOrSelect(
diff --git a/packages/core/src/styles/components/_error-message.scss b/packages/core/src/styles/components/_error-message.scss
index f0e8e3f1c6..d1899f94f9 100644
--- a/packages/core/src/styles/components/_error-message.scss
+++ b/packages/core/src/styles/components/_error-message.scss
@@ -1,15 +1,10 @@
 svg.#{$prefix}--#{$charts-prefix}--error-message {
 	circle.#{$prefix}--#{$charts-prefix}--error-message__icon {
 		fill: $support-03;
-
-		&.hovered {
-			fill: $support-03;
-		}
 	}
 
-	text.#{$prefix}--#{$charts-prefix}--error-message__exclamation-point {
-		fill: black;
-		font-size: 1.125rem;
+	path.#{$prefix}--#{$charts-prefix}--error-message__exclamation-point {
+		fill: $carbon--black-100;
 	}
 
 	text.#{$prefix}--#{$charts-prefix}--error-message__title {