Hi, I need to customize the tooltip for my date chart, but following the documentation I can't set it, and it remains the default one. Do you have any advice on how to do it?
Thanks
Hello Luca,
Thank you for contacting Infragistics.
The DataChart's series has a TooltipTemplate property that you can wire up your own ng-template.
eg. https://stackblitz.com/edit/github-wb4n6j
<ng-template let-series="series" let-item="item" #valueTooltip> <span>{{item.Country}}: {{item.Coal}}</span> </ng-template> ... <igx-data-chart #chart height="calc(100% - 60px)" width="100%" [dataSource]="data"> <igx-category-x-axis #xAxis name="xAxis" label="Country"></igx-category-x-axis> <igx-numeric-y-axis #yAxis name="yAxis" minValue=0></igx-numeric-y-axis> //Custom tooltip <igx-column-series name="series1" title="Coal" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Coal" showDefaultTooltip=false [tooltipTemplate]="valueTooltip"></igx-column-series> //Default tooltip <igx-column-series name="series2" title="Hydro" [xAxis]="xAxis" [yAxis]="yAxis" valueMemberPath="Hydro" showDefaultTooltip=true></igx-column-series> </igx-data-chart>
Hi MichalThanks for the replyI tried and now it works!!, but in my case, i need that the tooltip always comes out, not just when you hover over the series. The type that comes closest is the category tooltip but the way I structured the template displays the data twice.What I managed to do is thisInstead I would need something like this, done with the default tooltipbut with the ability to view it wherever you position the mouse and not just when I pass over a series.The custom template code is this:
<ng-template let-series="series" let-item="item" #template> <div> <span> {{item.Date | date}} <br /> <button igxButton="icon" class="igx-button--icon" igxButtonColor="white" igxRipple="white" style="width:20px; height:20px;" igxButtonBackground="{{series.actualBrush}}"></button> {{item.Value[0] | number}} <br /> <button igxButton="icon" class="igx-button--icon" igxButtonColor="white" igxRipple="white" style="width:20px; height:20px;" igxButtonBackground="{{series.actualBrush}}"></button> {{item.Value[1] | number}} </span> </div> </ng-template>
As Martin suggested there is no continuous mouse tooltip interaction.
You can suggest new product ideas for future versions (or vote for existing ones) at <https://es.infragistics.com/community/ideas>. Submitting your idea will allow you to communicate directly with our product management team, track the progress of your idea at any time, see how many votes it got, read comments from other developers in the community, and see if someone from the product team has additional questions for you. Remember when submitting your idea to explain the context in which a feature would be used and why it is needed as well as anything that would prevent you from accomplishing this today. You can even add screenshots to build a stronger case. Remember that for your suggestion to be successful, you need other members of the community to vote for it.
Let me know if you have any questions.
Hi Martin,Thanks for your reply.
I've tried to implement a new component as you indicated. But how can I get data from the graph in this way? I'll explain. Every time I move the mouse the tooltip is displayed, but in this tooltip I have to show the values of the graph corresponding to that position. For example, if I position the mouse on 09/09/2020 within the tooltip, I must be able to see the 09/09/2020 date and the values that the different series assume on that date. How can I get this information using the x and y coordinates? Or is there another way?
Thank youLuca
Currently, only the Item Tooltip Layer can places a tooltip at intersection of vertical line (running through X position of mouse cursor) with series line(s) You will need to request a new feature on this website If you want to render a tooltip exactly at position of mouse cursor regardless of data plotted in the chart. Alternatively, you could implement a new component that renders over the chart plot area at mouse position which you can get with this code:
public componentDidMount() { const elem = document.getElementById('chart'); elem.addEventListener('mousemove', this.onMouseMove, false); } public onMouseMove = (e: any) => { const bounds = e.target.getBoundingClientRect(); const relativeCoordinates = { x: e.clientX - bounds.left, y: e.clientY - bounds.top }; const windowCoordinates = { x: (e.clientX - bounds.left) / bounds.width, y: (e.clientY - bounds.top) / bounds.height }; // TODO update position of custom component (tooltip) using relative/window Coordinates }
Hi Martin,thank you for your answer. Now I managed to set the tooltip as desired, like this:But now I have another "problem". Is it possible somehow to make the tooltip "follow" the mouse pointer, so that the tooltip is always close to the mouse pointer and not in a fixed position? And then is it possible to remove or change the style of the tooltip container, because I changed the style of the tooltip so that the background is gray, but the outline remains white .... This is the code of the tooltip style:
style="background-color:#6f6f6f; color:white; border-radius:5px; border-color:#6f6f6f; font-size:15px"
Thanks,
Luca
Hello Luca, Here is sample app using custom tooltip template with IgxCategoryToolTipLayerComponent to show combined tooltip for multiple seriesdc-hover-tooltips.zip