Change percentage legend colour of lightweight-charts-python

Question

I was implementing lightweight-charts-python library that is python equivalent for tradingview's lightweight-charts library.

In that I wanted to have a label showing open, high, low, close and percentage move of the candle that the crosshair was pointing to.

I found the way to add these labels from here but there was no way to change the colour of all labels or only the percentage label dynamically according to the crosshair's candle's colour.

Is there any workaround or a proper solution to this problem?

Answer 1

From what I can tell this color cannot be set dynamically from the outside.

A quick hack to get the desired behaviour:

• Locate the func.js javascript file located in your local copy at lightweight_charts/js/funcs.js
• Modify line 232 from

  let percent = `| ${percentMove >= 0 ? '+' : ''}${percentMove.toFixed(2)} %`
  

  to

  let percent = `| ${percentMove >= 0 ? '<span style="color: green">+' : '<span style="color: red">'}${percentMove.toFixed(2)} %</span>`
  

This should change the color of the percentage label dynamically from green (+) to red (-) (or any color of your choosing, if you have the css skills)

Answer 2

This answer is just the addition to christian-karcher's answer

For anyone wondering about the steps, following are those:

1. Open your mac terminal, run command:
   $ cd /

2. After that, run:
   $ find . -iname "*lightweight_charts*"

3. you will get output as following:

   ...
   ...
   ./Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/lightweight_charts
   ...
   

4. cd to that folder:

   $ cd /Library/Frameworks/Python.framework/Versions/3.9/lib/python3.9/site-packages/lightweight_charts/
   

5. Open the js file that christian-karcher mentioned in his answer, in the code editor of your choice, for me is visual editor code:
   $ code js/funcs.js #this command opens funcs.js in visual studio code

6. Find the line with the following code:

   let percent = `| ${percentMove >= 0 ? '+' : ''}${percentMove.toFixed(2)} %`
   

   and replace it with:

   let percent = `| ${percentMove >= 0 ? '<span style="color: green">+' : '<span style="color: red">'}${percentMove.toFixed(2)} %</span>`
   

Now just re-run your code and see the percentage label change colour according to candle that the crosshair is pointing to.