Current section

Files

Jump to
noora docs components chartaxis.md
Raw

docs/components/chartaxis.md

<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->
# ChartAxis
Describes one declarative chart axis.
```html
<noora-chart-axis dimension="x" type="category"><noora-chart-category>Monday</noora-chart-category></noora-chart-axis>
```
## Attributes
| Attribute | Type or allowed values | Default | Description |
| --- | --- | --- | --- |
| `dimension` | `x`, `y` | `"x"` | Chooses the horizontal or vertical axis. |
| `type` | `category`, `value` | `"value"` | Chooses a categorical or numeric axis. |
| `min` | `number` | None | Sets the minimum numeric value. |
| `max` | `number` | None | Sets the maximum numeric value. |
| `label-format` | `string` | None | Formats axis labels using an Apache ECharts value template. |
| `label-size` | `number` | None | Sets the axis-label font size. |
| `label-margin` | `number` | None | Sets the distance between labels and the axis. |
| `hidden` | `boolean` | `false` | Hides the complete axis. |
| `hide-line` | `boolean` | `false` | Hides the axis line. |
| `hide-ticks` | `boolean` | `false` | Hides axis tick marks. |
| `dashed-grid` | `boolean` | `false` | Uses dashed split lines. |
| `no-boundary-gap` | `boolean` | `false` | Removes the category-axis boundary gap. |
## Slots
| Slot | Description |
| --- | --- |
| `default` | Declarative noora-chart-category children. |
Use this element inside noora-chart.
## Axis
Describe a categorical horizontal axis.
```html
<noora-chart-axis dimension="x" type="category"><noora-chart-category>Monday</noora-chart-category></noora-chart-axis>
```