stacked column graph questions | Infragistics Forums

stacked column graph questions

Luca Rossi posted over 6 years ago

Hi,

I'm using a stacked column graph, and i'd have some questions:

1-How can I have a legend for all the stacked fragment of the column?

2-Can I have a line series too with the stacked column?

3-Is it possible to have the value of the fragment in the tooltip?

4-Can I activate the graph transition?

Top Replies

16310

Offline Hristo Anastasov posted over 6 years ago +1
Hello Luca, Please find answers to your questions below: How can I have a legend for all the stacked fragment of the column? You just need to...view reply »

16310

Offline Hristo Anastasov posted over 6 years ago in reply to Zdravko Kolev

Regarding animation of the stacked series:

The igDataChart does not support transition-in animations when using StackSeries. However, you should be able to still animate the series by plotting data items with 0 values and when the chart is loaded you can change these data items to their final values. You will need to set transitionDuration option on the stacked series:
https://www.igniteui.com/help/api/2018.1/ui.igDataChart#options:series.transitionDuration
Note that we also have transitionInDuration which does not work with stacked series.

Altenativly, you could overlap multiple ColumnSeries in igCategoryChart by setting the xAxisOverlap to 1.0 value. However, you will also need to do something like this:
var data = [
{ Population: 150, GDP: 40, Density: 30, Country: "Japan" },
{ Population: 80, GDP: 50, Density: 50, Country: "Germany" },
};
// modifying data source by stacking values
for (var item in data) {
// stacking up values of data items
item.StackPopulation = item.GDP + item.Density + item.Population;
item.StackDensity = item.GDP + item.Density;
item.StackGDP = item.GDP;
}
// category chart does not have stacked series yet but you can render the stacked chart
// using multiple columns that are overlapping with each other and showing stacked values
$(".chart").igCategoryChart("option", "xAxisOverlap", 1.0);
// including only properties that contain stack values
$(".chart").igCategoryChart("option", "includedProperties", [
"StackPopulation",
"StackDensity",
"StackGDP",
"Country"
]);
Cancel
Reply

Cancel
20255

Offline Zdravko Kolev posted over 6 years ago in reply to Luca Rossi

Hello Luca,

Could you please update the provided sample by Hristo and provide a better explanation what exactly is not working

This would be highly appreciated.
Cancel
Reply

Cancel

Offline Luca Rossi posted over 6 years ago in reply to Hristo Anastasov

No sorry it doesn't work.

This is my code

series: [{
                name: "parent",
                xAxis: asseX,
                yAxis: asseY,
                type: "stackedColumn",
                outline: "transparent",
                radius: 0,
                //legend: { element: id + "Legend", type: "legend" },
                series: [{
                    name: "serief1",
                    title: asseY,
                    type: "stackedFragment",
                    showTooltip: true,
                    tooltipShowing: function (evt, ui) {
                        ui.element[0].innerText = ui.item[ui.series.valueMemberPath];
                    },
                    //tooltipTemplate: asseY,
                    valueMemberPath: asseY,
                },
                ................

16310

Offline Hristo Anastasov posted over 6 years ago in reply to Luca Rossi

Hi Luca,

Please use the following altered code for the tooltipShowing event:

tooltipShowing: function (evt, ui) {
ui.element[0].innerText = ui.item[ui.series.valueMemberPath];
},

This will populate the tooltip element with the corresponding value. Of course you can enrich the tooltip dom element as you wish.

Regarding the animation - I am discussing this with the chart developers team to figure out If this is possible for the stacked series and will keep you posted with out findings.

Hristo
Cancel
Reply

Cancel
70

Offline Luca Rossi posted over 6 years ago in reply to Hristo Anastasov

Ok thank you. Legend and Line series works.

Tooltip doesn't work. Tooltip it's empty.

For my forth questions i mean the animation of the graph. When the page load all the bar of a standard datachart start from 0 value and grow to own value. With stacked graph is there this animation?
Cancel
Reply

Cancel