Text on charts

Need ability to anchor text to lines, drawings, etc.

You should be able to do that using the custom indicators’ Graphics module:

https://tradovate.github.io/custom-indicators/pages/Tutorial/Graphics.html

You can anchor Text graphics objects fairly easily, that tutorial includes how to do exactly that.

I’m not trying to make a custom indicator. And the link you sent me is just hieroglyphics to me. When I draw a horizontal line… how do I attach text to that line? Should be simple, no?

Oh my apologies, I misunderstood your question. In the Drawing Tools menu, Text is one of the options that you can select. You can draw a vertical line and then put a Text drawing above it. They won’t be logically ‘grouped’, but you can easily label a line that way.

Thanks, yes I see what you’re talking about. I can put text near a line… but when I move the line the text doesn’t move with it. I’m saying a function where when I create a line, shape or whatever, there should be an option to attach text to that line, etc…

4 Likes

Found one by Sethmo. It is a Horizontal Drawing with Text Indicator. It will show up under drawings once you install. It is programmed where the text is white and the script is read only. My background is White, so I changed the color code to black, since you can’t change the text color the easy way. So you have to copy and paste the script into a new indicator you want to create, then just change a few things around. I haven’t figured out a way to type text as you go, but if you do please share. So far you can preset the words to be selected in the code, which is very easy because the template is laid out. Here is the code I have so far, edited from the original Sethmo created. For some reason the Text won’t show up if you don’t have Ray selected. Would be nice if that is fixed and will show up regardless.

const predef = require(‘./tools/predef’);
const { px, du, op, min, max } = require(“./tools/graphics”);

const hozLineTool = {

init() {
    this.IndexR = 0
    
    return {
        mode: 'none'
    }
},




render({props, anchors, state, index}) {
    
    const rand = Math.floor(Math.random() * 2000);
    
    
    
    return {
        items: [
            {
                tag: 'LineSegments',
                key: 'line',
                lines: [
                    {
                        tag: 'Line',
                        a: anchors[0],
                        b: anchors[1],
                        infiniteStart: props.IsLine,
                        infiniteEnd: props.IsRay
                    }
                ],
                lineStyle: {
                    lineWidth: props.LineThickness,
                    lineStyle: props.LineStyle,
                    color: props.LineColor
                }
            },
            {   
                    tag: 'Text',
                    key: 'HLineText: ' + rand,
                    point: {
                        //x: anchors[1] ? du(5) : du(0),
                        //x: anchors[1] && props.IsRay ? op(du(this.IndexR+1)) : anchors[1] ? du(anchors[1].x.value) : du(0),
                        x: anchors[1] && props.IsRay && props.TextAlign == "Right" ? du(anchors[1].x.value) : anchors[1] && props.IsRay && props.TextAlign == "Left" ? du(anchors[0].x.value) : du(0),
                        y: anchors[1] ? (du(anchors[1].y.value+2)) : du(0)
                    },
                    text: props.LineText != "None" ? props.LineText : " ",
                    //text: props.LineText != "None" ? props.LineText : " ",
                    style: { fontSize: 14, fontWeight: "bold", fill: "#000000" },
                    textAlignment: 'rightMiddle',
                    global: true,
           
            }
        ]
    }
},

anchorRestraints() {
    return [
        {/*zeroth position anchor*/x: 10 },
        {/*first position anchor*/y: 0 }
    ]
},

anchorStyles() {
    return [
        {/*zeroth position anchor*/color: '#36454F' },
        {/*first position anchor*/color: '#36454F' },
    ]
}

}

module.exports = {
name: “Horizontal Line with Text”,
drawing: hozLineTool,
description: “+ Horizontal Line w/Text/Correct”,
params: {
IsRay: predef.paramSpecs.bool(true),
IsLine: predef.paramSpecs.bool(false),
LineThickness: predef.paramSpecs.number(1,1,1),
LineStyle: predef.paramSpecs.number(1,1,1),
LineColor: predef.paramSpecs.color(‘#000000’),
TextAlign: predef.paramSpecs.enum({
Left: ‘Left Anchor’,
Right: ‘Right Anchor’
}, ‘Right’),
LineText: predef.paramSpecs.enum({
None: ‘None’,
Settlement: ‘Settlement’,
TopofSinglePrints: ‘Top of Single Prints’,
BottomofSinglePrints: ‘Bottom of Single Prints’,
VPOC: ‘VPOC’,
Halfback: ‘Halfback’,
SwingHigh: ‘Swing High’,
SwingLow: ‘Swing Low’,
BaseofBuyingTail: ‘Base of Buying Tail’,
BaseofSellingTail: ‘Base of Selling Tail’,
PoorHigh: ‘Poor High’,
PoorLow: ‘Poor Low’,
Hourly: ‘Hourly’,
ValueAreaHigh: ‘VAH’,
ValueAreaLow: ‘VAL’,
OvernightLow: ‘ONL’,
OvernightHigh: ‘ONH’,
RTHLow: ‘RTH Low’,
RTHHigh: ‘RTH High’,
PrevDayPOC: ‘Prev Day POC’,
PrevWeekPOC: ‘Prev Week POC’,
SwingPOC: ‘Swing POC’,
PrevWeeklyLow: ‘Prev Weekly Low’,
PrevWeeklyHigh: ‘Prev Weekly High’,
WeeklyLow: ‘Weekly Low’,
WeeklyHigh: ‘Weekly High’,
MonthlyLow: ‘Monthly Low’,
MonthlyHigh: ‘Monthly High’,
GapUp: “Gap Up”,
GapDown: “Gap Down”,
BearPivot: ‘Bear Pivot’,
BullPivot: ‘Bull Pivot’
}, ‘None’)
},
minN: 2,
maxN: 2
}

https://tradovate.github.io/custom-indicators/pages/Tutorial/Graphics.html

Is there any way to get this completed code so I can copy and paste into my editor to help me learn?
The way the tutorial is laid out, it’s confusing to me where/how the logic fits in.