CODEWITHSUNDEEP
ignite-ui-angular
Luca Scurati
Luca Scurati

Reputation: 1

How to set axis label in more lines in igx-data-chart?

I need to custom my x-axis label so that it show the label in two lines. I've tried this:

let labelFormat = new IgxTimeAxisLabelFormatComponent(); 
labelFormat.format = "dd/MM/yyyy" + "\n" + "hh:mm:ss"; 
this.xAxis.labelFormats.add(labelFormat);

But the result is that it stays on a single line, like this:

X-Axis On A Single Line.

Have you any advice?

Upvotes: 0

Views: 510

Answers (1)

Zdravko Kolev
Zdravko Kolev

Reputation: 1587

Unfortunately, I dont think that is possible simply through the API. The label format method should be used for common formats like 'MM/dd/yy' or the ones that you are using. BUT, if you want to change the actual appearance of the label then formatLabel should be the path to follow. While creating an example for you, I realized that the returned value is of type string, so the end result would not be suitable for you again.

public xAxis_FormatLabel(item: any) {
    return item.Country + " \n" + "some other string";
  }

Live demo: https://stackblitz.com/edit/github-exckfz-bsvpqs?file=src%2Fapp%2Fdata-chart-type-stacked-column-series%2Fdata-chart-type-stacked-column-series.component.ts

Here you can find all the settings related to the Axis

Upvotes: 1

Related Questions