Question

I’m creating an area chart using ExtJS 4.1 and everything is rendering fine.

I have two areas and currently one area appears on top of another.
Instead of that behavior, how do I superimpose all the areas? I can change the opacity so that all areas are visible.

The examples given in the API documentation and several online sources show the stacked behavior only. Is that the default and only implementation of the area charts, or am I missing a simple configuration?

As seen in Area Charts Example, instead of all colored areas appearing one after another, I want them all in a single plane.

Kindly provide your inputs and suggestions.

Answer 1

This can be done using creating additional series instead of a single area series with an array of data points in y axis. Got the answer from Sencha forums.

series: [
  {
    type: 'area',
    highlight: false,
    axis: 'left',
    xField: 'name',
    yField: ['data1'],
    style: {
        opacity: 0.50
    }
},
  {
    type: 'area',
    highlight: false,
    axis: 'left',
    xField: 'name',
    yField: ['data2'],
    style: {
        opacity: 0.70
    }
}