SciChart.js JavaScript 2D Charts API > Axis APIs > Axis Label Formatting - TextLabelProvider
Axis Label Formatting - TextLabelProvider

If you have you want to use names instead of numbers for the axis labels, TextLabelProvider can help you. The simplest case is if you have a category axis and you want to use an array of text labels. In this case, the x values in your data will be ignored.

Simple Text Labels Example
Copy Code
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { XyDataSeries } from 'scichart/Charting/Model/XyDataSeries';
import { CategoryAxis } from "scichart/Charting/Visuals/Axis/CategoryAxis";
import { TextLabelProvider } from "scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider";
import { ELabelAlignment } from "scichart/Charting/Visuals/Axis/ELabelAlignment";
const xAxis = new CategoryAxis(wasmContext);
const labelProvider = new TextLabelProvider({
    // When passed as an array, labels will be used in order
    labels: [
        "Bananas",
        "Apples",
        "Oranges",
        "Strawberries",
        "Plums"
    ]
});
xAxis.labelProvider = labelProvider;
xAxis.labelStyle.alignment = ELabelAlignment.Center;
sciChartSurface.xAxes.add(xAxis);
const dataSeries = new XyDataSeries(wasmContext);
// X data is ignored
dataSeries.appendRange([5, 4, 3, 2, 1], [100, 40, 60, 30, 80]);
const columnSeries = new FastColumnRenderableSeries(wasmContext, { dataSeries, dataPointWidth: 0.5, fill:"#5555ff" });
sciChartSurface.renderableSeries.add(columnSeries);

This produces the following labels.

If you want to control the order of labels with data, pass the labels as an object, using numbers as fields:

Data Driven Text Labels Example
Copy Code
const labelProvider = new TextLabelProvider({
        // When passed as an object, x values will be mapped to fields
        labels: {
            1: "Bananas",
            2: "Apples",
            3: "Oranges",
            4: "Strawberries",
            5: "Plums"
        }
    });
...
// Same data as before
const dataSeries = new XyDataSeries(wasmContext);
dataSeries.appendRange([5, 4, 3, 2, 1], [100, 40, 60, 30, 80]);

Now the labels are in the order determined by the data:

MultiLine Text Labels

TextLabelProvider has a maxLength option which if greater than 0 will do basic word-wrap to that number of characters. The text will only be split at spaces. Words will not be split.

You can ensure the lines appear exactly as you want by passing them as an array. Note that this can be used in conjunction with word wrap using maxLength. A label given as text will be split according to the maxLength, but one passed as an array will be displayed exactly as given, as shown in the following example:

MultiLine Text Labels Example
Copy Code
const xAxis = new CategoryAxis(wasmContext);
const labelProvider = new TextLabelProvider({
    labels: [
        // Provide multiple lines directly
        ["Apples","and Bananas"],
        ["Strawberries","and Raspberries"],
        ["Lemons, Limes", "and Oranges"],
        // These will be auto-wrapped
        "Apples and Bananas",
        "Strawberries and Raspberries",
        "Lemons Limes and Oranges",
    ],
    maxLength: 10
});
xAxis.labelProvider = labelProvider;
xAxis.labelStyle.alignment = ELabelAlignment.Center;
sciChartSurface.xAxes.add(xAxis);
const dataSeries = new XyDataSeries(wasmContext);
dataSeries.appendRange([1,2,3], [100, 40, 60]);

Note the difference between the way the first three labels are wrapped, compared to the second three.

You can provide an alternative wrapping function by overriding the wrapText method which takes the label text and returns an array of lines.

When using multiline, the lineSpacing option controls the line spacing. It is expressed as a fraction of the normal line height and defaults to 1.1, ie 10% spacing between lines.

See Also