# Interface ChartProps

Props shared across Chart components.

# Properties

# Data

# dataSet

dataSet?: Data | DataSource

Data set for a chart using one of the following options. If neither option is specified, the chart will use the defaultDataSource specified in the parent SisenseContextProvider component.

(1) Sisense data source name as a string. For example, 'Sample ECommerce'. Typically, you retrieve the data source name from a data model you create using the get-data-model command (opens new window) of the Compose SDK CLI. Under the hood, the chart connects to the data source, executes a query, and loads the data as specified in dataOptions, filters, and highlights.

To learn more about using data from a Sisense data source, see the Compose SDK Charts Guide.

(2) Explicit Data, which is made up of an array of Column objects and a two-dimensional array of row data. This approach allows the chart component to be used with any data you provide.

To learn more about using data from an external data source, see the Compose SDK Charts Guide.

Example data in the proper format:

const sampleData = {
  columns: [
    { name: 'Years', type: 'date' },
    { name: 'Quantity', type: 'number' },
    { name: 'Units', type: 'number' },
  ],
  rows: [
    ['2019', 5500, 1500],
    ['2020', 4471, 7000],
    ['2021', 1812, 5000],
    ['2022', 5001, 6000],
    ['2023', 2045, 4000],
  ],
};

# filters

filters?: Filter[] | FilterRelations

Filters to apply to a chart’s data using one of the following options.

(1) Array of filters returned from filter factory functions, such as greaterThan() and members().

Use this option for filters that do not require a UI to set them or for filters where you will supply your own UI using non-Sisense components.

To learn more about using filter factory functions to create filters, see the Compose SDK Charts Guide.

(2) Array of filters controlled by Sisense filter components.

Use this option for filters that you want your users to set using Sisense UI components.

To learn more about using filter components to create filters, see the Compose SDK Charts Guide.

# highlights

highlights?: Filter[]

Highlights based on filter criteria to apply to a chart using one of the following options.

Note that the filter dimensions used in highlights must match those defined in the dataOptions of the chart.

(1) Array of filters returned from filter factory functions, such as greaterThan() and members().

Use this option for highlights that do not require a UI to set them or for highlights where you will supply your own UI using non-Sisense components.

To learn more about using filter factory functions to create highlights, see the Compose SDK Charts Guide.

(2) Array of filters controlled by Sisense filter components.

Use this option for highlights that you want your users to set using Sisense UI components.

To learn more about using filter components to create highlights, see the Compose SDK Charts Guide.

# Chart

# chartType

chartType: ChartType

Default chart type of each series.

# dataOptions

dataOptions: ChartDataOptions

Configurations for how to interpret and present a chart's data.

To learn more about using data options, see the Compose SDK Charts Guide.

# styleOptions

styleOptions?: ChartStyleOptions

Configurations for how to style and present a chart's data.

To learn more about using style options, see the Compose SDK Charts Guide.

# Callbacks

# onBeforeRender

onBeforeRender?: BeforeRenderHandler

A callback that allows you to customize the underlying chart element before it is rendered. Use the highchartsOptions object that is passed to the callback to change options values (opens new window) and then return the modified options object. The returned options are then used when rendering the chart.

This callback is not supported for Indicator Chart, Areamap Chart, and Scattermap Chart.

For an example of how the onBeforeRender callback can be used, see the Compose SDK Charts Guide.

# onDataPointClick

onDataPointClick?: ScattermapDataPointEventHandler | AreamapDataPointEventHandler | DataPointEventHandler | ScatterDataPointEventHandler | BoxplotDataPointEventHandler

Click handler callback for a data point

# onDataPointContextMenu

onDataPointContextMenu?: DataPointEventHandler | ScatterDataPointEventHandler | BoxplotDataPointEventHandler

Context menu handler callback for a data point

# onDataPointsSelected

onDataPointsSelected?: DataPointsEventHandler | ScatterDataPointsEventHandler

Handler callback for selection of multiple data points