Line chart
Line charts visualize trends over time or categories.
Demo
API
Tag
| Name | Description |
|---|---|
<aui-line-chart>
|
Custom HTML tag |
Attributes
| Name | Value | Required | Description |
|---|---|---|---|
data |
Chart.js line chart data (object or JSON string) |
|
Labels and datasets for the line chart. |
size |
small | medium | large |
Controls size and level of detail in chart. Smaller sizes show a simplified interface. |
|
charttitle |
String |
Bold title displayed above the chart border, aligned left. |
|
subtitle |
String |
Subtitle displayed above the chart border, aligned right. |
|
chartlabel |
String |
ARIA label for the chart. Defaults to the localized "Line chart" when not provided. |
|
nodatamessage |
String |
Message to show in the empty state. Defaults to "Your chart appears here once there's data". |
|
colors |
String[] | String |
Array (or JSON string) of colors/gradients applied per dataset. Falls back to the default teal gradient palette. Accepted values are defined in Colors. |
|
legendsublabels |
String[] | String |
Array (or JSON string) of sublabels for each dataset in the custom legend. |
Properties
| Name | Value | Required | Description |
|---|---|---|---|
data |
Chart.js line chart data |
|
Labels and datasets for the line chart. |
size |
small | medium | large |
Controls size and level of detail in chart. Smaller sizes show a simplified interface. |
|
chartTitle |
String |
Bold title displayed above the chart border, aligned left. |
|
subtitle |
String |
Subtitle displayed above the chart border, aligned right. |
|
chartLabel |
String |
ARIA label for the chart. Defaults to "Line chart" when not provided. |
|
noDataMessage |
String |
Message to show in the empty state. Defaults to "Your chart appears here once there's data". |
|
colors |
String[] | String |
Array (or JSON string) of colors/gradients applied per dataset. Falls back to the default teal gradient palette. Accepted values are defined in Colors. |
|
legendSubLabels |
String[] | String |
Array (or JSON string) of sublabels for each dataset in the custom legend. |
Demo
Tag
| Name |
|---|
<AuiLineChart>
|
Props
| Name | Value | Required | Description |
|---|---|---|---|
data |
Chart.js line chart data |
|
Labels and datasets for the line chart. |
size |
small | medium | large |
Controls size and level of detail in chart. Smaller sizes show a simplified interface. |
|
chartTitle |
String |
Bold title displayed above the chart border, aligned left. |
|
subtitle |
String |
Subtitle displayed above the chart border, aligned right. |
|
chartLabel |
String |
ARIA label for the chart. Defaults to "Line chart" when not provided. |
|
noDataMessage |
String |
Message to show in the empty state. Defaults to "Your chart appears here once there's data". |
|
colors |
String[] | String |
Array (or JSON string) of colors/gradients applied per dataset. Falls back to the default teal gradient palette. Accepted values are defined in Colors. |
|
legendSubLabels |
String[] | String |
Array (or JSON string) of sublabels for each dataset in the custom legend. |