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
But if I do this every time I get the tooltip with the data of a single series, instead I need to see the data of all the series everytime
You'll need to have different axes. All series with shared axes will be displayed by the same tooltip.
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>
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>