fix(data): Fix empty label text flickering

- Correct empty label text displaying css prop from 'opacity' to 'display'
- Removed applying .transition() which makes flickering.

Fix #901

spec/internals/data-spec.js

@@ -1752,7 +1752,10 @@ describe("DATA", () => {
 		before(() => {
 			args = {
 				data: {
-					columns: [],
+					columns: [
+						["data", 50, 20, 10, 40, 15]
+					],
+					hide: ["data"],
 					empty: {
 						label: {
 							text: "No Data"
@@ -1765,7 +1768,24 @@ describe("DATA", () => {
 		it("check for empty label text", () => {
 			const emptyLabelText = chart.$.main.select(`.${CLASS.text}.${CLASS.empty}`);
 
-			expect(+emptyLabelText.style("opacity")).to.be.equal(1);
+			expect(emptyLabelText.style("display")).to.be.equal("block");
+		});
+
+		it("check the visiblity on data toggles", done => {
+			const emptyLabelText = chart.$.main.select(`.${CLASS.text}.${CLASS.empty}`);
+
+			// display data
+			chart.toggle();
+
+			expect(emptyLabelText.style("display")).to.be.equal("none");
+
+			// hide data
+			chart.toggle();
+
+			setTimeout(() => {
+				expect(emptyLabelText.style("display")).to.be.equal("block");
+				done();
+			}, 300)
 		});
 
 		it("set options empty.label.text=''", () => {

src/config/Options.js

@@ -417,19 +417,6 @@ export default class Options {
 			 */
 			data_xSort: true,
 
-			/**
-			 * Specify the key of epochs values in the data.
-			 * @name data․epochs
-			 * @memberof Options
-			 * @type {String}
-			 * @default epochs
-			 * @example
-			 * data: {
-			 *   epochs: "count"
-			 * }
-			 */
-			data_epochs: "epochs",
-
 			/**
 			 * Converts data id value
 			 * @name data․idConverter
@@ -1146,7 +1133,8 @@ export default class Options {
 			data_keys: undefined,
 
 			/**
-			 * Set text displayed when empty data.
+			 * Set text label to be displayed when there's no data to show.
+			 * - ex. Toggling all visible data to not be shown, unloading all current data, etc.
 			 * @name data․empty․label․text
 			 * @memberof Options
 			 * @type {String}

src/internals/ChartInternal.js

@@ -608,8 +608,7 @@ export default class ChartInternal {
 			.attr("x", $$.width / 2)
 			.attr("y", $$.height / 2)
 			.text(config.data_empty_label_text)
-			.transition()
-			.style("opacity", targetsToShow.length ? 0 : 1);
+			.style("display", targetsToShow.length ? "none" : null);
 
 		// grid
 		$$.updateGrid(duration);

types/options.d.ts

@@ -1239,7 +1239,8 @@ export interface Data {
 	};
 
 	/**
-	 * Set text displayed when empty data.
+	 * Set text label to be displayed when there's no data to show.
+	 * - ex. Toggling all visible data to not be shown, unloading all current data, etc.
 	 */
 	empty?: { label: { text: string } };