❄️✨Ho-ho-holiday offer for new projects! Check out our pricing page.
Get Free Trial
Get Free Trial
All documentation
JavaScript
React
Angular
Vue
Other integrations
Troubleshooting
Connecting to data source
Configuring the component
  1. Getting started with the report
  2. Available report configurations
  3. Global configurations
    4. Configure data representation
    Define which data to show
    Configure Flexmonster’s
    options
    1. Understanding options
    2. Grid options
    3. Chart options
    4. Component-wide options
    5. Changing the grid layout
    Filter data
    Format data
Saving and exporting
Customizing
Charts
License keys
Accessibility
Security
Updating to the latest version
Flexmonster CLI reference

Understanding options

Options are used to configure Flexmonster’s functionality and manage UI controls. For example, you can enable or disable filter controls, specify where to show totals, or select the component’s view type.

Options are defined in the OptionsObject and can be divided into three subgroups:

  1. Grid options – define the options that apply to the grid’s UI controls and functionality.
  2. Chart options – define the options that apply to the chart’s UI controls and functionality.
  3. Component-wide options – define the options that work regardless of the view type.

If no options are specified, Flexmonster will use the default options.

Visit our Examples page for live examples that demonstrate how to use different options.

How to set options

You can set options in the following ways:

  • In the report
  • Using API calls
  • Via UI 

In the report

To set options in the report, configure the options property:

report: {
  dataSource: {
    filename: "https://cdn.flexmonster.com/data/data.csv"
  },    
  options: {
    grid: {
      type: "flat",
      showHeaders: false
    },
    chart: {
      type: "pie",
    },
    viewType: "grid_charts"
  }
}

Live example

You can also set options for all reports in the GlobalObject.

Using API calls

You can set options using the following API calls:

  1. setOptions(). Use this method to apply options without setting the whole report. After calling setOptions(), use the refresh() API call to apply the changes:
    pivot.setOptions({ chart: { title: "Chart One" } });
    pivot.refresh();
    Live example
    To see the current options, use getOptions().
  2. setReport(). Use this method when you need to change options along with other report parts. Also, use this approach to set the options that can be changed at runtime only via the setReport() API call. Example:
    let report = {
      options: {
        grid: {
          type: "classic",
          title: "Grid One"
        }
      },
      slice: {
        //...
      },
      // Other configs
    }
    pivot.setReport(report);
    Live example

Via UI

Use the Options ( ) Toolbar tab to manage grand totals, subtotals, and the table layout at runtime:

Screenshot of the Layout options pop-up window

Default option values

Most Flexmonster options have a default value. Flexmonster Pivot will use the default option values if an OptionsObject or global configurations are not specified.

Default option values
{
  options: {
    viewType: "grid",
    grid: {
      type: "compact",
      title: "",
      showFilter: true,
      showHeaders: true,
      showTotals: "on",
      showGrandTotals: "on",
      grandTotalsPosition: "top",
      showHierarchies: true,
      showHierarchyCaptions: true,
      showReportFiltersArea: true,
      dragging: true,
      showAutoCalculationBar: true,
      autoSwitchToCompact: true,
    },
    chart: {
      type: "column",
      title: "",
      showFilter: true,
      multipleMeasures: false,
      oneLevel: false,
      autoRange: false,
      reversedAxes: false,
      showLegend: true,
      showLegendButton: false,
      showDataLabels: false,
      showAllLabels: false,
      showMeasures: true,
      showOneMeasureSelection: true,
      showWarning: true,
      position: "bottom",
      activeMeasure: {},
      pieDataIndex: "0",
      axisShortNumberFormat: undefined
    },
    filter: {
      allowEmptyMembersFilter: false,
      weekOffset: 1,
      dateFormat: "dd/MM/yyyy",
      filterByDateAndTime: false,
      liveSearch: true
    },
    configuratorActive: false,
    configuratorButton: true,
    showAggregations: true,
    showCalculatedValuesButton: true,
    showEmptyValues: false,
    editing: false,
    drillThrough: true,
    showDrillThroughConfigurator: true,
    drillThroughMaxRows: 1000,
    sorting: "on",
    readOnly: false,
    strictDataTypes: false,
    distinguishNullUndefinedEmpty: false,
    defaultDateType: "date",
    datePattern: "dd/MM/yyyy",
    dateTimePattern: "dd/MM/yyyy HH:mm:ss",
    timePattern: "HH:mm:ss",
    saveAllFormats: false,
    showDefaultSlice: true,
    useOlapFormatting: false,
    showMemberProperties: false,
    showEmptyData: true,
    defaultHierarchySortName: "asc",
    showOutdatedDataAlert: false,
    expandExecutionTimeout: 9000,
    showAggregationLabels: true,
    showAllFieldsDrillThrough: false,
    showFieldListSearch: false,
    useCaptionsInCalculatedValueEditor: false,
    validateFormulas: true,
    caseSensitiveMembers: false,
    simplifyFieldListFolders: false,
    validateReportFiles: true,
    fieldListPosition: undefined,
    allowBrowsersCache: false
  }
}

See also