Hi Team,
I am using Financial/Stock charts and binding the time series data to the chart. The chart is rendered fine but the tooltip shows the date in the format of date and time where time is not required in our case. So even if it is only the date it is adding "00:00:00" after the date.
Even the samples provided in https://ko.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/stock-chart has the same behaviour. Can you please provide inputs or an example on how to remove time part in date.
Please note that I have already tried to format the date field to only date string but the x axis is showing incorrect date values after the change.
Looking forward to the inputs.
Hello Rameez,
At the moment, there unfortunately does not appear to be a way to get rid of the % change in the built-in legend for the IgxFinancialChart component. My recommendation to get around this would be to use an external IgxLegend object and then assign it to the [legend] property of the chart.
This will place an external legend outside the chart bounds, but it will give you more control over what you would like to show as the legend titles. This control comes in the form of an event – the seriesAdded event of the IgxFinancialChart component. The title shown for each external legend item is the corresponding series title, and so if you set your series title to something including the final close value from your data source, you can show the final close value without the percent change.
Here is a modified StackBlitz sample showing how you can use the external legend and seriesAdded event: https://stackblitz.com/edit/github-rz72zd?file=src%2Fapp%2Fmultiple-data%2Ffinancial-chart-multiple-data.component.html.
Please let me know if you have any other questions or concerns on this matter.
Thanks Andrew for the solution. It worked!
I would also like to check about showing legend for the financial/stock chart.
When I just specify isLegendVisible="true" for the chart it shows the legend but also shows the percentage change in the brackets of the closed value. I dont want the % change. Can you please let me know how can we customise the legend to just show the closing/last value.
Ex: XXX: 92.97 (-22.46%)
I have been investigating into the behavior that you are looking to achieve, and I would recommend taking a look at this forked StackBlitz sample. This demonstrates how you can create a tooltipTemplate for the IgxFinancialChart component in Ignite UI for Angular, which I believe would be the best way to modify the date values that you are looking to change in this case.
We also have a documentation article about tooltipTemplates, here. The sample for this article is for the IgxCategoryChart component, but the tooltipTemplates work the same way for the IgxFinancialChart.
I hope this helps. Please let me know if you have any other questions or concerns on this matter.