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);

Result

Loading...

Live Editor

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, }, ], }} />;

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,
            },
        ],
    }}
/>;

Props