Q2 Chart Bar

Updated:: 2/2/2023

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.

Property	Attribute	Type	Default	Description
`alignChartName`	`align-chart-name`	`string`	`left`	Controls alignment of chart name when visible. Type `type alignChartName = "left" \| "center" \| "right";` Example `element.alignChartName = "center";`
`chartName`	`chart-name`	`string` Localizable		Name of the chart. Hidden by default, but can be made visible with the `showChartName` property. Example `element.chartName = "Month-to-month spending";`
`color`	`color`	`string`	`var(--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)";`
`dataNamesOverflow`	`data-names-overflow`	`string`		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";`
`dataNamesWidth`	`data-names-width`	`number`	`50`	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;`
`format`	`format`	`string`	`default`	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";`
`formatModifier`	`format-modifier`	`string`		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";`
`hideBarLabels`	`hide-bar-labels`	`boolean`	`false`	Controls visibility of values shown at the top of each bar. Example `element.hideBarLabels = true;`
`hideValueAxisLabels`	`hide-value-axis-labels`	`boolean`	`false`	Controls visibility of labels on the value axis. Example `element.hideValueAxisLabels = true;`
`offsetDataNames`	`offset-data-names`	`boolean`	`false`	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;`
`offsetDataValues`	`offset-data-values`	`boolean`	`false`	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;`
`orientation`	`orientation`	`string`	`vertical`	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";`
`showChartName`	`show-chart-name`	`boolean`	`false`	Controls visibility of the chart name at the top of the chart. Example `element.showChartName = "true";`
`sort`	`sort`	`boolean`	`false`	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.