Chart layout - different color to differentiate the after hours session

Tradovate Feature Requests
1

It would be helpful if I could display the chart background using a different color for the after hours session

2

It would be helpful if I could display the chart background using a different color for the after hours session
+1

3

It would be helpful if I could display the chart background using a different color for the after hours session
+2

Please add!

4

Agree this would be useful and seems like a trivial change to add.

5

Any news on this? seems like a simple change (since literally every other broker has it) I’m tired of opening ToS just to look at charts just because this simple features gives me such a big visual cue, I want to fully switch to tradovate!

6

Any update on this? This would be very useful.

7

Still waiting for this simple thing to be added

8

I conducted some research and utilized ChatGPT to develop this custom indicator. It shades the after-hours and pre-market in a light gray to help differentiate the regular hours for the NY session. You could definitely tweak this to fit your needs/colors.

Screenshot 2025-09-08 at 1.42.38 PM
Screenshot 2025-09-08 at 1.42.38 PM2128×808 53.6 KB

I used this video to implement it: https://youtu.be/dIAZc9V5oWk?si=mhSMYetGOFqx2kuG

const predef = require("./tools/predef");
const { px, du } = require("./tools/graphics");

class afterhoursBackground {
    init() {
        this.sessions = [
            {
                key: "after_hours",
                timezone: "America/New_York",   // Eastern Time
                start_time: 1600,  // 4:00 PM
                end_time: 930,     // 9:30 AM next day
                fillStyle: {
                    color: "lightgray", // light gray overlay
                    opacity: 15.0,      // tweak 10–20 for subtle shading
                }
            }
        ];
    }

    changeTimezone(date, ianatz) {
        let utcDate = date;
        let tzDate = new Date(date.toLocaleString("en-US", { timeZone: ianatz }));
        let offset = utcDate.getTime() - tzDate.getTime();
        let nd = new Date();
        nd.setTime(date.getTime() - offset);
        return nd;
    }

    map(d) {
        let items = [];

        for (const session of this.sessions) {
            let startDate = d.timestamp();
            let localDate = this.changeTimezone(startDate, session.timezone);

            let hr_min = localDate.getHours() * 100 + localDate.getMinutes();

            // Handle wrapping session (4:00 PM → 9:30 AM next day)
            if (hr_min >= session.start_time || hr_min < session.end_time) {
                items.push(this.makeRect(d, session));
            }
        }

        return { graphics: { items: items } };
    }

    makeRect(d, session) {
        return {
            tag: "Shapes",
            key: session.key,
            primitives: [
                {
                    tag: "Rectangle",
                    position: { x: du(d.index() - 0.5), y: px(0) },
                    size: { height: px(1000), width: du(1.0) },
                },
            ],
            fillStyle: session.fillStyle,
        };
    }
}

module.exports = {
    name: "afterhoursBackground",
    description: "Shades after-hours (outside 9:30 AM–4:00 PM ET) in light gray",
    inputType: "bars",
    calculator: afterhoursBackground,
    tags: ["My Indicators"],
    params: {},
};