Constructor
new PearlChart(options)
- Source:
Example
var callbackFunc = function(data) {
console.log(data);
}
var PearlChartExample = new OECDCharts.PearlChart({
container: '#PearlChartExample',
extent: [300, 600],
title: 'Pearl Chart',
renderInfoButton: true,
showTicks: true,
showLabels: false,
colorLabels: true,
callback: callbackFunc,
data: [
{
value: 410,
color: '#900c3f'
},
{
value: 520,
color: '#189aa8'
}
],
labelFormat: function(val) {
return Math.round(val) + '$';
}
});
Parameters:
| Name |
Type |
Description |
options |
object
|
The options object for the pearl chart.
Properties
| Name |
Type |
Attributes |
Default |
Description |
container |
string
|
|
|
The DOM element to use as container |
title |
string
|
|
|
The title to display |
renderInfoButton |
bool
|
<optional>
|
false
|
The info-Icon for the tooltip, renders after the title |
fontSize |
int
|
<optional>
|
14
|
The font-size for the labels in px |
radius |
int
|
<optional>
|
10
|
The radius for the pearl in px |
ticks |
int
|
<optional>
|
4
|
The number of ticks displayed under the pearl chart, will only be used if tickValues is not set |
tickValues |
array
|
|
|
An array of numbers that are displayed as ticks |
showTicks |
bool
|
<optional>
|
true
|
Hide or show ticks |
callback |
function
|
|
|
A function that is called on circle click |
labelFormat |
function
|
<optional>
|
val => Math.round(val * 10) / 10
|
A function for formatting circle labels |
showLabels |
function
|
<optional>
|
false
|
Hide or show circle labels |
colorLabels |
function
|
<optional>
|
false
|
Fill labels in circle color or black |
data |
array
|
|
|
The data as array. i.e.:
[
{
value: 410,
color: '#900c3f'
},
{
value: 520,
color: '#189aa8'
}
]
|
|