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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Customizing features on ejChart

Thread ID:

Created:

Updated:

Platform:

Replies:

129229 Mar 6,2017 09:45 AM UTC Mar 15,2017 05:20 AM UTC JavaScript 5
loading
Tags: ejChart
yoavkamary
Asked On March 6, 2017 09:45 AM UTC

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 [Syncfusion]
Replied On March 7, 2017 06:50 AM UTC

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: 

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. 

Thanks, 
Dharani. 


yoavkamary
Replied On March 7, 2017 11:16 PM UTC

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 [Syncfusion]
Replied On March 8, 2017 02:20 PM UTC

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. 

Thanks, 
Dharani. 


yoavkamary
Replied On March 14, 2017 01:35 PM UTC

Thanks a lot!

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 15, 2017 05:20 AM UTC

Hi Yoavkamary, 

Thanks for your update. 

Kindly revert us, if you need further assistance. 

Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;