Back

Technologies:

javascriptjavascript
avatar
Tolerim
15 days ago

What is the process to alter the shape and position of markers in the TradingView charting library?

Initially, I created a marker, but now I need to modify its position and shape. Could you please assist me in resolving this issue? Here is the code:

getMarks: (symbolInfo,startDate,endDate,onDataCallback,resolution) => {
    var arr = [
        {
            id: 1,
            time:  1683185400000 / 1000,
            color: 'yellow',
            text: ['hello'],
            label: 'how',
            labelFontColor: 'black',
            minSize: 20,
            shape: 'rectangle',
            // Added shape to the object
            coordinate: {
                xpos: 0,
                ypos: 40
            }
            // Added coordinate to the object
        },
        {
            id: 2,
            time:  1681975800000 / 1000,
            color: 'red',
            text: '400',
            label: 'c',
            labelFontColor: 'green',
            minSize: 20,
            shape: 'circle',
            coordinate: {
                xpos: 66,
                ypos: 59
            }
        },
        {
            id: 3,
            time:  1681111800000 / 1000,
            color: 'yellow',
            text: '500',
            label: 'd',
            labelFontColor: 'white',
            minSize: 20,
            shape: 'arrow',
            coordinate: {
                xpos: 35,
                ypos: 20
            }
        },
    ]
   
    onDataCallback(arr);


},
Previously, my markers were displayed like this:

enter image description here

However, now I want them to look like this:

enter image description here

Answers(1)
avatar
Tolerim
15 days ago
Verified Answer
To change the shape and position of the markers in the given code, we need to make some modifications to the arr array objects. Specifically, we can use the shape property to change the marker shape and the offsetY and offsetX properties to change its position. Here's an updated arr array that should produce the desired marker shapes and positions: 
var arr = [
    {
        id: 1,
        time:  1683185400000 / 1000,
        color: 'yellow',
        text: ['hello'],
        label: 'how',
        labelFontColor: 'black',
        minSize: 20,
        shape: 'square',
        offsetY: -20,
        offsetX: -10
    },
    {
        id: 2,
        time:  1681975800000 / 1000,
        color: 'red',
        text: '400',
        label: 'c',
        labelFontColor: 'green',
        minSize: 20,
        shape: 'circle',
        offsetY: 10,
        offsetX: -10
    },
    {
        id: 3,
        time:  1681111800000 / 1000,
        color: 'yellow',
        text: '500',
        label: 'd',
        labelFontColor: 'white',
        minSize: 20,
        shape: 'square',
        offsetY: -20,
        offsetX: 10
    },
];
In this updated version, we've added the shape property to each marker object with the value of 'square' or 'circle' (depending on the desired shape). We've also added offsetY and offsetX properties to adjust the marker position. Note that this code is specific to the library that's being used to create the markers, so the exact implementation may vary depending on the library being used.
;