stxx.chart.customChart = {
  colorFunction: (stx, data, mode) => {
    const bgcolor = document.querySelector('.chartContainer').style.backgroundColor.replace(/[^\d,]/g, '').split(',');

    const minOpacity = 0.75,
      maxOpacity = 1;

    const volumes = [];

    stx.chart.dataSegment.forEach(datum => {
      volumes.push(datum.Volume)
    })

    let [min, max] = volumes.reduce(([
      // find min and max of candleWidth, which is based on volume
      prevMin,
      prevMax
    ], curr) => [
      Math.min(prevMin, curr),
      Math.max(prevMax, curr)
    ], [
      Infinity, -Infinity
    ]);

    const opacity = ((data.Volume - min) / ((max - min) + (maxOpacity - minOpacity))) // rudimentary domain scale map


    return data.Open > data.Close ? rgba2rgb({
      r: bgcolor[0],
      g: bgcolor[1],
      b: bgcolor[2],
      a: 1
    }, {
      r: 255,
      g: 0,
      b: 0,
      a: opacity
    }) : rgba2rgb({
      r: bgcolor[0],
      g: bgcolor[1],
      b: bgcolor[2],
      a: 1
    }, {
      r: 0,
      g: 255,
      b: 0,
      a: opacity
    })
  }
}

function rgba2rgb(bg, RGBA) {
  const RGB = {}
  const alpha = RGBA.a;
  RGB.red = Math.round((RGBA.a * (RGBA.r / 255) + (alpha * (+bg.r / 255))) * 255);
  RGB.green = Math.round((RGBA.a * (RGBA.g / 255) + (alpha * (+bg.g / 255))) * 255);
  RGB.blue = Math.round((RGBA.a * (RGBA.b / 255) + (alpha * (+bg.b / 255))) * 255);

  return `rgb(${
    RGB.red
  },${
    RGB.green
  }, ${
    RGB.blue
  }`;
}

stxx.setMainSeriesRenderer();