Tooltip postion on pie chart

[Fan Zhang]

Hi,

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

Thanks

Fan

[Srihari Muthukaruppan]

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. 

 

Sample: https://codesandbox.io/s/optimistic-booth-hjbhi?file=/src/App.vue 

 

Screenshot: 

 

 

Let us know if you have any concerns. 

 

Regards, 

Srihari M 

[Fan Zhang]

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

[Srihari Muthukaruppan]

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. 

 

Sample: https://codesandbox.io/s/boring-tharp-f80d4 

 

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. 

 

Sample: https://codesandbox.io/s/boring-tharp-f80d4 

 

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 

[Fan Zhang]

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

[Fan Zhang]

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;

    },

[Srihari Muthukaruppan]

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.  

 

Sample: https://codesandbox.io/s/adoring-galileo-92gst?file=/src/App.vue 

 

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. 

 

Sample: https://codesandbox.io/s/adoring-galileo-92gst?file=/src/App.vue 

 

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 

[Fan Zhang]

Hi Srihari,

In the sample, seems like the style in tooltip-temp.vue was not apply.

Can you take a look?

Thanks

Fan

[Srihari Muthukaruppan]

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.  

  

Sample: https://codesandbox.io/s/bold-davinci-d295j?file=/src/App.vue 

  

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