how to add header of the trading view chart? - lightweight-charts

Question

i am new with react and trading view chart i have used lightweight-charts Library to integrated in my react project i am unable to get the header part of the chart.
Here Is My Code :
import { createChart } from "lightweight-charts";
import React from 'react';
const Graph = () => {
const chartRef = React.useRef(null);
React.useEffect(()=> {
if(chartRef.current){
const chart = createChart(chartRef.current, {
width: 800,
height: 500,
crosshair: {
mode: "normal"
},
layout: {
backgroundColor: '#000000',
textColor: 'rgba(255, 255, 255, 0.9)',
},
toolbar: {
hide_top_toolbar: false,
},
grid: {
vertLines: {
color: 'rgba(197, 203, 206, 0.5)',
},
horzLines: {
color: 'rgba(197, 203, 206, 0.5)',
},
},
priceScale: {
borderColor: 'rgba(197, 203, 206, 0.8)',
},
timeScale: {
borderColor: 'rgba(197, 203, 206, 0.8)',
},
});
prepareChart(chart);
}
}, [])
function prepareChart(chart) {
var candleSeries = chart.addCandlestickSeries();
var data = [
{ time: "2018-10-19", open: 54.62, high: 55.5, low: 54.52, close: 54.9 },
{ time: "2018-10-22", open: 55.08, high: 55.27, low: 54.61, close: 54.98 },
{ time: "2018-10-23", open: 56.09, high: 57.47, low: 56.09, close: 57.21 },
{ time: "2018-10-24", open: 57.0, high: 58.44, low: 56.41, close: 57.42 },
{ time: "2018-10-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
{ time: "2019-05-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
{ time: "2019-10-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
{ time: "2018-01-19", open: 54.62, high: 55.5, low: 54.52, close: 54.9 },
{ time: "2018-02-22", open: 55.08, high: 55.27, low: 54.61, close: 54.98 },
{ time: "2018-03-23", open: 56.09, high: 57.47, low: 56.09, close: 57.21 },
{ time: "2018-04-24", open: 57.0, high: 58.44, low: 56.41, close: 57.42 },
{ time: "2018-05-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
{ time: "2019-06-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
{ time: "2019-07-25", open: 57.46, high: 57.63, low: 56.17, close: 56.43 },
];
candleSeries.setData(data);
var volumeSeries = chart.addHistogramSeries({
color: '#26a69a',
lineWidth: 2,
priceFormat: {
type: 'volume',
},
overlay: true,
scaleMargins: {
top: 0.8,
bottom: 0,
},
});
volumeSeries.setData([
{ time: '2018-10-19', value: 19103293.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-10-22', value: 21737523.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-10-23', value: 29328713.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-10-24', value: 37435638.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-10-25', value: 25269995.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-10-26', value: 24973311.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-10-29', value: 22103692.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-10-30', value: 25231199.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-10-31', value: 24214427.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-11-01', value: 22533201.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-11-02', value: 14734412.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-05', value: 12733842.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-06', value: 12371207.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-07', value: 14891287.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-08', value: 12482392.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-09', value: 17365762.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-12', value: 13236769.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-13', value: 13047907.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-11-14', value: 18288710.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-15', value: 17147123.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-16', value: 19470986.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-19', value: 18405731.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2018-11-20', value: 22028957.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-11-21', value: 18482233.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-11-23', value: 7009050.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2018-11-26', value: 12308876.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-02-20', value: 11379006.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-02-21', value: 14680547.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-02-22', value: 12534431.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-02-25', value: 15051182.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2019-02-26', value: 12005571.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2019-02-27', value: 8962776.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-02-28', value: 15742971.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-01', value: 10942737.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-04', value: 13674737.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2019-03-05', value: 15749545.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2019-03-06', value: 13935530.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2019-03-07', value: 12644171.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-08', value: 10646710.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-11', value: 13627431.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-12', value: 12812980.00, color: 'rgba(255,82,82, 0.8)' },
{ time: '2019-03-13', value: 14168350.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-14', value: 12148349.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: '2019-03-15', value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: "2018-05-25", value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: "2019-06-25", value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
{ time: "2019-07-25", value: 23715337.00, color: 'rgba(0, 150, 136, 0.8)' },
]);
// var lastClose = data[data.length - 1].close;
// var lastIndex = data.length - 1;
// var targetIndex = lastIndex + 105 + Math.round(Math.random() + 30);
// var targetPrice = getRandomPrice();
// var currentIndex = lastIndex + 1;
// var currentBusinessDay = { day: 29, month: 5, year: 2019 };
// var ticksInCurrentBar = 0;
// var currentBar = {
// open: null,
// high: null,
// low: null,
// close: null,
// time: currentBusinessDay
// };
// function mergeTickToBar(price) {
// if (currentBar.open === null) {
// currentBar.open = price;
// currentBar.high = price;
// currentBar.low = price;
// currentBar.close = price;
// } else {
// currentBar.close = price;
// currentBar.high = Math.max(currentBar.high, price);
// currentBar.low = Math.min(currentBar.low, price);
// }
// candleSeries.update(currentBar);
// }
// function reset() {
// candleSeries.setData(data);
// lastClose = data[data.length - 1].close;
// lastIndex = data.length - 1;
// targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
// targetPrice = getRandomPrice();
// currentIndex = lastIndex + 1;
// currentBusinessDay = { day: 29, month: 5, year: 2019 };
// ticksInCurrentBar = 0;
// }
// function getRandomPrice() {
// return 10 + Math.round(Math.random() * 10000) / 100;
// }
// function nextBusinessDay(time) {
// var d = new Date();
// d.setUTCFullYear(time.year);
// d.setUTCMonth(time.month - 1);
// d.setUTCDate(time.day + 1);
// d.setUTCHours(0, 0, 0, 0);
// return {
// year: d.getUTCFullYear(),
// month: d.getUTCMonth() + 1,
// day: d.getUTCDate()
// };
// }
// setInterval(function() {
// var deltaY = targetPrice - lastClose;
// var deltaX = targetIndex - lastIndex;
// var angle = deltaY / deltaX;
// var basePrice = lastClose + (currentIndex - lastIndex) * angle;
// var noise = 0.1 - Math.random() * 0.2 + 1.0;
// var noisedPrice = basePrice * noise;
// mergeTickToBar(noisedPrice);
// if (++ticksInCurrentBar === 5) {
// // move to next bar
// currentIndex++;
// currentBusinessDay = nextBusinessDay(currentBusinessDay);
// currentBar = {
// open: null,
// high: null,
// low: null,
// close: null,
// time: currentBusinessDay
// };
// ticksInCurrentBar = 0;
// if (currentIndex === 5000) {
// reset();
// return;
// }
// if (currentIndex === targetIndex) {
// // change trend
// lastClose = noisedPrice;
// lastIndex = currentIndex;
// targetIndex = lastIndex + 5 + Math.round(Math.random() + 30);
// targetPrice = getRandomPrice();
// }
// }
// }, 200);
}
return <div ref={chartRef} />;
}
export default Graph;

Answer 1

The lightweight-charts doesn't provide any of GUI elements like header/legend to control the chart itself. If you'd like to have them - you need to implement it yourself and use the API to control/change/show values you'd like to see.