StackedChart

Constructor

new StackedChart(options)

Source:

• StackedChart.js, line 48

Examples

browser usage:

const StackedChartExample = new OECDCharts.StackedChart({
  container: '#StackedChartExample',
  title: 'Stacked Bar Chart',
  renderInfoButton: true,
  data: [
    {
      values: [1,2,3,4,5],
      barLabels: ['0%', '100%'],
      colors: ['#fddd5d', '#900c3f'],
      stackLabels: ['I', 'II', 'III', 'IV', 'V']
    },
    {
      values: [2,4,6,8,20],
      barLabels: ['0%', '100%'],
      colors: ['#fddd5d', '#189aa8']
    }
  ]
});

ES6 modules usage:

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

const stackedChart = new StackedChart({ chartOptions });

Parameters:

Name	Type	Description
options	object	The options object for the stacked 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 marginTop int <optional> 15 The space between the bars in px barHeight int <optional> 30 The height of a bar in px data array The data as array Properties Name Type Description values array The values to display as stacked bar chart barLabels array The labels to display left and right to the chart colors array Colors for the min and max value of the stacked bar chart stackLabels array Labels for the stacked elements

StackedChartExample.update([
  {
    values: [1,10,3,4,5],
    barLabels: ['0%', '100%'],
    colors: ['#fddd5d', '#900c3f'],
    stackLabels: ['1', '2', '3', '4', '5']
  },
  {
    values: [2,4,10,15,20],
    barLabels: ['0%', '100%'],
    colors: ['#fddd5d', '#189aa8']
  }
]);