javascripthtmlcsshighcharts
Highchart vertical and horizontal scrollbar
I have dependency information that I would like to show on a web page using Highcharts. I chose Treegraph chart as I think it's more suitable for what I need it for. This is the link to a demo https://www.highcharts.com/demo/highcharts/treegraph-chart.
The issue I have and I couldn't overcome on my own is that when there are lots of branches and Leaves then the whole graph will get squeezed to show everything in one view. jsfiddle for code below is available in the link above.
Highcharts.chart('container', {
chart: {
spacingBottom: 30,
marginRight: 120,
height: 1200,
scrollablePlotArea: {
minWidth: 1500, // Set minimum width for horizontal scrolling
minHeight: 1200 // Set minimum height for vertical scrolling
}
},
title: {
text: 'Phylogenetic language tree'
},
series: [
{
type: 'treegraph',
keys: ['parent', 'id', 'level', 'color'], // Add color to keys
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', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP1', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['QQQQQQQQQ', '_=========_', 6],
['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,
colorByPoint: true
},
{
level: 2,
colorVariation: {
key: 'brightness',
to: -0.5
}
},
{
level: 3,
colorVariation: {
key: 'brightness',
to: 0.5
}
},
{
level: 6,
dataLabels: {
x: 10
},
marker: {
radius: 4
}
}
]
}
]
});
document.getElementById('container').style.overflow = 'auto';
document.getElementById('container').style.width = '100%';
document.getElementById('container').style.height = '800px';
How can I avoid the squeezing and add like a vertical and horizontal scrollbar? and as the graph grow vertically or horizontally instead of putting stuff on one another, grow the graph and add scrollbars(or maybe the ability to move the graph by dragging the graph).
I have been stuck on this for two days and it seems that I cannot figure it out on my own. I would appreciate any help. I'm not a web developer or a UI designer so please forgive any obvious thing that I might have missed.
Modified code
HTML,
<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>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
The treegraph series can be used to render phylogenetic trees, a typical visualization of genetics and related tree structures.
</p>
</figure>
CSS,
.highcharts-figure {
margin: 0 auto;
max-width: 1200px;
min-width: 360px;
}
.highcharts-figure {
height: 180px;
width: 100%;
overflow: auto;
border: 1px solid red;
}
#container {
width: 3000px;
height: 3400px;
}
Javascript,
// stackoverflow
Highcharts.chart('container', {
chart: {
spacingBottom: 30,
marginRight: 120,
height: 2400,
width: 2000
},
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', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP1', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['POLISH2', 'PPPPPPPPP', 6],
['QQQQQQQQQ', '_=========_', 6],
['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
}
}
]
}]
});
Result
Close node,
Open node,
as you can see, the scrollbar still shows some space but the graph is turning backward instead of forward.
Solution
The problem lies in your data structure. You need to add points without a defined level or define it correctly. For example:
series: [{
data: [
...,
["West Slavic", "Polish", 6],
["Polish", "POLISH2", 7],
["POLISH2", "PPPPPPPPP", 8],
["POLISH2", "PPPPPPPPP", 8],
["POLISH2", "PPPPPPPPP", 8],
["POLISH2", "PPPPPPPPP1", 8],
["POLISH2", "PPPPPPPPP", 8],
["POLISH2", "PPPPPPPPP", 8],
["POLISH2", "PPPPPPPPP", 8],
["POLISH2", "PPPPPPPPP", 8],
...
],
...
}]
Live demo: https://jsfiddle.net/BlackLabel/s16c4rLf/
API Reference: https://api.highcharts.com/highcharts/series.treegraph.data
- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function