1. Home
  2. Forum
  3. Vue
  4. Tooltip postion on pie chart

Tooltip postion on pie chart

Hi,
Is there a way to postion the tooltip on pie chart to a fixed postion?

Thanks
Fan

8 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team November 24, 2020 06:27 PM UTC

Hi Fan, 
 
We have analysed your query. From that, we would like to let you know that we can achieve your requirement using annotation property in the chart. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot. 
 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


Marked as answer
FZ Fan Zhang November 30, 2020 07:43 PM UTC

It works well, thank you very much.

Two follow up question:
1. How to remove the tooltip pointer?
2. How to move the title to right of the pie chart (top of  the legend) or some fixed location of the page?

Thanks
Fan

SM Srihari Muthukaruppan Syncfusion Team December 1, 2020 09:03 AM UTC

Hi Fan, 
 
Please find the response for chart related queries. 
 
Query #1: How to remove the tooltip pointer? 
 
We have analysed your query. From that we suggest you to use tooltip template to overcome the reported scenario. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot below. 
 
 
Screenshot: 
 
Query #2: How to move the title to right of the pie chart (top of  the legend) or some fixed location of the page? 
 
We have analysed your query. From that we suggest you to use textAlignment property in titleStyle to customize the position of chart title and the types are namely Near, Far and Center. Based on your requirement we have prepared a sample for your reference. Please find the sample and screenshot below. 
 
 
Code Snippet: 
<ejs-accumulationchart 
        style="display: block" 
        align="center" 
        id="chartcontainer" 
        :title="title" 
        :titleStyle="titleStyle" 
        :legendSettings="legendSettings" 
        :tooltip="tooltip" > 
// add your additional code here 
</ejs-accumulationchart> 
 
// add your additional code here 
 
      title: "Mobile Browser Statistics", 
      titleStyle: { 
        textAlignment: "Far", 
      }, 
// add your additional code here 
 
Screenshot: 
 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari 


FZ Fan Zhang December 1, 2020 06:04 PM UTC

After change code follow your sample, got the error:
Uncaught TypeError: str.match is not a function
    at evalExp (template.js:71)
    at compile (template.js:58)
    at Object../node_modules/@syncfusion/ej2-svg-base/node_modules/@syncfusion/ej2-base/src/template-engine.js.Engine.compile (template-engine.js:130)
    at compile (template-engine.js:21)
    at Tooltip../node_modules/@syncfusion/ej2-svg-base/src/tooltip/tooltip.js.Tooltip.updateTemplateFn (tooltip.js:688)
    at Tooltip../node_modules/@syncfusion/ej2-svg-base/src/tooltip/tooltip.js.Tooltip.render (tooltip.js:185)
    at Tooltip../node_modules/@syncfusion/ej2-svg-base/node_modules/@syncfusion/ej2-base/src/component.js.Component.appendTo (component.js:148)
    at Tooltip.Component [as constructor] (component.js:62)
    at new Tooltip (tooltip.js:135)
    at AccumulationTooltip../node_modules/@syncfusion/ej2-charts/src/common/user-interaction/tooltip.js.BaseTooltip.createTooltip (tooltip.js:133)

This error is on the file:
webpack:///./node_modules/@syncfusion/ej2-svg-base/node_modules/@syncfusion/ej2-base/src/template.js

Line: 71:
 var isClass = str.match(/class="([^\"]+|)\s{2}/g);


Thanks
Fan

FZ Fan Zhang December 1, 2020 09:24 PM UTC

Also, I use tooltipRender to get both number and percent, how can I apply this format to tooltip template?

Thanks
this.total = this.pieseriesData.reduce(
            (accum, item) => accum + item.y,
            0
          );

tooltipRender: function (args) {
      var percent = parseInt((args.point.y / this.total) * 100) + "%";
      args.text = this.formatNumber(args.point.y) + " " + "| " + percent;
    },

SM Srihari Muthukaruppan Syncfusion Team December 2, 2020 01:25 PM UTC

Hi Fan, 
 
Please find the chart related queries. 
 
Query #1: Uncaught TypeError: str.match is not a function 
 
We have analysed your query. From that we would like to let you know that the chart is working fine in latest version 18.3.52. Unfortunately we are unable to reproduce the reported scenario. We have also attached the sample used for testing for your reference.  
 
 
If you still face this issue. kindly revert us with the following information which will be more helpful for further analysis and provide you the solution sooner.  
  
  1. Try to reproduce the reported scenario in the provided sample.  
  2. Please share the nugget version used in the sample.
 
 
Query #2: I use tooltipRender to get both number and percent, how can I apply this format to tooltip template? 
 
We have analysed your query. From that, we would like to let you know that we can achieve your requirement by customizing template property in the tooltipRender event of the chart. Based on your requirement we have prepared a sample for your reference. 
 
 
Code Snippet: 
<ejs-accumulationchart ref="chart" style="display: block" align="center"  id="chartcontainer" 
        :title="title"  :titleStyle="titleStyle"  :legendSettings="legendSettings" :tooltip="tooltip" 
        :tooltipRender="tooltipRender"   > 
 
// add your additional code here 
 
tooltipRender: function (args) { 
      var total = 0; 
      for (var i = 0; i < args.series.dataSource.length; i++) { 
        total = total + args.series.dataSource[i].y; 
      } 
      var percentage = (args.point.y / total) * 100; 
      args.text = args.point.x + " : " + percentage + "%"; 
      this.$refs.chart.ej2Instances.tooltip.template = args.text; 
    }, 
 
// add your additional code here 
 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


FZ Fan Zhang December 2, 2020 04:43 PM UTC

Hi Srihari,

In the sample, seems like the style in tooltip-temp.vue was not apply.
Can you take a look?

Thanks
Fan

SM Srihari Muthukaruppan Syncfusion Team December 3, 2020 08:50 AM UTC

Hi Fan, 
 
We have analysed your query. From that, we would like to let you know that we can achieve your requirement by using load event of the chart. Based on your requirement we have prepared a sample for your reference.  
  
  
Code Snippet:  
<ejs-accumulationchart ref="chart" style="display: block" align="center"  id="chartcontainer"  
        :title="title"  :titleStyle="titleStyle"  :legendSettings="legendSettings" :tooltip="tooltip"  
        :load="load"   >  
  
// add your additional code here  
  
load: function (args) { 
      var total = 0; 
      var percentage = 0; 
      for (var i = 0; i < args.chart.series[0].dataSource.length; i++) { 
        total = total + args.chart.series[0].dataSource[i].y; 
      } 
      for (var j = 0; j < args.chart.series[0].dataSource.length; j++) { 
        percentage = ( 
          (args.chart.series[0].dataSource[j].y / total) * 
          100 
        ).toFixed(2); 
        args.chart.series[0].dataSource[j].text = 
          args.chart.series[0].dataSource[j].x + " : " + percentage + "%"; 
      } 
    },  
// add your additional code here  
  
  
Screenshot:  
 
  
Let us know if you have any concerns.  
  
Regards,  
Srihari M  


Loader.
Up arrow icon