Box Chart

Inputs

Property

Type

Default Value

Description

view

number[]

[600, 400]

The dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size. Also, if one of the dimensions is zero or undefined, will fallback to the predefined values.

results

BoxChartMultiSeries[]

The chart data. Please refer to the below data format section for more info.

scheme

string or object

The color scheme of the chart. This accept either one of the color scheme enumerable string or an object with a domain property that contains an array of hex strings.

schemeType

string

'ordinal'

The color scale type. Can be either 'ordinal' or 'linear'.

customColors

function or object

Custom colors for the chart. Used to override a color for a specific value.

animations

boolean

true

Enable animations.

legend

boolean

false

Show or hide the legend.

legendTitle

string

'Legend'

The legend title.

legendPosition

string

'right'

The legend position. Can be either 'right' or 'below'.

xAxis

boolean

true

Show or hide the x axis.

yAxis

boolean

true

Show or hide the y axis.

showGridLines

boolean

true

Show or hide the grid lines.

roundDomains

boolean

false

Round domains for aligned gridlines (Only for Y Axis).

showXAxisLabel

boolean

true

Show or hide the x axis label.

showYAxisLabel

boolean

true

Show or hide the y axis label.

xAxisLabel

string

The x axis label text.

yAxisLabel

string

The y axis label text.

tooltipDisabled

boolean

false

Show or hide the tooltip

tooltipTemplate

TemplateRef

Custom ng-template to be displayed inside the tooltip

roundEdges

boolean

true

Round edges for the boxes.

strokeColor

string

'#FFFFFF'

Stroke Color for the box lines. Must be a hex color string

strokeWidth

number

2

Stroke Width for the box lines.

Outputs

Property

Description

select

click event

activate

element activation event (mouse enter)

deactivate

element deactivation event (mouse leave)

Data Format

The data format is single series:

[
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  }
]

Last updated