Public
Edited
Apr 14, 2023
sankeyHorizontal = {
const figure = html`<div style="height: 600px; width:${Math.min(width, maxWidth)+'px'};">`;
Highcharts.chart(figure, {
credits: false, // removes watermark,
title: {
text: 'Highcharts Horizontal Sankey Diagram'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
data:
[
["Khandani Jack Msibi", "3sixty Health (Pty) Ltd", 1950000],
["Khandani Jack Msibi", "Mkhuseli Jack Investment Trust ", 112386.04],
["Mashaba family", "African Equity Corporation Pty Ltd", 500000],
["Mashabe family", "Black Like Me (Pty) Ltd", 301488.26],
["Oppenheimer family", "Jesicca Slack-Jell", 3333333],
["Oppenheimer family", "Ms Mary Slack", 15000000],
["Oppenheimer family", "Nicholas Frank Oppenheimer", 500000],
["Oppenheimer family", "Rebecca Oppenheimer", 3333333],
["Oppenheimer family", "Victoria Freudenheim", 3333334],
["Patrice Motsepe", "African Rainbow Minerals Limited", 9654089],
["Patrice Motsepe", "Botho Botho Commercial Enterprise Pty Ltd", 10000000],
["Patrice Motsepe", "Harmony Gold Mining Company Limited", 9654089],
["Unknown", "Martin Moshal", 22500000],
["Unknown", "Fynbos Ekwiteit (Pty) Ltd", 20099000],
["Unknown", "Batho Batho", 15000000],
["Unknown", "Chancellor House Trust", 15000000],
["Unknown", "United Manganese Of Kalahari", 15000000],
["Unknown", "PtyProps 274 (Pty) Ltd", 4212350.5],
["Unknown", "Friedrich Naumann Foundation", 2993876.84],
["Unknown", "Majestic Silver Trading 40 (Pty) Ltd", 2500000],
["Unknown", "Naspers Ltd", 2000000],
["Unknown", "Nonkwelo Investment Holdings", 2000000],
["Unknown", "Style Eyes of California (PTY) LTD", 1157520]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
return figure;
}
blank = {
const figure = html`<div style="height: 400px; width:${Math.min(width, maxWidth)+'px'};">`;
Highcharts.chart(figure, {
credits: false, // removes watermark,
})
//return figure;
}
maxWidth=800
Highcharts = {
const Highcharts = await require("highcharts");
await require("highcharts/highcharts-more.js");
await require("highcharts/highcharts-3d.js");
await require("highcharts/modules/exporting.js");
await require("highcharts/modules/export-data.js");
await require("highcharts/modules/accessibility.js");
await require("highcharts/modules/arc-diagram.js");
await require("highcharts/modules/histogram-bellcurve.js");
await require("highcharts/modules/bullet.js");
await require("highcharts/modules/cylinder.js");
await require("highcharts/modules/dependency-wheel.js");
await require("highcharts/modules/dumbbell.js");
await require("highcharts/modules/funnel.js");
await require("highcharts/modules/funnel3d.js");
await require("highcharts/modules/heatmap.js");
await require("highcharts/modules/item-series.js");
await require("highcharts/modules/lollipop.js");
await require("highcharts/modules/networkgraph.js");
await require("highcharts/modules/organization.js");
await require("highcharts/modules/pareto.js");
await require("highcharts/modules/pyramid3d.js");
await require("highcharts/modules/sankey.js");
await require("highcharts/modules/solid-gauge.js");
await require("highcharts/modules/streamgraph.js");
await require("highcharts/modules/sunburst.js");
await require("highcharts/modules/tilemap.js");
await require("highcharts/modules/timeline.js");
await require("highcharts/modules/treemap.js");
await require("highcharts/modules/variable-pie.js");
await require("highcharts/modules/variwide.js");
await require("highcharts/modules/vector.js");
await require("highcharts/modules/venn.js");
await require("highcharts/modules/windbarb.js");
await require("highcharts/modules/wordcloud.js");
await require("highcharts/modules/xrange.js");
return Highcharts;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
