Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
935
How do I create a composite chart?
posted

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:

  • compares 2 scenarios
  • contains equivalent attributes between the 2 scenarios
  • allows dynamically allocating series between the 2 styles of chart by product family and type

Example: Lego kit sales projections

  • Scenarios (groups of projected sales):
    • Q4'21 Projections (from 09/21-09/22)
    • Q1'22 Projections (from 01/22-01/23)
  • Series (product family):
    • Star Wars
    • Marvel Universe
  • Classification (product type):
    • Vehicles
    • Buildings
  • Kits (products):
    • Star Wars: Vehicles: AT-AT
    • Star Wars: Vehicles: First Order AT-AT
    • Marvel Universe: Buildings: Avengers Tower
    • Marvel Universe: Buildings: Tony Stark's Mansion
  • X-Axis: Sales periods by Month/Year
  • Y-Axis: Sales numbers by thousands (250 increments?)

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.

Parents
No Data
Reply
  • 34810
    Offline posted

    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

Children