Vertical Bar Chart
Vertical Bar Chart
| 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 |
| 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 |
| trimYAxisTicks |
boolean |
true |
trim or not ticks on the Y axis |
| rotateXAxisTicks |
boolean |
true |
enable automic rotation of x-axis ticks to prevent overlaps |
| maxXAxisTickLength |
number |
16 |
max length of the ticks. If trimXAxisTicks is true, ticks over this length will be trimmed |
| maxYAxisTickLength |
number |
16 |
max length of the ticks. If trimYAxisTicks is true, ticks over this length will be trimmed |
| xAxisTickFormatting |
function |
|
the x axis tick formatting |
| yAxisTickFormatting |
function |
|
the y axis tick formatting |
| xAxisTicks |
any[] |
|
predefined list of x axis tick values |
| yAxisTicks |
any[] |
|
predefined list of y axis tick values |
| showDataLabel |
boolean |
false |
displays the value number next to the bar |
| noBarWhenZero |
boolean |
true |
hide bar if value is 0 and setting is true |
| gradient |
boolean |
false |
fill elements with a gradient instead of a solid color |
| activeEntries |
object[] |
[] |
elements to highlight |
| barPadding |
number |
8 |
padding between bars in px |
| tooltipDisabled |
boolean |
false |
show or hide the tooltip |
| tooltipTemplate |
TemplateRef |
|
a custom ng-template to be displayed inside the tooltip |
| yScaleMax |
number |
|
the maximum value of the y axis (ignored if chart data contains a higher value) |
| yScaleMin |
number |
|
the minimum value of the y axis (ignored if chart data contains a lower value) |
| roundEdges |
boolean |
true |
round edges for the bars |
| wrapTicks |
boolean |
false |
axis tick labels will wrap based on available space |
Outputs
| Property |
Description |
| select |
click event |
| activate |
element activation event (mouse enter) |
| deactivate |
element deactivation event (mouse leave) |
The data format is single series:
[
{
"name": "Germany",
"value": 8940000
},
{
"name": "USA",
"value": 5000000
}
]