1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default Answered: label renderer doesn't deal with html coding like <br>

    Answered: label renderer doesn't deal with html coding like <br>


    Trying to format the x axes and I'm using code like this:
    Code:
                    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?

  2. Figured it out!

    Code:
                    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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Charts are using SVG to render .. try:

    return 'first \n second'

    Regards,
    Scott.

  4. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    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>

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You may have to root around google for that:
    > svg text formatting

    Scott.

  6. #5
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    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.

  7. #6
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    Figured it out!

    Code:
                    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.

  8. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Thank you for the update. It may help others in the future.

    Regards,
    Scott.

  9. #8
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    251
    Vote Rating
    -6
    Answers
    7
    mark0978 is infamous around these parts mark0978 is infamous around these parts

      0  

    Default


    Any chance you could get that into the docs?

  10. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You can add this a comment to our online docs and it will be reviewed. Expand the topic to comment.

    Scott.

  11. #10
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    1
    sroy3 is on a distinguished road

      0  

    Default Does the label renderer work with Numeric axis also?

    Does the label renderer work with Numeric axis also?


    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
    }



Thread Participants: 2

Tags for this Thread