how to cutomize chart like this please help out
current this is being done with the help of marker the code is shared above
and it display something like this
instead it need to be shown something like this is there any way in the render method we can get the render object in this case column chart width in pixel and add that offset so in case of any width of column chart it will display besides the column.
Hello Muhammad,
In order to add width to your column chart, you can modify the gap property on the IgxCategoryXAxis. You can read about the gap property here: https://ko.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-options#axis-gap-example.
Please let me know if you have any other questions or concerns on this matter.
is there any way to fix width of the column charts ?
how to add width of the column chart and add it in xaxis to show it after the bar chart
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://ko.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://ko.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://ko.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-annotations#angular-callout-layer.