ZoomCharts Documentation

Version: 1.21.1 (2024-11-08)

FacetChart.settings.chartTypes.columns.style

This section is defined by the type FacetChartSettingsSeriesColumnsStyle.

Default column style.

Properties

clusterPadding: [number, number]
Default value: [2, 2]

Padding for cluster. 0th element - left padding, 1st element - right padding.

connectorLineID: string
Default value: null

Which logical grouping to use for drawing connector lines

connectorLinePositionX: "edge" | "center" | "full"
Default value: "edge"

Where to start drawing the connecting line

Valid values:
  • edge - From nearest edge
  • center - From column center
  • full - From opposing edge
depth: number
Default value: 0

Depth for column. Use it to achieve 3D effect.

depthBrightness: number
Default value: 0.5

Brightness applied to depth components.

enableOutlineLines: boolean
Default value: true

Whether to draw an outline around the columns

fillColor: string
Default value: null

Fill color.

fillGradient: GradientDefinition
Default value: null

Fill gradient. Allows building a gradient fill, bound to values. Contains array of value-color pairs. For example: [[-20, 'rgba(0,0,255,0.4)'],[30,'rgba(255,0,0,0.7)']]. If specified fillGradientMode: "horizontal" or "vertical", then value denotes fraction of the column width and must be in interval from 0 to 1 For example: [[0,"black"],[0.5,"red"],[1, "orange"]].

fillGradientMode: "vertical" | "horizontal"
Default value: null

Fill gradient orientation for manual fill gradient mode. In use with fillGradient property. "null" for default fillGradient mode, "vertical" for vertical gradient, "horizontal" for horizonal rendering"

fillGradientType: "cylinder"
Default value: null

Fill gradient type lets you have automated fillGradient steps based on different shapes. Supported types are: null | cylinder

fillPattern: string
Default value: null
Introduced in version 1.16.0.

Specifies the URL to the image that will be used as the repeated fill pattern for the series.

When fillPattern is specified, fillGradient is ignored. If fillColor is specified together with fillPattern, it will be used as the background color for the pattern.

gradient: number
Default value: 0.8

A linear gradient for color change along a line between the column bottom and upper side. Specify "1" for no gradient. Values 0..` will make the bottom part of columns slightly darker.

Introduced in version 1.13.1.

Style settings for the legend item that is rendered for the series.

Properties
Introduced in version 1.13.2.
View section details

Configures the marker that is shown in the legend. Note that the default (shape: null) means that instead of the plain marker, an icon representing the series visual style will be used.

textColor: string
Default value: null
Introduced in version 1.13.1.

The color used for the label of the legend item. Note that for disabled series advanced.disabledSeries.textColor takes precedence.

lineColor: string
Default value: ""

Outline color.

lineDash: Array<number>

Array of line dash pattern to have a dashed line. The array contains length of dash followed by length of space in pixels. A sequence of multiple dash-space values is supported. In case you want to set a solid line, pass empty array: []

lineDashOffset: number
Default value: 0

Start offset of line dash, in pixels

lineGradient: GradientDefinition
Default value: null

Line gradient. Allows building a gradient line, bound to values. Contains array of value-color pairs. For example: [[-20, 'rgba(0,0,255,0.4)'],[30,'rgba(255,0,0,0.7)']]. If specified lineGradientMode: "horizontal" or "vertical", then value denotes fraction of the column width and must be in interval from 0 to 1 For example: [[0,"black"],[0.5,"red"],[1, "orange"]].

lineGradientMode: "vertical" | "horizontal"
Default value: null

Line gradient orientation for manual line gradient mode. In use with lineGradient property. "null" for default lineGradient mode, "vertical" for vertical gradient, "horizontal" for horizonal rendering"

lineWidth: number
Default value: 1

Width of the line.

minHeight: number
Default value: 4

Minimum height of a column in px.

padding: [number, number]
Default value: [1, 1]

Padding for column. 0th element - left padding, 1st element - right padding.

previewContents: boolean
Default value: false

Set to true in order to display a "preview" of the value distribution in each column. The line color is specified in previewLineColor

previewLineColor: string
Default value: "rgba(255,255,255,.5)"

The color of the line used to draw the distribution if previewContents is true.

radius: [number, number, number, number]
Default value: [0, 0, 0, 0]

Radius for top-left, top-right, bottom-right, bottom-left corner

shadowBlur: number
Default value: 3

Shadow blur effect range.

shadowColor: string
Default value: null

Shadow color of column. If undefined, no shadow will be applied. Leave empty to use default shadow or set your own shadow color.

shadowOffsetX: number
Default value: 1

Shadow direction, x component.

shadowOffsetY: number
Default value: -1

Shadow direction, y component.

tooltipColor: string
Default value: null

The series color in the tooltip. 'null' automatically determines based on existing color settings

tooltipGradient: GradientDefinition
Default value: null

A gradient range for tooltip color. Allows building a gradient fill, bound to values. In the case of tooltip, the tooltip will still be rendered with a solid color, but this allows easily specifying different colors depending on the tooltip value. Contains array of value-color pairs. For example: [[-20, 'rgba(0,0,255,0.4)'],[30,'rgba(255,0,0,0.7)']]. If specified fillGradientMode: "horizontal" or "vertical", then value denotes fraction of the column width and must be in interval from 0 to 1 For example: [[0,"black"],[0.5,"red"],[1, "orange"]].

tooltipShadowBlur: string
Default value: "1.5px"

What color the tooltip shadow is, as a CSS size string

tooltipShadowColor: string
Default value: "rgba(0.0,0.0,0.0,1.0)"

What color the tooltip shadow is, as a CSS color

tooltipShadowLightnessMaxThreshold: number
Default value: 0.0

The maximum level of tooltip color lightness where a shadow will be drawn, between 0 and 1. Shadow will still be drawn if it is within the other threshold.

tooltipShadowLightnessMinThreshold: number
Default value: 1.0

The minimum level of tooltip color lightness for a shadow to be drawn, between 0 and 1. Shadow will still be drawn if it is within the other threshold.

tooltipShadowSize: string
Default value: "0.5px"

How big the tooltip shadow is, as a CSS size string

widthScale: number
Default value: 1.0

What factor to scale the column widths by, between 0.0 and 1.0.

If set to 0, the columns will be drawn as lines instead of columns.

X