ChartSettings API in JavaScript Pivot Grid API control

Allows a set of options to customize a pivot chart with a variety of settings, such as chart series, chart area, axis labels, legends, border, crosshairs, theme, title, tooltip, zooming, etc. The following options are available to customize the pivot chart.

• background: Allows you to change the background color of the chart series in the pivot chart. For example, to display the chart series with background color as red, set the property background to either “red” or “#FF0000” or “rgba(255,0,0,1.0)”.
• border: Allow options to customize the border of the chart series such as color and border size in the pivot chart. For example, to display the chart series border color as red, set the properties color to either “red” or “#FF0000” or “rgba(255,0,0,1.0)” and width to 0.5.
• chartArea: Allow options to customize the chart area with a variety of settings such as background color, border, opacity and background image in the pivot chart. For example, to change the of the pivot chart’s background, set the property opacity to 0.5.
• chartSeries: Allow options to customize the chart series with different settings such as fill color, animation of the series, series width, border, visibility of the series, opacity, chart series types, marker, tooltip, trendlines, etc., in the pivot chart. For example, to display the line type pivot chart, set the property type to Line.
• crosshair: Allow options to customize the crosshair line with different settings such as color and width of the line, line types that are shown horizontally and vertically to indicate the value of the axis at the mouse hover or touch position in the pivot chart.
• description: Allows you to add a description of the pivot chart.
• enableAnimation: Allows you to enable/disable the tooltip animation while performing the mouse move from one point to another in the pivot chart.
• enableExport: Allows the pivot chart to be exported to either PDF or PNG or JPEG or SVG filter formats.
• enableMultiAxis: Allows you to draw the pivot chart with multiple value fields as separate chart area.
• enableSideBySidePlacement: Allows you to draw points of the column type pivot chart series as side by side.
• isMultiSelect: Allows you to perform multiple selection in the pivot chart. To enable this option, it requires the property selectionMode to be Point or Series or Cluster.
• isTransposed: Allows you to render the pivot chart in a transposed manner or not.
• legendSettings: Allow options for customizing legends with different properties such as legend visibility, height, width, position, legend padding, alignment, textStyle, border, margin, background, opacity, description, tabIndex in the pivot chart.
• margin: Allow options to customize the left, right, top and bottom margins of the pivot chart.
• palettes: Allows you to draw the chart series points with custom color in the pivot chart.
• primaryXAxis: Allow options to customize the horzontal(row) axis with different properties such as labelIntersectAction, labelStyle, title, description, crosshairTooltip, labelFormat, titleStyle, plotOffset, edgeLabelPlacement, labelPlacement, tickPosition, opposedPosition, minor and major grid lines, minor and major tick lines, border, etc. in the pivot chart.
• primaryYAxis: Allow options to customize the vertical(value) axis with different properties such as labelIntersectAction, labelStyle, title, description, crosshairTooltip, labelFormat, titleStyle, plotOffset, edgeLabelPlacement, labelPlacement, tickPosition, opposedPosition, minor and major grid lines, minor and major tick lines, border, etc. in the pivot chart.
• selectedDataIndexes: Allows you to highlight a specific point of the series while rendering the pivot chart. For example, to highlight first point in the first series, set the properties series to 0 and points to 1. To use this option, it requires the property selectionMode to be Point or Series.
• selectionMode: Allow options for customizing the selection mode to be done either by a specific series or point or cluster or by dragging it to the pivot chart. For example, to highlight a specific point in a specific series of the pivot chart, set the property selectionMode to Point.
• showMultiLevelLabels: Allows you to display the multi-level label feature in the pivot chart. This multi-level labels used to perform drill operation in the pivot chart.
• subTitle: Allows you to add the subtitle to the pivot chart.
• subTitleStyle: Allow options to customize the subtitle in the pivot chart with different properties such as fontStyle, font size, fontWeight, font color, testAlignment, fontFamily, opacity, textOverflow.
• tabIndex: Allows you to highlight specific legends by clicking the mouse or by interacting with the keyboard in the pivot chart.
• theme: Allows you to draw a pivot chart with either material, fabric, bootstrap, highcontrast light, material dark, fabric dark, highcontrast, bootstrap dark, bootstrap4 theme.
• title: Allows you to add title to the pivot chart.
• titleStyle: Allow options to customize the title in the pivot chart with different properties such as fontStyle, font size, fontWeight, font color, testAlignment, fontFamily, opacity, textOverflow.
• tooltip: Allow options to customize the tooltip of the pivot chart with different properties such as visibility of the tooltip, enableMarker, fill color, opacity, header for tooltip, format, textStyle, template, border, enableAnimation.
• useGroupingSeparator: Allows the group separator to be shown to the values in the pivot chart.
• value: Allows you to draw a pivot chart with a specific value field during initial loading.
• zoomSettings: Allow options to customize the pivot chart zooming with different properties such as enablePinchZooming, enableSelectionZooming, enableDeferredZooming, enableMouseWheelZooming, zoom modes, toolbarItems, enableScrollbar and enablePan.

Properties

accumulationSelectionMode

AccumulationSelectionMode

Allow options for customizing the selection mode to be done either by a specific series or point or cluster or by dragging it to the pivot chart. For example, to highlight a specific point in a specific series of the pivot chart, set the property accumulationSelectionMode to Point. It is applicable for chart types pie, funnel, doughnut and pyramid. The available modes are,

• none: Disables the selection.
• point: selects a point.

Defaults to ‘None’

background

string

Allows you to change the background color of the chart series in the pivot chart. For example, to display the chart series with background color as red, set the property background to either “red” or “#FF0000” or “rgba(255,0,0,1.0)”.

Defaults to null

border

PivotChartBorderModel

Allow options to customize the border of the chart series such as color and border size in the pivot chart. For example, to display the chart series border color as red, set the properties color to either “red” or “#FF0000” or “rgba(255,0,0,1.0)” and width to 0.5.

chartArea

PivotChartAreaModel

Allow options to customize the chart area with a variety of settings such as background color, border, opacity and background image in the pivot chart. For example, to change the of the pivot chart’s background, set the property opacity to 0.5.

chartSeries

PivotSeriesModel

Allow options to customize the chart series with different settings such as fill color, animation of the series, series width, border, visibility of the series, opacity, chart series types, marker, tooltip, trendlines, etc., in the pivot chart. For example, to display the line type pivot chart, set the property type to Line.

columnDelimiter

string

Allows to specify the delimiter to split the column headers. The is applicable for pie, doughnut, funnel and pyramid chart types.

Defaults to ’-’

columnHeader

string

Allows to specify the column whose values will be considered to draw the pivot chart. The is applicable for pie, doughnut, funnel and pyramid chart types.

Defaults to ”

crosshair

PivotChartCrosshairSettingsModel

Allow options to customize the crosshair line with different settings such as color and width of the line, line types that are shown horizontally and vertically to indicate the value of the axis at the mouse hover or touch position in the pivot chart.

description

string

Allows you to add a description of the pivot chart.

Defaults to null

enableAnimation

boolean

Allows you to enable/disable the tooltip animation while performing the mouse move from one point to another in the pivot chart.

Defaults to true

enableBorderOnMouseMove

boolean

Allows to Enable or disable the border in pie and doughnut chart while mouse moving.

Defaults to true

enableExport

boolean

Allows the pivot chart to be exported to either PDF or PNG or JPEG or SVG filter formats.

Defaults to true

enableMultiAxis

boolean

Allows you to draw the pivot chart with multiple value fields as separate chart area.

Defaults to false

enableScrollOnMultiAxis

boolean

Enable or disable scroll bar while multiple axis.

Defaults to false

enableSideBySidePlacement

boolean

Allows you to draw points of the column type pivot chart series as side by side.

Defaults to true

enableSmartLabels

boolean

Allows to set the labels placed smartly without overlapping. It is applicable for chart types pie, funnel, doughnut and pyramid.

Defaults to true

highlightMode

AccumulationSelectionMode

Specifies whether point has to get highlighted or not. It is applicable for chart types pie, funnel, doughnut and pyramid. Takes value either ‘None ‘or ‘Point’.

Defaults to None

highlightPattern

SelectionPattern

Specifies whether series or data point for accumulation chart has to be selected. They are,

• none: sets none as selecting pattern to accumulation chart .
• chessboard: sets chess board as selecting pattern accumulation chart .
• dots: sets dots as selecting pattern accumulation chart .
• diagonalForward: sets diagonal forward as selecting pattern to accumulation chart .
• crosshatch: sets crosshatch as selecting pattern to accumulation chart.
• pacman: sets pacman selecting pattern to accumulation chart.
• diagonalbackward: sets diagonal backward as selecting pattern to accumulation chart.
• grid: sets grid as selecting pattern to accumulation chart.
• turquoise: sets turquoise as selecting pattern to accumulation chart.
• star: sets star as selecting pattern to accumulation chart.
• triangle: sets triangle as selecting pattern to accumulation chart.
• circle: sets circle as selecting pattern to accumulation chart.
• tile: sets tile as selecting pattern to accumulation chart.
• horizontaldash: sets horizontal dash as selecting pattern to accumulation chart.
• verticaldash: sets vertical dash as selecting pattern to accumulation chart.
• rectangle: sets rectangle as selecting pattern.
• box: sets box as selecting pattern to accumulation chart.
• verticalstripe: sets vertical stripe as selecting pattern to accumulation chart.
• horizontalstripe: sets horizontal stripe as selecting pattern to accumulation chart.
• bubble: sets bubble as selecting pattern to accumulation chart. It is applicable for chart types pie, funnel, doughnut and pyramid.

Defaults to None

isMultiSelect

boolean

Allows you to perform multiple selection in the pivot chart. To enable this option, it requires the property selectionMode to be Point or Series or Cluster.

Defaults to false

isTransposed

boolean

Allows you to render the pivot chart in a transposed manner or not.

Defaults to false

legendSettings

LegendSettingsModel

Allow options for customizing legends with different properties such as legend visibility, height, width, position, legend padding, alignment, textStyle, border, margin, background, opacity, description, tabIndex in the pivot chart.

margin

PivotChartMarginModel

Allow options to customize the left, right, top and bottom margins of the pivot chart.

palettes

string[]

Allows you to draw the chart series points with custom color in the pivot chart.

Defaults to []

pieCenter

PivotPieChartCenterModel

Allow options to customize the center of pie series chart with properties x and y.

primaryXAxis

PivotAxisModel

Allow options to customize the horzontal(row) axis with different properties such as labelIntersectAction, labelStyle, title, description, crosshairTooltip, labelFormat, titleStyle, plotOffset, edgeLabelPlacement, labelPlacement, tickPosition, opposedPosition, minor and major grid lines, minor and major tick lines, border, etc. in the pivot chart.

primaryYAxis

PivotAxisModel

Allow options to customize the vertical(value) axis with different properties such as labelIntersectAction, labelStyle, title, description, crosshairTooltip, labelFormat, titleStyle, plotOffset, edgeLabelPlacement, labelPlacement, tickPosition, opposedPosition, minor and major grid lines, minor and major tick lines, border, etc. in the pivot chart.

selectedDataIndexes

PivotChartIndexesModel[]

Allows you to highlight a specific point of the series while rendering the pivot chart. For example, to highlight first point in the first series, set the properties series to 0 and points to 1. To use this option, it requires the property selectionMode to be Point or Series.

Defaults to []

selectionMode

string

Allow options for customizing the selection mode to be done either by a specific series or point or cluster or by dragging it to the pivot chart. For example, to highlight a specific point in a specific series of the pivot chart, set the property selectionMode to Point. The available modes are,

• none: Disables the selection.
• series: selects a series.
• dragXY: selects points by dragging with respect to both horizontal and vertical axes
• dragX: selects points by dragging with respect to horizontal axis.
• dragY: selects points by dragging with respect to vertical axis.
• point: selects a point.
• cluster: selects a cluster of point

Defaults to ‘None’

showMultiLevelLabels

boolean

Allows you to display the multi-level label feature in the pivot chart. This multi-level labels used to perform drill operation in the pivot chart.

Defaults to true

subTitle

string

Allows you to add the subtitle to the pivot chart.

Defaults to ”

subTitleStyle

PivotChartFontModel

Allow options to customize the subtitle in the pivot chart with different properties such as fontStyle, font size, fontWeight, font color, testAlignment, fontFamily, opacity, textOverflow.

tabIndex

number

Allows you to highlight specific legends by clicking the mouse or by interacting with the keyboard in the pivot chart.

Defaults to 1

theme

ChartTheme

Allows you to draw a pivot chart with either material, fabric, bootstrap, highcontrast light, material dark, fabric dark, highcontrast, bootstrap dark, bootstrap4 theme.

Defaults to ‘Material’

title

string

Allows you to add title to the pivot chart.

Defaults to ”

titleStyle

PivotChartFontModel

Allow options to customize the title in the pivot chart with different properties such as fontStyle, font size, fontWeight, font color, testAlignment, fontFamily, opacity, textOverflow.

tooltip

PivotTooltipSettingsModel

Allow options to customize the tooltip of the pivot chart with different properties such as visibility of the tooltip, enableMarker, fill color, opacity, header for tooltip, format, textStyle, template, border, enableAnimation.

useGroupingSeparator

boolean

Allows the group separator to be shown to the values in the pivot chart.

Defaults to true

value

string

Allows you to draw a pivot chart with a specific value field during initial loading.

Defaults to ”

zoomSettings

PivotZoomSettingsModel

Allow options to customize the pivot chart zooming with different properties such as enablePinchZooming, enableSelectionZooming, enableDeferredZooming, enableMouseWheelZooming, zoom modes, toolbarItems, enableScrollbar and enablePan.

Events

animationComplete

EmitType<IAnimationCompleteEventArgs>

It triggers after the pivot chart series animation is completed.

axisLabelRender

EmitType<IAxisLabelRenderEventArgs>

It triggers before each axis label is rendered.

beforePrint

EmitType<IPrintEventArgs>

It triggers before the pivot chart prints.

chartMouseClick

EmitType<IMouseEventArgs>

It triggers on clicking the pivot chart.

chartMouseDown

EmitType<IMouseEventArgs>

It triggers when mouse down on chart series.

chartMouseLeave

EmitType<IMouseEventArgs>

It triggers when cursor leaves the chart.

chartMouseMove

EmitType<IMouseEventArgs>

It triggers on hovering the pivot chart.

chartMouseUp

EmitType<IMouseEventArgs>

It triggers when mouse up on chart series.

dragComplete

EmitType<IDragCompleteEventArgs>

It triggers after the drag selection is completed on chart series.

legendRender

EmitType<ILegendRenderEventArgs>

It triggers before the legend renders in the pivot chart.

load

EmitType<ILoadedEventArgs>

It triggers before chart loads.

loaded

EmitType<ILoadedEventArgs>

It triggers after the pivot chart loaded.

pointClick

EmitType<IPointEventArgs>

It triggers on series point click.

pointMove

EmitType<IPointEventArgs>

It triggers on series point move.

pointRender

EmitType<IPointRenderEventArgs>

It triggers before each points for the series is rendered.

resized

EmitType<IResizeEventArgs>

It triggers after the pivot chart resized.

scrollChanged

EmitType<IScrollEventArgs>

It triggers when change the scroll of the chart seires.

scrollEnd

EmitType<IScrollEventArgs>

It triggers after the scroll end.

scrollStart

EmitType<IScrollEventArgs>

It triggers when start scroll the chart series.

seriesRender

EmitType<ISeriesRenderEventArgs>

It triggers before the series is rendered in the pivot chart.

textRender

EmitType<ITextRenderEventArgs>

It triggers before the data label for series renders in the pivot chart.

tooltipRender

EmitType<ITooltipRenderEventArgs>

It triggers before the tooltip for series is rendered.

zoomComplete

EmitType<IZoomCompleteEventArgs>

It triggers after the zoom selection is completed.