1. #1
    Sencha Premium Member slashandburn's Avatar
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    slashandburn is on a distinguished road

      0  

    Default Unanswered: Chart's losing label contrast after highlight

    Unanswered: Chart's losing label contrast after highlight


    I’ve built a complex system for displaying Ext Js 4 Charts and one of the last issues remaining is "when I highlight a chart element, it will lose contrast when it’s not highlighted anymore." I made a short video showing what is happening.

    http://screencast.com/t/DuXpVcy9Gr

    After I take my mouse off any highlighted element, it will return the label's text back to the default black color, while the bar element returns to its predetermined color.

    My code for creating the series is as follows, its integrated into a larger system so a few items in it will reference our theme objects. I also have a second similar issue, where i'm forcing charts to keep their highlights, and a similar problem is also occurring when I remove those highlights.

    Code:
    this.series = {  type:'bar',
      axis: 'bottom',
      renderer: function(sprite, storeItem, barAttr, i, store) {
          barAttr.fill = A3.charting.themeColors[i % A3.charting.themeColors.length];
          return barAttr;
      },
      highlight: {
        fill: A3.charting.highlightColor,
        'stroke-width': 0,
        lineWidth: 0,
        segment: {
          margin: 20
        }
      },
      tips: {
        trackMouse: true,
        minWidth:200,
        renderer: function(storeItem, item) {
          this.setTitle(storeItem.get('displayName') + ': ' + storeItem.get('displayValue'));
        }
      },
      label: {
        display: 'insideEnd',
        field: 'displayValue',
        renderer: function(value) {
          return value;
        },
        orientation: 'horizontal',
        'text-anchor': 'middle',
        font: '12px Arial',
        contrast: true
      },
      style: {
        'stroke-width': 0,
        lineWidth: 0
      },
      field:'rawValue',
      showInLegend:false,
      xField: 'displayName',
      yField: ['rawValue']
    };

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    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


    Please verify that you are using 4.1.1 Final.

    If this is the case, please provide a fully working example that we can use to duplicate this problem.

    Scott.

  3. #3
    Sencha Premium Member slashandburn's Avatar
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    slashandburn is on a distinguished road

      0  

    Default


    I'll play with my code tomorrow and try to make a mini version. Hardest part will be breaking it out of the larger system and the ajax calls. Also I just upgraded to 4.1.1 from the download page today, so it should be final.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,154
    Vote Rating
    475
    Answers
    685
    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 use one of our online examples as a basis for the data and then provide the color scheme you used .. you have a few externals (A3) in your block for code.

  5. #5
    Sencha Premium Member slashandburn's Avatar
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    slashandburn is on a distinguished road

      0  

    Default


    Well, the chart construction, placement and handling are all part of a larger system of Ajax calls, so to mimic what we're doing i'll have to run it from the dev machine, and capture/convert all the json calls to .js files with chrome. I'll have it ready once I get back to work in the morning.

  6. #6
    Sencha Premium Member slashandburn's Avatar
    Join Date
    Dec 2011
    Posts
    17
    Vote Rating
    0
    Answers
    1
    slashandburn is on a distinguished road

      0  

    Lightbulb


    Also to mention, we're an IE8+, FireFox, iPad & Chrome shop, so we don't care about IE7- clients. Also we don't support compatibility mode. The sent in sample file was tested against IE9 & Chrome, and the issue was still present.

Thread Participants: 1

Tags for this Thread