BoxPlot

Constructor

new BoxPlot(options)

Source:

• BoxPlot.js, line 61

Examples

Browser usage:

const BoxPlotExample = new OECDCharts.BoxPlot({
  container: '#BoxPlotExample',
  title: 'Box Plot',
  extent: [350, 650],
  step: 50,
  renderInfoButton: true,
  data: [
   {
     values: [480, 500, 530],
     colors: ['#fddd5d', '#C7754E', '#900c3f'],
     labelLeft: {
       text: 'male low'
     },
     labelRight: {
       text: 'male top'
     }
   },
   {
     values: [400, 520, 550],
     colors: ['#aad356', '#61B77F', '#189aa8']
   }
  ]
});

ES6 modules usage:

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

const boxPlot = new BoxPlot({ chartOptions });

Parameters:

Name	Type	Description
options	object	The options object for the Box Plot Properties Name Type Attributes Default Description container string The DOM element to use as container title string The title to display extent array The min and max value for generating the x-axis step number Indicates the stepsize for the x-axis ticks legend string HTML code for the legend renderInfoButton bool <optional> false The info-icon for the tooltip, renders after the title fontSize int <optional> 12 The font-size for the labels in px markerHeight int <optional> 30 The height of the marker in px markerHeight int <optional> 10 The width of the marker in px radius int <optional> 10 The radius for the pearl in px data array The data as array Properties Name Type Description values array The values to display colors array The colors for the elements labelLeft object (optional) Label for the left marker Properties Name Type Description label string (optional) Text for the left marker icon string (optional) Path to icon for the left marker labelRight object (optional) Label for the right marker Properties Name Type Description label string (optional) Text for the right marker icon string (optional) Path to icon for the right marker

BoxPlotExample.update([
  {
    values: [400, 550, 580],
    colors: ['#fddd5d', '#C7754E', '#900c3f'],
    labelLeft: {
      text: 'new label left',
    },
    labelRight: {
      text: 'new label right',
    }
  },
  {
    values: [400, 520, 570],
    colors: ['#aad356', '#61B77F', '#189aa8']
  }
]);