Y-axis

The Y-axis is generated automatically based on the chart's candle data.

DXcharts supports different types of price labels on the Y-axis (such as high/low), which you can configure by visibility, type, and appearance.

API reference

Main features of the Y-axis component:

• Toggle axis visibility
• Control visibility of different price label types
• Register custom price label providers

For full details, see Y-axis component API

Price labels

DXcharts can display various price labels on the Y-axis, depending on your configuration.

These are managed via the YAxisComponent, which is accessible through the chart.

Example

const config: PartialChartConfig = {
    ...DEFAULT_CHART_CONFIG,
    fixedSize: {
        height: 400,
        width: 600,
    },
    components: {
        yAxis: {
            labels: {
                descriptions: true,
                settings: {
                    lastPrice: {
                        mode: 'label',
                    },
                    prevDayClose: {
                        mode: 'label',
                    },
                },
            },
        },
    },
}

Price label modes

DXchart offers several label modes. If you choose label or line-label, you can also define the label's appearance using the type property.

Label descriptions can be shown by setting their initial state in the configuration.

export type YAxisLabelMode = 'none' | 'line' | 'line-label' | 'label';

export type YAxisLabelAppearanceType = 'badge' | 'rectangle' | 'plain';

You can set initial mode and descriptions for each label type in the chartConfig:

export const config: PartialChartConfig = {
    components: {
        yAxis: {
            labels: {
                descriptions: false,
                settings: {
                    lastPrice: {
                        mode: 'label',
                        type: 'rectangle',
                    },
                },
            },
        },
    },
}

You can also change the mode at runtime via the API:

import React, { useRef, useState } from 'react';
import { PartialChartConfig, YAxisLabelMode } from '@devexperts/dxcharts-lite/dist/chart/chart.config';
import { DEFAULT_CHART_CONFIG } from '@dx-private/dxchart5-react/dist/config/chart-config';
import { DemoChart } from '../../../src/components/DemoChart';
import { FlexContainer } from '../../../src/components/FlexContainer';
import { ChartBootstrap } from '../../../src/utils/chart.model';
const demoChartConfig: PartialChartConfig = {
    ...DEFAULT_CHART_CONFIG,
    fixedSize: {
        height: 400,
        width: 600,
    },
    components: {
        yAxis: {
            labels: {
                descriptions: false,
                settings: {
                    lastPrice: {
                        mode: 'none',
                        type: 'badge',
                    },
                },
            },
        },
    },
}

export const changeYAxisState = (chart: ChartBootstrap) => {
    // usage
    chart.yAxis.changeLabelMode('lastPrice', 'line-label');
    chart.yAxis.changeLabelsDescriptionVisibility(true);
}

Playground

Price label types

Each price label type supports custom appearance settings.

export const config: PartialChartConfig = {
    components: {
        yAxis: {
            typeConfig: {
                badge: {
                    rounded: true,
                    paddings: {
                        top: 4,
                        bottom: 4,
                        start: 6,
                        end: 6,
                    },
                },
                plain: {},
                rectangle: {
                    rounded: false,
                    paddings: {
                        top: 4,
                        bottom: 4,
                        start: 6,
                        end: 6,
                    },
                },
            },
            labels: {
                descriptions: false,
                settings: {
                    lastPrice: {
                        mode: 'label',
                        type: 'rectangle',
                    },
                },
            },
        },
    },
}

Available label types:

1. Badge: Rectangle with a triangle tail
2. Rectangle: Basic rectangular shape
3. Plain: Text only, no shape

You can also apply rounded corners to badge and rectangle types.

Playground

Price label visibility

Each label type can be toggled on or off individually.

export type YAxisLabelType = string;

Set the initial visible state for each label type via chartConfig:

export const config: PartialChartConfig = {
    components: {
        yAxis: {
            labels: {
                descriptions: true,
                settings: {
                    lastPrice: {
                        mode: 'label',
                    },
                },
            },
        },
    },
};

Toggle visibility at runtime with:

import { PartialChartConfig, YAxisLabelType } from '@devexperts/dxcharts-lite/dist/chart/chart.config';
import { DEFAULT_CHART_CONFIG } from '@dx-private/dxchart5-react/dist/config/chart-config';
import React, { useRef, useState } from 'react';
import { DemoChart } from '../../../src/components/DemoChart';
import { FlexContainer } from '../../../src/components/FlexContainer';
import { ChartBootstrap } from '../../../src/utils/chart.model';
export const PriceLabelsVisibility = () => {
    const [types, changeTypes] = useState<Record<Exclude<YAxisLabelType, 'studies'>, boolean>>({
        lastPrice: true,
        countdownToBarClose: false,
        drawings: false,
    });
    const labelMode = (enabled: boolean) => (enabled ? 'line' : 'none');
    const demoChartConfig: PartialChartConfig = {
        ...DEFAULT_CHART_CONFIG,
        fixedSize: {
            height: 340,
            width: 490,
        },
        components: {
            yAxis: {
                labels: {
                    descriptions: true,
                    settings: {
                        lastPrice: {
                            // TODO fix TS error
                            // @ts-ignore
                            mode: labelMode(types.lastPrice),
                        },
                    },
                },
            },
        },
    };
    const localchart = useRef<ChartBootstrap>();
    const onChartCreated = (chart: ChartBootstrap) => {
        localchart.current = chart;
    };
    const handleChange = (e: any) => {
        const type = e.target.value;
        changeTypes(types => ({
            ...types,
            [type]: !types[type],
        }));
    };
    return (
        <>
            <div
                style={{
                    display: 'flex',
                    alignItems: 'start',
                    justifyContent: 'center',
                    flexDirection: 'column',
                }}>
                <label>
                    <input type="checkbox" value="lastPrice" checked={types.lastPrice} onChange={handleChange} />
                    Last Price
                </label>
            </div>
            <FlexContainer>
                <DemoChart config={demoChartConfig} onChartCreated={onChartCreated} />
            </FlexContainer>
        </>
    );
}

export const changeLabelVisibility = (chart: ChartBootstrap) => {
    chart.yAxis.changeLabelMode('lastPrice', 'label');
}

Playground

Volume label

To show the volume label on the Y-axis, first turn on volume display and provide the required settings in your configuration.

import { attachVolumeLabel } f

You can also toggle its visibility at runtime:

export const changeVolumeLabelVisibility = (chart: ChartWithVolumeLabel, visible: boolean) => {
    chart.volumeLabel.setVisible(visible);
}

Playground