Bar Chart

Updated:

Visually compare data at a glance.

Chart Data

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

You may also set a color property to override the default color.

Data Structure

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

Example

const chart = document.querySelector("q2-chart-bar");
chart.data = [
    {
        value: 1048,
        name: 'March',
        id: 'march',
        color: 'green'
    },
    {
        value: 580,
        name: 'April',
        id: 'april',
    },
    {
        value: 735,
        name: 'May',
        id: 'may',
    },
    {
        value: 465,
        name: 'June',
        id: 'june',
        color: 'var(--const-stoplight-warning)',
    },
    {
        value: 927,
        name: 'July',
        id: 'july',
    },
]

Customizing Colors

By default, the q2-chart-bar uses the theme's primary color for the bars. You can override this for the entire chart using the color property on the component. You can also set the colors of the individual bars by setting the color property on the data object.

You may either reference a CSS variable from the theme's palette or use a traditional color value.

Example

const chart = document.querySelector("q2-chart-bar");
chart.data = [
    {
        value: 1048,
        name: 'March',
        id: 'march',
        color: 'green'
    },
    {
        value: 580,
        name: 'April',
        id: 'april',
        color: '#ff0000'
    },
    {
        value: 735,
        name: 'May',
        id: 'may',
    },
    {
        value: 465,
        name: 'June',
        id: 'june',
        color: 'var(--const-stoplight-warning)',
    },
    {
        value: 927,
        name: 'July',
        id: 'july',
    },
]

Properties

The q2-chart-bar 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.

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.

color

Controls the color of all bars in the chart. Can be overridden at the individual data point level. Accept variables, hex codes, an CSS color names.

Examples:

element.areaColor = "#ff0000";
element.areaColor = "papayawhip";
element.areaColor = "var(--t-accent-1)";
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)

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 };
hideBarLabels
hide-bar-labels

Controls visibility of labels on the name axis.

hideValueAxisLabels
hide-value-axis-labels

Controls visibility of labels on the value axis.

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.

orientation

Controls which axes are the value and name axes. When vertical, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart. When horizontal, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.

showChartName
show-chart-name

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

sort

By default, the sorting of the bars on the chart is controlled by the order the values are in the data array. When set to true, values on the bar will be re-sorted in descending order.

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-barcomponent.

No results