## StateChart
```handlebars
```
`` is a renderless component that eases rendering of different states
from within templates using XState State Machine and Statechart objects.
### Arguments
| Argument/Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `chart` | `object` | | An xstate statechart/state machine object |
| `initial` | `String` | The initial value of the state chart itself | The initial state of the machine/chart (defaults to whatever is defined on the object itself) |
The component currently yields 3 conextual components:
- ``: Used for rendering matching certain states ([also see State Component](../state/README.mdx))
- ``: Used to wire together ember actions to xstate actions.
- ``: Used to wire together ember actions or props to xstate guards.
and 2 further objects:
- `dispatch`: An action to dispatch an xstate event
- `state`: The state object itself for usage in the `state-matches` helper
### Example
```handlebars
Currently Idle
Currently Loading
Idle and loading
```
### See
- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)
---