ngx-charts
Search…
Primary version
Introduction
Changelog
Custom Charts
demo
Features
Installing
License
Motivation
Table of contents
contributing
examples
Box Chart
bubble-chart
Gauge Chart
Heat Map Chart
Linear Gauge Chart
Number Card Chart
Polar/radar Chart
Tree Map Chart
bar-charts
Grouped Horizontal Bar Chart
Grouped Vertical Bar Chart
Horizontal Bar Chart
Normalized Horizontal Bar Chart
Normalized Vertical Bar Chart
Stacked Horizontal Bar Chart
Stacked Vertical Bar Chart
Vertical Bar Chart
line-area-charts
pie-charts
Powered By
GitBook
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!
Previous
Horizontal Bar Chart
Next
Normalized Vertical Bar Chart
Last modified
2yr ago
Copy link
Contents
Normalized Horizontal Bar Chart
Inputs
Outputs
Data Format