Session breaks

The session breaks component displays vertical zones to highlight session transitions—such as pre-market and after-hours periods—on the chart.

Session breaks are hidden by default. To enable them, set the visibility to true:

export const changeHighlightsTovisible = (config: FullChartConfig) => {
    return (config.components.highlights.visible = true);
}

---

Zone configuration

To draw session breaks, define a highlight zones model and pass it to the HighlightsComponent.

Each zone requires:

• type: A string identifier (e.g., "PRE_MARKET" or "AFTER_MARKET")
• from: Starting timestamp (aligned to the nearest candle)
• to: Ending timestamp

export const setHighlights = (chart: ChartBootstrap) => {
    const highlights: Highlight[] = [
        {
            type: 'PRE_MARKET',
            from: Date.now() - 1800000,
            to: Date.now() - 600000,
        },
        {
            type: 'AFTER_MARKET',
            from: Date.now() - 1800000,
            to: Date.now() - 600000,
        },
    ];
    chart.highlights.setHighlights(highlights);
}

Labels and borders

You can customize each zone's appearance with labels and borders:

• label.text: The text shown at the top of the zone
• label.placement: Alignement of the label
• border.left: Set to true to show the left border
• border.right: Set to true to show the right border

export const setHighlightsWithLabel = (chart: ChartBootstrap) => {
    const highlights: Highlight[] = [
        {
            type: 'AFTER_MARKET',
            from: Date.now() - 1800000,
            to: Date.now() - 600000,
            label: {
                text: 'AM',
                placement: 'left-right',
            },
        },
    ];
    chart.highlights.setHighlights(highlights);
}

Custom types and styles

You can create custom zone types and define their color styles in config.colors.

For example, to display a yellow "PRE_MARKET" zone and a purple "AFTER_MARKET" line:

export const colorConfig = {
    colors: {
        highlights: {
            PRE_MARKET: {
                border: '#e9efc5',
                background: 'rgba(255,219,153,0.35)',
                label: 'rgba(255, 0, 0)',
            },
            AFTER_MARKET: {
                border: '#800080',
                background: 'rgba(255,219,153,0.35)',
                label: 'rgba(255, 0, 0)',
            },
        },
    },
}

Once configured, use those types in your highlights model:

export const setHighlightsWithBorder = (chart: ChartBootstrap) => {
    const highlights: Highlight[] = [
        {
            type: 'PRE_MARKET',
            from: Date.now() - 1800000,
            to: Date.now() - 600000,
            label: {
                text: 'Market Closed',
                placement: 'right-left',
            },
        },
        {
            type: 'AFTER_MARKET',
            from: Date.now() - 1800000,
            to: Date.now() - 600000,
            label: {
                text: 'E',
                placement: 'right-right',
            },
            border: {
                left: true,
            },
        },
    ];
    chart.highlights.setHighlights(highlights);
}