Scale break

Part of the scale shown smaller, so the small values have room next to a very large one.

Which charts

If one value is much larger than the others, the other bars are very short. Add a break: part of the scale is then shown smaller, and the small values get more room. The bars that run through the break are cut, so you can see they are not to scale there. Every bar shows its number.

A break works on column, bar and waterfall charts. With several bars per row, each bar is cut, and a stack is cut as a whole. On a line or area chart a break would cut through nothing, so there, and on a donut, it is left out, and the console says so. A chart with values below zero cannot have a break either.

Column

The break is a span with data-annotation="axis-break", in a div with the class chart-annotations inside the chart. data-from="20" shows the scale above 20 smaller.

North 12
South 15
East 14
West 140
HTML 
<figure data-chart="column">
	<table>
		<tbody>
			<tr><th>North</th><td>12</td></tr>
			<tr><th>South</th><td>15</td></tr>
			<tr><th>East</th><td>14</td></tr>
			<tr><th>West</th><td>140</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20"></span></div>
</figure>

Bar

On a bar chart the scale runs to the right, so the bars are cut from top to bottom.

North 12
South 15
East 14
West 140
HTML 
<figure data-chart="bar">
	<table>
		<tbody>
			<tr><th>North</th><td>12</td></tr>
			<tr><th>South</th><td>15</td></tr>
			<tr><th>East</th><td>14</td></tr>
			<tr><th>West</th><td>140</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20"></span></div>
</figure>

Waterfall

On a waterfall, the totals stand on the baseline and can be cut. A break may not cut a step that floats, because its height would then be wrong. So put the break below the steps, such as between the baseline and the lowest step. Otherwise it is left out, and the console says why.

Picked 174.5
Windfalls 8.2
Bruised -6.1
Peelings -3.3
Pressed 173.3
HTML 
<figure data-chart="waterfall">
	<table>
		<tbody>
			<tr data-kind="total"><th>Picked</th><td>174.5</td></tr>
			<tr><th>Windfalls</th><td>8.2</td></tr>
			<tr><th>Bruised</th><td>-6.1</td></tr>
			<tr><th>Peelings</th><td>-3.3</td></tr>
			<tr data-kind="total"><th>Pressed</th><td>173.3</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20" data-to="160"></span></div>
</figure>

Straight or zigzag

The cut is two slanted lines by default, as in the charts above. Add data-mark="zigzag" to draw it as a zigzag: up, down and up again across a column, and right, left and right again down a bar.

North 12
South 15
East 14
West 140
HTML 
<figure data-chart="column">
	<table>
		<tbody>
			<tr><th>North</th><td>12</td></tr>
			<tr><th>South</th><td>15</td></tr>
			<tr><th>East</th><td>14</td></tr>
			<tr><th>West</th><td>140</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20" data-mark="zigzag"></span></div>
</figure>
North 12
South 15
East 14
West 140
HTML 
<figure data-chart="bar">
	<table>
		<tbody>
			<tr><th>North</th><td>12</td></tr>
			<tr><th>South</th><td>15</td></tr>
			<tr><th>East</th><td>14</td></tr>
			<tr><th>West</th><td>140</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20" data-mark="zigzag"></span></div>
</figure>

Attributes

Attribute Sets
data-from Where the smaller part of the scale starts. The baseline if not set.
data-to Where it ends. The end of the scale if not set.
data-size The share of the length the smaller part gets, as a percentage. 22% at the end of the scale, 30% otherwise.
data-mark How the cut is drawn: two slanted lines by default, or zigzag.

Colour and width

The lines of the cut have CSS variables of their own.

Variable Sets
--tablechart-break-color The colour of the lines: the text colour by default
--tablechart-break-width The width of the lines: 1px by default
--tablechart-break-opacity The opacity of the lines: 1 by default
--tablechart-break-gap The empty space between the two lines, in px, % of the chart width, em or rem: 1.3% by default

For a quieter cut, give its lines the colour of the bars:

CSS 
.soft-break {
	--tablechart-break-color: var(--tablechart-bar-color, currentColor);
	--tablechart-break-width: 2px;
}
North 12
South 15
East 14
West 140
HTML 
<figure class="soft-break" data-chart="column">
	<table>
		<tbody>
			<tr><th>North</th><td>12</td></tr>
			<tr><th>South</th><td>15</td></tr>
			<tr><th>East</th><td>14</td></tr>
			<tr><th>West</th><td>140</td></tr>
		</tbody>
	</table>
	<div class="chart-annotations"><span data-annotation="axis-break" data-from="20" data-mark="zigzag"></span></div>
</figure>

The other variables of lines and marks are on Lines and marks.