X-labels

Creating a custom XAxisLabelsProvider

What is a XAxisLabelsProvider?

The XAxisLabelsProvider interface defines how X-axis labels appear on the chart.

interface XAxisLabelsProvider {
    readonly getUnorderedLabels: () => XAxisLabel[];
}

interface XAxisLabel {
    text: string;
    x: number;
    color: string;
    alignType?: LabelAlign;
    subGroupId?: number;
}

Registering a custom label provider

The following example shows how to create a custom X-axis label provider and register it with the chart.

import React, { useCallback } from 'react';
import {
    XAxisLabel,
    XAxisLabelsProvider,
} from '@devexperts/dxcharts-lite/dist/chart/components/x_axis/x-axis-labels.model';
import { DemoChart } from '../../../../src/components/DemoChart';
import { ChartBootstrap } from '../../../../src/utils/chart.model';
export class SampleXAxisLabelsProvider implements XAxisLabelsProvider {
    public getUnorderedLabels(): XAxisLabel[] {
        const labels: XAxisLabel[] = [];
        // single label
        labels.push({
            text: '2001-01-01',
            x: 50,
            color: '#FF00FF',
        });
        // two labels in group
        labels.push(
            ...[
                {
                    text: '2011-01-01',
                    x: 250,
                    color: '#FF00FF',
                    alignType: 'start' as const,
                    subGroupId: 0,
                },
                {
                    text: '2021-01-01',
                    x: 350,
                    color: '#FF00FF',
                    alignType: 'end' as const,
                    subGroupId: 0,
                },
            ],
        );
        return labels;
    }
}
export const CreatingLabelsProvider = () => {
    const onChartCreated = useCallback((chart: ChartBootstrap) => {
        chart.xAxis.registerXAxisLabelsProvider(new SampleXAxisLabelsProvider());
    }, []);
    return <DemoChart onChartCreated={onChartCreated} />;
};

Rendered result: