Skip to main content

CrossTool

The CrossTool adds a crosshair and axis labels to the chart for improved readability and interaction.

It consists of:

  • Crosshair: vertical and horizontal lines that follow the mouse
  • X/Y labels: axis projections aligned with the crosshair

Discrete mode (snap X to candle center)​

When discrete: true on components.crossTool, the vertical crosshair snaps to the center of the nearest candle as you move horizontally. This is the default.

initialChartConfig: {
  components: {
    crossTool: {
      type: 'cross-and-labels',
      discrete: true, // snap X to candle center
    },
  },
},

Set discrete: false for free-floating horizontal crosshair movement between candles.

Visibility and magnet mode​

Use the methods below to control visibility and Y-axis OHLC snapping (magnetTarget):

X label format​

To set a fixed format for the X-axis label, use the following configuration:

import { getDefaultConfig } from '@devexperts/dxcharts-lite/dist/chart/chart.config';
const config = getDefaultConfig();
config.components.crossTool.xAxisLabelFormat = [{ format: 'dd.MM HH:mm' }];

To apply different formats based on time period—e.g., HH:mm for intraday and dd.MM for longer periods—use this extended configuration:

export default {
    xAxisLabelFormat: [
        {
            format: 'dd.MM',
            showWhen: {
                periodMoreThen: 24 * 60 * 60 * 1000,
            },
        },
        {
            format: 'HH:mm',
            showWhen: {
                periodLessThen: 24 * 60 * 60 * 1000,
                periodMoreThen: 6 * 1000,
            },
        },
        {
            format: 'HH:mm:ss',
            showWhen: {
                periodLessThen: 6 * 1000,
            },
        },
    ],
};

This approach also supports formats like HH:mm:ss for short intervals (e.g., 5 seconds).

Full CrossTool configuration example​

export const fullCrossToolConfig: ChartConfigComponentsCrossTool = {
    type: 'cross-and-labels',
    discrete: false,
    magnetTarget: 'none',
    lineDash: [4, 6],
    xAxisLabelFormat: [
        {
            format: 'dd.MM.YYYY',
            showWhen: {
                periodMoreThen: 24 * 60 * 60 * 1000,
            },
        },
        {
            format: 'dd.MM.YYYY HH:mm',
            showWhen: {
                periodLessThen: 24 * 60 * 60 * 1000,
                periodMoreThen: 6 * 1000,
            },
        },
        {
            format: 'dd.MM.YYYY HH:mm:ss',
            showWhen: {
                periodLessThen: 6 * 1000,
            },
        },
    ],
    xLabel: {
        padding: {
            top: 4,
            bottom: 4,
            right: 8,
            left: 8,
        },
        margin: {
            top: 4,
        },
    },
    yLabel: {
        padding: {
            top: 4,
            bottom: 4,
            end: 4,
            start: 4,
        },
        type: 'badge',
    },
}

Chart with CrossTool enabled​