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?
Hello Luca,
Please find answers to your questions below:
You just need to set the legend property for the parent series:
series: [{ name: "parent", legend: { element: "legend" }, series: [{ …
Yes, you can render both line and stacked series on the same chart.
You can read the value of the current fragment in the tooltipShowing event:
tooltipShowing: function (evt, ui) { console.log(ui.item[ui.series.name]); },
I do not understand what you mean, please provide more details around your requirement.
I am attaching a sample that is demonstrating the suggested solutions. Please let me know if you have further questions, I will be glad to help.
stacked.zip
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?
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
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, }, ................
Could you please update the provided sample by Hristo and provide a better explanation what exactly is not working
This would be highly appreciated.
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.transitionDurationNote 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 itemsitem.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"]);