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://es.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,
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.
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%)
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.
Hi Andrew,
Thanks for providing inputs on this. I was able to implement the same and able to modify the legend. However when I have updated the series title it is also reflecting the same title in the tooltip when we hover on the time series.
So if I add the final value in brackets in the series title, this is been shown on the tooltip.
Can you please let me know how to solve this?
The default tooltip will show the Title of your series, and so if you are setting the series title to a title with your final value included, this will show up in the default tooltip as well.
The best thing I can recommend to prevent this is to utilize a tooltipTemplate like was described earlier in this discussion. This will give you complete control over what is displayed within the tooltips.
I am already using a tooltipTemplate and also would like to show the title in the tooltip along with the hover value.
But I don't want to show the final value in brackets in the tooltip. Is there any way I can access the original title inside the tooltip template?
Just tried out like this in the tooltip template and managed to achieve the desired tooltip and the legend.
Thank you for your update on this matter. I am glad you were able to achieve the desired tooltip with your legend.
I see nothing wrong with using series.datasource.title instead of the modified title that the legend will use, and it should be valid to use this going forward.