Highcharts.chart('container', {
chart: {
spacingBottom: 150,
marginRight: 120,
// margin: [50, 50, 50, 50], // Top, right, bottom, left
height: 3500,
width: 2500
},
title: {
text: 'Phylogenetic language tree'
},
series: [{
type: 'treegraph',
keys: ['parent', 'id', 'level'],
clip: false,
data: [
[undefined, 'Proto Indo-European'],
['Proto Indo-European', 'Balto-Slavic'],
['Proto Indo-European', 'Germanic'],
['Proto Indo-European', 'Celtic'],
['Proto Indo-European', 'Italic'],
['Proto Indo-European', 'Hellenic'],
['Proto Indo-European', 'Anatolian'],
['Proto Indo-European', 'Indo-Iranian'],
['Proto Indo-European', 'Tocharian'],
['Indo-Iranian', 'Dardic'],
['Indo-Iranian', 'Indic'],
['Indo-Iranian', 'Iranian'],
['Iranian', 'Old Persian'],
['Old Persian', 'Middle Persian'],
['Indic', 'Sanskrit'],
['Italic', 'Osco-Umbrian'],
['Italic', 'Latino-Faliscan'],
['Latino-Faliscan', 'Latin'],
['Celtic', 'Brythonic'],
['Celtic', 'Goidelic'],
['Germanic', 'North Germanic'],
['Germanic', 'West Germanic'],
['Germanic', 'East Germanic'],
['North Germanic', 'Old Norse'],
['North Germanic', 'Old Swedish'],
['North Germanic', 'Old Danish'],
['West Germanic', 'Old English'],
['West Germanic', 'Old Frisian'],
['West Germanic', 'Old Dutch'],
['West Germanic', 'Old Low German'],
['West Germanic', 'Old High German'],
['Old Norse', 'Old Icelandic'],
['Old Norse', 'Old Norwegian'],
['Old Swedish', 'Middle Swedish'],
['Old Danish', 'Middle Danish'],
['Old English', 'Middle English'],
['Old Dutch', 'Middle Dutch'],
['Old Low German', 'Middle Low German'],
['Old High German', 'Middle High German'],
['Balto-Slavic', 'Baltic'],
['Balto-Slavic', 'Slavic'],
['Slavic', 'East Slavic'],
['Slavic', 'West Slavic'],
['Slavic', 'South Slavic'],
['Polish', 'POLISH2'],
['PPPPPPPPP1', 'QQQQQQQQQ'],
// Leaves:
['Proto Indo-European', 'Phrygian', 6],
['Proto Indo-European', 'Armenian', 6],
['Proto Indo-European', 'Albanian', 6],
['Proto Indo-European', 'Thracian', 6],
['Tocharian', 'Tocharian A', 6],
['Tocharian', 'Tocharian B', 6],
['Anatolian', 'Hittite', 6],
['Anatolian', 'Palaic', 6],
['Anatolian', 'Luwic', 6],
['Anatolian', 'Lydian', 6],
['Iranian', 'Balochi', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Kurdish', 6],
['Iranian', 'Pashto', 6],
['Iranian', 'Sogdian', 6],
['Old Persian', 'Pahlavi', 6],
['Middle Persian', 'Persian', 6],
['Hellenic', 'Greek', 6],
['Dardic', 'Dard', 6],
['Sanskrit', 'Sindhi', 6],
['Sanskrit', 'Romani', 6],
['Sanskrit', 'Urdu', 6],
['Sanskrit', 'Hindi', 6],
['Sanskrit', 'Bihari', 6],
['Sanskrit', 'Assamese', 6],
['Sanskrit', 'Bengali', 6],
['Sanskrit', 'Marathi', 6],
['Sanskrit', 'Gujarati', 6],
['Sanskrit', 'Punjabi', 6],
['Sanskrit', 'Sinhalese', 6],
['Osco-Umbrian', 'Umbrian', 6],
['Osco-Umbrian', 'Oscan', 6],
['Latino-Faliscan', 'Faliscan', 6],
['Latin', 'Portugese', 6],
['Latin', 'Spanish', 6],
['Latin', 'French', 6],
['Latin', 'Romanian', 6],
['Latin', 'Italian', 6],
['Latin', 'Catalan', 6],
['Latin', 'Franco-Provençal', 6],
['Latin', 'Rhaeto-Romance', 6],
['Brythonic', 'Welsh', 6],
['Brythonic', 'Breton', 6],
['Brythonic', 'Cornish', 6],
['Brythonic', 'Cuymbric', 6],
['Goidelic', 'Modern Irish', 6],
['Goidelic', 'Scottish Gaelic', 6],
['Goidelic', 'Manx', 6],
['East Germanic', 'Gothic', 6],
['Middle Low German', 'Low German', 6],
['Middle High German', '(High) German', 6],
['Middle High German', 'Yiddish', 6],
['Middle English', 'English', 6],
['Middle Dutch', 'Hollandic', 6],
['Middle Dutch', 'Flemish', 6],
['Middle Dutch', 'Dutch', 6],
['Middle Dutch', 'Limburgish', 6],
['Middle Dutch', 'Brabantian', 6],
['Middle Dutch', 'Rhinelandic', 6],
['Old Frisian', 'Frisian', 6],
['Middle Danish', 'Danish', 6],
['Middle Swedish', 'Swedish', 6],
['Old Norwegian', 'Norwegian', 6],
['Old Norse', 'Faroese', 6],
['Old Icelandic', 'Icelandic', 6],
['Baltic', 'Old Prussian', 6],
['Baltic', 'Lithuanian', 6],
['Baltic', 'Latvian', 6],
['West Slavic', 'Polish', 6],
['POLISH2', 'PPPPPPPPP', 7],
['POLISH2', 'PPPPPPPPP', 8],
['POLISH2', 'PPPPPPPPP', 8],
['POLISH2', 'PPPPPPPPP1', 8],
['POLISH2', 'PPPPPPPPP', 8],
['POLISH2', 'PPPPPPPPP', 8],
['POLISH2', 'PPPPPPPPP', 8],
['POLISH2', 'PPPPPPPPP', 8],
['QQQQQQQQQ', '_=========_', 10],
['West Slavic', 'Slovak', 6],
['West Slavic', 'Czech', 6],
['West Slavic', 'Wendish', 6],
['East Slavic', 'Bulgarian', 6],
['East Slavic', 'Old Church Slavonic', 6],
['East Slavic', 'Macedonian', 6],
['East Slavic', 'Serbo-Croatian', 6],
['East Slavic', 'Slovene', 6],
['South Slavic', 'Russian', 6],
['South Slavic', 'Ukrainian', 6],
['South Slavic', 'Belarusian', 6],
['South Slavic', 'Rusyn', 6]
],
marker: {
symbol: 'circle',
radius: 6,
fillColor: '#ffffff',
lineWidth: 3
},
dataLabels: {
align: 'left',
pointFormat: '{point.id}',
style: {
color: '#000000',
textOutline: '3px #ffffff',
whiteSpace: 'nowrap'
},
x: 24,
crop: false,
overflow: 'none'
},
levels: [{
level: 1,
levelIsConstant: false
},
{
level: 2,
colorByPoint: true
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: -0.5
}
},
{
level: 4,
colorVariation: {
key: 'brightness',
to: 0.5
}
},
{
level: 6,
dataLabels: {
x: 10
},
marker: {
radius: 4
}
}
]
}]
});
html,
body {
height: 100%;
margin: 0;
}
.navbar {
font-family: 'Consolas', monospace;
font-size: 14px;
}
.sidebar {
font-family: 'Consolas', monospace;
font-size: 12px;
position: fixed;
top: 0;
right: 0;
width: 350px;
height: 100%;
padding-top: 56px;
display: flex;
flex-direction: column;
}
.chart-container {
margin-right: 350px;
height: calc(100vh - 56px);
padding-top: 56px;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
border: none;
position: relative;
}
td {
border: none;
padding: 10px;
position: relative;
}
.label {
position: absolute;
top: 10px;
left: 10px;
background-color: white;
padding: 0 5px;
font-weight: bold;
z-index: 1;
}
tr:first-child td {
height: 20%;
}
tr:last-child td {
height: 80%;
}
.label {
position: absolute;
top: 10px;
left: 10px;
background-color: white;
padding: 0 5px;
font-weight: bold;
z-index: 1;
}
textarea {
position: absolute;
font-family: 'Consolas', monospace;
font-size: 11px;
top: 40px;
left: 10px;
right: 10px;
bottom: 80px;
padding: 10px;
box-sizing: border-box;
width: calc(100% - 20px);
height: calc(100% - 80px);
white-space: nowrap;
overflow: auto;
resize: none;
border: 1px solid white;
}
.highcharts-figure {
/* top: 80px;
max-width: 1200px;
min-width: 360px; */
max-height: 1200px;
height: 100%;
width: 100%;
}
.btn {
font-family: 'Consolas', monospace;
font-size: 14px;
}
#container {
width: 3000px;
height: 3400px;
}
.footer {
font-family: 'Consolas', monospace;
font-size: 12px;
background-color: #212529;
color: white;
text-align: center;
padding: 5px;
text-shadow: 1px 1px 3px #44996e;
user-select: none;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.footer p {
margin: 0;
}
.btn {
border: 1px solid white;
color: white;
background-color: transparent;
transition: border-color 0.3s ease, color 0.3s ease;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/treegraph.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<div id="navbar-placeholder"></div>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
</p>
</figure>
<!-- Chart Container -->
<div class="chart-container">
<div id="highchart-container" style="width: 100%; height: 100%;"></div>
</div>
<div class="sidebar bg-dark text-white">
<table>
<tr>
<td>
<span class="label text-white bg-dark">toolbox</span>
<div class="button-container d-flex flex-wrap justify-content-center">
<button class="btn btn-secondary m-2">Button 1</button>
<button class="btn btn-secondary m-2">Button 2</button>
<button class="btn btn-secondary m-2">Button 3</button>
<button class="btn btn-secondary m-2">Button 4</button>
<button class="btn btn-secondary m-2">Button 5</button>
<button class="btn btn-secondary m-2">Button 6</button>
<button class="btn btn-secondary m-2">Button 7</button>
<button class="btn btn-secondary m-2">Button 8</button>
<button class="btn btn-secondary m-2">Button 9</button>
</div>
</td>
</tr>
<tr>
<td>
<span class="label text-white bg-dark">details</span>
<!-- Label for the second row -->
<div class="textarea-wrapper">
<textarea class="text-white bg-dark" placeholder="..."></textarea>
</div>
</td>
</tr>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
