Skip to content
CHARTS · COMPLETE

Histogram

See how values are distributed across ranges.

See how values are distributed across equal ranges, as touching bars with the number of bins or their width under your control.

Why it helps

  • Distribution at a glance
  • Bins or width
  • Counts or shares

Where it fits

  • Response times
  • Ages
  • Scores

Example

<Histogram Label="Response time in milliseconds" Values="_times" Bins="12" ValueFormat="0" />
<Histogram Label="Share of orders by value" Values="_orders" BinWidth="20" Scale="HistogramScale.Percent" ShowDataLabels="true" ValueFormat="0.#" />

@code {
    private readonly double[] _times = Generate(400, 180, 45, 1);
    private readonly double[] _orders = Generate(300, 90, 35, 2);

    private static double[] Generate(int count, double mean, double deviation, int seed)
    {
        var random = new Random(seed);
        return Enumerable.Range(0, count)
            .Select(_ => Math.Max(1, mean + deviation * (random.NextDouble() + random.NextDouble() + random.NextDouble() - 1.5) * 2))
            .ToArray();
    }
}

A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.

Part of RayCraft Complete.

All controls ยท Documentation