bar chart not rendering in internet explorer

[Basavaraj Shirur]

bar chart is rendering in chrome but not rendering in internet explorer.

[Dharanidharan Dharmasivam]

Hi Basavaraj, 

 

 

Greetings from Syncfusion. 

 

We have analyzed your query. We have prepared a bar chart and unfortunately the reported scenario is not replicated, and the bar chart is rendering properly in Internet Explorer browser. Sample used for testing can be found from below link. 

 

https://stackblitz.com/edit/angular-yas8in?file=src%2Fapp%2Fapp.component.html  

 

Screenshot: 

 

 

 

Since we are unaware on the exact scenario, kindly share us the following information which will be much helpful in further analysis and provide you the solution sooner. 

 

·       Try to reproduce the reported issue else share your sample with replication steps. 

·       Share the code used to render bar chart. 

·       Do you have got console errors, if so share the details. 

·       Kindly share the browser details which you have ensured. 

 

 

Thanks, 

Dharani. 

 

[Basavaraj Shirur]

<e-series [dataSource]='chartData' type='Bar' xName='RecommendationLabel' yName='NumberOfAnalysts' [marker]='marker'>e-series>

this.marker = { dataLabel: { visible: true, position: 'Outer',

template: '

${point.y}

'},

position: 'Outer',

};

if we add marker in internet explorerits not rendering

please replay with solution

thanks,

Basavaraj

[Dharanidharan Dharmasivam]

Hi Basavaraj, 

 

Thanks for the provided information, 

 

We have analyzed the provided code snippet and found that you have used the dataLabel template without html element. So, the data label is not rendered. We would like to let you know that, if you are using template for data label, then you need to specify them within html elements. Now we have modified the sample with div element in the dataLabel template and is working properly in IE. Find the code snippet below to achieve this requirement. 

 

[app.component.ts] 

 

this.marker = { dataLabel: { visible: true, position: 'Outer', 

template: '<div>${point.y}<div>'}}; 

 

 

Screenshot: 

 

 

 

Sample: https://stackblitz.com/edit/angular-fmpym4?file=src/app/app.component.ts  

 

Thanks,
Dharani.