Using the following code, I get the below chart:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HELLO</title>
<!-- Include the lightweight-charts library directly from CDN -->
<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
// Specify the ID of the div where you want to load the chart
var chartDivId = 'chart-container';
// Create the chart inside the specified div
var chart = LightweightCharts.createChart(chartDivId, {
width: 600,
height: 300,
layout: {
background: {
type: 'solid',
color: '#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)',
timeVisible: true,
secondsVisible: true,
},
});
// Create the candlestick series
var candleSeries = chart.addCandlestickSeries({
upColor: 'rgba(0, 255, 0, 1)',
downColor: 'rgba(255, 0, 0, 1)',
borderDownColor: 'rgba(255, 0, 0, 1)',
borderUpColor: 'rgba(0, 255, 0, 1)',
wickDownColor: 'rgba(255, 0, 0, 1)',
wickUpColor: 'rgba(0, 255, 0, 1)',
});
// Create the volume series
var volumeSeries = chart.addHistogramSeries({
color: '#26a69a',
priceFormat: {
type: 'volume',
},
priceScaleId: '',
});
volumeSeries.priceScale().applyOptions({
scaleMargins: {
top: 0.7,
bottom: 0,
},
});
// Function to load chart data from the backend
async function loadChartData() {
// Query the localhost:8081/getLatestData endpoint, which returns json.NewEncoder(w).Encode([]types.TOHLCV),
// wait for the response, then parse the response as json, and then set the newData variable to the response.
await fetch('http://localhost:8081/getLatestData')
.then(response => response.json())
.then(data => dataFromBackend = data);
// Format the (datetime) data to the format that the charting library expects
// https://stackoverflow.com/a/76397648/10018602
const formattedData = dataFromBackend.map(data => ({
time: (new Date(data.time)).getTime() / 1000,
open: data.open,
high: data.high,
low: data.low,
close: data.close,
volume: data.volume,
}));
// Set new data to the candlestick series
candleSeries.setData(formattedData);
// Format the (volume) data to the format that the charting library expects
const formattedVolumeData = dataFromBackend.map(data => ({
time: (new Date(data.time)).getTime() / 1000,
value: data.volume,
color: data.open > data.close ? 'rgba(255, 0, 0, 1)' : 'rgba(0, 255, 0, 1)',
}));
// Set new data to the volume series
volumeSeries.setData(formattedVolumeData);
}
// Initial load of data
loadChartData();
// Set an interval to reload chart data every 5 seconds
setInterval(loadChartData, 5000);
});
</script>
</head>
<body>
<h1>Welcome</h1>
<div id="chart-container"></div>
</body>
</html>
As you can see, I have no volume histogram at the bottom of the chart as the code would suggest.
The data being delivered from the backend indeed has volume in it (using Golang for the backend):
// Struct used when importing TOHLCV data from CSV file
type TOHLCV struct {
DateTime time.Time
Open float64
High float64
Low float64
Close float64
Volume float64
}
...
{2024-01-09 19:25:00 -0500 EST 473.94 474 473.94 474 10}
{2024-01-09 19:30:00 -0500 EST 473.95 473.96 473.93 473.96 6}
{2024-01-09 19:35:00 -0500 EST 473.99 473.99 473.99 473.99 5}
{2024-01-09 19:40:00 -0500 EST 474 474.01 473.94 473.95 16}
{2024-01-09 19:45:00 -0500 EST 473.89 473.89 473.81 473.81 150}
{2024-01-09 19:50:00 -0500 EST 473.83 473.83 473.83 473.83 1}
{2024-01-09 19:55:00 -0500 EST 473.77 473.83 473.77 473.79 142}
I have already referenced these pages but still cannot get the volume histogram to show up. Any other ideas?
https://tradingview.github.io/lightweight-charts/docs/series-types#histogram
https://jsfiddle.net/TradingView/cnbamtuh/
https://tradingview.github.io/lightweight-charts/tutorials/how_to/price-and-volume