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
  }
]

examples

bubble-chart

Last modified 1yr ago

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.

Property	Description
select	click event
activate	element activation event (mouse enter)
deactivate	element deactivation event (mouse leave)