Hello Muhammad,

From the screenshot you have provided, I feel that the best way for you to achieve this behavior would not be to use a single chart, but multiple. If you placed two charts next to each other, you could achieve the “Recipe Change” and “Table Change” headers by using the title property of the chart.

It looks like you have a grey-area that could be accomplished by using an IgxColumnSeries. You can read about the IgxColumnSeries here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/column-chart.

From there, I am a little bit unsure if you want the “On Time” and “Lost Time” headers to be your X-Axis or not, but if you do, it is possible to set the IgxCategoryXAxis to appear at the top of the chart via its labelLocation property and setting it to “OutsideTop.” There is an example of this here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-layouts#axis-locations-example.

I am a bit unsure of what the 0:00m label is supposed to be signifying in this case, but I think it would be possible to achieve that by using an IgxCalloutLayer. There is an example of the IgxCalloutLayer here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-annotations#angular-callout-layer.

Please let me know if you have any other questions or concerns on this matter.