PearlChart

PearlChart

A pearl chart component.

Constructor

new PearlChart(options)

Source:
Examples

browser usage:

const PearlChartExample = new OECDCharts.PearlChart({
  container: '#PearlChartExample',
  extent: [300, 600],
  title: 'Pearl Chart',
  renderInfoButton: true,
  showTicks: true,
  showLabels: false,
  colorLabels: true,
  callback: data => console.log(data),
  data: [
    {
      value: 410,
      color: '#900c3f',
      showLabel: true, // default is false
      labelPlacement: 'bottom' // default 'top'
    },
    {
      value: 520,
      color: '#189aa8',
      showLabel: false, // default is false
      labelPlacement: 'top'
    }
  ],
  labelFormat: val => `${Math.round(val)} $`
});

ES6 modules usage:

import { PearlChart } from 'oecd-simple-charts';
import 'oecd-simple-charts/build/oecd-simple-charts.css'

const pearlChart = new PearlChart({ chartOptions });
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
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'
  }
]

Methods

update(data)

Source:
Example
PearlChartExample.update([
  {
    value: 490,
    color: '#900c3f'
  },
  {
    value: 820,
    color: '#189aa8'
  }
]);
Parameters:
Name Type Description
data array

an array containing objects with the new data