Results 1 to 2 of 2

Thread: How to change the legend text for a multi-column chart

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Location
    Huntsville
    Posts
    252
    Answers
    7

    Default Answered: How to change the legend text for a multi-column chart

    I have a multi-column chart with data values "d1-dn" and I have names to go with those, but those names are user entered text that can include ' and other interesting characters, so it doesn't seem wise to use those as the field names.

    What I can't seem to find is a way to replace the yField values when the legend is being drawn. It appears this isn't possible without modifying LegendItem.js

    Code:
    
            function getSeriesProp(name) {
                var val = series[name];
                return (Ext.isArray(val) ? val[idx] : val);
            }
            
            label = me.add('label', surface.add({
                type: 'text',
                x: 20,
                y: 0,
                zIndex: (z || 0) + 2,
                fill: legend.labelColor,
                font: legend.labelFont,
                text: getSeriesProp('title') || getSeriesProp('yField'),
                style: {
                    'cursor': 'pointer'
                }
            }));
    Seems like either the series needs a getLegendTitleText or the legend needs a method getItemText method that would allow translation from data element name, to user readable name.

    This is on extjs4.1

  2. If you're saying that you have a multi-series chart, you can do this to supply custom legend text:

    Code:
    series:  [{
      type: 'column',
      axis: 'left',
      highlight: true,
      xField: 'category',
      yField: ['salesWeek', 'salesMonth', 'salesQuarter', 'salesYear'],
      title:  ['Weekly', 'Monthly', 'Quarterly', 'Yearly']
    }]
    Obviously, this isn't too flexible as the legend text is hard coded, but it works.

  3. #2
    Sencha User friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    If you're saying that you have a multi-series chart, you can do this to supply custom legend text:

    Code:
    series:  [{
      type: 'column',
      axis: 'left',
      highlight: true,
      xField: 'category',
      yField: ['salesWeek', 'salesMonth', 'salesQuarter', 'salesYear'],
      title:  ['Weekly', 'Monthly', 'Quarterly', 'Yearly']
    }]
    Obviously, this isn't too flexible as the legend text is hard coded, but it works.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •