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.
Hello Chris,
I am attaching a sample project containing the Composite Chart sample from the documentation article that you provided. Normally there is a code viewer for the sample, but at the time of writing this, it appears that it is not working correctly.
Regarding your actual example that you listed, the sample I am attaching also has a mockup of how you can achieve that with an IgxStackedAreaSeries. The stacked area series can draw a line along the top by using the outline and thickness properties to determine the color and thickness of the line, respectively.
Regarding seeing the product name in the region of the shaded fragment, this can done like in the top-chart in the sample project using the callout layer demonstrated there.
I hope this helps. Please let me know if you have any other questions or concerns on this matter.
AngularCompChart.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!