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

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';
import { default as Sunburst } from 'highcharts/modules/sunburst';

TreeMap(Highcharts);
More(Highcharts);
Accessibility(Highcharts);
Sankey(Highcharts);
Organization(Highcharts);
Sunburst(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,
			},
		],
	}}
/>;

Props