Animated Line Chart
Usage
Animated line charts display data trends over time with smooth animations. Supports up to 3 data series with customizable colors and styles.
YAML Export
1. Copy the YAML from the component view.
2. Paste it into your Canvas app.
3. Bind data values to your data source (collection or variables).
Data Format
- X-axis labels: Comma-separated labels (e.g., "Jan,Feb,Mar,Apr")
- Data values: Comma-separated numbers (e.g., "10,20,15,25,30")
- Multiple series: Each series has its own name, values, and color
Examples
Single Series Chart
ChartContainer:
As: container
Width: 400
Height: 300
ChartTitle:
As: label
Text: "Sales Overview"
FontSize: 16
FontWeight: FontWeight.Semibold
// Chart visualization using Gallery or custom SVG
With Data Binding
ChartData:
As: gallery
Items: MyDataCollection
TemplateSize: 1
// Map Items to chart points
Animation
- Line drawing: Animated stroke-dashoffset effect
- Points: Fade and scale animation
- Duration: Configurable (300-2000ms)
- Easing: Linear, EaseOut, or Bounce
Color Modes
- Default colors: Predefined chart colors
- Custom colors: Set colors for each series
- Theme Tokens: Use theme tokens for consistent styling (Pro feature)
Export Modes
- Safe: Basic chart structure with data.
- Advanced: Includes animations, area fills, advanced styling, and theme token support (Pro feature).
Notes
- Charts are visual previews; actual Canvas implementation may require Gallery controls or custom SVG
- Animation effects are best achieved with Power Apps transitions or custom code
- For production, consider using Power BI embedded visuals for complex charts