Line Chart visualizes relationships or trends in data.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Y-Axis Value |
Text label that represents the output measured on the y-axis, influenced by the independent variable on the x-axis. |
No |
|
2. Y-Axis Label |
Concise title, in a few words, that clearly states the subject of the chart (e.g. No. of deployments), which represents the y-axis values. |
No |
|
3. X-Axis Value |
Text label that represents an independent variable on the x-axis (like month, week, or day). |
No |
|
4. Hover indicator |
Vertical line and circular target(s) that appear on hover of a data point. |
No |
|
5. Dotted line |
Visual anchor to help identify the position of individual data points between axes. |
No |
|
6. Legend |
Visual key to explain which type of data that each colored data line represents. |
Yes |
|
7. Data line |
Line that represents the mapped data points. |
No |
|
8. Tooltip |
Tooltip that appears on hover of a data point to provide additional information. |
Yes |
|
9. X-Axis line |
Horizontal line that represents x-axis. |
No |
|
10. X-Axis Label |
Concise title, in a few words, that represents the x-axis values. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| state Variant | rest | hover | rest |
| ✏️ titleText Text | string | No. of deployments |
| showHideX-AxisLabel Boolean | true | false | false |
| ✏️ x-AxisLabel Text | string | Week starting |
| showHideLegend Variant | false | true | false |
Related components
Help and support