Renderer function for ExtJS chart series

Question

I am using ExtJS series renderer function to set the fill property of scatter chart, instead of using markerConfig property. Since I want to fill different color for each points. Its working fine.

renderer : function(sprite, record, attr, index, store) {
   Ext.apply(attr, {
       fill : '#F00'
   }
}

But I want to set the type property, so that each point will show in different types like circle, cross, plus, diamond and so on. It is not working. And radius of the scatter point, I am unable to set the property in renderer function.

How do I do that in the renderer function?

Andrey Kartashov Andrey Kartashov · Accepted Answer · 2013-03-12T02:04:40

To do so you can just use these types (according to documentation):

circle - To draw circles. You can set the radius by using the radius parameter in the sprite configuration.
rect - To render rectangles. You can set the width and height of the rectangle by using the width and height parameters in the sprite configuration.
text - To render text as a sprite. You can set the font/font-size by using the font parameter.
path - The most powerful sprite type. With it you can create arbitrary shapes by using the SVG path syntax. You can find a quick tutorial on to how to get started with the path syntax here.

so for example if you need plus you can do:

renderer : function(sprite, record, attr, index, store) {
    var plus="M-1.1538461538461537,-1.1538461538461537l0,-2.3076923076923075,2.3076923076923075,0,0,2.3076923076923075,2.3076923076923075,0,0,2.3076923076923075,-2.3076923076923075,0,0,2.3076923076923075,-2.3076923076923075,0,0,-2.3076923076923075,-2.3076923076923075,0,0,-2.3076923076923075,z";
    return Ext.apply(attr, { fill: '#F00', type: 'path', path: plus });
}

Documentation link: http://www.sencha.com/learn/drawing-and-charting/

Renderer function for ExtJS chart series

1 Answers