Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<h1>Simple SVG Charts</h1>
<div id="returns_chart" class="chart"></div>
              
            
!

CSS

              
                body, html, .section {
	padding: 0px;
	margin: 0px;
	height: 100%;
	width: 100%;
	background-color: #FFF;
	overflow: hidden;
}
@font-face{font-family:'lineto-brown-bold';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-bold.svg#lineto-brown-bold') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-boldalt';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-boldalt.svg#lineto-brown-boldalt') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-reclinbold';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinbold.svg#lineto-brown-reclinbold') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-reclinboldalt';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-bold/fonts/lineto-brown-reclinboldalt.svg#lineto-brown-reclinboldalt') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-light';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-light.svg#lineto-brown-light') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-reclinlight';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-light/fonts/lineto-brown-reclinlight.svg#lineto-brown-reclinlight') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-reclinregular';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregular.svg#lineto-brown-reclinregular') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-regular';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regular.svg#lineto-brown-regular') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-reclinregularalt';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-reclinregularalt.svg#lineto-brown-reclinregularalt') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-regularalt';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-regular/fonts/lineto-brown-regularalt.svg#lineto-brown-regularalt') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-reclinthin';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-reclinthin.svg#lineto-brown-reclinthin') format('svg');font-style:normal;font-weight:normal}@font-face{font-family:'lineto-brown-thin';src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.eot');src:url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.eot?#iefix') format('embedded-opentype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.woff') format('woff'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.ttf') format('truetype'),url('https://static1.squarespace.com/static/ta/543e57cbe4b0bda0c6496d33/4472/assets/fonts/ll-brown-thin/fonts/lineto-brown-thin.svg#lineto-brown-thin') format('svg');font-style:normal;font-weight:normal}
.full {
	width: 100%;
	height: 100%;
}

.bright {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223954/bg_white.jpg);
	background-attachment: fixed;
}
.white {
	background-color: #FFF;
}
.grey {
	background-color: #f5f5f5;
}
.dark {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223954/bg_black.jpg);
	background-attachment: fixed;
}

.clear-fix { clear: both; }
.nopad_bottom { padding-bottom:0px !important; }
.nopad_top { padding-top:0px !important; }

h1{
	text-align: center;
	font-family: lineto-brown-light;
	letter-spacing: -2px;
	max-width: 12.8em;
	margin: 10vh auto 0 auto;
	font-weight: 100;
	color: #DDD;
	font-size: 3.323em;
	line-height: 1.2em;
	text-transform: none;
	-moz-osx-font-smoothing: auto;
	-webkit-font-smoothing: subpixel-antialiased;
}
	

.chart {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 30px auto;
	
	.range, .year {
		background-color: #FFF;
		width: 100% !important;
	}
	
	svg { 
		cursor:crosshair;
	}
	
	.titles {
		list-style-type: none;
		margin: 0;
		padding: 10px 0 20px 0;
		
		li {
			font-family: lineto-brown-light;
			text-align: center;
			list-style-type: none;
			float: left;
			font-size: 1.323em;
			font-weight: bold;
		}
	}
	
	.data_mouse {
		position: fixed;
		box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
		font-family: Arial, sans-serif;
		padding: 8px 12px 0px 12px;
		min-width: 100px;
		background-color: #FFF;
		color: #666;
		border-radius: 3px;
		
		ul {
			list-style-type: none;
			padding: 0px;
			margin: 0px;
			
			li {
				text-align: center;
				list-style-type: none;
				
				p {
					text-align: left;
					font-size: 13px;
					font-family: sans-serif;
					margin-bottom: 10px;
					margin-top: 4px;
					font-weight: bold;
				}
			}
		}
	}
	
	.range {
		margin-top: -4px;
		
		div.mdate {
			float: left;
			text-align: center;
			float: left;
			font-family: lineto-brown-light;
			font-size: 0.70em;
			margin-top: 0px;
			max-width: 39.881em;
			margin: 0 auto;
			text-align: center;
			line-height: 1.6em;
			letter-spacing: 0px;
			font-weight: 300;
			font-style: normal;
			color: #ABABAB;
			padding-top: 5px;
			padding-bottom: 5px;
			-moz-osx-font-smoothing: auto;
			-webkit-font-smoothing: subpixel-antialiased;
		}
	}
	
	.year {
		width: 99%;
		margin: 0 auto;
		padding-bottom: 10px;
		
		.ydate {
			font-size: 14px;
			font-family: lineto-brown-light;
			-moz-osx-font-smoothing: auto;
			-webkit-font-smoothing: subpixel-antialiased;
			padding-bottom: 5px;
			float: left;
			color: #757575;
			text-align: center;
			box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2),-1px 0px 0px rgba(0, 0, 0, 0.2);
		}
	}
}
              
            
!

JS

              
                var go = true;
if(window.location.hash == '#demo'){
	setTimeout(function(){
		go = false;
	}, 9500);
}

kindChart($('#returns_chart'), {
	colors: ['27,231,255', '110,235,131', '228,255,26','232,170,20','255,87,20'],
	opacity: 1,
	height: '250',
	width: '100%',
	period: 12,
	max_y: 100,
	data:[ 		
		[	
			'Our Returns', [
			['2015', '04',501],
			['2015', '05',423],
			['2015', '06',384],
			['2015', '07',326],
			['2015', '08',446],
			['2015', '09',312],
			['2015', '10',525],
			['2015', '11',765],
			['2015', '12',841],
			['2016', '01',916],
			['2016', '02',926],
			['2016', '03',841],
			['2016', '04',768] ] 
		],
		[
			'Their Returns', [
			['2015', '04',329],
			['2015', '05',254],
			['2015', '06',235],
			['2015', '07',207],
			['2015', '08',382],
			['2015', '09',248],
			['2015', '10',375],
			['2015', '11',568],
			['2015', '12',429],
			['2016', '01',210],
			['2016', '02',441],
			['2016', '03',529],
			['2016', '04',612] ]
		],
		[
			'His Returns', [
			['2015', '04',108],
			['2015', '05',192],
			['2015', '06',225],
			['2015', '07',185],
			['2015', '08',277],
			['2015', '09',268],
			['2015', '10',296],
			['2015', '11',471],
			['2015', '12',229],
			['2016', '01',610],
			['2016', '02',741],
			['2016', '03',629],
			['2016', '04',812] ]
		],
		[
			'Her Returns', [
			['2015', '04',202],
			['2015', '05',272],
			['2015', '06',215],
			['2015', '07',145],
			['2015', '08',158],
			['2015', '09',195],
			['2015', '10',176],
			['2015', '11',283],
			['2015', '12',429],
			['2016', '01',510],
			['2016', '02',441],
			['2016', '03',329],
			['2016', '04',412] ]
		],
		[
			'Johns Lunch', [
			['2015', '04',102],
			['2015', '05',183],
			['2015', '06',168],
			['2015', '07',212],
			['2015', '08',178],
			['2015', '09',108],
			['2015', '10',83],
			['2015', '11',54],
			['2015', '12',78],
			['2016', '01',109],
			['2016', '02',189],
			['2016', '03',254],
			['2016', '04',201] ]
		]
	]		
});







/* ACTUAL SCRIPT, USAGE ABOVE */





function kindChart(element, options) {

	options	= $.extend( {}, {
		ranges: true,
		width: '100%',
		height: '250',
		inverted: false,
		period: false,
		opacity: 0.5
	}, options);

	console.log(options);

	var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
	svg.setAttribute('height',options.height);
	svg.setAttribute('width', options.width);
	svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
	svg.setAttribute('preserveAspectRatio', 'none');
	svg.setAttribute('viewBox', '0 0 100 100');
	element.append('<div class="range"></div>');
	element.append('<div class="year"></div>');
	element.append('<div class="data_mouse"></div>');
	element.prepend('<ul class="titles"></ul>');

	var highest = 0;
	for(var y = 0; y < options.data.length; y++){
		for(var x = 0; x < options.data[y][1].length; x++){
			if(highest < options.data[y][1][x][2]) {
				highest = options.data[y][1][x][2] + 10;
			}
		}
	}

	if(options.period == false) {
		var lengthe = 0;
		for(var y = 0; y < options.data.length; y++){
			if(length < options.data[y][1].length) {
				console.log(options.data[y][1].length);
				lengthe = options.data[y][1].length;
			}
		}
		options.period = lengthe;

	}

	var Xfactor = 100 / (options.period - 1);
	var Yfactor = options.max_y / highest;


	/* DRAW CHART */
	var iteration = 0;
	var svg_increment_path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
	var increment_path = '';
	var width_set = 0;
	for(var y = 0; y < options.data.length; y++) {
		iteration++;
		var svg_path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
		var path = '';
		element.find('ul.titles').append('<li style="color: rgb('+options.colors[y]+'); width: '+ (100 / options.data.length) +'%;">'+options.data[y][0]+'</li>');

		for(var x = 0; x <= options.data[y][1].length - 1; x++) {
			if(x > options.data[y][1].length - options.period - 1) {
				width_set++;
				if(iteration == 1){						
					increment_path += 'M '+ ((100 / (options.period - 1)) * x) + ' 0 L '+ ((100 / (options.period - 1)) * x) + ' 100 ';
					if((x - (options.data[y][1].length - options.period)) != 0){
						element.find('.range').append('<div class="mdate" style="width: '+ 100 / (options.period - 1) +'%">'+ options.data[y][1][x][1] +'</div>');
					}
					if(options.data[y][1][x][1] == '12') {
						element.find('.year').append('<div class="ydate" style="width: '+ ((width_set - 1) * (100 / (options.period - 1))) +'%;">'+ options.data[y][1][x][0] +'</div>');
						width_set = 0;
					} else if(x == (options.period - 1)) {
						element.find('.year').append('<div class="ydate" style="width: '+ ((width_set + 1) * (100 / (options.period - 1))) +'%;">'+ options.data[y][1][x][0] +'</div>');
					}
				}
				if(x == options.data[y][1].length - options.period) {
					if(options.inverted == true) {
						var pre = 'M 0 0 L 0 ';
						var add = ' L 100 0';
					} else {
						var pre = 'M 0 100 L 0 ';
						var add = ' L 100 100';
					}
					path += pre + (100 - options.data[y][1][x][2] * Yfactor) + ' ';
				} else if(x == options.data[y][1].length - 1) {
					path += 'L '+ ((x - (options.data[y][1].length - options.period)) * Xfactor) +' '+ (100 - options.data[y][1][x][2] * Yfactor) + add;
				} else {
					path += 'L '+ ((x - (options.data[y][1].length - options.period)) * Xfactor) +' '+ (100 - options.data[y][1][x][2] * Yfactor) + ' ';
				}
			}
		}

		svg_increment_path.setAttribute('stroke', 'rgba(0,0,0,0.1)');
		svg_increment_path.setAttribute('stroke-width', '0.15');
		svg_increment_path.setAttribute('d', increment_path);
		svg.appendChild(svg_increment_path);

		svg_path.setAttribute('fill', 'rgba('+options.colors[y]+','+options.opacity+')');
		svg_path.setAttribute('d', path);
		svg.appendChild(svg_path);
	}

	element.find('ul, .range, .year').append('<div class="clear-fix"></div>');
	element.find('.titles').after(svg);


	element.mousemove(function(e){
		if(go == true){
		var objLeft = $(this).offset().left;
		var objRight = $(this).offset().right;
		var objTop = $(this).offset().top;

		var section = Math.floor((e.pageX / ($(this).width() / (options.period - 1))));

		var left = ((section - 1) * ($(this).width() / (options.period - 1))) + (($(this).width() / (options.period - 1)) / 2);
		var right = 'initial';
		if(left + $(this).find('.data_mouse').width() >= (objLeft + $(this).width())- $(this).find('.data_mouse').width()) {
			left = 'initial';
			right =  ((options.period - 1) - (section - 2)) * ($(this).width() / (options.period - 1));
		}
		
		/*$(this).find('.data_mouse').css({
			left: left,
			right: right,
			top: (e.pageY - objTop) - 14,
			display: 'block'
		}).html('<ul></ul>');*/
		$(this).find('.data_mouse').css({
			left: e.pageX + 10,
			top: e.pageY,
			display: 'block'
		}).html('<ul></ul>');

		var color = "#666";
		var diff = 0;
		for(var i = 0; i < options.data.length; i++){
			if(options.data[i][1][section][2] > options.data[i][1][section - 1][2]) {
				color = "#0C0";
				diff = '+ ' + (options.data[i][1][section][2] - options.data[i][1][section - 1][2]);
			} else if(options.data[i][1][section][2] < options.data[i][1][section - 1][2]) {
				color = "#C00";
				diff = '- ' + (options.data[i][1][section - 1][2] - options.data[i][1][section][2]);
			}

			element.find('.data_mouse ul').append('<li><span style="color: rgb('+ options.colors[i] +');">'+ options.data[i][0] +'</span><p><span class="return">$'+ options.data[i][1][section][2] +'</span><span style="float: right; color: '+ color +'; font-weight: normal;">'+ diff +'</span></p></li>');
		}
		}
	});

	element.mouseout(function(e){
		
		$(this).find('.data_mouse').css({
			left: 0,
			top: 0,
			display: 'none'
		});
		$(this).find('.out ul').html('');
		});
}
              
            
!
999px

Console