ngx-charts
Search…
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
}
]
Copy link
Outline
Inputs
Outputs
Data Format