Configure Pivot chart report tooltip

Configure Pivot chart report tooltip

Posted by: sskss1ss2 on 28 June 2022, 3:15 pm EST

• 

  sskss1ss2

  • Post Options:
  • Link
    Copy

  Posted 28 June 2022, 3:15 pm EST

  I want to represent my data with a pivot chart type report. We’ve tooltip by default. I want to configure the tooltip of pivot chart. How should i proceed?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 29 June 2022, 9:09 pm EST

  Hello,

  You can easily modify the content of the pivotChart tooltip by getting the underlying FlexChart instance using the flexChart property of pivotChart and using the tooltip property of FlexChart. The tooltip property, which is an instance of ChartTooltip class, has a property known as content that can be used to specify the tooltip’s content. It accepts a function that takes a HitTestInfo object as a parameter.

  You can get the label and the value of the current point by using HitTestInfo’s name and value property. Please refer to the code snippet below:

  
  var tooltip = pivotChart.flexChart.tooltip;
      tooltip.content = function (ht) {
          return '<b>Percent:</b> ' + ht.name +'<br><b>Value:</b> ' + ht.value;
      }
  
  

  You can also refer to the FlexChart custom tooltip samples to implement the same on pivotChart using the above approach.

  DEMO link: https://www.grapecity.com/wijmo/demos/Chart/Features/CustomTooltips/purejs

  Regards