round edge bar graph

Question

Hello Guys,I wanna make round edge bar graph.So I make the round edge bar graph using cornerRadius.but when there is no or a little data values, the image attached is viewed.How do we go about resolving this issue.

Saravana Kumar Kanagavel · Answer

Hi June, 
 
Thanks for contacting Syncfusion Support. 
 
We have analyzed your query and able to reproduce the reported issue in our chart. Why this issue occurs because drawing rounder corner of rectangle height is less than its minimum height of Quadratic Bezier curve to draw the curve so that rounded corner drawing as look like attached your picture. But we have checked same issue in normal SVG , that issue is reproduced in it. 
 
Please find the sample link of normal SVG from the below 
 
Link : https://jsplayground.syncfusion.com/lu00rrs3 
 
As of now , we have provide the work around to avoid this issue in chart.  
 
Please find the code snippet below 
 





[JS] 
  $("#container").ejChart( 
   { 
        axesRangeCalculate:"onAxisRange", 
    }); 
  function onAxisRange(sender){ 
        if(sender.data.axis.orientation == "vertical"){ 
           for(var i=0;i< sender.model.series.length;i++){ 
               for(var j = 0;j<sender.model.series[i].points.length;j++){ 
                 if(sender.data.axis.range.min == sender.model.series[i].points[j].y){ 
                    sender.model.series[i].points[j].fill = "transparent"; 
                 } 
               } 
           } 
        } 
    } 
  
 
Kindly find the sample link from the below 
 
Sample Link : https://jsplayground.syncfusion.com/nivphn5o 
 
Please find the output of the sample below 
 
  
 
Please let us know if you have any concern on this. 
 
Regards, 
Saravana Kumar K.

June · Answer

Thank you, Saravana Kumar K.I solved problem using your code.But There's another problem.It disappears if bar's value is 0, but It's like picture bellow if bar's value is 1, How to solve about this problem?

Saravana Kumar Kanagavel · Answer

Hi June, 
 
Thanks for your update. 
 
We have analyzed your query and modified the sample based on your requirement. Please find the code snippet below 
 




[JS] 
$("#container").ejChart( 
{ 
   loaded: "chartLoaded" 
}); 
 
function chartLoaded(sender) { 
            // Get the series collection of element 
            var seriesCollection = document.getElementById("container_svg_SeriesCollection"); 
            for (var i = 0; i < seriesCollection.childElementCount; i++) { 
                // Ge the series group id 
                var id = seriesCollection.children[i].id; 
                // Check whether the series group or not here 
                if (id.indexOf("_SeriesGroup_") > -1) { 
                    var elem = seriesCollection.children[i]; 
                    for (var j = 0; j < elem.childElementCount; j++) { 
                        // Get the point element 
                        var point = elem.children[j]; 
                        // Check the height is less than width 
                        if (parseInt(point.getAttribute("height")) < parseInt(point.getAttribute("width"))) { 
                            // changing the fill color for point 
                            point.setAttribute("fill", "transparent"); 
                        } 
                    } 
                } 
            } 
        } 
 
 
 
Kindly find the modified sample from the below location. 
 
Sample Link : https://jsplayground.syncfusion.com/4afpi24c 
 
 
Please find the output of the sample below 
 
  
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K.