1. Home
  2. Forum
  3. Vue
  4. [Error] accumulationchart

[Error] accumulationchart

There are two kinds of errors in the console

In  mounted  block use these statements  ,the console  shows 
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

If  I marked ,the console shows 
Error: <text> attribute transform: Expected transform function, "translate(0, 0)undefined".

this.$refs.accumulationInstance.height = "100%";
this.$refs.accumulationInstance.width = "100%";

Attachment: GoogleAnalytics_394a4c4f.zip

4 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team May 3, 2021 12:59 PM UTC

Hi Adrian, 
  
Please find the response for chart related queries.  
  
Query #1: In  mounted  block use these statements  ,the console  shows [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders 
  
Based on your requirement we suggest you directly modify the props value (height) rather than changing in chart instance to overcome the reported scenario. We have also modified the provided sample for your reference. Please find the sample, code snippet and screenshot below. 
  
  
Code Snippet: 
// add your additional code here 
  
var pietemplate = Vue.component("contentTemp2", { 
        template: ` 
    <div style='display:block;height:100%; width:100%;'> 
      <ejs-accumulationchart class="chart-content" ref="accumulationInstance" style='display:block;height:100%; :width:100%;' :legendSettings="legendSettings" :tooltip="tooltip" :height='height' :width='width'> 
        <e-accumulation-series-collection> 
          <e-accumulation-series :dataSource='seriesData' xName='x' yName='y' innerRadius="40%" > </e-accumulation-series> 
        </e-accumulation-series-collection> 
      </ejs-accumulationchart> 
    </div>`, 
        data() { 
          return { 
            seriesData: {}, 
            legendSettings: { visible: false }, 
            dataLabel: { visible: true, position: 'Inside', name: 'text' }, 
            tooltip: { 
              enable: true, header: '<b>${point.x}</b>', format: 'Composition: <b>${point.y}</b>' 
            }, 
            height: '100%', 
            width: '100%' 
          }; 
        }, 
        provide: { 
          accumulationchart: [PieSeries, AccumulationDataLabel, AccumulationTooltip] 
        }, 
        created() { 
          emitter.on('getData', (msg) => { 
            this.seriesData = msg; 
          }); 
        }, 
        mounted() { 
          this.height = "50%"; 
          this.width = "50%"; 
        } 
      }); 
  
// add your additional code here 
  
Screenshot: 
 
  
Query #2: If  I marked ,the console shows Error: <text> attribute transform: Expected transform function, "translate(0, 0)undefined". 
  
We are able to reproduce the reported scenario while using data label. Hence we have logged a bug request on this. You can keep track of it from the below feedback portal link.  
  
  
This fix will be available in our volume 1 sp1 release which is scheduled to be rolled out by the mid of May 2021. We appreciate your patience until then. 
  
Regards, 
Srihari M 


AD adrian May 4, 2021 07:40 AM UTC

Thanks for your help ! 

SM Srihari Muthukaruppan Syncfusion Team May 5, 2021 10:40 AM UTC

Hi Adrian, 
 
Most Welcome. We will let you know once the fix has been rolled out in our volume 1 sp1 release. We appreciate your patience until then. 
 
Regards, 
Srihari M 


SM Srihari Muthukaruppan Syncfusion Team May 21, 2021 11:23 AM UTC

Hi Adrian, 
 
We are glad to announce that our v19.1.64 patch release is rolled out, we have added the fix for the reported scenario. Please find the sample and screenshot below.  
 

Screenshot: 
 
 
We appreciate your patience in waiting for this release. Kindly let us know if you need further assistance. 
  
Regards, 
Srihari 


Marked as answer
Loader.
Up arrow icon