Magnifier tooltip

by rwhal06

HTML

<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>

CSS

html,
body {
	font-family: 'Trebuchet MS', Roboto, Ubuntu, sans-serif;
	background: #f9fafb;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.floating-tooltip-2 {
	width: 96px;
	height: 300px;
	position: absolute;
	display: none;
	padding: 8px;
	box-sizing: border-box;
	font-size: 12px;
	color: '#20262E';
	text-align: left;
	z-index: 1000;
	top: 12px;
	left: 12px;
	pointer-events: none;
	border-radius: 4px 4px 0px 0px;
  border-bottom: none;
}

JavaScript

document.body.style.position = 'relative';

var container = document.createElement('div');
document.body.appendChild(container);

var width = 600;
var height = 300;

var chart = LightweightCharts.createChart(container, {
	width: width,
	height: height,
	leftPriceScale: {
		scaleMargins: {
			top: 0.2,
			bottom: 0.2,
		},
    visible: true,
		borderVisible: false,
	},
  rightPriceScale: {
    visible: false,
	},
	timeScale: {
		borderVisible: false,
	},
	grid: {
		horzLines: {
			color: '#eee',
		},
		vertLines: {
			color: '#ffffff',
		},
	},
  crosshair: {
  		horzLine: {
      	visible: false,
        labelVisible: false
      },
      vertLine: {
      	visible: true,
        style: 0,
        width: 2,
        color: 'rgba(32, 38, 46, 0.1)',
        labelVisible: false,
      }
  },
});

var series = chart.addAreaSeries({	
	topColor: 'rgba(0, 120, 255, 0.2)',	
  bottomColor: 'rgba(0, 120, 255, 0.0)',
	lineColor: 'rgba(0, 120, 255, 1)',
	lineWidth: 3
});

series.setData([
	{ time: "2018-03-28", value: 154 },
	{ time: "2018-03-29", value: 154.2 },
	{ time: "2018-03-30", value: 155.60001 },
	{ time: "2018-04-02", value: 156.25 },
	{ time: "2018-04-03", value: 156.25 },
	{ time: "2018-04-04", value: 156.05 },
	{ time: "2018-04-05", value: 158.05 },
	{ time: "2018-04-06", value: 157.3 },
	{ time: "2018-04-09", value: 144 },
	{ time: "2018-04-10", value: 144.8 },
	{ time: "2018-04-11", value: 143.5 },
	{ time: "2018-04-12", value: 147.05 },
	{ time: "2018-04-13", value: 144.85001 },
	{ time: "2018-04-16", value: 145.39999 },
	{ time: "2018-04-17", value: 147.3 },
	{ time: "2018-04-18", value: 153.55 },
	{ time: "2018-04-19", value: 150.95 },
	{ time: "2018-04-20", value: 149.39999 },
	{ time: "2018-04-23", value: 148.5 },
	{ time: "2018-04-24", value: 146.60001 },
	{ time: "2018-04-25", value: 144.45 },
	{ time: "2018-04-26", value: 145.60001 },
	{ time: "2018-04-27", value: 144.3 },
	{ time: "2018-04-30", value: 144 },
	{ time: "2018-05-02", value: 147.3 },
	{...