Wrapping labels on a column axis (scichart.js)

Hi Tim,

Wrapping labels is not possible right now. But we have plans to allow rotating labels in version 2.0. You can find the link to the task here.
In the meantime you can:

1. Use vertical chart and have title for the columns on the left instead of having them at the bottom.
2. Use annotation to display any text you need.

Here is the code sample and the image:

import {MouseWheelZoomModifier} from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import {RolloverModifier} from "scichart/Charting/ChartModifiers/RolloverModifier";
import {ZoomExtentsModifier} from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import {ZoomPanModifier} from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import {XyDataSeries} from "scichart/Charting/Model/XyDataSeries";
import {ECoordinateMode} from "scichart/Charting/Visuals/Annotations/AnnotationBase";
import {TextAnnotation} from "scichart/Charting/Visuals/Annotations/TextAnnotation";
import {NumericAxis} from "scichart/Charting/Visuals/Axis/NumericAxis";
import {FastColumnRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/FastColumnRenderableSeries";
import {SciChartSurface} from "scichart/Charting/Visuals/SciChartSurface";
import {EHorizontalAnchorPoint, EVerticalAnchorPoint} from "scichart/types/AnchorPoint";
import {EAxisAlignment} from "scichart/types/AxisAlignment";

const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext);
xAxis.labelProvider.formatLabel = dataValue => `label text ${dataValue.toString(10)}`;
xAxis.axisAlignment = EAxisAlignment.Left;
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
yAxis.axisAlignment = EAxisAlignment.Top;
yAxis.flippedCoordinates = true;
sciChartSurface.yAxes.add(yAxis);

const columnSeries = new FastColumnRenderableSeries(wasmContext, {
    fill: "rgba(176, 196, 222, 1)",
    stroke: "#4682b4",
    strokeThickness: 2,
    dataPointWidth: 0.5,
    opacity: 0.7
});
sciChartSurface.renderableSeries.add(columnSeries);

const dataSeries = new XyDataSeries(wasmContext);
for (let i = 0; i < 10; i++) {
    const x = i;
    const y = Math.sin(i * 0.1);
    dataSeries.append(x,y);
    const text = `Annotation ${i}`;
    const annotation = new TextAnnotation({
        xCoordShift: 6,
        x1: x,
        y1: y,
        xCoordinateMode: ECoordinateMode.DataValue,
        yCoordinateMode: ECoordinateMode.DataValue,
        horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
        verticalAnchorPoint: EVerticalAnchorPoint.Center,
        textColor: "yellow",
        fontSize: 16,
        fontFamily: "Times New Roman",
        text
    });
    sciChartSurface.annotations.add(annotation);
}
columnSeries.dataSeries = dataSeries;

sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new RolloverModifier({isVerticalChart: true}));
sciChartSurface.zoomExtents();

I hope it hepls.

Hi Tim,

There is no way to achieve axis label wrapping or axis label rotation in SciChart.js at the moment, however we are doing a deep refactor on the Axis APIs to allow a lot more flexibility in the next major version. Shall I add this to our task board?

In the meantime I would suggest your only workaround is to clip or trim long labels with … ellipsis but maybe use our RolloverModifier to show the full label when the data-point is hovered.

How you can do this:

1. Use the LabelProvider API to create a new labelprovider
2. Override FormatLabel and clip/trim the returned string if it is greater than 5 characters to xyzw…
3. Override FormatCursorLabel and return the full length string
4. Add a RolloverModifier to the chart

Does it work as expected?

Some documentation links:

• RolloverModifier docs
• LabelProvider docs

Best regards,
Andrew