Render volume in the main chart area

[mationai]

Pasting author's solution to render volume on main chart area here for reference.

Note: Add alpha channel (eg. '66') to volume style so it will make it look much better.

const candleVolume = {
  name: 'candle_volume',
  shortName: 'Volume',
  calcTechnicalIndicator: (kLineDataList) => {
    return kLineDataList.map(kLineData => kLineData.volume)
  },
  createToolTipDataSource: ({
    crosshair, dataSource, technicalIndicator, defaultStyles
  }) => {
    const { dataIndex } = crosshair
    const { technicalIndicatorDataList, kLineDataList } = dataSource
    const styles = technicalIndicator.styles || defaultStyles
    let color
    const kLineData = kLineDataList[dataIndex]
    if (kLineData.close > kLineData.open) {
      color = styles.bar.upColor
    } else if (kLineData.close < kLineData.open) {
      color = styles.bar.downColor
    } else {
      color = styles.bar.noChangeColor
    }
    return [{ title: '', value: technicalIndicatorDataList[dataIndex] || 'n/a', color }]
  },
  render: ({
    ctx, dataSource, viewport, styles, xAxis, yAxis
  }) => {
    const { from, to, technicalIndicatorDataList, kLineDataList } = dataSource
    let maxVolume = Number.MIN_SAFE_INTEGER
    for (let i = from; i < to; i++) {
      const volume = technicalIndicatorDataList[i]
      maxVolume = Math.max(volume, maxVolume)
    }
    const { barSpace, height } = viewport
    const maxBarHeight = height / 4
    ctx.globalCompositeOperation = 'destination-over'
    for (let i = from; i < to; i++) {
      const kLineData = kLineDataList[i]
      const volume = technicalIndicatorDataList[i]
      let color
      if (kLineData.close > kLineData.open) {
        color = styles.bar.upColor
      } else if (kLineData.close < kLineData.open) {
        color = styles.bar.downColor
      } else {
        color = styles.bar.noChangeColor
      }
      const x = xAxis.convertToPixel(i)
      ctx.fillStyle = color
      const barStartY = height - (volume / maxVolume) * maxBarHeight
      ctx.fillRect(x - barSpace / 2, barStartY, barSpace, height - barStartY)
    }
  }
}

// add template
chart.addTechnicalIndicatorTemplate(candleVolume)

// create
chart.createTechnicalIndicator('candle_volume', false, { id: 'candle_pane' })

[Inblac]

wonderful！

[zetzetto]

Do you guys have the same solution for the new version (v9)? Because v9 has a different template system.

[liihuu]

With v9, you can do this,

// register indicator
klinecharts.registerIndicator({
  name: 'candle_volume',
  shortName: 'Volume',
  calc: (kLineDataList) => {
    return kLineDataList.map(kLineData => kLineData.volume)
  },
  createTooltipDataSource: ({
    kLineDataList, crosshair, indicator, defaultStyles
  }) => {
    const { dataIndex } = crosshair
    const result = indicator.result
    const styles = indicator.styles || defaultStyles
    let color
    const kLineData = kLineDataList[dataIndex]
    if (kLineData.close > kLineData.open) {
      color = styles.bars[0].upColor
    } else if (kLineData.close < kLineData.open) {
      color = styles.bars[0].downColor
    } else {
      color = styles.bars[0].noChangeColor
    }
    return {
      name: 'Volume',
      values: [{ title: '', value: { text: result[dataIndex] || 'n/a', color } }]
    }
  },
  draw: ({
    ctx, kLineDataList, bounding, visibleRange, barSpace, defaultStyles, indicator, xAxis, yAxis
  }) => {
    const { from, to } = visibleRange
    const result = indicator.result
    let maxVolume = Number.MIN_SAFE_INTEGER
    for (let i = from; i < to; i++) {
      const volume = result[i]
      maxVolume = Math.max(volume, maxVolume)
    }
    const height = bounding.height
    const maxBarHeight = height / 4
    ctx.globalCompositeOperation = 'destination-over'
    const styles = indicator.styles || defaultStyles
    for (let i = from; i < to; i++) {
      const kLineData = kLineDataList[i]
      const volume = result[i]
      let color
      if (kLineData.close > kLineData.open) {
        color = styles.bars[0].upColor
      } else if (kLineData.close < kLineData.open) {
        color = styles.bars[0].downColor
      } else {
        color = styles.bars[0].noChangeColor
      }
      const x = xAxis.convertToPixel(i)
      ctx.fillStyle = color
      const barStartY = height - (volume / maxVolume) * maxBarHeight
      ctx.fillRect(x - barSpace.halfGapBar, barStartY, barSpace.gapBar, height - barStartY)
    }
    return false
  }
})

// chart instance create
chart.createIndicator('candle_volume', false, { id: 'candle_pane' })

[apeman76]

Hello, I have tried this code but the xAxis does not seem to give the right value. Is there a fix?

[liihuu]

I tried and it seems to be right.

[apeman76]

Thank you, strange. The volume numbers on the right axis seem to be incorrect for me (standard 2 4 8 or something) but with

        kLineChart.createIndicator({ name: "VOL", calcParams: [], shortName: "" }, false, { gap: { bottom: 0 } });

it seems to work perfectly for some reason. Thank you!