diff --git a/roughviz/roughviz.py b/roughviz/roughviz.py
index 45b5708..f2825cc 100644
--- a/roughviz/roughviz.py
+++ b/roughviz/roughviz.py
@@ -1,5 +1,5 @@
 from jinja2 import Template
-from IPython.core.display import HTML
+from IPython.core.display import display, HTML
 import random
 import string
 import json
@@ -7,40 +7,61 @@
 import pandas as pd
 
 
-def generate_template(data, labels, values, **kwargs):
+def generate_template(data, labels, values, plot_svg, **kwargs):
     template = Template(data.decode("utf-8"))
     id_name = ''.join(random.choice(string.ascii_lowercase) for i in range(10))
     output = template.render(id_name = id_name,
-                             labels = labels.tolist(),
-                             values = values.tolist(),
+                             labels = labels,
+                             values = values,
                              kwargs = kwargs)
-    return HTML(output)
+    if(plot_svg):
+        svg_id = "svg"+id_name
+        script = """
+        <style>
+        div.output_area img, div.output_area svg{
+        height: 100%!important;
+        }
+        </style>
+        <script>
+            var e = document.getElementById('"""+id_name+"""');
+            var divCheckingInterval = setInterval(function(){
+            if(e.getElementsByTagName('svg').length){
+                clearInterval(divCheckingInterval);
+                e.getElementsByTagName('svg')[0].setAttribute("id", '"""+svg_id+"""');
+                var svgElement = document.getElementById('"""+svg_id+"""');
+                var svgString = new XMLSerializer().serializeToString(svgElement);
+                var decoded = unescape(encodeURIComponent(svgString));
+                var base64 = btoa(decoded);
+                var imgSource = `data:image/svg+xml;base64,${base64}`;
+                e.innerHTML = "<img id='svgplot'>";
+                document.getElementById('svgplot').src = imgSource;       
+            }}, 1);
+        </script>
+        """
+        display(HTML(output))
+        display(HTML(script))
+    else:
+        display(HTML(output))
 
-def bar(labels, values, **kwargs):
+def bar(labels, values, plot_svg = False, **kwargs):
     data = pkgutil.get_data(__package__, 'templates/bar.html')
-    return generate_template(data, labels, values, **kwargs)
+    generate_template(data, labels.tolist(), values.tolist(), plot_svg, **kwargs)
 
-def barh(labels, values, **kwargs):
+def barh(labels, values, plot_svg = False, **kwargs):
     data = pkgutil.get_data(__package__, 'templates/barh.html')
-    return generate_template(data, labels, values, **kwargs)
+    generate_template(data, labels.tolist(), values.tolist(), plot_svg, **kwargs)
 
-def pie(labels, values, **kwargs):
+def pie(labels, values, plot_svg = False, **kwargs):
     data = pkgutil.get_data(__package__, 'templates/pie.html')
-    return generate_template(data, labels, values, **kwargs)
+    generate_template(data, labels.tolist(), values.tolist(), plot_svg, **kwargs)
 
-def donut(labels, values, **kwargs):
+def donut(labels, values, plot_svg = False, **kwargs):
     data = pkgutil.get_data(__package__, 'templates/donut.html')
-    return generate_template(data, labels, values, **kwargs)
+    generate_template(data, labels.tolist(), values.tolist(), plot_svg, **kwargs)
 
-def stackedbar(labels, values, **kwargs):
+def stackedbar(labels, values, plot_svg = False, **kwargs):
     data = pkgutil.get_data(__package__, 'templates/stackedbar.html')
-    template = Template(data.decode("utf-8"))
-    id_name = ''.join(random.choice(string.ascii_lowercase) for i in range(10))
-    data = []
+    content = []
     for index, row in pd.concat([labels,values],axis=1).iterrows():
-        data.append(row.to_dict())
-    output = template.render(id_name = id_name,
-                             labels = labels.name,
-                             values = data,
-                             kwargs = kwargs)
-    return HTML(output)
+        content.append(row.to_dict())
+    generate_template(data, labels.name, content, plot_svg, **kwargs)
diff --git a/roughviz/templates/bar.html b/roughviz/templates/bar.html
index 63e6a70..c9f45b0 100644
--- a/roughviz/templates/bar.html
+++ b/roughviz/templates/bar.html
@@ -1,19 +1,4 @@
 <html>
-<head>
-<style>
-.xAxis{{id_name}} .tick text
-{
-  text-anchor: middle!important;
-  transform: rotate(0)!important;
-}
-#{{id_name}}{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-#{{id_name}} svg{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-</style>
-</head>
 <body>
 
 <div id={{id_name|tojson}}></div>
@@ -52,9 +37,18 @@
 	xLabel: {{kwargs.xLabel|default("")|tojson}},
 	yLabel: {{kwargs.yLabel|default("")|tojson}},
 	height: {{kwargs.height|default(400)}},
-	width: {{kwargs.width|default(700)}}
+	width: {{kwargs.width|default(700)}},
+	interactive: {{kwargs.interactive|default(true)|tojson}}
   }
 );
+	var text = document.querySelectorAll(".xAxis{{id_name}} .tick text");
+	var i;
+	for (i = 0; i < text.length; i++) {
+		text[i].setAttribute("transform", "rotate(0)");
+		text[i].style.textAnchor="middle";
+	}
+	document.getElementById("{{id_name}}").style.height = "{{kwargs.height|default(400)|int - 20}}px";
+	document.querySelector("#{{id_name}} svg").style.height = "{{kwargs.height|default(400)|int - 20}}px";
 });
 </script>
 
diff --git a/roughviz/templates/barh.html b/roughviz/templates/barh.html
index c18d229..29523a0 100644
--- a/roughviz/templates/barh.html
+++ b/roughviz/templates/barh.html
@@ -1,19 +1,4 @@
 <html>
-<head>
-<style>
-.xAxis{{id_name}} .tick text
-{
-  text-anchor: middle!important;
-  transform: rotate(0)!important;
-}
-#{{id_name}}{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-#{{id_name}} svg{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-</style>
-</head>
 <body>
 
 <div id={{id_name|tojson}}></div>
@@ -52,9 +37,18 @@
 	xLabel: {{kwargs.xLabel|default("")|tojson}},
 	yLabel: {{kwargs.yLabel|default("")|tojson}},
 	height: {{kwargs.height|default(400)}},
-	width: {{kwargs.width|default(700)}}
+	width: {{kwargs.width|default(700)}},
+	interactive: {{kwargs.interactive|default(true)|tojson}}
   }
 );
+	var text = document.querySelectorAll(".xAxis{{id_name}} .tick text");
+	var i;
+	for (i = 0; i < text.length; i++) {
+		text[i].setAttribute("transform", "rotate(0)");
+		text[i].style.textAnchor="middle";
+	}
+	document.getElementById("{{id_name}}").style.height = "{{kwargs.height|default(400)|int - 20}}px";
+	document.querySelector("#{{id_name}} svg").style.height = "{{kwargs.height|default(400)|int - 20}}px";
 });
 </script>
 
diff --git a/roughviz/templates/donut.html b/roughviz/templates/donut.html
index 7f14102..2e284a1 100644
--- a/roughviz/templates/donut.html
+++ b/roughviz/templates/donut.html
@@ -1,19 +1,4 @@
 <html>
-<head>
-<style>
-.xAxis{{id_name}} .tick text
-{
-  text-anchor: middle!important;
-  transform: rotate(0)!important;
-}
-#{{id_name}}{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-#{{id_name}} svg{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-</style>
-</head>
 <body>
 
 <div id={{id_name|tojson}}></div>
@@ -42,8 +27,17 @@
 	title: {{kwargs.title|default("")|tojson}},
 	titleFontSize: {{kwargs.titleFontSize|default("3rem")|tojson}},
 	tooltipFontSize: {{kwargs.tooltipFontSize|default("3rem")|tojson}},
+	interactive: {{kwargs.interactive|default(true)|tojson}}
   }
 );
+	var text = document.querySelectorAll(".xAxis{{id_name}} .tick text");
+	var i;
+	for (i = 0; i < text.length; i++) {
+		text[i].setAttribute("transform", "rotate(0)");
+		text[i].style.textAnchor="middle";
+	}
+	document.getElementById("{{id_name}}").style.height = "{{kwargs.height|default(400)|int - 20}}px";
+	document.querySelector("#{{id_name}} svg").style.height = "{{kwargs.height|default(400)|int - 20}}px";
 });
 </script>
 
diff --git a/roughviz/templates/pie.html b/roughviz/templates/pie.html
index 4c5d188..7a2a8cf 100644
--- a/roughviz/templates/pie.html
+++ b/roughviz/templates/pie.html
@@ -1,19 +1,4 @@
 <html>
-<head>
-<style>
-.xAxis{{id_name}} .tick text
-{
-  text-anchor: middle!important;
-  transform: rotate(0)!important;
-}
-#{{id_name}}{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-#{{id_name}} svg{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-</style>
-</head>
 <body>
 
 <div id={{id_name|tojson}}></div>
@@ -43,8 +28,17 @@
 	title: {{kwargs.title|default("")|tojson}},
 	titleFontSize: {{kwargs.titleFontSize|default("3rem")|tojson}},
 	tooltipFontSize: {{kwargs.tooltipFontSize|default("3rem")|tojson}},
+	interactive: {{kwargs.interactive|default(true)|tojson}}
   }
 );
+	var text = document.querySelectorAll(".xAxis{{id_name}} .tick text");
+	var i;
+	for (i = 0; i < text.length; i++) {
+		text[i].setAttribute("transform", "rotate(0)");
+		text[i].style.textAnchor="middle";
+	}
+	document.getElementById("{{id_name}}").style.height = "{{kwargs.height|default(400)|int - 20}}px";
+	document.querySelector("#{{id_name}} svg").style.height = "{{kwargs.height|default(400)|int - 20}}px";
 });
 </script>
 
diff --git a/roughviz/templates/stackedbar.html b/roughviz/templates/stackedbar.html
index 2887d15..e7ab5d3 100644
--- a/roughviz/templates/stackedbar.html
+++ b/roughviz/templates/stackedbar.html
@@ -1,19 +1,4 @@
 <html>
-<head>
-<style>
-.xAxis{{id_name}} .tick text
-{
-  text-anchor: middle!important;
-  transform: rotate(0)!important;
-}
-#{{id_name}}{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-#{{id_name}} svg{
-height: {{kwargs.height|default(400)|int - 20}}px!important;
-}
-</style>
-</head>
 <body>
 
 <div id={{id_name|tojson}}></div>
@@ -50,9 +35,18 @@
 	xLabel: {{kwargs.xLabel|default("")|tojson}},
 	yLabel: {{kwargs.yLabel|default("")|tojson}},
 	height: {{kwargs.height|default(400)}},
-	width: {{kwargs.width|default(700)}}
+	width: {{kwargs.width|default(700)}},
+	interactive: {{kwargs.interactive|default(true)|tojson}}
   }
 );
+	var text = document.querySelectorAll(".xAxis{{id_name}} .tick text");
+	var i;
+	for (i = 0; i < text.length; i++) {
+		text[i].setAttribute("transform", "rotate(0)");
+		text[i].style.textAnchor="middle";
+	}
+	document.getElementById("{{id_name}}").style.height = "{{kwargs.height|default(400)|int - 20}}px";
+	document.querySelector("#{{id_name}} svg").style.height = "{{kwargs.height|default(400)|int - 20}}px";
 });
 </script>