View Full Version : Question on stacked bar chart

15 Dec 2012, 9:46 AM

I am new to ExtJs and wanted to evaluate it for a chart generation need that i have in my project.

I need to generate a chart for an insurance policy consisting of various layers covered by different insurers,as shown in the attachment.What I couldn't find in stacked bar chart is the support for the following.

1.Dynamically generate a label with the InsurerName+% covered.
2.Change the bar height proportional to the coverage values in y axis (as seen in the image).
3.Embed the chart in a Div in an HTML.

Please suggest if these are supported in stacked bar chart/there is any other chart type which would support these.


17 Dec 2012, 7:47 AM
You could probably get this done, the colors may be little tough.

17 Dec 2012, 10:40 AM
Thanks for the response.

It would be great if you can give more details.I did more research on this and couldn't find anything in stacked bar chart to dynamically generate the label & to have varying bar height.

The problem with the label seems to me,is the way to access the store item name,within axis scope.

Say the below is my store.
data: [
{PolicyLayer: '10m', Insurer1: 1, Insurer2: 49, Insurer3: 25, Insurer4: 25},
{PolicyLayer: '10m Excess of 10m', Insurer1: 56, Insurer2: 4, Insurer3: 20, Insurer4: 20},
{PolicyLayer: '15m Excess of 10m', Insurer1: 42, Insurer2: 12, Insurer3: 25, Insurer4: 21},
{PolicyLayer: '20m Excess of 35m', Insurer1: 18, Insurer2: 32, Insurer3: 24, Insurer4: 26}

I am using the following axis

axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['Insurer1', 'Insurer2', 'Insurer3', 'Insurer4'],
title: false,
grid: true,
label: {
fields:['Insurer1', 'Insurer2', 'Insurer3', 'Insurer4'],
Here I wanted my label to be a concatenation of the value of the field and the field name,but didn't find anything to make a reference to the field name.

On the dynamic height of bars,I am yet to find any option to consider.

Further, is it possible to convert the char to an image without using the chart.save()?