Bar Chart

Bars over a category axis, horizontal or stacked. The default choice for comparing discrete categories — output per line, downtime by reason, scrap by shift.

Reach for it when you need:

• Downtime reasons this week
• Output per line or per shift

Component name: BarChart · Category: Chart

In the palette: Bars over a category axis — toggle horizontal or stack. Bind data to a named query; click a bar to expose {{point.value}}.

Properties

Any property can be bound to a tag, another component's property, or a query.

Property	Type	Default	Description
data	array	[{"month":"Jan","revenue":120,"target":100},{"month":"Feb","… (truncated)	Array of row objects. Bind to a named query ({{query.MyQuery}}), a tag, or edit inline. Rows map to series via categoryField + seriesFields (auto-derived when empty).
categoryField	string	""	Row key for the category/name axis. Empty ⇒ first non-numeric column.
seriesFields	array	[]	Which columns become series (+ per-series color, and stack/area/renderAs where they apply). Empty ⇒ all numeric columns.
↳ seriesFields.field	string	""	Row column supplying this series' values.
↳ seriesFields.label	string	""	Legend/tooltip label (defaults to the field name).
↳ seriesFields.color	color	""	Series color (empty ⇒ chart palette / theme).
↳ seriesFields.type	enum	bar	Combo: draw this series as a bar or a line. Defaults to the chart's own type (bar). Options: bar · line.
↳ seriesFields.yAxis	object	{"index":0,"show":true,"name":""}	Bind this series to a Y-axis (own scale) + style it (title, show/hide; color follows the series). index 0 = primary. Vertical charts only.
↳ seriesFields.yAxis.index	number	0	Which Y-axis (own scale): 0 = primary/left, 1 = second/right, 2 = third/left, 3 = fourth/right.
↳ seriesFields.yAxis.show	boolean	true	Draw this axis (line/labels/title). OFF = the series keeps its OWN scale but no axis is drawn (does NOT merge into the primary — bind index 0 for that).
↳ seriesFields.yAxis.name	string	""	Axis title (empty ⇒ none).
↳ seriesFields.stack	string	""	Stack group id — bars with the SAME id stack together; different ids = separate side-by-side stacks. Empty ⇒ unstacked (unless the chart-wide stack is on).
↳ seriesFields.dataLabel	object	{"show":false,"position":"top"}	Value label for this series.
↳ seriesFields.dataLabel.show	boolean	false	—
↳ seriesFields.dataLabel.position	enum	top	Options: top · bottom · left · right · inside · outside · center.
↳ seriesFields.symbol	object	{"show":false,"symbolSize":4}	—
↳ seriesFields.symbol.show	boolean	false	Show the dots/markers (off = just a line).
↳ seriesFields.symbol.symbolSize	number	4	—
↳ seriesFields.smooth	boolean	false	—
↳ seriesFields.step	boolean	false	—
↳ seriesFields.barWidth	number	0	px (0 = auto).
↳ seriesFields.borderRadius	number	2	—
animation	boolean	true	Enable enter/update animation.
animationDuration	number	600	ms.
animationEasing	enum	cubicOut	Options: linear · cubicIn · cubicOut · cubicInOut · quadraticOut · elasticOut · bounceOut.
animationDelay	number	0	Per-datum stagger (ms).
title	object	{"show":true,"text":"","subtext":"","left":"left"}	—
↳ title.show	boolean	true	—
↳ title.text	string	""	—
↳ title.subtext	string	""	—
↳ title.left	enum	left	Options: left · center · right.
legend	object	{"show":true,"type":"plain","orient":"horizontal","left":"ce… (truncated)	—
↳ legend.show	boolean	true	—
↳ legend.type	enum	plain	Options: plain · scroll.
↳ legend.orient	enum	horizontal	Options: horizontal · vertical.
↳ legend.left	enum	center	Options: left · center · right.
↳ legend.placement	enum	bottom	Options: top · bottom.
tooltip	object	{"show":true,"trigger":"axis","axisPointerType":"line"}	—
↳ tooltip.show	boolean	true	—
↳ tooltip.trigger	enum	axis	item = per datum; axis = whole category (cartesian). Options: item · axis · none.
↳ tooltip.axisPointerType	enum	line	Options: line · shadow · cross.
colorPalette	string	""	Comma-separated series colors (e.g. #2563eb, #16a34a). Empty ⇒ theme palette.
backgroundColor	color	""	Empty ⇒ transparent/theme.
xAxis	object	{"show":true,"name":"","type":"category","min":"","max":"","… (truncated)	—
↳ xAxis.show	boolean	true	—
↳ xAxis.name	string	""	—
↳ xAxis.type	enum	category	Options: category · value · time · log.
↳ xAxis.min	number	""	Empty ⇒ auto-scale.
↳ xAxis.max	number	""	Empty ⇒ auto-scale.
↳ xAxis.splitLine	boolean	false	—
↳ xAxis.boundaryGap	boolean	false	—
↳ xAxis.inverse	boolean	false	—
↳ xAxis.rotate	number	0	Rotate axis labels (degrees).
yAxis	object	{"show":true,"name":"","type":"value","min":"","max":"","spl… (truncated)	—
↳ yAxis.show	boolean	true	—
↳ yAxis.name	string	""	—
↳ yAxis.type	enum	value	Options: category · value · time · log.
↳ yAxis.min	number	""	Empty ⇒ auto-scale.
↳ yAxis.max	number	""	Empty ⇒ auto-scale.
↳ yAxis.splitLine	boolean	true	—
↳ yAxis.scale	boolean	false	Don't force the axis to start at zero.
↳ yAxis.inverse	boolean	false	—
↳ yAxis.rotate	number	0	Rotate axis labels (degrees).
grid	object	{"left":8,"right":16,"containLabel":true}	—
↳ grid.left	number	8	—
↳ grid.right	number	16	—
↳ grid.containLabel	boolean	true	—
dataZoom	object	{"enabled":false,"type":"inside","start":0,"end":100}	—
↳ dataZoom.enabled	boolean	false	—
↳ dataZoom.type	enum	inside	Options: inside · slider · both.
↳ dataZoom.start	number	0	—
↳ dataZoom.end	number	100	—
horizontal	boolean	false	—
stack	boolean	false	—
enableClick	boolean	true	Fire the Data click event + expose lastClicked.
lastClicked	object	{}	Output (bind from this): the last-clicked datum — {{ ThisChart.lastClicked.value }}.
optionOverride	string	""	Power user: paste a raw JSON object of chart options to deep-merge over the built chart, e.g. {"series":[{"itemStyle":{"color":"#e11"}}]}. Empty = none.
emptyMessage	string	No data	—
style	style	{}	Custom CSS properties

Events

Attach event actions to these in the Event Manager.

Event	Label	Group	Payload
click	Click	Mouse	The DOM event.
dblclick	Double click	Mouse	The DOM event.
contextmenu	Right click	Mouse	The DOM event.
mouseenter	Mouse enter	Mouse	The DOM event.
mouseleave	Mouse leave	Mouse	The DOM event.
dataClick	Data click	Chart	context.point — the clicked data point.
dataDblClick	Data double click	Chart	context.point — the clicked data point.
legendSelect	Legend toggle	Chart	The toggled series.

Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.