diff --git a/spec/assets/util.js b/spec/assets/util.js
index f2689939e..607991507 100644
--- a/spec/assets/util.js
+++ b/spec/assets/util.js
@@ -37,7 +37,7 @@ const generate = args => {
 			args.bindto = "#chart";
 		}
 
-		initDom(args);
+		initDom(args.bindto);
 
 		// when touch param is set, make to be 'touch' input mode
 		if (args.interaction && args.interaction.inputType && args.interaction.inputType.touch) {
diff --git a/spec/legend-spec.js b/spec/legend-spec.js
index 197bb96a2..e4d69288a 100644
--- a/spec/legend-spec.js
+++ b/spec/legend-spec.js
@@ -5,6 +5,7 @@
 /* eslint-disable */
 /* global describe, beforeEach, it, expect */
 import util from "./assets/util";
+import CLASS from "../src/config/classes";
 
 describe("LEGEND", () => {
 	let chart;
@@ -230,7 +231,7 @@ describe("LEGEND", () => {
 		});
 	});
 
-	describe("custom legend size", () => {
+	describe("custom legend settings", () => {
 		before(() => {
 			args = {
 				data: {
@@ -259,20 +260,10 @@ describe("LEGEND", () => {
 				expect(tileWidth).to.be.equal(args.legend.item.tile.width);
 			});
 		});
-	});
 
-	describe("custom legend padding", () => {
-		before(() => {
-			args = {
-				data: {
-					columns: [
-						["padded1", 30, 200, 100, 400, 150, 250],
-						["padded2", 130, 100, 200, 100, 250, 150]
-					]
-				},
-				legend: {
-					padding: 10
-				}
+		it("set options legend.padding=10", () => {
+			args.legend = {
+				padding: 10
 			};
 		});
 
@@ -289,4 +280,75 @@ describe("LEGEND", () => {
 				});
 		});
 	});
+
+	describe("set legend using template", () => {
+		before(() => {
+			sandbox("legend-wrapper").innerHTML = "<ul id='legend'></ul>";
+
+			args = {
+				data: {
+					columns: [
+						["data1", 30, 200, 100, 400, 150, 250],
+						["data2", 130, 100, 200, 100, 250, 150]
+					],
+					colors: {
+						data1: "rgb(42, 208, 255)",
+						data2: "rgb(250, 113, 113)"
+					}
+				},
+				legend: {
+					contents: {
+						bindto: "#legend",
+						template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
+					}
+				}
+			};
+		});
+
+		it("check for legend template setting with template string", () => {
+			const legend = d3.select("#legend");
+			const items = legend.selectAll(`.${CLASS.legendItem}`);
+
+			expect(legend.html()).not.to.be.null;
+
+			items.each(function(v) {
+				const item = d3.select(this);
+
+				expect(item.html()).to.be.equal(v);
+				expect(item.style("background-color")).to.be.equal(chart.color(v));
+
+				// check for event bind
+				expect(item.on("click")).not.be.null;
+			});
+
+			expect(items.size()).to.be.equal(2);
+		});
+
+		it("set options legend.content.template as function", () => {
+			args.legend.contents.template = function(title, color) {
+				if (title !== "data1") {
+					return `<li style='background-color:${color}'>${title}</li>`;
+				}
+			}
+		});
+
+		it("check for legend template setting with template function callback", () => {
+			const legend = d3.select("#legend");
+			const items = legend.selectAll(`.${CLASS.legendItem}`);
+
+			expect(legend.html()).not.to.be.null;
+
+			items.each(function(v) {
+				const item = d3.select(this);
+
+				expect(item.html()).to.be.equal(v);
+				expect(item.style("background-color")).to.be.equal(chart.color(v));
+
+				// check for event bind
+				expect(item.on("click")).not.be.null;
+			});
+
+			expect(items.size()).to.be.equal(1);
+		});
+	});
 });
diff --git a/src/api/api.show.js b/src/api/api.show.js
index 895d4604c..2da6d732d 100644
--- a/src/api/api.show.js
+++ b/src/api/api.show.js
@@ -59,8 +59,7 @@ extend(Chart.prototype, {
 				targets.style("opacity", null).style("opacity", "0");
 			});
 
-		options.withLegend &&
-		$$.hideLegend(targetIds);
+		options.withLegend && $$.hideLegend(targetIds);
 
 		$$.redraw({
 			withUpdateOrgXDomain: true,
diff --git a/src/config/Options.js b/src/config/Options.js
index 9b766f812..f8ef93d56 100644
--- a/src/config/Options.js
+++ b/src/config/Options.js
@@ -991,6 +991,11 @@ export default class Options {
 			 * @property {Boolean} [legend.show=true] Show or hide legend.
 			 * @property {Boolean} [legend.hide=false] Hide legend
 			 *  If true given, all legend will be hidden. If string or array given, only the legend that has the id will be hidden.
+			 * @property {String|HTMLElement} [legend.contents.bindto=undefined] Set CSS selector or element reference to bind legend items.
+			 * @property {String|Function} [legend.contents.template=undefined] Set item's template.<br>
+			 *      If set string value, within template the 'color' and 'title' can be replaced using template-like syntax string:
+			 *      - {=COLOR}: data color value
+			 *      - {=TITLE}: data title value
 			 * @property {String} [legend.position=bottom] Change the position of legend.<br>
 			 *  Available values are: `bottom`, `right` and `inset` are supported.
 			 * @property {Object} [legend.inset={anchor: 'top-left',x: 10,y: 0,step: undefined}] Change inset legend attributes.<br>
@@ -1015,6 +1020,20 @@ export default class Options {
 			 *      hide: true,
 			 *      //or hide: "data1"
              *      //or hide: ["data1", "data2"]
+			 *      contents: {
+			 *          bindto: "#legend",   // <ul id='legend'></ul>
+			 *
+			 *          // will be as: <li style='background-color:#1f77b4'>data1</li>
+			 *          template: "<li style='background-color:{=COLOR}'>{=TITLE}</li>"
+			 *
+			 *          // or using function
+			 *          template: function(title, color) {
+			 *               // if you want omit some legend, return falsy value
+			 *               if (title !== "data1") {
+			 *                    return "<li style='background-color:"+ color +">"+ title +"</li>";
+			 *               }
+			 *          }
+			 *      },
              *      position: "bottom",  // bottom, right, inset
 			 *      inset: {
 			 *          anchor: "top-right"  // top-left, top-right, bottom-left, bottom-right
@@ -1039,6 +1058,8 @@ export default class Options {
 			 */
 			legend_show: true,
 			legend_hide: false,
+			legend_contents_bindto: undefined,
+			legend_contents_template: undefined,
 			legend_position: "bottom",
 			legend_inset_anchor: "top-left",
 			legend_inset_x: 10,
diff --git a/src/internals/ChartInternal.js b/src/internals/ChartInternal.js
index 77b7d0cbd..365c30dc3 100644
--- a/src/internals/ChartInternal.js
+++ b/src/internals/ChartInternal.js
@@ -553,7 +553,7 @@ export default class ChartInternal {
 		$$.inputType === "touch" && $$.hideTooltip();
 
 		// update legend and transform each g
-		if (withLegend && config.legend_show) {
+		if (withLegend && config.legend_show && !config.legend_contents_bindto) {
 			$$.updateLegend($$.mapToIds($$.data.targets), options, transitions);
 		} else if (withDimension) {
 			// need to update dimension (e.g. axis.y.tick.values) because y tick values should change
diff --git a/src/internals/legend.js b/src/internals/legend.js
index 4ba8856b2..31e04f49c 100644
--- a/src/internals/legend.js
+++ b/src/internals/legend.js
@@ -8,8 +8,7 @@ import {
 } from "d3";
 import ChartInternal from "./ChartInternal";
 import CLASS from "../config/classes";
-import {extend, isDefined, getOption, isEmpty} from "./util";
-
+import {extend, isDefined, getOption, isEmpty, isFunction} from "./util";
 
 extend(ChartInternal.prototype, {
 	/**
@@ -18,18 +17,62 @@ extend(ChartInternal.prototype, {
 	 */
 	initLegend() {
 		const $$ = this;
+		const config = $$.config;
 
 		$$.legendItemTextBox = {};
 		$$.legendHasRendered = false;
-		$$.legend = $$.svg.append("g").attr("transform", $$.getTranslate("legend"));
-		if (!$$.config.legend_show) {
+		$$.legend = $$.svg.append("g");
+
+		if (config.legend_show) {
+			if (config.legend_contents_bindto && config.legend_contents_template) {
+				$$.updateLegendTemplate();
+			} else {
+				$$.legend.attr("transform", $$.getTranslate("legend"));
+
+				// MEMO: call here to update legend box and translate for all
+				// MEMO: translate will be updated by this, so transform not needed in updateLegend()
+				$$.updateLegendWithDefaults();
+			}
+		} else {
 			$$.legend.style("visibility", "hidden");
 			$$.hiddenLegendIds = $$.mapToIds($$.data.targets);
-			return;
 		}
-		// MEMO: call here to update legend box and tranlate for all
-		// MEMO: translate will be upated by this, so transform not needed in updateLegend()
-		$$.updateLegendWithDefaults();
+	},
+
+	/**
+	 * Update legend using template option
+	 * @private
+	 */
+	updateLegendTemplate() {
+		const $$ = this;
+		const config = $$.config;
+		const wrapper = d3Select(config.legend_contents_bindto);
+		const template = config.legend_contents_template;
+
+		if (!wrapper.empty()) {
+			const targets = $$.mapToIds($$.data.targets);
+			const ids = [];
+			let html = "";
+
+			targets.forEach(v => {
+				const content = isFunction(template) ?
+					template.call($$, v, $$.color(v)) :
+					template
+						.replace(/{=COLOR}/g, $$.color(v))
+						.replace(/{=TITLE}/g, v);
+
+				if (content) {
+					ids.push(v);
+					html += content;
+				}
+			});
+
+			const legendItem = wrapper.html(html)
+				.selectAll(function() { return this.childNodes; })
+				.data(ids);
+
+			$$.setLegendItem(legendItem);
+		}
 	},
 
 	/**
@@ -74,6 +117,7 @@ extend(ChartInternal.prototype, {
 				$$.currentWidth - legendWidth : $$.isLegendInset ? insetLegendPosition.left : 0
 		};
 	},
+
 	/**
 	 * Transform Legend
 	 * @private
@@ -125,6 +169,7 @@ extend(ChartInternal.prototype, {
 			$$.isLegendRight ||
 			$$.isLegendInset ? $$.legendItemWidth * ($$.legendStep + 1) : $$.currentWidth : 0;
 	},
+
 	/**
 	 * Get the height of the legend
 	 * @private
@@ -143,6 +188,7 @@ extend(ChartInternal.prototype, {
 		}
 		return h;
 	},
+
 	/**
 	 * Get the opacity of the legend
 	 * @private
@@ -162,6 +208,7 @@ extend(ChartInternal.prototype, {
 	opacityForUnfocusedLegend(legendItem) {
 		return legendItem.classed(CLASS.legendItemHidden) ? null : "0.3";
 	},
+
 	/**
 	 * Toggles the focus of the legend
 	 * @private
@@ -183,6 +230,7 @@ extend(ChartInternal.prototype, {
 				return opacity.call($$, d3Select(this));
 			});
 	},
+
 	/**
 	 * Revert the legend to its default state
 	 * @private
@@ -198,6 +246,7 @@ extend(ChartInternal.prototype, {
 				return $$.opacityForLegend(d3Select(this));
 			});
 	},
+
 	/**
 	 * Shows the legend
 	 * @private
@@ -223,6 +272,7 @@ extend(ChartInternal.prototype, {
 				return $$.opacityForLegend(d3Select(this));
 			});
 	},
+
 	/**
 	 * Hide the legend
 	 * @private
@@ -241,6 +291,7 @@ extend(ChartInternal.prototype, {
 			.style("opacity", "0")
 			.style("visibility", "hidden");
 	},
+
 	/**
 	 * Clear the LegendItemTextBox cache.
 	 * @private
@@ -248,6 +299,61 @@ extend(ChartInternal.prototype, {
 	clearLegendItemTextBoxCache() {
 		this.legendItemTextBox = {};
 	},
+
+	/**
+	 * Set legend item style & bind events
+	 * @private
+	 * @param {d3.selection} item
+	 */
+	setLegendItem(item) {
+		const $$ = this;
+		const config = $$.config;
+		const isTouch = $$.inputType === "touch";
+
+		item
+			.attr("class", id => $$.generateClass(CLASS.legendItem, id))
+			.style("visibility", id => ($$.isLegendToShow(id) ? "visible" : "hidden"))
+			.style("cursor", "pointer")
+			.on("click", id => {
+				if (isFunction(config.legend_item_onclick)) {
+					config.legend_item_onclick.call($$, id);
+				} else {
+					if (d3Event.altKey) {
+						$$.api.hide();
+						$$.api.show(id);
+					} else {
+						$$.api.toggle(id);
+						!isTouch && $$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert();
+					}
+				}
+
+				isTouch && $$.hideTooltip();
+			});
+
+		if (!isTouch) {
+			item
+				.on("mouseout", function(id) {
+					if (isFunction(config.legend_item_onout)) {
+						config.legend_item_onout.call($$, id);
+					} else {
+						d3Select(this).classed(CLASS.legendItemFocused, false);
+						$$.api.revert();
+					}
+				})
+				.on("mouseover", function(id) {
+					if (isFunction(config.legend_item_onover)) {
+						config.legend_item_onover.call($$, id);
+					} else {
+						d3Select(this).classed(CLASS.legendItemFocused, true);
+
+						if (!$$.transiting && $$.isTargetToShow(id)) {
+							$$.api.focus(id);
+						}
+					}
+				});
+		}
+	},
+
 	/**
 	 * Update the legend
 	 * @private
@@ -262,7 +368,6 @@ extend(ChartInternal.prototype, {
 		const paddingRight = 10;
 		const posMin = 10;
 		const tileWidth = config.legend_item_tile_width + 5;
-		const isTouch = ($$.inputType === "touch");
 		let maxWidth = 0;
 		let maxHeight = 0;
 		let xForLegend;
@@ -389,42 +494,9 @@ extend(ChartInternal.prototype, {
 		const l = $$.legend.selectAll(`.${CLASS.legendItem}`)
 			.data(targetIdz)
 			.enter()
-			.append("g")
-			.attr("class", id => $$.generateClass(CLASS.legendItem, id))
-			.style("visibility", id => ($$.isLegendToShow(id) ? "visible" : "hidden"))
-			.style("cursor", "pointer")
-			.on(isTouch ? "touchstart" : "click", id => {
-				if (config.legend_item_onclick) {
-					config.legend_item_onclick.call($$, id);
-				} else {
-					if (d3Event.altKey) {
-						$$.api.hide();
-						$$.api.show(id);
-					} else {
-						$$.api.toggle(id);
-						$$.isTargetToShow(id) ? $$.api.focus(id) : $$.api.revert();
-					}
-				}
-				isTouch && $$.hideTooltip();
-			})
-			.on(isTouch ? undefined : "mouseover", function(id) {
-				if (config.legend_item_onover) {
-					config.legend_item_onover.call($$, id);
-				} else {
-					d3Select(this).classed(CLASS.legendItemFocused, true);
-					if (!$$.transiting && $$.isTargetToShow(id)) {
-						$$.api.focus(id);
-					}
-				}
-			})
-			.on(isTouch ? "touchend" : "mouseout", function(id) {
-				if (config.legend_item_onout) {
-					config.legend_item_onout.call($$, id);
-				} else {
-					d3Select(this).classed(CLASS.legendItemFocused, false);
-					$$.api.revert();
-				}
-			});
+			.append("g");
+
+		$$.setLegendItem(l);
 
 		l.append("text")
 			.text(id => (isDefined(config.data_names[id]) ? config.data_names[id] : id))