Is posible to rotate XLabel and add break line on the label text?

[rokkoo]

Question

Im migrating to XL version, in the previous version I was rotating it in the following way:

tickLabels: {
 angle: -45,
 }

Reading the docs there is any prop to rotate or to apply any customs style to XLabel, can you please guide how to achieve it?

Also, in the previous version, we had the option on create label in the flowing way:

 `label\n newline`

It was working fine, but with new version this is not possible, on ios its scapped and on android is like is treats as unexpected character.

Thanks!

[aclec]

Have you find a solution for the rotate ?

[mMarcos208]

Any update?

Same here.

[marciogabrielsf]

Any Updates? i'm also updating from v36 and trying to add a line break at the X label. Same problem.

[fdbhub]

Same problem here, cannot add a line break on the X label

[MKolisz]

Looks like its not possible right now :(

[bvangraafeiland]

Was looking for this as well - a bit strange that functionality like this (among others) is dropped in a rewrite...

[peterhpchen]

I encountered the same issue as well. Currently, my approach is to manually break the lines in the sentence and handle it using Skia's Text component.

Here’s a portion of the code:

import {
  Text as SkiaText,
} from '@shopify/react-native-skia';
import { Bar, CartesianChart } from 'victory-native';

const chunkString = (str: string, length: number) => {
  return str.match(new RegExp('.{1,' + length + '}', 'g'));
};

export default function PreferenceTestResultBarChart() {
  return (
    <View style={{ height: 260 }}>
      <CartesianChart
        xAxis={{
          formatXLabel: (value) => {
            // We need to handle the sentences ourselves, so the default value should be set to empty.
            return '';
          },
        }}
      >
        {({ chartBounds, points }) => {
          return points.y.map((point, index) => {
            const strs = chunkString(
              preferenceTestResultData[index].x,
              5,
            );

            return (
              <>
                <Bar
                  key={index}
                  barCount={points.y.length}
                  points={[point]}
                  chartBounds={chartBounds}
                />
                {strs?.map((str, i) => {
                  return (
                    <SkiaText
                      font={xFont}
                      text={str}
                    />
                  );
                })}
              </>
            );
          });
        }}
      </CartesianChart>
    </View>
  );
}

Note: You need to calculate the x and y positions yourself.

[lucksp]

any update? The loss of functionality in the new CartisanChart wrapper is painful at times.

[keithluchtel]

any update? The loss of functionality in the new CartisanChart wrapper is painful at times.

Right now, the immediate workaround would be drawing your own labels in renderOutside handler. That is obviously not ideal.

I'll look at adding a new prop to the axis configurations to allow specifying a rotation.