BaseChart

Result

Loading...

Live Editor

const chartOptions = { title: { text: 'Combination chart', }, xAxis: { categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'], }, series: [ { type: 'column', name: 'Jane', data: [3, 2, 1, 3, 4], }, { type: 'column', name: 'John', data: [2, 3, 5, 7, 6], }, { type: 'column', name: 'Joe', data: [4, 3, 3, 9, 0], }, { type: 'spline', name: 'Average', data: [3, 2.67, 3, 6.33, 3.33], marker: { lineWidth: 2, }, }, ], }; render(<BaseChart id="demo-component" options={chartOptions} />);

const chartOptions = {
  title: {
    text: 'Combination chart',
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
  },
  series: [
    {
      type: 'column',
      name: 'Jane',
      data: [3, 2, 1, 3, 4],
    },
    {
      type: 'column',
      name: 'John',
      data: [2, 3, 5, 7, 6],
    },
    {
      type: 'column',
      name: 'Joe',
      data: [4, 3, 3, 9, 0],
    },
    {
      type: 'spline',
      name: 'Average',
      data: [3, 2.67, 3, 6.33, 3.33],
      marker: {
        lineWidth: 2,
      },
    },
  ],
};

render(<BaseChart id="demo-component" options={chartOptions} />);

Extending Base Chart

This demo relies on a separate bundle of ema.charts or explicity using the Highcharts modules. This bundle includes the Sankey and Organization modules.

From the CDN

<script
  src="http://emacontent.com/bundles/1.7.3/ema.charts.accessibility.more.8.0.4.js"
  type="text/javascript"
></script>

When Bundling

Explicity extend Highcharts with Sankey and Organization.

import Highcharts from 'highcharts';
import { default as TreeMap } from 'highcharts/modules/treemap';
import { default as More } from 'highcharts/highcharts-more';
import { default as Accessibility } from 'highcharts/modules/accessibility';
import { default as Sankey } from 'highcharts/modules/sankey';
import { default as Organization } from 'highcharts/modules/organization';

TreeMap(Highcharts);
More(Highcharts);
Accessibility(Highcharts);
Sankey(Highcharts);
Organization(Highcharts);

import { BaseChart } from '@emoney/kyber-charts';
import { chartColors, secondaryColors } from '@emoney/kyber-helpers';

<BaseChart
  id="base-chart-with-custom-series"
  title="Organizational Chart"
  chartDefaultOptions={{
    chart: {
      inverted: true,
      height: 700,
    },
    series: [
      {
        type: 'organization',
        name: 'Highsoft',
        keys: ['from', 'to'],
        data: [
          ['Shareholders', 'Board'],
          ['Board', 'CEO'],
          ['CEO', 'CTO'],
          ['CEO', 'CPO'],
          ['CEO', 'CSO'],
          ['CEO', 'HR'],
          ['CTO', 'Product'],
          ['CTO', 'Web'],
          ['CSO', 'Sales'],
          ['HR', 'Market'],
          ['CSO', 'Market'],
          ['HR', 'Market'],
          ['CTO', 'Market'],
        ],
        levels: [
          {
            level: 0,
            color: secondaryColors.DARK_GREY,
            height: 40,
          },
          {
            level: 1,
            color: secondaryColors.GREY,
            dataLabels: {
              color: 'black',
            },
            height: 40,
          },
          {
            level: 2,
            color: chartColors.EMINENCE,
          },
          {
            level: 3,
            color: chartColors.PRUSSIAN_BLUE,
          },
          {
            level: 4,
            color: chartColors.STEEL_BLUE,
          },
          {
            level: 5,
            color: chartColors.CRUISE,
          },
        ],
        nodes: [
          {
            id: 'Shareholders',
          },
          {
            id: 'Board',
          },
          {
            id: 'CEO',
            title: 'CEO',
            name: 'Grethe Hjetland',
          },
          {
            id: 'HR',
            title: 'HR/CFO',
            name: 'Anne Jorunn',
          },
          {
            id: 'CTO',
            title: 'CTO',
            name: 'Christer Vasseng',
          },
          {
            id: 'CPO',
            title: 'CPO',
            name: 'Torstein Hønsi',
          },
          {
            id: 'CSO',
            title: 'CSO',
            name: 'Anita Nesse',
          },
          {
            id: 'Product',
            name: 'Product developers',
          },
          {
            id: 'Web',
            name: 'Web devs, sys admin',
          },
          {
            id: 'Sales',
            name: 'Sales team',
          },
          {
            id: 'Market',
            name: 'Marketing team',
            column: 5,
          },
        ],
        colorByPoint: false,
        dataLabels: {
          color: 'white',
        },
        borderColor: 'black',
        borderWidth: 2,
      },
    ],
  }}
/>;