Skip to main content

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 } from '@dx-private/dxchart5-modules/dist/volume-label/index';
import { ChartWithVolumeLabel } from '@dx-private/dxchart5-modules/dist/volume-label/volume-label.config';
import React, { useRef, useState } from 'react';
import { FlexContainer } from '../../../src/components/FlexContainer';
import { DemoChart } from '../../../src/components/DemoChart';
import { ChartBootstrap } from '../../../src/utils/chart.model';
import { setDataSeries } from '../Advanced/Data-Series/examples';
export const VolumeLabelComponent = () => {
    const [visible, setVisible] = useState(true);
    const localChart = useRef<ChartBootstrap & ChartWithVolumeLabel>();
    const onChartCreated = (chart: ChartBootstrap) => {
        attachVolumeLabel(chart);
        // eslint-disable-next-line no-restricted-syntax
        localChart.current = chart as ChartBootstrap & ChartWithVolumeLabel;
        localChart.current?.volumeLabel.setVisible(visible);
        setDataSeries(chart);
    };
    localChart.current?.volumeLabel.setVisible(visible);
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const visible = e.target.checked;
        setVisible(visible);
    };
    return (
        <>
            <div
                style={{
                    display: 'flex',
                    alignItems: 'start',
                    justifyContent: 'center',
                    flexDirection: 'column',
                }}>
                <label>
                    <input type="checkbox" checked={visible} onChange={handleChange} />
                    Enable volume label
                </label>
            </div>
            <FlexContainer>
                <DemoChart useInitialConfig={true} onChartCreated={onChartCreated} />
            </FlexContainer>
        </>
    );
}

You can also toggle its visibility at runtime:

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

Playground​