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>