Skip to main content

Histogram

Histogram is a visual representation of user ratings of a product, service, article, or other content. It is shown by 1 - 5 star ratings and their respective totals. The large number is the average rating value for the item.

Example

Histogram on a default theme

Best practices

Use a histogram on pages which represent only a single product or item such as a Products Details page. This is due to the fact the histogram takes up significant space. On pages which have lots of items, such as a page that lists top-rated apps, or where space is at a premium, use a rating component instead.

Do

  • The prominent number should represent the average rating and should match the value represented by the rating component below the number.

Don’t

  • Don’t remove any of the components to save space. We want histograms to look consistent across all properties.
  • Don’t place more than one histogram on a page.

Also known as

Bar chart
Rating summary
Ratings

Related

Metatext
Rating

Development

  • Schema definition: The histogram schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Default histogram

<div class="m-histogram">
    <div>
        <span>4</span>
        <div class="c-group">
            <div class="c-rating" data-value="4" data-max="5" itemscope itemtype="https://schema.org/AggregateRating">
                <p class="x-screen-reader">Community rating:
                    <span itemprop="ratingValue">4</span>/
                    <span itemprop="bestRating">5</span>
                </p>
                <div></div>
            </div>
            <span>1,185</span>
        </div>
    </div>
    <ul>
        <li>
            <a href="#">5
                <span class="c-glyph"></span>
                <span class="x-screen-reader">Stars</span>
                <div>
                    <div aria-label="20.8% of users" style="width:20.8%">
                        <span>208</span>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">4
                <span class="c-glyph"></span>
                <span class="x-screen-reader">Stars</span>
                <div>
                    <div aria-label="54.3% of users" style="width:54.3%">
                        <span>543</span>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">3
                <span class="c-glyph"></span>
                <span class="x-screen-reader">Stars</span>
                <div>
                    <div aria-label="34.2% of users" style="width:34.2%">
                        <span>342</span>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">2
                <span class="c-glyph"></span>
                <span class="x-screen-reader">Stars</span>
                <div>
                    <div aria-label="8.2% of users" style="width:8.2%">
                        <span>82</span>
                    </div>
                </div>
            </a>
        </li>
        <li>
            <a href="#">1
                <span class="c-glyph"></span>
                <span class="x-screen-reader">Stars</span>
                <div>
                    <div aria-label="1.0% of users" style="width:1.0%">
                        <span>10</span>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>