Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
70
How to set custom tooltip in Data Chart (Line Chart)?
posted

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

Parents
No Data
Reply
  • 29105
    Offline posted

    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>
         
         

Children