Help with custom footprint issue

Hello, this is my first topic here so hopefully I am in the right category.

I have been working on modifying the community indicator ‘Better Delta Flow’ originally added by user Sethmo when I ran into an issue.

I am trying to add a volume profile for each bar on the opposite side of the delta profile. I was able to generate the profile graphic but I cannot figure out how to ‘flip’ the profile so that it originates on the right and points to the left.

From the AxesOrigin documentation, adding origin v: ‘right’ to the graphic declaration seems like it should be the answer but it is not working. I am at a loss with this one and really hoping someone here can help me figure this out.

Picture below, the volume profiles are in white:

And here is the source I currently have, AFAIK the only two relevant blocks of code are marked ‘Block 1’ and ‘Block 2’ in comments:

const predef = require("./tools/predef");
const SMA = require("./tools/SMA");
const { px, du, op, min, max } = require('./tools/graphics')

class barResDelta {
    init() {
        this.sma = SMA(this.props.period);
        
        this.LabelType = this.props.DeltaLabel
        
        this.rthOpen = +('' + this.props.marketOpenHours + (this.props.marketOpenMinutes < 10 ? '0' : '') + this.props.marketOpenMinutes)
        this.rthClose = +('' + this.props.marketCloseHours + (this.props.marketCloseMinutes < 10 ? '0' : '') + this.props.marketCloseMinutes)
    }

    map(d) {
        
        const mainContainer = {
            tag: 'Container',
            key: 'barsContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const barsContainer = {
            tag: 'Container',
            key: 'barsContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const textContainer = {
            tag: 'Container',
            key: 'textContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        //BLOCK 1
        const volBarsContainer = {
            tag: 'Container',
            key: 'volBarsContainer',
            // origin: {
            //     cs: 'frame',
            //     h: 'right',
            //     v: 'top',
            // },
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const candleContainer = {
            tag: 'Container',
            key: 'candleContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const vpocContainer = {
            tag: 'Container',
            key: 'vpocContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const unfinishedAuctions = {
            tag: 'Container',
            key: 'vpocContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        
        //Vpoc code:
        const profile = d.profile();
        const VPOC = profile.reduce((result, value) => {
            if (value.vol > result.vol) {
                result = value;
            }
            return result;
        }, { vol: 0 });
        
        
        
        //Delta Code:
        const profiles = d.profile()
        const combinedProfs = {}
        
        const modifiedSize = this.contractInfo.tickSize * this.props.priceLevelsPerBar
        let last, barInit
        
        profiles
            .sort((a, b) => a.price - b.price)
            .forEach(({price, vol, bidVol, askVol}) => {
                if(!barInit) barInit = price
                if(!last) last = price
                if(last && last >= barInit) {
                    barInit = price
                }
                if(last && last <= barInit) {
                    let item = combinedProfs[barInit.toFixed(7).toString()]
                    if(!item) (
                        item = { vol: 0, askVol: 0, bidVol: 0 },
                        item.price = barInit, 
                        combinedProfs[barInit.toFixed(7).toString()] = item
                    )
                    item.askVol += askVol
                    item.bidVol += bidVol
                    item.vol += vol
                }
                last = price
            }
        )
        
        const high = Object.values(combinedProfs).reduce((a, {price}) => Math.max(a, price), 0)
        const low = Object.values(combinedProfs).reduce((a, {price}) => Math.min(a, price), Infinity)
        const range = high - low
        const biggestDelta = Object.values(combinedProfs)
            .map(({bidVol, askVol}) => Math.abs(bidVol - askVol))
            .reduce((a, b) => Math.max(a, b), 0)
            
        
        const biggestVolume = Object.values(combinedProfs).reduce((a, {vol}) => Math.max(a, vol), 0)
        
        const nBars = range/(this.contractInfo.tickSize * this.props.priceLevelsPerBar)
        
        
        Object.values(combinedProfs).forEach(({vol, bidVol, askVol, price}) => {
            const delta = -(bidVol - askVol)
            const textLength = delta.toString().length
            
            const volTextLength = vol.toString().length
            
            //Scaled barWidth
            const barWidth = max(
                    px(2),
                    px(this.props.scaleFactorPx * Math.abs(delta/biggestDelta))
                )
                
            
            const volBarWidth = max(
                    px(2),
                    px(this.props.scaleFactorPx * (vol/biggestVolume))
                )
            
            const vpocbarWidth = barWidth + this.props.scaleFactorPx
            
            const fontSize = this.props.fontSize
            const fontColor = this.props.fontColor
            const xOffset = .13
            const xOffset2 = .05
            const txtOffset = 1.5
            
            //Location for Delta Bar Text
            const textPt = {
                x: op(
                    du(d.index()),
                    '+',
                    op(
                        px(fontSize),
                        '+',
                        px(15)
                    ),
                    '+',
                    du(xOffset)
                ),
                y: du(price+modifiedSize/2)
            }
            
            //BABEL: Add vol text later
            
            //Gets Delta Label setting
            let labelValue = 0
            switch(this.LabelType){
                case "all":
                    labelValue = 1
                    break;
                case "vol":
                    labelValue = 2
                    break;
            }
            
            
            //Gets current timestamp in HH:MM
            const timestamp = d.timestamp();
            const hour = timestamp.getHours();
            const minute = timestamp.getMinutes();
            const time = +('' + hour + (minute < 10 ? '0' : '') + minute)
        
            //Sets volThreshold depending on time of day
            const volThreshold = (time > this.rthOpen && time < this.rthClose) ? this.props.RthVolThreshold : this.props.GbxVolThreshold
        
            
            //Delta Bars Container
            barsContainer.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: {
                            x: this.props.EnableCandles ? op(du(d.index()), "+", du(xOffset)) : op(du(d.index()), "+", du(xOffset2)),
                            y: du(price + ((this.props.priceLevelsPerBar * this.contractInfo.tickSize)))
                        },
                        size: {
                            height: op(du(range/nBars), '-', px(1)),
                            width: barWidth
                        }
                    }
                ],
                fillStyle: {
                    
                    color: (delta > 0  && this.props.EnableNeutralDeltaColor==false) ? this.props.positiveDeltaColor : (delta < 0  && this.props.EnableNeutralDeltaColor==false) ? this.props.negativeDeltaColor : (delta > 0 && delta > volThreshold) ? this.props.positiveDeltaColor : delta < 0 && Math.abs(delta) > volThreshold ? this.props.negativeDeltaColor : this.props.neutralDeltaColor
                }
            })
            
            //Text for Delta Bars
            textContainer.children.push({
                tag: 'Text',
                key: `${d.index()}${price}`,
                text: labelValue == 1 ? `${delta}` : labelValue == 2 & Math.abs(delta) > volThreshold ? `${delta}` : undefined,
                point: textPt,
                style: { fontSize, fill: fontColor },
                textAlignment: 'centerMiddle'
            })
            
            //BLOCK 2
            volBarsContainer.children.push({
                tag:'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: {
                            x: this.props.EnableCandles ? op(du(d.index()), "-", du(.40)) : op(du(d.index()), "-", du(xOffset2)),
                            y: du(price + ((this.props.priceLevelsPerBar * this.contractInfo.tickSize)))
                        },
                        size: {
                            height: op(du(range/nBars), '-', px(1)),
                            width: volBarWidth 
                        }
                    }
                ],
                fillStyle: {
                    color: this.props.volumeColor
                }
            })
            
            
            //Candlesticks Container
            candleContainer.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: {
                            x: (price >= d.open() && price >= d.close()) ? du(d.index() + .05) : (price <= d.open() && price <= d.close()) ? du(d.index() + .05) : du(d.index()),
                            y: du(price + ((this.props.priceLevelsPerBar * this.contractInfo.tickSize)))
                        },
                        size: {
                            height: this.props.EnableCandles ? op(du(range/nBars), '+', px(0)) : px(0),
                            width: this.props.EnableCandles ? (price > d.open() && price < d.close()) ? px(6) : (price < d.open() && price > d.close()) ? px(6) : (price > d.open && price > d.close) ? px(1) : px(1) : px(0)
                        }
                    }
                ],
                fillStyle: {
                    color: (this.props.EnableCandles && price > d.open() && price < d.close()) ? this.props.positiveCandleColor : (this.props.EnableCandles && price < d.open() && price > d.close()) ? this.props.negativeCandleColor : this.neutralDeltaColor
                }
            })
           
            //VPOC Container
            vpocContainer.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: { 
                            x: op(du(d.index()), "-", px(3)),
                            y: du(VPOC.price )
                        },
                        size: {
                            height: this.props.EnableVPOCBar ? px(2) : px(0),
                            width: px(this.props.scaleFactorPx*1.7)
                        }
                    }
                ],
                fillStyle: {
                    color: this.props.VPOCBarColor
                }
            })
            
            //Unfinished Auctions Container
            unfinishedAuctions.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: { 
                            x: op(du(d.index()), "-", px(3)),
                            y: du(VPOC.price )
                        },
                        size: {
                            height: this.props.EnableVPOCBar ? px(2) : px(0),
                            width: px(this.props.scaleFactorPx*1.7)
                        }
                    }
                ],
                fillStyle: {
                    color: this.props.VPOCBarColor
                }
            })
            
            
        })
        
        
        return {
            graphics: {
                items: [
                    
                    barsContainer, 
                    textContainer,
                    volBarsContainer,
                    candleContainer,
                    vpocContainer,
                    
                ]
            }
        }
        
    }
}

module.exports = {
    inputType: 'bars',
    name: "BabelFP",
    description: "Babel FP",
    calculator: barResDelta,
    params: {
        SetRTHMarketHours: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        marketOpenHours: predef.paramSpecs.number(8,1,1),
        marketOpenMinutes: predef.paramSpecs.number(0,1,0),
        marketCloseHours: predef.paramSpecs.number(17,1,1),
        marketCloseMinutes: predef.paramSpecs.number(0,1,0),
        VolumeOptions: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        priceLevelsPerBar: predef.paramSpecs.number(16,1,1),
        scaleFactorPx: predef.paramSpecs.number(20, 5, 10),
        positiveDeltaColor: predef.paramSpecs.color('#1AABE4'),
        negativeDeltaColor: predef.paramSpecs.color('#FF004B'),
        neutralDeltaColor: predef.paramSpecs.color('#999999'),
        EnableNeutralDeltaColor: predef.paramSpecs.bool(true),
        DeltaLabel: predef.paramSpecs.enum({
            all: 'Enable All Labels',
            vol: 'Labels > Vol Threshold'
        }, 'vol'),
        RthVolThreshold: predef.paramSpecs.number(120,1,0),
        GbxVolThreshold: predef.paramSpecs.number(55,1,0),
        fontSize: predef.paramSpecs.number(10,1,0),
        fontColor: predef.paramSpecs.color('#FFFFFF'),
        volumeColor: predef.paramSpecs.color('#FFFFFF'),
        CandleOptions: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        EnableCandles: predef.paramSpecs.bool(true),
        positiveCandleColor: predef.paramSpecs.color('#1AABE4'),
        negativeCandleColor: predef.paramSpecs.color('#FF004B'),
        
        VPOCBarOptions: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        EnableVPOCBar: predef.paramSpecs.bool(true),
        VPOCBarColor: predef.paramSpecs.color('#F8E71C'),
    },
    schemeStyles: predef.styles.solidLine("#000"),
    requirements: {
        volumeProfiles: true
    }
};

Well it seems like this forum is pretty dead, I gave up on flipping the volume profiles after wasting too much time on it. Functionally it’s not an issue, I just think it looks ugly and was bothering me lol.

Since last post I added bid/ask text and eventually I will add some sort of color shading logic to the volume profile but that will take me awhile to figure out. Combined with the LDT - Stacked imbalances and Sethmo large delta bubbles I think it actually looks alright now.

Eventually when I decide im done with this I will probably try to upload to community indicators but for now here is the source if anyone wants it.

const predef = require("./tools/predef");
const SMA = require("./tools/SMA");
const { px, du, op, min, max } = require('./tools/graphics')

class barResDelta {
    init() {
        this.sma = SMA(this.props.period);
        
        this.LabelType = this.props.DeltaLabel
        
        this.rthOpen = +('' + this.props.marketOpenHours + (this.props.marketOpenMinutes < 10 ? '0' : '') + this.props.marketOpenMinutes)
        this.rthClose = +('' + this.props.marketCloseHours + (this.props.marketCloseMinutes < 10 ? '0' : '') + this.props.marketCloseMinutes)
        
        // this.upColors = ["rgb(0,65,0)", "rgb(0,94,0)", "rgb(0,123,0)", "rgb(0,151,0)", "rgb(0,180,0)"];
        // this.downColors = ["rgb(100,0,0)", "rgb(139,0,0)", "rgb(178,0,0)", "rgb(216,0,0)", "rgb(255,0,0)"];
    }

    map(d) {
        
        const barsContainer = {
            tag: 'Container',
            key: 'barsContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const textContainer = {
            tag: 'Container',
            key: 'textContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const askContainer = {
            tag: 'Container',
            key: 'askContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        //BLOCK 1
        const volBarsContainer = {
            tag: 'Container',
            key: 'volBarsContainer',
            // origin: {
            //     cs: 'grid',
            //     h: 'right',
            //     v: 'top',
            // },
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const candleContainer = {
            tag: 'Container',
            key: 'candleContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        const vpocContainer = {
            tag: 'Container',
            key: 'vpocContainer',
            children: [],
            conditions: {
                scaleRangeX: {
                    min: this.props.scaleFactorPx
                },
                scaleRangeY: {
                    min: this.contractInfo.tickSize
                }
            }
        }
        
        //Vpoc code:
        const profile = d.profile();
        const VPOC = profile.reduce((result, value) => {
            if (value.vol > result.vol) {
                result = value;
            }
            return result;
        }, { vol: 0 });
        
        
        
        //Delta Code:
        const profiles = d.profile()
        const combinedProfs = {}
        
        const modifiedSize = this.contractInfo.tickSize * this.props.priceLevelsPerBar
        let last, barInit
        
        profiles
            .sort((a, b) => a.price - b.price)
            .forEach(({price, vol, bidVol, askVol}) => {
                if(!barInit) barInit = price
                if(!last) last = price
                if(last && last >= barInit) {
                    barInit = price
                }
                if(last && last <= barInit) {
                    let item = combinedProfs[barInit.toFixed(7).toString()]
                    if(!item) (
                        item = { vol: 0, askVol: 0, bidVol: 0 },
                        item.price = barInit, 
                        combinedProfs[barInit.toFixed(7).toString()] = item
                    )
                    item.askVol += askVol
                    item.bidVol += bidVol
                    item.vol += vol
                }
                last = price
            }
        )
        //console.log(profiles)
        profiles.forEach((tick) => {
            console.log("ROW: " + tick.vol)
        })
        
        const high = Object.values(combinedProfs).reduce((a, {price}) => Math.max(a, price), 0)
        const low = Object.values(combinedProfs).reduce((a, {price}) => Math.min(a, price), Infinity)
        const range = high - low
        const biggestDelta = Object.values(combinedProfs)
            .map(({bidVol, askVol}) => Math.abs(bidVol - askVol))
            .reduce((a, b) => Math.max(a, b), 0)
            
        
        const biggestVolume = Object.values(combinedProfs).reduce((a, {vol}) => Math.max(a, vol), 0)
        
        const nBars = range/(this.contractInfo.tickSize * this.props.priceLevelsPerBar)
        
        
        Object.values(combinedProfs).forEach(({vol, bidVol, askVol, price}) => {
            const delta = -(bidVol - askVol)
            const textLength = delta.toString().length
            
            const volTextLength = vol.toString().length
            
            //Scaled barWidth
            const barWidth = max(
                    px(2),
                    px(this.props.scaleFactorPx * Math.abs(delta/biggestDelta))
                )
                
            
            const volBarWidth = max(
                    px(2),
                    px(this.props.scaleFactorPx * (vol/biggestVolume))
                    
                )
            
            const vpocbarWidth = barWidth + this.props.scaleFactorPx
            
            const fontSize = this.props.fontSize
            const fontColor = this.props.fontColor
            const xOffset = .13
            const xOffset2 = .05
            const txtOffset = 1.5
            
            //Location for Delta Bar Text
            const textPt = {
                x: op(
                    du(d.index()),
                    '+',
                    op(
                        px(fontSize),
                        '+',
                        px(15)
                    ),
                    '+',
                    du(xOffset)
                ),
                y: du(price+modifiedSize/2)
            }
            
            //Location for BID/ASK Bar Text
            const bidAskPt = {
                x: op(
                    du(d.index()),
                    '-',
                    op(
                        px(fontSize),
                        '+',
                        px(18)
                    ),
                    '-',
                    du(xOffset)
                ),
                y: du(price+modifiedSize/2)
            }
            
            //Gets Delta Label setting
            let labelValue = 0
            switch(this.LabelType){
                case "all":
                    labelValue = 1
                    break;
                case "vol":
                    labelValue = 2
                    break;
            }
            
            
            //Gets current timestamp in HH:MM
            const timestamp = d.timestamp();
            const hour = timestamp.getHours();
            const minute = timestamp.getMinutes();
            const time = +('' + hour + (minute < 10 ? '0' : '') + minute)
        
            //Sets volThreshold depending on time of day
            const volThreshold = (time > this.rthOpen && time < this.rthClose) ? this.props.RthVolThreshold : this.props.GbxVolThreshold
        
            
            //Delta Bars Container
            barsContainer.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: {
                            x: this.props.EnableCandles ? op(du(d.index()), "+", du(xOffset)) : op(du(d.index()), "+", du(xOffset2)),
                            y: du(price + ((this.props.priceLevelsPerBar * this.contractInfo.tickSize)))
                        },
                        size: {
                            height: op(du(range/nBars), '-', px(1)),
                            width: barWidth
                        }
                    }
                ],
                fillStyle: {
                    
                    color: (delta > 0  && this.props.EnableNeutralDeltaColor==false) ? this.props.positiveDeltaColor : (delta < 0  && this.props.EnableNeutralDeltaColor==false) ? this.props.negativeDeltaColor : (delta > 0 && delta > volThreshold) ? this.props.positiveDeltaColor : delta < 0 && Math.abs(delta) > volThreshold ? this.props.negativeDeltaColor : this.props.neutralDeltaColor
                }
            })
            
            //Text for Ask Container
            askContainer.children.push({
                tag: 'Text',
                key: `${d.index()}${price}`,
                text: `${bidVol}x${askVol}`,
                point: bidAskPt,
                style: { fontSize, fill: fontColor },
                textAlignment: 'centerMiddle'
            })
            
            //Text for Delta Bars
            textContainer.children.push({
                tag: 'Text',
                key: `${d.index()}${price}`,
                text: labelValue == 1 ? `${delta}` : labelValue == 2 & Math.abs(delta) > volThreshold ? `${delta}` : undefined,
                point: textPt,
                style: { fontSize, fill: fontColor },
                textAlignment: 'centerMiddle'
            })
            
            //BLOCK 2
            volBarsContainer.children.push({
                tag:'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: {
                            x: this.props.EnableCandles ? op(du(d.index()), "-", du(.40)) : op(du(d.index()), "-", du(xOffset2)),
                            y: du(price + ((this.props.priceLevelsPerBar * this.contractInfo.tickSize)))
                        },
                        size: {
                            height: op(du(range/nBars), '-', px(1)),
                            width: volBarWidth 
                        }
                    }
                ],
                fillStyle: {
                    // color: this.props.volumeColor
                    color: '#999999'
                }
            })
            
            
            //Candlesticks Container
            candleContainer.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: {
                            //x: (price >= d.open() && price >= d.close()) ? du(d.index() + .05) : (price < d.open() && price < d.close()) ? du(d.index() + .05) : du(d.index()),
                            x: (price >= d.open() && price >= d.close()) ? du(d.index() + .021) : (price < d.open() && price < d.close()) ? du(d.index() + .021) : du(d.index()),
                            y: du(price + ((this.props.priceLevelsPerBar * this.contractInfo.tickSize)))
                        },
                        size: {
                            height: this.props.EnableCandles ? op(du(range/nBars), '+', px(0)) : px(0),
                            width: this.props.EnableCandles ? (price >= d.open() && price < d.close()) ? px(6) : (price < d.open() && price >= d.close()) ? px(6) : (price > d.open && price > d.close) ? px(1) : px(1) : px(0)
                        }
                    }
                ],
                fillStyle: {
                    color: (this.props.EnableCandles && price >= d.open() && price < d.close()) ? this.props.positiveCandleColor : (this.props.EnableCandles && price < d.open() && price >= d.close()) ? this.props.negativeCandleColor : this.neutralDeltaColor
                }
            })
           
            //VPOC Container
            vpocContainer.children.push({
                tag: 'Shapes',
                key: `bar${d.index()}${price}`,
                primitives: [
                    {
                        tag: 'Rectangle',
                        position: { 
                            x: op(du(d.index()), "-", px(3)),
                            y: du(VPOC.price )
                        },
                        size: {
                            height: this.props.EnableVPOCBar ? px(2) : px(0),
                            width: px(this.props.scaleFactorPx*1.7)
                        }
                    }
                ],
                fillStyle: {
                    color: this.props.VPOCBarColor
                }
            })
        })
        
        return {
            graphics: {
                items: [
                    
                    barsContainer, 
                    textContainer,
                    askContainer,
                    volBarsContainer,
                    candleContainer,
                    vpocContainer,
                    
                ]
            }
        }
        
    }
}

module.exports = {
    inputType: 'bars',
    name: "BabelFP",
    description: "Babel FP",
    calculator: barResDelta,
    params: {
        SetRTHMarketHours: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        marketOpenHours: predef.paramSpecs.number(8,1,1),
        marketOpenMinutes: predef.paramSpecs.number(0,1,0),
        marketCloseHours: predef.paramSpecs.number(17,1,1),
        marketCloseMinutes: predef.paramSpecs.number(0,1,0),
        VolumeOptions: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        priceLevelsPerBar: predef.paramSpecs.number(16,1,1),
        scaleFactorPx: predef.paramSpecs.number(20, 5, 10),
        positiveDeltaColor: predef.paramSpecs.color('#1AABE4'),
        negativeDeltaColor: predef.paramSpecs.color('#FF004B'),
        neutralDeltaColor: predef.paramSpecs.color('#999999'),
        EnableNeutralDeltaColor: predef.paramSpecs.bool(true),
        DeltaLabel: predef.paramSpecs.enum({
            all: 'Enable All Labels',
            vol: 'Labels > Vol Threshold'
        }, 'vol'),
        RthVolThreshold: predef.paramSpecs.number(120,1,0),
        GbxVolThreshold: predef.paramSpecs.number(55,1,0),
        fontSize: predef.paramSpecs.number(10,1,0),
        fontColor: predef.paramSpecs.color('#FFFFFF'),
        volumeColor: predef.paramSpecs.color('#FF004B'),
        CandleOptions: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        EnableCandles: predef.paramSpecs.bool(true),
        positiveCandleColor: predef.paramSpecs.color('#1AABE4'),
        negativeCandleColor: predef.paramSpecs.color('#FF004B'),
        
        VPOCBarOptions: predef.paramSpecs.enum({
            spacer: '------------------------------------------------------------------------------------------------------------------------------------------------------'
        }, 'spacer'),
        EnableVPOCBar: predef.paramSpecs.bool(true),
        VPOCBarColor: predef.paramSpecs.color('#F8E71C'),
    },
    schemeStyles: predef.styles.solidLine("#000"),
    requirements: {
        volumeProfiles: true
    }
};

Solidarity broh,
I’ve been making indicators for this platform for probably a couple months, and there is ZERO help on here. Just gotta figure it out yourself. Definitely try using AI to help, that’s how I have gotten anything done. But it seems like you were on the right track with AxesOrigin. You could try messing with the rectangle position and size as well. This is probably one of those things where you will find the solution later after you take a break from it.

1 Like

AxesOrigin should be the answer. it is used in other indicators like Price Axis Volume Delta to flip the profile, but for some reason it seems to work on a global graphic and not on a bar graphic.

Either way I’ve given up on the issue, its not worth the time/effort for something that is def not gonna help me trade any better lol.

Thanks for the reply though and GL on your projects