We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

bar chart not rendering in internet explorer

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

3 Replies

DD Dharanidharan Dharmasivam Syncfusion Team November 23, 2018 06:16 AM UTC

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. 
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. 

BS Basavaraj Shirur November 23, 2018 02:08 PM UTC

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

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

if we add marker in internet explorerits not rendering
please replay with solution

DD Dharanidharan Dharmasivam Syncfusion Team November 26, 2018 06:27 AM UTC

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. 
this.marker = { dataLabel: { visible: true, position: 'Outer', 
template: '<div>${point.y}<div>'}}; 

Live Chat Icon For mobile
Up arrow icon