Area Chart

Updated:

Visually presents data in a linear format.

Chart Data

The chart data is an array of objects that are set on the data property of the q2-chart-area component. Each object must have an id, name, and value property.

Data Structure

type Data = { 
  id: string; 
  value: number; 
  name: string;
};

Example

const chart = document.querySelector("q2-chart-area");
chart.data = [
  {
    value: 45,
    name: 'Sun',
    id: 'sunday',
  },
  {
    value: 36,
    name: 'Mon',
    id: 'monday',
  },
  {
    value: 62,
    name: 'Tue',
    id: 'tuesday',
  },
  {
    value: 51,
    name: 'Wed',
    id: 'wednesday',
  },
  {
    value: 104,
    name: 'Thu',
    id: 'thursday',
  },
  {
    value: 122,
    name: 'Fri',
    id: 'friday',
  },
  {
    value: 215,
    name: 'Sat',
    id: 'saturday',
  }
]

Properties

The q2-chart-area element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.

Learn more about properties.

alignChartName
align-chart-name

Controls alignment of the chart name when its visible.

areaColor
area-color

Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.

Examples:

element.areaColor = "#ff0000";
element.areaColor = "papayawhip";
element.areaColor = "var(--t-accent-1)";
chartName
chart-name

The title of the chart. We recommend always including this for accessibility purposes.

It is hidden by default, but can be made visible with the showChartName variable.

Localizable
chartSubTitle
chart-sub-title

A subtitile to the chart name. Often used to provide a brief description of what the data represents.

data

An array of objects that contain the data to be displayed.

dataNamesOverflow
data-names-overflow

Allows control of how labels on the name axis will be handled if the text length is wider than the available space. Values will ellipsize if the truncate option is used.

dataNamesWidth
data-names-width

Sets width available for labels on the name axis. It can be used in coordination with dataNamesOverflow to control where the label text breaks or truncates.

format

Controls whether values on the value axis are shown as numbers or as currency.

formatModifier
format-modifier

Can be used in coordination with the currency format property to control decimal handling. Accepts Ndec where N is a number. (e.g. 2dec)

gridLines
grid-lines

Controls the direction or viibility of grid lines on the chart.

gridPadding
grid-padding

Sets chart padding around the grid. Each value in the object will be interpreted as pixels.

Example:

chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };
hideNameAxisLabels
hide-name-axis-labels

Controls visibility of labels on the name axis.

hideValueAxisLabels
hide-value-axis-labels

Controls visibility of labels on the value axis.

lineColor
line-color

Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.

Examples:

element.areaColor = "#ff0000";
element.areaColor = "papayawhip";
element.areaColor = "var(--t-accent-1)";
offsetDataNames
offset-data-names

Controls the position of text on the names axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.

offsetDataValues
offset-data-values

Controls the position of text on the values axis by centering the text to the bar at a 45° angle. Can be used when space is limited or with longer name labels.

pointerLineColor
pointer-line-color

Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.

Examples:

element.areaColor = "#ff0000";
element.areaColor = "papayawhip";
element.areaColor = "var(--t-accent-1)";
pointerLineStyle
pointer-line-style

Controls the style of the vertical poiner line.

showChartName
show-chart-name

Controls the visibility of the chart name at the top of the chart.

showDatapointLabels
show-datapoint-labels

Controls the visibility of a value label when a data point is shown on the chart.

showGradient
show-gradient

Controls making the area fill color into a gradient. The gradient starts at the top with the areaColor value, and fades to white.

Events

The q2-chart-area element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

change

Emitted when a data point is clicked.

Event Detail Type signature

{ index: number; data: IChartData; }

Methods

The q2-chart-area element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

hoverDataPoint

Test only

A method to fire change event on hover on a point.

Type signature

hoverDataPoint(index: number) => Promise<void>

Release Notes

Initial Release

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

The following CSS variables are available to override the default theme styles of the q2-chart-areacomponent.

No results