Q2 Chart Area

Controls alignment of chart name when visible.

Type

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

Example

element.alignChartName = "center";

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

Examples

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

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

Example

element.chartName = "Weekly spending";

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 when the truncate option is used.

Type

type dataNamesOverflow = "break" | "truncate";

Example

element.dataNamesOverflow = "truncate";

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

Example

element.dataNamesWidth = 75;

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

Type

type format = "default" | "currency";

Example

element.format = "currency";

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";

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

Type

type gridLines = "horizontal" | "vertical" | "off";

Example

element.gridLines = "vertical";

Controls visibility of labels on the name axis.

Example

element.hideNameAxisLabels = true;

Controls visibility of labels on the value axis.

Example

element.hideValueAxisLabels = true;

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

Examples

element.lineColor = "#ff0000";
element.lineColor = "papayawhip";
element.lineColor = "var(--t-accent-1)";

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;

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;

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

Examples

element.pointerLineColor = "#ff0000";
element.pointerLineColor = "papayawhip";
element.pointerLineColor = "var(--t-accent-1)";

type FormatValues = "default" | "currency";

Example

element.format = "currency";

Controls style of vertical pointer line on chart.

Type

type pointerLineStyle = "solid" | "dashed";

Example

element.pointerLineStyle = "dashed";

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

Example

element.showChartName = "true";

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

Example

element.showDatapointLabels = "true";

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

Example

element.showGradient = "true";

Emitted when the pointer line is aligned with a data point on the chart. Returns index and data item from passed data array.

Type

type ChangeEvent = CustomEvent<{
  index: number;
  data: Data
}>;

Example

element.onchange = (event) => {
  console.log(`The pointer line and data point is aligned with ${event.detail.data.name} with the value of ${event.detail.data.value}. This data item is in position ${event.detail.index} of the data array.`);
}