RatingHistogram

Example

Ten bars run from half a star to five stars. The tallest fills 46px and the rest follow the counts; any bin with a rating keeps at least 6% height, so it never reads as zero. Hovering a bar shows 4 stars, 62 people. The mean and the count sit at the top.

import { RatingHistogram } from '@iffday/web/src/kit';
import { score } from '../../../samples';

export default function Example() {
  return (
    <div style={{ width: 'min(100%, 280px)' }}>
      <RatingHistogram
        distribution={score.starDistribution!}
        mean={score.starMean}
        count={score.starCount}
      />
    </div>
  );
}

Usage

distribution has exactly ten numbers, the first for half a star. For an entry’s complete rating section use ScoreSummary.

Props