Customizing features on ejChart

[yoavkamary]

Hi,

1. a) I have an Y axe title with position: 'outside' and I would like to bring the axe title closer to the axe line and ticks. I tried position, alignment and offset properties of the axe title property with no success.
    b) Also, Is it possible to rotate the Y axe title? I have a 'μ' as the Y axe title and I want to position it along the Y axe and not vertically to the axe flow.

2. Is it possible to have different shapes for the chart legend? for example, I have a chart with two series. one that display a line and one that display a column. I want to have a legend with a rectangle icon to represent the line and a square icon to represent the column.

Please see screenshot attached
Hope you can help :)

Attachment: chart_824e5f92.zip

[Dharanidharan Dharmasivam]

Hi Yoavkamary, 

Thanks for contacting Syncfusion support. 

We have analyzed your query with the provided screenshot. Kindly find the response for your queries below. 

Query #1(a) : I would like to bring the axe title closer to the axe line and ticks. 

Response: The offset the property in the y axis title can used for adjusting the title position vertically. Since your requirement is to adjust it in horizontal, this can be achieved as an workaround using loaded event. In this event we have repositioned the y axis title of the third axis. Find the code snippet below. 

 

[JS] 

$("#container").ejChart( 

        { 

    //... 

         loaded:"chartLoaded", 

}); 

function chartLoaded(sender) { 

             var padding = 10; 

            var title2 = document.getElementById(this._id + "_svg_YAxisTitle_2"); 

            var y = parseInt(title2.getAttribute("y")); 

            title2.setAttribute("y", y + padding); 

        } 

Screenshot before reducing the space between the title and axis line: 

 

Screenshot after reducing space: 

 

Query #1(b): Is it possible to rotate the Y axe title? 

Response: By default the y axis labels will be rotated and rendered. And your requirement can be achieved using the loaded event. In this event we have removed the value set for the transform property of that element. Find the coed snippet below. 

 

$("#container").ejChart( 

        { 

    //... 

         loaded:"chartLoaded", 

}); 

function chartLoaded(sender) { 

            var titleElement = document.getElementById(this._id + "_svg_YAxisTitle_1"); 

            titleElement.setAttribute("transform", ""); 

        } 

Screenshot: 

 

 

Query #2: Is it possible to have different shapes for the chart legend? 

Response: Your requirement can be achieved using the legendItemRendering event of the chart. In this event we can specify the required shape for each legend. By default when the shape is not specified, legend will render in square shape. We have checked condition for line series, if series type is line, then we have specified legend shape as horizontal line(horizline). Find the code snippet below. 

 

$("#container").ejChart( 

        { 

    //... 

         legendItemRendering: "legend", 

}); 

function legend(sender) { 

            if (sender.model.series[sender.data.legendItem.SeriesIndex].type == "line") 

                sender.data.legendItem.Shape = "horizline"; 

        } 

 

Screenshot: 

 

Sample for reference can be find from below link: 

http://jsplayground.syncfusion.com/iqfumxr1  

Also if you specify the legend shape as seriestype, then legend will render the shape depends upon the series type. Find the code snippet below. 

[JS] 

 

$("#container").ejChart( 

        { 

    //... 

        legend: 

                { 

                    visible: true, 

                    shape: "seriestype" 

                } 

}); 

Screenshot:  

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/kguv4eu1  

Thanks, 

Dharani. 

[yoavkamary]

Hi Dharanidharan Dharmasivam,

Regarding 1a, How can I change the offset of the Y axes so the third Y axe on the right will be closer to the second Y axe.

For 1b, I want to keep the legend item as a thicker rectangle than the 'horizline', Is it possible to individually change the width and height of each legend item?

Thank you for your help
Yoav

[Dharanidharan Dharmasivam]

Hi Yoavkamary, 

 

Thanks for your update. Kindly find the response for your queries below. 

 

Query #1a: How can I change the offset of the Y axes so the third Y axe on the right will be closer to the second Y axe. 

Response: We have analyzed your query and your requirement can be achieved as work around using loaded event of chart. In this by applying transform to the element in DOM, we can change the position of the third axis line, ticks and title. Find the code snippet below. 

 

JS: 

 

$("#container").ejChart(  

        {  

           //...  

           loaded:"chartLoaded",  

});  

 

  function chartLoaded(sender) { 

              var padding = -15, titlePadding = 25; 

              var title2 = document.getElementById(this._id + "_svg_YAxisTitleGroup_2"); 

             title2.setAttribute("transform", "translate(" +padding+",0)"); 

 

              var yAxisLine3 = document.getElementById(this._id + "_svgyAxis2_YAxisLine_3"); 

              yAxisLine3.setAttribute("transform", "translate(" +padding+",0)"); 

              var yTick3 = document.getElementById(this._id + "_svg_YAxisMajorTicks_3"); 

 

              yTick3.setAttribute("transform", "translate(" +padding+",0)"); 

              var yLabel3 = document.getElementById(this._id + "_svg_YAxisLabels_3"); 

              yLabel3.setAttribute("transform", "translate(" +padding+",0)"); 

 

              var title3 = document.getElementById(this._id + "_svg_YAxisTitle_3"); 

              var y = parseInt(title3.getAttribute("y")); 

              title3.setAttribute("y", y + titlePadding); 

   } 

 

 

Query #1b: I want to keep the legend item as a thicker rectangle than the 'horizline' 

Response: Your requirement can be achieved as workaround using legendItemRendering event. In this we can specify the borderWidth property to increase the size of the legend item. Find the code snippet below. 

 

JS: 

 

$("#container").ejChart(  

        {  

           //...  

     legendItemRendering: "legend", 

});  

 

function legend(sender) { 

            if (sender.model.series[sender.data.legendItem.SeriesIndex].type == "line"){ 

                    sender.data.legendItem.Shape = "horizline"; 

                    sender.data.style.Style.BorderWidth = 4; 

             } 

} 

 

Screenshot: 

 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/po222ngn  

Thanks, 

Dharani. 

[yoavkamary]

Thanks a lot!

[Dharanidharan Dharmasivam]

Hi Yoavkamary, 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Thanks, 

Dharani.