widgets stats

Edit this page


The stats widget is used to display useful insights about the current results.

By default, it will display the number of hits and the time taken to compute the results inside the engine.

Live example

You can find an example at the end of the page or a live example in our widget showcase.


const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.stats({ container: string|HTMLElement, templates: [StatsWidgetTemplates], transformData: [StatsWidgetTransforms], autoHideContainer: [boolean], cssClasses: [StatsWidgetCssClasses], }: StatsWidgetOptions);



  • containerstring|HTMLElement

    Place where to insert the widget in your webpage.

  • templates[StatsWidgetTemplates]

    Templates to use for the widget.

  • transformData[StatsWidgetTransforms]

    Object that contains the functions to be applied on the data * before being used for templating. Valid keys are body for the body template.

  • autoHideContainer[boolean]
    Default value: true

    Make the widget hides itself when there is no results matching.

  • cssClasses[StatsWidgetCssClasses]

    CSS classes to add.


  • header[string|function]
    Default value: ''

    Header template.

  • body[string|function]

    Body template, provided with hasManyResults, hasNoResults, hasOneResult, hitsPerPage, nbHits, nbPages, page, processingTimeMS, query.


  • body[(StatsBodyData) => object]

    Updates the content of object passed to the body template.


  • hasManyResultsboolean

    True if the result set has more than one result.

  • hasNoResultsboolean

    True if the result set has no result.

  • hasOneResultboolean

    True if the result set has exactly one result.

  • hitsPerPagenumber

    Number of hits per page.

  • nbHitsnumber

    Number of hit in the result set.

  • nbPagesnumber

    Number of pages in the result set with regard to the hitsPerPage and number of hits.

  • pagenumber

    Number of the current page. First page is 0.

  • processingTimeMSnumber

    Time taken to compute the results inside the engine.

  • querystring

    Text query currently used.


  • root[string|Array<string>]

    CSS class to add to the root element.

  • header[string|Array<string>]

    CSS class to add to the header element.

  • body[string|Array<string>]

    CSS class to add to the body element.

  • time[string|Array<string>]

    CSS class to add to the element wrapping the time processingTimeMs.


  • render[function]

    Called after each search response has been received

  • getConfiguration[function]

    Let the widget update the configuration of the search with new parameters

  • init[function]

    Called once before the first search


    container: '#stats-container'

Can't find what you are looking for? Open an issue, we'll get back to you.