I am on latest Angular 12 (12.2.9) and IG (12.2.5).
There is an example of a Composite/Combo Chart, but with no access to how the example was accomplished. I have downloaded the complete examples package and there are no charts at all. There is no example code listed on the Composite/Combo Chart page, either.
Please provide a sample that demonstrates combining a stacked Area Chart and a stacked Line Chart:
Example: Lego kit sales projections
In Q4'21 Projections, Lego Star Wars Vehicle AT-AT might have 5,446 sales for 03/22 and in Q1'23 Projections, it might have 4,885. I would expect to see a Line segment between the 4,750 and 5,000 points and an Area filled just under the 5,500 point in the same color.
Also, I would love to be able to see the product name (ex: AT-AT) in the region of the shaded area fragment.
I was able to figure that part out. My issue now is in attempting to integrate the way I need to in my application.
I need to generate a data grid in one tab, immediately after data is available, and generate the chart in another tab on-demand (data will change so chart should be generated each time the chart tab is navigated to).
For whatever reason, the sample project won't load, even expanding the base memory use up to 25gb, which is strange since my app (far larger and with much more functionality) can run properly with only 12gb allocated. I have attached it below.
The sample includes a button in the Chart tab that won't be there in the final product: it should load when the tab is selected.
8765.DynamicStackedChart.zip
Hello Chris,
I am attaching a modified version of the sample project that you have provided that demonstrates what I had meant above.
Since your data source is not actually changing, this makes it difficult to perceive that anything has actually changed, and so I added a switch between the original data source from this forum thread and yours. It will switch with each button click, but since your “designs” schema is different from the original data source, you will notice that the chart will be blank. The “Date” property in the old data source still exists though, so while nothing will be plotted, you will be able to observe the X-Axis changing.
I hope this helps. Please let me know if you have any other questions or concerns on this matter.
4118.DynamicStackedChart.zip
The style of the series will remain the same, but the data should be flushed each time the user recalculates the scenario data.
I'm not finding the clear function you mentioned, and I've tried it against the series components and the fragment components with a resultant build error that it doesn't exist. Can you provide and example or update the example?
I have been investigating into the sample project you have provided, and you are correct that you should not modify the actualSeries collection manually. As I understand it, the actualSeries collection is there to represent the series that have been added to the chart through the HTML markup of the chart, and these cannot be removed as far as I can see. The series collection on the other hand, represents the series that have been added manually. If you do not plan on reusing the series that have been placed in markup, the best thing I would recommend is that you initially add series to the series collection of the chart in code, rather than adding them in HTML markup.
In the case of your sample project though, it looks like you are intending to reuse the IgxStackedAreaSeriesComponent and the IgxStackedLineSeriesComponent, as your populateChart() method is getting them from the actualSeries collection. If this is the case, you should simply clear the fragments of those by calling the clear method on their series collection, as this is where the fragments are stored.
Please let me know if you have any other questions or concerns on this matter.
I can't figure out how to empty the actualSeries for when the parameterData is recreated.
The data that should be in the chart is dynamic, meaning that when someone hits the "calculate" button (builds parameterData), it should replace the data in the chart, but at present it's adding to it.
The documentation for IgxDataChartComponent says not to directly modify the actualSeries. What is the function that will reset it to its original state?
I'm attaching a zipped version of what I'm looking at (click the "Load Data" button multiple times to see my dilemma).
1122.DynamicStackedChart.zip