ngx-charts
Search…
Normalized Horizontal Bar Chart
Normalized Horizontal Bar Chart
Swimlane Normalized Horizontal Bar Chart - StackBlitz
StackBlitz
Inputs
Property
Type
Default Value
Description
view
number[]
​
the dimensions of the chart [width, height]. If left undefined, the chart will fit to the parent container size
results
object[]
​
the chart data
scheme
object
​
the color scheme of the chart
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 ['right', 'below']
xAxis
boolean
false
show or hide the x axis
yAxis
boolean
false
show or hide the y axis
showGridLines
boolean
true
show or hide the grid lines
roundDomains
boolean
false
round domains for aligned gridlines
showXAxisLabel
boolean
false
show or hide the x axis label
showYAxisLabel
boolean
false
show or hide the y axis label
noBarWhenZero
boolean
true
hide bar if value is 0 and setting is true
xAxisLabel
string
​
the x axis label text
yAxisLabel
string
​
the y axis label text
trimXAxisTicks
boolean
true
trim or not ticks on the x axis
Outputs
Property
Description
select
click event
activate
element activation event (mouse enter)
deactivate
element deactivation event (mouse leave)
Data Format
The data format is multi series:
1
[
2
{
3
"name": "Germany",
4
"series": [
5
{
6
"name": "2010",
7
"value": 7300000
8
},
9
{
10
"name": "2011",
11
"value": 8940000
12
}
13
]
14
},
15
​
16
{
17
"name": "USA",
18
"series": [
19
{
20
"name": "2010",
21
"value": 7870000
22
},
23
{
24
"name": "2011",
25
"value": 8270000
26
}
27
]
28
}
29
]
Copied!
Last modified 2yr ago
Copy link