Number Ranges Demo

A number column needn't make a bar for every value it holds. Grouped in ranges, the bars cover a span of it each — 20 to 24, 25 to 29 — added up on the server from a row for each value, with every range between the lowest and the highest drawn, so the axis has no gaps. The same ranges can split each bar into a series instead.

Contacts by Age, and by Gender and Age

The first chart counts the contacts in each range of ages (GroupByRangeSize); pick how many years a bar covers, or a bar for each age. The second counts them by gender and stacks each bar by age range (SeriesRangeSize), the legend listing the ranges lowest first. Each pick gives the chart a new data source, and it loads again.

React example Blazor example React TypeScript Razor

How ranges are worked out, their labels and figures, blank values, and how many values a chart reads, are in the documentation: Number Ranges.