Change color just for the current candle

[guelweles]

Hi,

Is it possible to change the color of the current candle? Let's say I have all the candles plotted into standard colors (up: green and down: red), but I want to change the color of the current candle if it meets one of my conditions (eg: MACD line crossed).

I'd appreciate any help on this, thanks.

[liihuu]

Use custom render of custom indicators. When the conditions are met, draw a candle and overwrite the original one.

[guelweles]

Could you kindly give me an example? I'm still getting used to your library, even though I have read the documentation and checked the available example, I still have figured out how I could change the color of the current candle, when I tried to change it, all the previous candles were changed as well.

Anyway I appreciate your reply and I'll keep trying.

[liihuu]

// tech template
const macdGoldCross = {
  name: 'MacdGoldCross',
  shortName: '',
  calcParams: [],
  calcTechnicalIndicator: (dataList) => {
    const params = [12, 26, 9]
    let closeSum = 0
    let emaShort
    let emaLong
    let dif = 0
    let difSum = 0
    let dea = 0
    const maxPeriod = Math.max(params[0], params[1])
    return dataList.map((kLineData, i) => {
      const macd = {}
      const close = kLineData.close
      closeSum += close
      if (i >= params[0] - 1) {
        if (i > params[0] - 1) {
          emaShort = (2 * close + (params[0] - 1) * emaShort) / (params[0] + 1)
        } else {
          emaShort = closeSum / params[0]
        }
      }
      if (i >= params[1] - 1) {
        if (i > params[1] - 1) {
          emaLong = (2 * close + (params[1] - 1) * emaLong) / (params[1] + 1)
        } else {
          emaLong = closeSum / params[1]
        }
      }
      if (i >= maxPeriod - 1) {
        dif = emaShort - emaLong
        macd.dif = dif
        difSum += dif
        if (i >= maxPeriod + params[2] - 2) {
          if (i > maxPeriod + params[2] - 2) {
            dea = (dif * 2 + dea * (params[2] - 1)) / (params[2] + 1)
          } else {
            dea = difSum / params[2]
          }
          macd.macd = (dif - dea) * 2
          macd.dea = dea
        }
      }
      return macd
    })
  },
  render: ({
    ctx, dataSource, viewport, styles, xAxis, yAxis
  }) => {
    const { from, to, kLineDataList, technicalIndicatorDataList } = dataSource
    const { barSpace } = viewport
    for (let i = from; i < to; i++) {
      const preTechData = technicalIndicatorDataList[i - 1]
      const currentTechData = technicalIndicatorDataList[i]
      if (
        preTechData &&
        ('dif' in preTechData) &&
        ('dea' in preTechData) &&
        currentTechData &&
        ('dif' in currentTechData) &&
        ('dea' in currentTechData)
      ) {
        const preDif = preTechData.dif
        const preDea = preTechData.dea
        const currentDif = currentTechData.dif
        const currentDea = currentTechData.dea
        if (preDif < preDea && currentDif > currentDea) {
          const x = xAxis.convertToPixel(i)
          const kLineData = kLineDataList[i]
          const openY = yAxis.convertToPixel(kLineData.open)
          const closeY = yAxis.convertToPixel(kLineData.close)
          const highY = yAxis.convertToPixel(kLineData.high)
          const lowY = yAxis.convertToPixel(kLineData.low)
          // color can take values from styles
          ctx.fillStyle = 'gold'
          const min = Math.min(openY, closeY)
          ctx.fillRect(x - 0.5, highY, 1, min - highY)
          ctx.fillRect(x - barSpace / 2, min, barSpace, Math.max(Math.abs(openY - closeY), 1))
          const max = Math.max(openY, closeY)
          ctx.fillRect(x - 0.5, max, 1, lowY - max)
        }
      }
    }
  }
}

// use
chart.addTechnicalIndicatorTemplate(macdGoldCross)
chart.createTechnicalIndicator('MacdGoldCross', false, { id: 'candle_pane' })