PDA

View Full Version : label renderer doesn't deal with html coding like <br>



mark0978
14 May 2012, 1:27 PM
Trying to format the x axes and I'm using code like this:

axes: [{
type: 'Category',
position: 'bottom',
fields: ['when'],
title: 'Year-Month',
grid: true,
label: {
renderer: function(v) {
var result = date_splitter.exec(v);
return result[2] + "<br>" + result[1]
}
}
}


The text that is displayed is:

01<br>2010

instead of the expected

01
2010

Seems like it is ONLY able to deal with textual values which seems like a fairly large shortcoming. Any workarounds for this?

scottmartin
14 May 2012, 5:10 PM
Charts are using SVG to render .. try:

return 'first \n second'

Regards,
Scott.

mark0978
14 May 2012, 6:24 PM
That did work, no way to center one label above the other without changing text-anchor to middle. Any idea on how to set that attribute in the SVG that Ext emits?


<text id="ext-sprite-1048" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; " zIndex="0" x="119" y="483" text=" 01
2010" fill="#444" font="12px Arial, Helvetica, sans-serif" text-anchor="middle" transform="matrix(1,0,0,1,0,0)"><tspan x="119" dy="3.75"> 01 </tspan><tspan x="119" dy="18">2010</tspan></text>

scottmartin
15 May 2012, 9:14 AM
You may have to root around google for that:
> svg text formatting

Scott.

mark0978
15 May 2012, 9:31 AM
text-anchor="middle" does what I want. I'm just wondering how to get that attribute into the SVG ext is generating..... the default value is text-anchor="start" which is doing left alignment.

mark0978
16 May 2012, 9:19 AM
Figured it out!


axes: [{ type: 'Category',
position: 'bottom',
fields: ['when'],
title: 'Year-Month',
grid: true,
label: {
'text-anchor': 'middle'
, renderer: function(v) {
var result = date_splitter.exec(v);
return " " + result[2] + " \n" + result[1]
}
}
}




Totally undocumented, but it works just fine.

scottmartin
16 May 2012, 9:47 AM
Thank you for the update. It may help others in the future.

Regards,
Scott.

mark0978
16 May 2012, 10:02 AM
Any chance you could get that into the docs?

scottmartin
16 May 2012, 11:07 AM
You can add this a comment to our online docs and it will be reviewed. Expand the topic to comment.

Scott.

sroy3
10 Dec 2012, 8:17 AM
Based on the examples provided, tried the following, but could not get it to work on 'Numeric Axis'. Any workarounds please? Thanks in advance

{
type: 'numeric',
fields: [
'xyz'
],
grid: {
odd: {
fill: '#e8e8e8'
}
},
label: {
x: 0,
y: 0,
textBaseline: 'middle',
textAlign: 'center',
fontSize: 12,
fontFamily: 'Helvetica',
renderer: function(v) {return -1.0*v/1000.0}
},
labelInSpan: false,
maximum: 0,
minimum: -10000,
position: 'left',
title: 'xyz (units)',
titleMargin: 6
}