How to customize x-axis text

[Don Liang]

I want to make a chart like this.

I tried multiLevelLabel, but I can only get this

Is there a way to move the multilevelLabels up? 

or I did the wrong way. What's the correct to do this?

Thanks

Don

[Durga Gopalakrishnan]

Hi Don, 

We have prepared chart as like attached image. You can use axisLabelRender event to customize axis labels based on your requirement. The multilevellabels are used to display labels in multiple levels. We have attached sample for your reference.  

<ejs-chart (axisLabelRender)="axisLabelRender($event)"> 

public primaryXAxis: Object = { 

    valueType: "Category", 

    interval: 30 

  }; 

public axisLabelRender(args: IAxisLabelRenderEventArgs): void { 

    if (args.axis.name == "primaryXAxis") { 

      if (this.count == 4) this.count = 0; 

      let text = args.text.split(" "); 

      args.text = text[0] + " " + this.index[this.count]; 

      this.count = this.count + 1; 

    } 

  } 

https://stackblitz.com/edit/angular-f4sys3 

To know more information about multi level labels please check with below UG and online demo link. 

https://ej2.syncfusion.com/angular/documentation/chart/axis-labels/#multilevel-labels 

https://ej2.syncfusion.com/angular/demos/#/material/chart/multi-level-label 

Please revert us, if you have any concerns. 

Regards, 

Durga G 

[Don Liang]

Thanks, this works great!

[Durga Gopalakrishnan]

Hi Don,

Most welcome. Please get back to us if you need any further assistance. We are always happy to assist you.

Regards,

Durga G