0

When victory line chart display the x-axis labels, the labels are on one line and I would like to display the label with text-wrapping. See the two images below to see what it is doing currently and what I would like for it to do.

Currently What is Happening Current Chart

The image below is what I would like to happen. What I would like What I want

I have created a function in the tickFormat to provide custom label text and that part is working.

<VictoryAxis fixLabelOverlap={true} tickFormat={t => this.formatLabel(t)} />

formatLabel = (t) => {
    var x = new Date(t);
    var s = x.getHours() + ":" + x.getMinutes() + (x.getMonth() + 1) + '/' + x.getDate();
    return s;
  }

1 Answer 1

1

You should be able to create a new line with a line break "\n"

formatLabel = (t) => {
  var x = new Date(t);
  var s = x.getHours() + ":" + x.getMinutes() +'\n'+ (x.getMonth() + 1) + '/' + x.getDate();
  return s;
}
1
  • Thank you! Used the tickFormat prop on VictoryAxis and it worked.
    – Whee
    Mar 23, 2022 at 16:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.