javascripttradingview-apilightweight-charts

How to get lightweight-charts to draw session breaks

I'm able to use lightweight-charts to display price and volume just fine. When the data is for multiple days, I want the chart to also show session break vertical lines (like it does in TradingView app). I looked through the Chart Options and API documentation and cannot find how to draw session breaks. Please advice.

Solution

  • Well, while exactly speaking you can not draw a vertical line, but you can substitute that with a histogram series having a data item on each session start. That series should be configured to have 100% height and should be semi-transparent so the candle behind that is not hidden.

    enter image description here

    enter image description here

    The code should look similar to this:

    verticalSeries = chart.addHistogramSeries({
  priceScaleId: 'vertical',
  color: 'rgba(128, 128, 255, 0.25)',
  scaleMargins: { top: 0, bottom: 0 }      
})
verticalSeries.setData(opens.map(open => ({ time: open, value: 1 })))