Area and Spark Chart






This animation allows a user to select either a Sparkline or Area chart at runtime. Both charts are in fact, in the image but one of them has its opacity (transparency) set to zero which makes it invisible. There is a shape on the right hand side that makes use of a morph transition to change into an indicator path. Additionally, the color of the shape can also be set at runtime.

An API call is used to set the image data based on the selections in the various drop downs.