Silvi
Create(opens in a new tab)

BarsWithLine

PreviousNext

A count as bars and a rate as a line on one chart, on two axes that share zero.

<k.BarsWithLine> draws one column as bars and another as a line. Use it for a volume and a rate that belong together: orders as bars, the return rate as a line. The two axes share their zero. When the two are not a count and its rate, separate draws the line in its own plot under the bars.

Example

Orders and returns

Jan 2026Feb 2026Mar 2026Apr 202601002003004005000%2%4%6%8%10%
Orders
Return rate

Props

Also key, description, span (default 1) and info: see Props every component takes.

Name Type Required Default Meaning
series query name yes The query the rows come from
x column yes The column along the x axis
bar column yes The column drawn as bars
line column yes The column drawn as a line
title text yes The heading
labels {column: label} no the column names The legend’s words for bar and line
xFormat month, period or week no as written How x prints, as on line
metric metric name no A named metric’s format
tooltip {column: label} or {column: {label, format, decimals}} no Extra rows in the hover
height height class no h-64 The chart’s height; h-72 for about 25 categories
dashed true/false no false The line is dashed: a projection beside measured bars
lineAxis right or left no right left draws the line on the bars’ axis, in the bars’ unit
lineFormat percent or number no percent The line is a rate, or a plain number
legend true/false no true false hides the legend
yDomain [min, max] no from zero The bars’ axis range
lineDomain [min, max] no from zero The line’s axis range
split column no Small multiples: one panel per value, on shared scales
separate true/false no false The line in its own plot under the bars, each captioned by its label
barLabels true/false no false Prints each bar’s value
lineLabels true/false no false Prints each point’s value

Checks

A series that is not one of the report’s queries, or a column it names that the query’s rows do not have, fails the typecheck, as does a missing required prop or a value of the wrong type.