Markers

This code snippet demonstrates how to position markers on exact price level on candlesticks by using line series.

by blueseal

HTML

<script src="https://unpkg.com/[email protected]/dist/lightweight-charts.standalone.production.js"></script>
<h3>Markers with price</h3>
<p>Markers is a great new feature of lightweightcharts, but they lack the possibility to being set on exact price level when used on candlesticks series even with `inBar` position being used. This code snippet provides a workaround by using overlapping invisible line series.</p>
<li>To show the invisible line change the line 28 to color: 'rgba(255, 255, 255, 1)'</li>

<p>For any questions reach me on <a href="https://twitter.com/fillky">@fillky</a> or give me a follow if you like the workaround.</p>

JavaScript

var chart = LightweightCharts.createChart(document.body, {
	width: 700,
  height: 400,
	layout: {
		backgroundColor: '#000000',
		textColor: 'rgba(255, 255, 255, 0.9)',
	},
	grid: {
		vertLines: {
			color: 'rgba(197, 203, 206, 0.5)',
		},
		horzLines: {
			color: 'rgba(197, 203, 206, 0.5)',
		},
	},
	crosshair: {
		mode: LightweightCharts.CrosshairMode.Normal,
	},
	rightPriceScale: {
		borderColor: 'rgba(197, 203, 206, 0.8)',
	},
	timeScale: {
		borderColor: 'rgba(197, 203, 206, 0.8)',
	},
});

var lineSeries = chart.addLineSeries({
	color: 'rgba(255, 255, 255, 0)', // hide or show the line by setting opacity
  lastValueVisible: false, // hide value from y axis
  priceLineVisible: false
});

lineSeries.setData([
	{ time: '2018-12-26', value: 162 },
	{ time: '2019-01-18', value: 178 },
	{ time: '2019-02-25', value: 191 },
	{ time: '2019-03-21', value: 187.50 },
  { time: '2019-04-03', value: 196.80 },
  { time: '2019-05-07', value: 195.90 },
  { time: '2019-05-21', value: 188 },
]);

lineSeries.setMarkers([
	{ time: '2018-12-26', position: 'inBar', shape: 'circle', color: 'orange' },
 	{ time: '2019-01-18', position: 'aboveBar', shape: 'arrowDown', color: 'orange' },
  { time: '2019-02-25', position: 'aboveBar', shape: 'arrowDown', color: 'orange' },
 	{ time: '2019-03-21', position: 'belowBar', shape: 'arrowUp', color: 'orange' },
  { time: '2019-04-03', position: 'aboveBar', shape: 'arrowDown', color: 'orange' },
  { time: '2019-05-07', position: 'belowBar', shape: 'arrowUp', color: 'orange' },
  { time: '2019-05-21', position: 'inBar', shape: 'circle', color: 'orange' }
]);

var candleSeries = chart.addCandlestickSeries({
  lastValueVisible: false,
  priceLineVisible: false
});

candleSeries.setData([
	{ time: '2018-12-26', open: 159.46, high: 168.28, low: 159.44, close: 168.28 },
	{ time: '2018-12-27', open: 166.44, high: 170.46, low: 163.36, close: 170.32 },
	{ time: '2018-12-28', open: 171.22, high: 173.12, low: 168.60, close: 170.22 },
	{ time:...