Enhancements & Bug Fixes

- Added the `color_based_on_candle` parameter to the legend, which will color the percentage change based on the candle color underneath the crosshair.
(#210)
- Fixed a bug which prevented the legend from turning off. (#216)

docs/source/reference/abstract_chart.md

@@ -273,7 +273,7 @@ ___
 
 
 
-```{py:method} legend(visible: bool, ohlc: bool, percent: bool, lines: bool, color: COLOR, font_size: int, font_family: str, text: str)
+```{py:method} legend(visible: bool, ohlc: bool, percent: bool, lines: bool, color: COLOR, font_size: int, font_family: str, text: str, color_based_on_candle: bool)
 
 Configures the legend of the chart.
 ```

lightweight_charts/abstract.py

@@ -904,19 +904,25 @@ def watermark(self, text: str, font_size: int = 44, color: str = 'rgba(180, 180,
 
     def legend(self, visible: bool = False, ohlc: bool = True, percent: bool = True, lines: bool = True,
                color: str = 'rgb(191, 195, 203)', font_size: int = 11, font_family: str = 'Monaco',
-               text: str = ''):
+               text: str = '', color_based_on_candle: bool = False):
         """
         Configures the legend of the chart.
         """
         l_id = f'{self.id}.legend'
         if not visible:
-            self.run_script(f'{l_id}.div.style.display = "none"')
+            self.run_script(f'''
+            {l_id}.div.style.display = "none"
+            {l_id}.ohlcEnabled = false
+            {l_id}.percentEnabled = false
+            {l_id}.linesEnabled = false
+            ''')
             return
         self.run_script(f'''
         {l_id}.div.style.display = 'flex'
         {l_id}.ohlcEnabled = {jbool(ohlc)}
         {l_id}.percentEnabled = {jbool(percent)}
         {l_id}.linesEnabled = {jbool(lines)}
+        {l_id}.colorBasedOnCandle = {jbool(color_based_on_candle)}
         {l_id}.div.style.color = '{color}'
         {l_id}.color = '{color}'
         {l_id}.div.style.fontSize = '{font_size}px'

lightweight_charts/js/funcs.js

@@ -185,6 +185,7 @@ if (!window.Chart) {
             this.ohlcEnabled = false
             this.percentEnabled = false
             this.linesEnabled = false
+            this.colorBasedOnCandle = false
 
             this.div = document.createElement('div')
             this.div.style.position = 'absolute'
@@ -219,40 +220,61 @@ if (!window.Chart) {
             }
 
             chart.chart.subscribeCrosshairMove((param) => {
-                if (param.time) {
-                    let data = param.seriesData.get(chart.series);
-                    let finalString = '<span style="line-height: 1.8;">'
-                    if (data) {
-                        this.candle.style.color = ''
-                        let ohlc = `O ${legendItemFormat(data.open, chart.precision)} 
-                                | H ${legendItemFormat(data.high, chart.precision)} 
-                                | L ${legendItemFormat(data.low, chart.precision)}
-                                | C ${legendItemFormat(data.close, chart.precision)} `
-                        let percentMove = ((data.close - data.open) / data.open) * 100
-                        let percent = `| ${percentMove >= 0 ? '+' : ''}${percentMove.toFixed(2)} %`
-                        finalString += this.ohlcEnabled ? ohlc : ''
-                        finalString += this.percentEnabled ? percent : ''
-
-                        let volumeData = param.seriesData.get(chart.volumeSeries)
-                        if (volumeData) finalString += this.ohlcEnabled ? `<br>V ${shorthandFormat(volumeData.value)}` : ''
+                let options = chart.series.options()
+                if (!param.time) {
+                    this.candle.style.color = 'transparent'
+                    this.candle.innerHTML = this.candle.innerHTML.replace(options['upColor'], '').replace(options['downColor'], '')
+                    return
+                }
+                let data = param.seriesData.get(chart.series);
+                this.candle.style.color = ''
+                let str = '<span style="line-height: 1.8;">'
+                if (data) {
+                    if (this.ohlcEnabled) {
+                        str += `O ${legendItemFormat(data.open, chart.precision)} `
+                        str += `| H ${legendItemFormat(data.high, chart.precision)} `
+                        str += `| L ${legendItemFormat(data.low, chart.precision)} `
+                        str += `| C ${legendItemFormat(data.close, chart.precision)} `
                     }
-                    this.candle.innerHTML = finalString + '</span>'
-                    this.lines.forEach((line) => {
-                        if (!param.seriesData.get(line.line.series)) return
-                        let price = param.seriesData.get(line.line.series).value
 
-                        if (line.line.type === 'histogram') {
-                            price = shorthandFormat(price)
+                    if (this.percentEnabled) {
+                        let percentMove = ((data.close - data.open) / data.open) * 100
+                        let color = percentMove > 0 ? options['upColor'] : options['downColor']
+                        let percentStr = `${percentMove >= 0 ? '+' : ''}${percentMove.toFixed(2)} %`
+
+                        if (this.colorBasedOnCandle) {
+                            str += `| <span style="color: ${color};">${percentStr}</span>`
                         }
                         else {
-                            price = legendItemFormat(price, line.line.precision)
+                            str += '| ' + percentStr
                         }
-                        line.div.innerHTML = `<span style="color: ${line.solid};">▨</span>    ${line.line.name} : ${price}`
-                    })
-
-                } else {
-                    this.candle.style.color = 'transparent'
+                    }
+                    let volumeData = param.seriesData.get(chart.volumeSeries)
+                    if (volumeData) {
+                        str += this.ohlcEnabled ? `<br>V ${shorthandFormat(volumeData.value)}` : ''
+                    }
                 }
+                this.candle.innerHTML = str + '</span>'
+
+                this.lines.forEach((line) => {
+                    if (!this.linesEnabled) {
+                        line.row.style.display = 'none'
+                        return
+                    }
+                    line.row.style.display = 'flex'
+                    if (!param.seriesData.get(line.line.series)) return
+                    let price = param.seriesData.get(line.line.series).value
+
+                    if (line.line.type === 'histogram') {
+                        price = shorthandFormat(price)
+                    }
+                    else {
+                        price = legendItemFormat(price, line.line.precision)
+                    }
+                    line.div.innerHTML = `<span style="color: ${line.solid};">▨</span>    ${line.line.name} : ${price}`
+                })
+
+
             });
         }
 

setup.py

@@ -5,7 +5,7 @@
 
 setup(
     name='lightweight_charts',
-    version='1.0.18.6',
+    version='1.0.18.8',
     packages=find_packages(),
     python_requires='>=3.8',
     install_requires=[