How to colour the candles based on high and low values?

[EMChloe]

Hi,

I have created a candlestick chart using the Lightweight charts library. I used non-financial data as this is my use case. The data has a time, high value, and low value associated with it, but the lightweight charts code assigns the upward and downward candles a colour depending on the open and close values of the data.

Is there a way to give the upward and downward candles an assigned colour depending on the high and low values? at the moment, the candles are all dark green. I want the upward candles to be light green and the downward candles to be dark green. Here is my candlestick chart at the moment and the following code:

HTML FILE:

<title>Pioneer of the Nile</title>

<script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script> <script src="Pioneer\_CSV\_STATIC.js"></script>

JS FILE:

const getData = async () => {
const res = await fetch('Pioneer_of_the_Nile_original.csv');
const resp = await res.text();
const cdata = resp.split('\n').map((row) => {
const [time1, high, low] = row.split(',');
// Parse the time string and add 1 hour (in milliseconds)
const time = new Date(${time1}).getTime() / 1000 + 3600; // 3600 seconds = 1 hour
return {
time,
open: high * 1,
high: high * 1,
low: low * 1,
close: low * 1,
};
});
return cdata;
};
const displayChart = async () => {
const chartProperties = {
width: 1500,
height: 600,
timeScale: {
timeVisible: false,
secondsVisible: false,
rightOffset: 5, // Add a right offset to make room for the y-axis
barSpacing: 3, // Adjust the width of the candles by setting the bar spacing
timeVisibleRange: {
from: new Date('2023-03-31').getTime() / 1000, // Convert milliseconds to seconds
to: new Date('2023-07-31').getTime() / 1000,
}

},

priceScale: {
position: 'right', // Position of the price scale
mode: 0, // Normal mode
scaleMargins: {
top: 5,
bottom: 0.5,

},
minMove: 0.3, // Set the minimum step between price scale values to 0.3
},
};
const domElement = document.getElementById('tvchart');
const chart = LightweightCharts.createChart(domElement, chartProperties);
const candleseries = chart.addCandlestickSeries();
const klinedata = await getData();
candleseries.setData(klinedata);
// Changing the Candlestick colors
candleseries.applyOptions({
upColor: "rgb(84, 174, 50)", // light green candles for upward candles
downColor: "rgb(65, 132, 70)", // dark green candles for downward candles
borderVisible: false,
});

// Calculate the time range of the data
const firstDataPoint = klinedata[0].time;
const lastDataPoint = klinedata[klinedata.length - 1].time;
const dataRange = lastDataPoint - firstDataPoint;

// Set the visible time range to include a buffer on both ends of the data range
const buffer = 0.1; // Adjust the buffer as needed
const visibleRange = dataRange * (1 + buffer);
chart.timeScale().setVisibleRange({
from: firstDataPoint - visibleRange,
to: lastDataPoint + visibleRange,
});
// Adding a window resize event handler to resize the chart when
// the window size changes.
// Note: for more advanced examples (when the chart doesn't fill the entire window)
// you may need to use ResizeObserver -> https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
// window.addEventListener("resize", () => {
// chart.resize(window.innerWidth, window.innerHeight);
// });
};
displayChart();