Can I put title and legend on the same line?

Question

Hello SyncFusion,I have same rather flat bar charts. I am thinking move the Title to upper-left and move the legend to the same line as the title on the upper-right.Can it be done? and How?Thanks,John

Durga Gopalakrishnan · Accepted Answer

Hi John,Most welcome. We request you to use chart loaded
event to change the position of chart title based on your need. We have
attached modified sample for your reference. Please check with below snippet
and sample.

methods:{
               
  loaded: function
  (args) {  
                              
  var titleEle= document.getElementById("chartcontainer_ChartTitle");
                              
  if(titleEle != null)

titleEle.setAttribute("x",
  50);    
    
               }
    }

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/TitlePosition1290097237.zipKindly revert us if you have any concerns.Regards,Durga G

Durga Gopalakrishnan · Answer

Hi John,

Greetings from Syncfusion.

We recommend you to specify legend position as Custom to place the legends in required position using x, y coordinates and textAligment as Near to display chart title in left. Please check with the below snippet and sample.

<ejs-chart :legendSettings='legendSettings' :titleStyle='titleStyle'></ejs-chart>

export default Vue.extend({

name: 'app',

data: function() {

return {

legendSettings: {

visible: true,

position: 'Custom',

location: { x: 580, y: 5 }

},

titleStyle :{textAlignment: 'Near'}

};

}

});

UG : https://ej2.syncfusion.com/vue/documentation/chart/legend/#position-and-alignment

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomLegend1153040616.zip

Please revert us if you have any concerns.

Regards,

Durga G

John Chen · Answer

Hi Durga,Your suggestion worked.But, my charts are resizable. I end up putting the Legend on the left and Title on the right (Far). This way, I avoided a) recalculating the x.  b) The title, if align as Near, is too much to the left edge (don't now how to pad) Thanks for the help.John