Chart scale text not wrapped

Suite and Optimus
1

When the chart is initialized inside a layout with fixed size, the scale labels are not wrapped if it is long. It behaves like overflow: hidden. Upong inspecting, the whole chart is an SVG and the labels are inside a text tag which does not support wrapping. Please refer to the sample snippet:

2

Hello kvcardosa,

Regarding this point:

Upon inspecting, the whole chart is an SVG and the labels are inside a text tag which does not support wrapping

It relates to the SVG rendering, and works in such a way by the current design. SVG elements do not support automatic line wrapping, so long scale labels are rendered in a single line and may be cut off by the chart boundaries.

But this issue can be avoided by using the textTemplate property of the scale:

This allows you to truncate long labels with an ellipsis.
Additionally, the scaleRotate property can be used to rotate the labels if more space is needed, as follows:

Here is an example of the config:

    const config = {
        type: "bar",
        css: "dhx_widget--bordered",
        barWidth: 12,
        scales: {
            "bottom": {
                text: "month",
                textTemplate: value =>
                    value.length > 10 ? value.slice(0, 10) + "…" : value
            },
            "left": {
                maxTicks: 10,
                max: 100,
                min: 0
            }
        },
        series: [
            {
                id: "A",
                value: "A",
                color: "#81C4E8",
                fill: "#81C4E8",
                label: "Company A",
                // the tooltip receives the full (not truncated) label text
                tooltipTemplate: ([value, month]) => `${month}: ${value}`
            },
            {
                id: "B",
                value: "B",
                color: "#74A2E7",
                fill: "#74A2E7",
                label: ({ id }) => `Company ${id}`,
                tooltipTemplate: ([value, month]) => `${month}: ${value}`
            },
            {
                id: "C",
                value: "company C",
                color: "#5E83BA",
                fill: "#5E83BA",
                tooltipTemplate: ([value, month]) => `${month}: ${value}`
            }
        ],
        legend: {
            series: ["A", "B", "C"],
            halign: "right",
            valign: "top"
        }
    };

With this approach, the long labels are displayed as “A Long Tex…” and no longer overflow the chart area, while the full values remain available in the data and tooltips.

Here is an example:

Warm regards,