how to cutomize chart like this please help out
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://es.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://es.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://es.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.
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
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://es.infragistics.com/products/ignite-ui-angular/angular/components/charts/features/chart-axis-options#axis-gap-example.
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.
I believe the best way to achieve the behavior you are looking for here is to actually use a second column series. Doing this will place a column next to your existing one, and if you set the brush and outline properties of that column series to “transparent.” You can then set the markerType of that series to something and apply your marker template.
The markers of the column series appear at the top of the column by default, so setting the properties above will make the column invisible, but still allow a marker template. If your column reaches to where you want to place the marker, you can ensure the marker will appear at the point you want it to.
can have some sample code ?
1. can the mouse click event be applied on a single stacked column series ,If so please let me know.
2. can the color can be changed for only one stacked fragment based on property of that data. also animation can be applied on the stacked column please let me know
I am attaching a sample project to demonstrate the custom marker functionality mentioned above. It will be helpful if you can please elaborate a bit further on what you are setting the gap property to that is not resolving the issue.
This sample also demonstrates the seriesMouseLeftButtonDown functionality mentioned here: https://es.infragistics.com/community/forums/f/ignite-ui-for-angular/124346/on-click-event-for-bar-chat.
3443.ChartStyling.zip
also gap is not slovin the issue