Skip to main content Skip to search

Powered by Zoomin Software. For more details please contactZoomin

Develop with FastTrack

ChartRangeFacet

Save PDF

Share

Print

Table of Contents

ChartRangeFacet

Save PDF

Share

Print

Last Updated: May 5, 2026
4 minute read

MarkLogic Server
Documentation

The ChartRangeFacet widget displays bucketed facet values as an interactive chart. Users can click chart segments to apply facet constraints to the search results. The chart type can be configured as a bar chart, column chart, or pie chart.

Note:

The BucketRangeFacet widget provides a checkbox-based alternative for the same bucketed facet data.

MarkLogic setup

Faceted search requires a range index on the faceted property. A range index can be added to the database configuration with the MarkLogic Admin Interface or with an API.

After an index is added, a faceted constraint must be configured using query options. In this example, the search application returns facets for the /envelope/salary property with pre-defined buckets. return-facets is set to true so that facet results are returned:

<?xml version="1.0" encoding="UTF-8"?>
<options xmlns="http://marklogic.com/appservices/search">
  <constraint name="salaryBucketed">
    <range collation="" facet="true" type="xs:int">
      <path-index>/envelope/salary</path-index>
      <bucket lt="60000" ge="50000" name="$50000 - $60000">$50000 - $60000</bucket>
      <bucket lt="70000" ge="60000" name="$60000 - $70000">$60000 - $70000</bucket>
      <bucket lt="80000" ge="70000" name="$70000 - $80000">$70000 - $80000</bucket>
      <bucket ge="80000" name="Over $80000">Over $80000</bucket>
      <facet-option>limit=25</facet-option>
    </range>
  </constraint>
  <return-facets>true</return-facets>
</options>

The example code will return this response:

{
  "facets": {
    "salaryBucketed": {
      "type": "bucketed",
      "facetValues": [
        {
          "name": "$50000 - $60000",
          "count": 4,
          "value": "$50000 - $60000"
        },
        {
          "name": "$60000 - $70000",
          "count": 11,
          "value": "$60000 - $70000"
        },
        {
          "name": "$70000 - $80000",
          "count": 5,
          "value": "$70000 - $80000"
        },
        {
          "name": "Over $80000",
          "count": 80,
          "value": "Over $80000"
        }
      ]
    }
  }
  // ...
}

Example rendering

Using the code and response above, the ChartRangeFacet widget renders a bar chart by default showing each salary bucket along the category axis and its document count on the value axis. Clicking a bar selects or deselects that bucket. The chart can also be rendered as a column chart or pie chart by setting the chartType prop.

ChartRangeFacet example configuration

In this example configuration, the ChartRangeFacet widget is imported and configured in a React application.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, SearchBox, ResultsSnippet, ChartRangeFacet } from "ml-fasttrack";

function App() {

  const context = useContext(MarkLogicContext);

  const handleSearch = (params) => {
    context.setQtext(params?.q);
  }

  const handleFacetSelect = (selection) => {
    context.addStringFacetConstraint(selection);
  }

  return (
    <div className="App">
      <div>
        <SearchBox onSearch={handleSearch}/>
      </div>
      <div style={{display: 'flex', flexDirection: 'row'}}>
        <div style={{width: '640px'}}>
          <ResultsSnippet
            results={context.searchResponse.results}
            paginationFooter={true}
          />
        </div>
        <div>
          {context?.searchResponse?.facets?.salaryBucketed &&
            <ChartRangeFacet
              title="Salary Range"
              data={context?.searchResponse?.facets?.salaryBucketed}
              name="salaryBucketed"
              chartType="bar"
              onSelect={handleFacetSelect}
              height="250px"
              containerStyle={{ width: '400px' }}
            />
          }
        </div>
      </div>
    </div>
  );
}

export default App;

Code explanation

In the ChartRangeFacet example configuration:

The data prop is set to the bucketed facet from the search response object.
The chartType prop selects the chart style: 'bar' (default), 'column', or 'pie'.
The onSelect callback manages chart item clicks and receives a Constraint object from the widget.
The application can then set the facet constraint in the application context using the addStringFacetConstraint method.
The height prop controls the height of the chart area.

See the section Setting and resetting facet widgets.

Configuring AND/OR logic

See the section Configuring AND/OR logic for facet widgets.

Note:

notConfig is not supported for ChartRangeFacet.

ChartRangeFacet API

Prop	Type	Description
data	{ type: string; facetValues: { name: string; count: number; value: string; }[]; }	Facet data to display from search results.
name	string	The unique key used to identify this facet. Required if `title` is not provided.
title	string	Title for the collapsible header. If not provided, `name` will be used as the facet key.
subTitle	string	Subtitle for the collapsible header.
containerStyle	CSSProperties	CSS styles applied to the widget container.
chartType	'bar' \| 'column' \| 'pie'	The chart type used to display the facet values. Default: `'bar'`.
height	number \| string	Height of the chart container. Can be a number (pixels) or a CSS string value. Default: `'250px'`.
onSelect	(value: Constraint) => void	Callback function triggered when a chart item is clicked.
colorConfig	{ items: string[]; selected?: string; }	Color configuration for chart items. `items` is an array of colors for each bar/segment; `selected` is the highlight color for selected items. Default selected color: `'#007bff'`.
ChartConfig	BarColumnChartConfig \| PieChartConfig	Advanced chart configuration options. The available properties depend on the `chartType`. For bar/column charts, includes `ChartProps`, `CategoryAxisProps`, `ValueAxisProps`, `SeriesItemProps`, `SeriesItemTooltipProps`, and `TitleProps`. For pie charts, also includes `TooltipProps`.
noDataContent	ReactNode \| string	Content displayed if no `facetValues` were provided.
resetConfig	({ hide?: boolean; label?: string; ButtonProps?: ButtonProps; onReset?: () => void; })	Applies a Reset button to the bottom of the component.
resetConfig.hide	boolean	Whether to hide the Reset button.
resetConfig.label	string	The Reset button label.
resetConfig.ButtonProps	ButtonProps	KendoReact Button props for the Reset button.
resetConfig.onReset	() => void	Callback function triggered when the user clicks the Reset button.
logicConfig	IChartRangeFacetLogicConfig	See Configuring AND/OR logic for facet widgets. Note: `notConfig` is not supported.
ref	const facetRef = useRef(null);	A React ref object that can be used to access the underlying component instance. See Setting and resetting facet widgets.