Angular Chart Configuration
The Chart is a highly customizable component that you can configure in multiple ways to suit different development scenarios. Configure the Chart with two primary approaches for its appearance and behavior, or combine them for maximum flexibility.
You can configure the Chart with:
- Configuration objects—Pass plain JavaScript objects to Chart properties for a compact, data-driven representation.
- Built-in components—Use Angular components like
<kendo-chart-series>as nested tags in Chart templates.
The following table compares the two configuration approaches to help you choose the right method for your scenario.
| Aspect | Configuration objects | Built-in components |
|---|---|---|
| Pros |
|
|
| Cons |
|
|
| When to use |
|
|
Use Configuration Objects
Configure the Chart by passing configuration objects to its input properties.
<kendo-chart [series]="series" [title]="title" [legend]="legend"></kendo-chart>The following example demonstrates a comprehensive configuration with objects. This chart displays regional sales performance with complete styling and formatting.
This approach provides a compact, data-driven representation. It is ideal when you load chart settings from a remote server or when you need to persist and restore them. For more details, see the Load Settings from Server and Persist and Restore Settings sections.
Advantages of configuration objects include:
- Configuration can be saved to and loaded from JSON format.
- Large configurations are easier to manage in TypeScript than in templates.
- Settings can be loaded from external sources like databases or APIs.
- Chart state can be saved and restored across sessions.
Use Built-in Components
Built-in components enable you to configure the Chart declaratively with Angular components nested within the <kendo-chart> tag.
<kendo-chart>
<kendo-chart-title text="Sample Chart"></kendo-chart-title>
<kendo-chart-legend position="top"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item type="line" [data]="[1, 2, 3, 4, 5]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>The following example demonstrates a comprehensive configuration with built-in components. This chart displays regional sales performance with the same styling and formatting as the configuration objects example.
This approach provides a declarative, type-safe representation that is ideal for scenarios where template visibility and IDE support are important.
Advantages of built-in components include:
- Configuration is visible and organized in the template.
- Angular provides compile-time type checking for component inputs.
- Better autocomplete and inline documentation in template files.
- Seamlessly use Angular features like structural directives and data binding.
Mixed Configuration
Mixed configuration enables you to combine configuration objects and built-in components in the same Chart, balancing compact representation with declarative clarity.
Both configuration objects and built-in nested components update the same internal store. When you configure a property with both approaches, the component takes precedence over the configuration object.
<kendo-chart [title]="title" [legend]="legend">
<kendo-chart-series>
<kendo-chart-series-item type="line" [data]="[1, 2, 3, 4, 5]">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>The following example demonstrates combining both approaches effectively. Global settings like title and legend use configuration objects, while series configuration uses built-in components.
This approach is ideal when you want to use configuration objects for global settings (title, legend, tooltip) and components for series-specific settings that benefit from template flexibility.
Advantages of mixed configuration include:
- Balance between compactness and declarative clarity.
- Use configuration objects for settings that are easier to manage in TypeScript.
- Use built-in components for settings that benefit from template visibility and Angular features.
Load Settings from Server
With configuration objects, you can load complete chart settings from a server and apply them directly to the Chart. This approach is ideal when you need to persist, share, or dynamically load chart configurations.
The following example demonstrates how to load chart settings from a mock server service. Click the Load Configuration button to fetch the settings and apply them to the Chart.
This approach is ideal when you need to:
- Save user customizations to a database.
- Load predefined chart templates from a configuration store.
- Support configuration export/import functionality.
Persist and Restore Settings
You can persist the Chart configuration by serializing the configuration objects to JSON. Later, restore them by parsing the JSON back into JavaScript objects. This is useful when you save user preferences or persist chart settings across sessions.
The following example demonstrates how to persist and restore the Chart configuration.
This approach is ideal when you need to:
- Save user customizations across sessions.
- Share configurations between different charts or applications.
- Persist Chart settings across user sessions.