Q2 Chart Bar

Updated:

Documentation

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',
    },
]

Attributes API

The q2-chart-bar element has several properties that support text localization. Those properties are indicated by the localizable badge below.

PropertyAttributeTypeDefaultDescription
alignChartNamealign-chart-namestringleft

Controls alignment of chart name when visible.

Type

type alignChartName = "left" | "center" | "right";

Example

element.alignChartName = "center";
chartNamechart-namestring
Localizable

Name of the chart. Hidden by default, but can be made visible with the showChartName property.

Example

element.chartName = "Month-to-month spending";
colorcolorstringvar(--t-primary)

Controls color of all bars in chart. Can be overridden at individual data point level. Accepts variables, hex. and CSS color names.

Examples

element.color = "#ff0000";
element.color = "papayawhip";
element.color = "var(--t-accent-1)";
dataNamesOverflowdata-names-overflowstring

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

Type

type dataNamesOverflow = "break" | "truncate";

Example

element.dataNamesOverflow = "truncate";
dataNamesWidthdata-names-widthnumber50

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

Example

element.dataNamesWidth = 75;
formatformatstringdefault

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

Type

type format = "default" | "currency";

Example

element.format = "currency";
formatModifierformat-modifierstring

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

Example

element.formatModifier = "2dec";
hideBarLabelshide-bar-labelsbooleanfalse

Controls visibility of values shown at the top of each bar.

Example

element.hideBarLabels = true;
hideValueAxisLabelshide-value-axis-labelsbooleanfalse

Controls visibility of labels on the value axis.

Example

element.hideValueAxisLabels = true;
offsetDataNamesoffset-data-namesbooleanfalse

Controls position of text on the names axis. When true, will center text to bar on a 45° angle. Can be used when space is limited or with longer name labels.

Example

element.offsetDataNames = true;
offsetDataValuesoffset-data-valuesbooleanfalse

Controls position of text on the values axis. When true, will center text to bar on a 45° angle. Can be used when space is limited or with longer name labels.

Example

element.offsetDataValues = true;
orientationorientationstringvertical

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.

Type

type orientation = "vertical" | "horizontal";

Example

element.orientation = "vertical";
showChartNameshow-chart-namebooleanfalse

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

Example

element.showChartName = "true";
sortsortbooleanfalse

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.

Example

element.sort = true;

The lists below contain references to all the CSS variables available for use in the q2-chart-bar component.

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

    The following CSS variables are used by the q2-chart-bar component and available for theming.