ExtJS - Stacked Bar Chart

4
votes

How to offset the items in a stacked bar chart for any given bar?

Bar 1: 4 items (150,290,200,50)
Bar 2: only 2 items (--, --, 240,45)

I want to start the item with value 240 at a given offset instead of starting at 0 ( ex: I want to start it at 600 and show 240 from there). From 0 to 600, it will be blank/white space.

I can post my example code if that's of any help.

Thank you.

2
javascriptextjsextjs4extjs-chart

2 Answers

2
votes

There is no straight forward settings to do this. You will have to override the renderer and provide your custom styling to achieve the offset effect. The Ext.chart.series.Series does have a renderer method.

The method takes five parameters:

  1. sprite - A class with all sprite information.
  2. record - The current record being rendered.
  3. attributes - Attributes used of the drawing.
  4. index - index of the record being processed.
  5. store - store used for the chart.

You need to check if your record contains a null value. If so, you need to modify the attributes object with appropriate values and return it back. You can view the default renderer method from the source code. 

renderer: function(sprite,record,attributes,index,store) {
    //Modify the attributes object according to your needs 
    return attributes;
},

But I couldn't come up with a correct logic to modify the drawing values stored in attributes class.

1
votes

The record argument of the renderer function tells you which record is being rendered.