Bar Rating Widget

A bar rating widget allows you to display choices in a choice-based question as bars, stars, pills, and other symbols. For example, you can use the rating widget on a website to introduce a star review system for customer service or to collect product feedback from users. This demo shows how to add a bar, star, or pill rating question to your survey or poll.

SurveyJS uses a third-party jQuery Bar Rating plugin as a bar rating widget. Reference the plugin's script and style sheet on your page. You should also reference a script that integrates the SurveyJS Form Library with third-party libraries (surveyjs-widgets.js). Open the HTML tab and copy the links from there.

To create a bar rating question, define an object with the type property set to "barrating" and add it to the elements array. Your bar rating also needs a rating scale. To specify it, assign an array of numbers to the choices property. Alternatively, you can generate scale values based upon the minimum, maximum, and step values. Set the choicesMin, choicesMax, and choicesStep properties as shown under the JavaScript tab.

Skins define symbols (bars, stars, pills) that designate rate values. Each skin is distributed as an individual style sheet that you should reference on your page. You can find style sheet links under the HTML tab. Set the ratingTheme property to apply a skin. In this demo, you can select different skins from the "Themes" drop-down menu and apply them at runtime.

You may wish to display rate values to identify a vote clearly. To do this, enable the showValues property. Click the "Show rate values" checkbox to show or hide rate values in this demo.

If you do not need to display the rating widget in different skins, use the built-in Rating question type. It implements the same functionality but does not require any third-party libraries. Refer to the Rating demo for more information.