Star Distribution Testimonials Block for React

Edit COUNTS at the top of the file: the number of reviews at one, two, three, four and five stars, in that order. The total, the average (to one decimal, by integer maths), the column heights, the marker position and the verdict are all derived. Only put real review numbers here.

The five columns share the width equally, so the centre of the one-star column is 10 percent in and each next column is 20 percent further. The marker sits at the exact average on that scale, not the rounded one, so 4.3 stars lands a little past the four-star column's centre. The plot is always read left to right, as a number line, including in right-to-left pages.

It is computed from the counts. "Most gave 5 stars" only appears when more than half of the reviews share the top rating; otherwise the line reads "The most common rating is N stars", so the claim is always true for your data.

The chart is one image with a name built from the data: every count and the average, in words. The columns and axis are hidden from assistive technology, and a visually hidden table lists the same counts for anyone who wants to move through them. The score is read as "Rated 4.3 out of 5". The partial stars, the frame and the + marks are decoration and hidden.

The tallest column fills most of the plot and the others scale from it, so a tiny count is a thin but visible column with its value above it. Heights are whole percentages of the plot, and the value is always printed, so the number never depends on reading the height.

The three cells stack in reading order: the score and verdict, then the quote, then the chart, so the quote is on the first screen. The columns narrow to fit while the values stay at full size, and at 320 pixels the five columns and their labels still fit without scrolling.