Magnifier tooltip

by rwhal06

HTML

<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
Adapted from https://jsfiddle.net/TradingView/p6f5svr4/ which came from https://www.tradingview.com/lightweight-charts/

SCSS

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

.chart-container {
  position: relative;

  .floating-tooltip-2 { // https://jsfiddle.net/rwhal06/9owgcpza/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: 52px;
    pointer-events: none;
    border-radius: 4px 4px 0px 0px;
    border-bottom: none;
  }

  .tooltip-label {
    background: hsla(0, 0%, 100%, 0.8);
    padding: 5px;

    .tooltip-value {
      font-size: 24px;
      margin: 4px 0px;
      color: #20262E;
    }
    .tooltip-time {
      font-weight: bold;
    }
  }
}

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 },
	{...