TradingView - Lightweight charts - Realtime histogram ( volume indicator)

Question

I managed to get the real time example to work:

https://jsfiddle.net/TradingView/yozeu6k1/

I tried to get a real time histogram underneath, as the usual volume indicator and the behavior is random.

A snapshot of the chart: enter image description here

As we can see the starting point of those bars differ one from another.

Series definition:

const volumeSeries = chart.addHistogramSeries({
    priceFormat: {
        type: 'volume',
    },
    priceScaleId: '',
    scaleMargins: {
        top: 0.8,
        bottom: 0,
    }
});

Update:

volumeSeries.update({
        time: data.time,
        value: data.volume
    });

Can anyone point me to an example in order to get a candlestick chart with a volume indicator to work? Both updating in real time.

Answer 1

I got it to work, basically the issue was that the histogram understands negative values as a down facing bar, so in order to show a volume indicator we have to show the absolute value of the volume and change the color.

A working example at: https://jsfiddle.net/rondolfo/0zg7u9tv/57/

//colours
var green = 'rgb(38,166,154)';
var red = 'rgb(255,82,82)';
var black = '#000000';
var white = 'rgba(255, 255, 255, 0.9)';
var grey = 'rgba(42, 46, 57, 0.5)';

// chart definition
var chart = LightweightCharts.createChart(document.body, {
  width: 800,
  height: 400,
  layout: {
    backgroundColor: black,
    textColor: white,
  },
  grid: {
    vertLines: {
      visible: false,
    },
    horzLines: {
      color: grey,
    },
  },
  crosshair: {
    mode: LightweightCharts.CrosshairMode.Normal,
  }
});

chart.applyOptions({
  timeScale: {
    borderVisible: false,
    borderColor: '#fff000',
    visible: true,
    timeVisible: true,
    minBarSpacing: 0.0,
  }
});

const candleStickSeries = chart.addCandlestickSeries({
  upColor: green,
  downColor: red,
  wickUpColor: green,
  wickDownColor: red,
  borderVisible: false,
  priceLineVisible: false,
});

const volumeSeries = chart.addHistogramSeries({
  priceFormat: {
    type: 'volume',
  },
  priceScaleId: '',
  scaleMargins: {
    top: 0.8,
    bottom: 0.02,
  }
});
//end chart definition

//data loading
jQuery.ajaxSetup({
  async: false
});
var url = 'https://raw.githubusercontent.com/AnAlgoTrader/TradingView.LightWeightCharts.Example/main/InputData/prices.json';
var data = [];
$.get(url, function(result) {
  data = JSON.parse(result);
});
//end data loading


//real time updates
var index = 0;
setInterval(function() {
  if (index > data.length) return;
  var item = data[index];
  candleStickSeries.update({
    time: item.time,
    open: item.open,
    high: item.high,
    low: item.low,
    close: item.close
  });
  var volumeColour = item.volume < 0 ? red : green;
  volumeSeries.update({
    time: item.time,
    value: Math.abs(item.volume),
    color: volumeColour
  });
  index++;
}, 1000);