1

I'm trying to use the addCls() method for sprites to change the color of a scatter plot point once it has been clicked on. So far, my code changes the color of the highlight that comes up when you mouse-over the point but not the color of the point itself.

Here is my itemclick listener, defined under the series config in the chart definition. 

               listeners: {
                    itemclick: function(record, o){
                            console.log(record.sprite);
                            record.sprite.addCls('green-sprite');
                    }
               }

My css for the class 'green-sprite' looks like this:

 .green-sprite{
    stroke: rgb(0,100,0) !important;
    fill: rgb(0,100,0) !important;
    color: #99CC99 !important;
 }

Any tips would be much appreciated!

alex9311
  • 1,230
  • 1
  • 18
  • 42

1 Answers1

1

I created a simple example and found that it's the way in which ExtJS renders each scatter point. Essentially, each point consists of more than one sprite. The one you have access to via record.sprite is the sprite created directly for the data point but then, to apply shadows, several other sprites are rendered.

If you turn off shadows for the scatter series then it should work. e.g.

var win = Ext.create('Ext.Window', {
            width: 800,
            height: 600,
            hidden: false,
            shadow: false,
            maximizable: true,
            title: 'Scatter Chart Renderer',
            renderTo: Ext.getBody(),               
            layout: 'fit',
            items: {
                id: 'chartCmp',
                xtype: 'chart',
                style: 'background:#fff',
                animate: true,
                store: store1,
                axes: false,
                shadow: false,
                insetPadding: 50,            
                series: [{
                    type: 'scatter',
                    axis: false,
                    xField: 'data1',
                    yField: 'data2',
                    listeners: {
                        itemmouseup: function(record, o)
                        {
                            record.sprite.addCls('green-sprite');
                        }
                    },
                    color: '#ccc',
                    markerConfig: {
                        type: 'circle',
                        radius: 20,
                        size: 20
                    }
                }]
            }
        });

Take a look at this fiddle to see a working example: http://jsfiddle.net/JXUFN/ I've tested in Chrome and Internet Explorer 9 and it seems to do the trick.

Grant Clements
  • 984
  • 6
  • 14
  • thank you! Would there be a way to change the size of the point with the css? – alex9311 Mar 11 '13 at 21:36
  • 1
    I don't think it's possible using just CSS. The size of the point is defined by the radius of the circle SVG which can only be set via JavaScript. Have a look at this question, it may help: http://stackoverflow.com/questions/14255631/style-svg-circle-with-css – Grant Clements Mar 11 '13 at 23:07
  • 1
    I ended up using: sprite.setAttributes({scale: {x:1.5, y:1.5}}, true); to increase the size by 1.5x and sprite.setAttributes({scale: {x:1, y:1}}, true); to set it back to its original size – alex9311 Mar 13 '13 at 19:33