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.
Good stuff. I do have 2 additional questions that would help it be more descriptive, however:
The previous answer does make the chart viable for users, regardless of the actualization of the above requests, so I have market it as the answer and +1'd all of your previous responses.
Hello Chris,
It is absolutely possible to place the igx-callout-layer in the stacked area series for each part, but it will require some calculation on your end, as by default, it will appear above the series if you use the “auto-callout” behavior, marking where the actual point is. This would place the callout in the shaded area above the fragment, or just in the plot area when taking into account the top fragment.
I am attaching a modified version of the sample project above to demonstrate the calculations needed to place the callouts near the middle of the stacked area fragments. I hope this helps.
Please let me know if you have any other questions or concerns on this matter.
4530.DynamicStackedChart.zip
My assumption from your first example was that the igx-callout-layer was meant to put a value into the space occupied by the stacked area chart, and that was my intent with implementation. Scenario A (stacked-line) would have been the initial projections (earlier attempt to model sales of particular Lego kits in the example) and Scenario B (stacked-area) would have been either actual sales or a projection created after doing more trend analysis (both are expected use cases within our system).
In the case of the example, I would like to see "AT-AT", "AT-AT 1st", "Avengers Tower", and "Stark's Mansion" within their respective fills in the stacked area chart.
If this is not possible, then I can mark your previous response as the answer.
Thanks again for being super helpful!
I am attaching a new sample demonstrating how you can use a data source like the one that you have provided. For whatever reason, StackBlitz tends to cause more problems than solutions on my machine, and so I tend to just provide full samples.
Moving on to your data set, I would recommend splitting your data out to two data sources, as the IgxCategoryXAxis will have 8 categories with the one you have provided. The reason for this is that it looks at each data item as its own “category” and so while the axis value may be the same (Q1, Q2, Q3, Q4), it doesn’t care as each data item is its own category. As long as the categories are the same in number and value though, you can bind multiple data sources to the same axis by binding the dataSource property of the series, which in this case, they are the same in number and in value, so this will work.
Regarding the dynamic fragment population, I have used the refreshCompleted event of the chart to ensure that the series are in the actualSeries collection of the chart and then populate them programmatically using an array of strings representing the valueMemberPaths of each. I tried to use the ngFor in the same way, but my inexperience with using ngFor is likely the reason it is not working for me at the moment. Perhaps you will have better luck there than I.
I was also a bit unsure what you wanted with the igx-callout-layer with Scenario B if you have the igx-stacked-line-series on Scenario B as well, so that is not included in the sample.
I hope this helps you. Please let me know if you have any other questions or concerns on this matter.
DynamicStackedChart.zip
As I mentioned, there will be a dynamic list, generated from 2 different scenarios for the same relative timeline. I'm not really seeing how this dynamically generates the stacked-fragment-series and callout-layer objects.
Both scenarios will always have the exact same list of products, but generally they will only include 10-40 of the 200+ products in the system.
The data looks a lot more like this:
this.data = [ { Scenario: 'A', Series: 'Star Wars (Classic)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 5, "Q2'21": 4, "Q3'21": 3, "Q4'21": 4, }, { Scenario: 'B', Series: 'Star Wars (Classic)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 7, "Q2'21": 2, "Q3'21": 6, "Q4'21": 1, }, { Scenario: 'A', Series: 'Star Wars (Disney)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 4, "Q2'21": 5, "Q3'21": 4, "Q4'21": 3, }, { Scenario: 'B', Series: 'Star Wars (Disney)', Classification: 'Vehicle', Kit: 'AT-AT Walker', "Q1'21": 3, "Q2'21": 10, "Q3'21": 2, "Q4'21": 6, }, { Scenario: 'A', Series: 'Marvel', Classification: 'Building', Kit: 'Avengers Tower', "Q1'21": 3, "Q2'21": 4, "Q3'21": 5, "Q4'21": 4, }, { Scenario: 'B', Series: 'Marvel', Classification: 'Building', Kit: 'Avengers Tower', "Q1'21": 5, "Q2'21": 7, "Q3'21": 9, "Q4'21": 7, }, { Scenario: 'A', Series: 'Marvel', Classification: 'Building', Kit: "Stark's Mansion", "Q1'21": 2, "Q2'21": 3, "Q3'21": 4, "Q4'21": 5, }, { Scenario: 'B', Series: 'Marvel', Classification: 'Building', Kit: "Stark's Mansion", "Q1'21": 4, "Q2'21": 9, "Q3'21": 5, "Q4'21": 3, } ];
Where we expect a range of time periods, so they are contained in their own array (typically we break it down to a week at a time, but quarters is fine for the purpose of demonstration).
Essentially, we'll have multiple time periods for each Series-Kit mapping in each scenario, and we would normally have close to 11 different metrics per time period. The charts will be generated per metric, filter-able by Series, Classification, or down to specific Kits across 2 scenarios.
I'm expecting to need ngFor to fill igx-stacked-line-series with Scenario A, igx-stacked-area-series with Scenario B, and igx-callout-layer with Scenario B. There's no example of that, yet.
Updated to accurate representation of filtered data for the selected metric. Please build a working example in Stackblitz from these parameters.
Thanks!