I’m working on a Sankey chart using Highcharts, but I’m encountering an issue where only the data labels are being displayed, while the nodes and links (edges) are not visible at all.
Here is the code and below that a link to a JSFiddle:
Highcharts.chart('container', {
title: {
text: 'Luxury Car Ownership',
style: {fontSize: 20}
},
accessibility: {
point: {valueDescriptionFormat: '{index}. {point.from} to {point.to}, {point.weight}.'}
},
tooltip: {
headerFormat: null,
pointFormat:
'{point.fromNode.name} u2192 {point.toNode.name}: {point.weight} people',
nodeFormat: '{point.name}: {point.sum} people'
},
series: [{
nodePadding: 20,
borderColor: "#1a1a1a",
borderWidth: 1,
keys: ['from', 'to', 'weight'],
nodes: [
{id: '25 - 50 years old', column: 1},
{id: 'Owns Luxury Car', column: 2},
{id: 'Does Not Own Luxury Car', column: 2},
{id: 'Luxury Car with Ferrari', column: 3},
{id: 'Luxury Car with Lamborghini', column: 3},
{id: 'Luxury Car with Porsche', column: 3},
{id: 'Luxury Car with Rolls-Royce', column: 3},
{id: 'Luxury Car with Others', column: 3},
{id: 'No Luxury Car but Interested', column: 4, offset: 100},
{id: 'No Luxury Car and Undecided', column: 4, offset: 100},
{id: 'No Luxury Car and Not Interested', column: 4, offset: 100},
{id: 'Ferrari Loyal', column: 5, offset: -150},
{id: 'Ferrari Disloyal', column: 5, offset: -150},
{id: 'Lamborghini Loyal', column: 5, offset: -150},
{id: 'Lamborghini Disloyal', column: 5, offset: -150},
{id: 'Porsche Loyal', column: 5, offset: -150},
{id: 'Porsche Disloyal', column: 5, offset: -150},
{id: 'Ferrari Disloyal to Rolls-Royce', column: 6, offset: -150},
{id: 'Ferrari Disloyal to Others', column: 6, offset: -150},
{id: 'Lamborghini Disloyal to Rolls-Royce', column: 6, offset: -150},
{id: 'Lamborghini Disloyal to Others', column: 6, offset: -150},
{id: 'Porsche Disloyal to Rolls-Royce', column: 6, offset: -150},
{id: 'Porsche Disloyal to Others', column: 6, offset: -150},
{id: 'Rolls-Royce Total Potential for Luxury Cars', column: 7}
],
data: [
['25 - 50 years old', 'Owns Luxury Car', 7014552],
['25 - 50 years old', 'Does Not Own Luxury Car', 19270034],
['Owns Luxury Car', 'Luxury Car with Ferrari', 1456019],
['Owns Luxury Car', 'Luxury Car with Lamborghini', 655591],
['Owns Luxury Car', 'Luxury Car with Porsche', 789634],
['Owns Luxury Car', 'Luxury Car with Rolls-Royce', 618173],
['Owns Luxury Car', 'Luxury Car with Others', 4690510],
['Does Not Own Luxury Car', 'No Luxury Car but Interested', 2172559],
['Does Not Own Luxury Car', 'No Luxury Car and Undecided', 15569023],
['Does Not Own Luxury Car', 'No Luxury Car and Not Interested', 1528450],
['Luxury Car with Ferrari', 'Ferrari Loyal', 465784],
['Luxury Car with Ferrari', 'Ferrari Disloyal', 990234],
['Ferrari Disloyal', 'Ferrari Disloyal to Rolls-Royce', 153567],
['Ferrari Disloyal', 'Ferrari Disloyal to Others', 836667],
['Ferrari Disloyal to Rolls-Royce', 'Rolls-Royce Total Potential for Luxury Cars', 153567],
['Luxury Car with Lamborghini', 'Lamborghini Loyal', 319094],
['Luxury Car with Lamborghini', 'Lamborghini Disloyal', 336497],
['Lamborghini Disloyal', 'Lamborghini Disloyal to Rolls-Royce', 50917],
['Lamborghini Disloyal', 'Lamborghini Disloyal to Others', 285579],
['Lamborghini Disloyal to Rolls-Royce', 'Rolls-Royce Total Potential for Luxury Cars', 50917],
['Luxury Car with Porsche', 'Porsche Loyal', 131638],
['Luxury Car with Porsche', 'Porsche Disloyal', 657996],
['Porsche Disloyal', 'Porsche Disloyal to Rolls-Royce', 100700],
['Porsche Disloyal', 'Porsche Disloyal to Others', 557296],
['Porsche Disloyal to Rolls-Royce', 'Rolls-Royce Total Potential for Luxury Cars', 100700],
['No Luxury Car but Interested', 'Rolls-Royce Total Potential for Luxury Cars', 2172559],
['No Luxury Car and Undecided', 'Rolls-Royce Total Potential for Luxury Cars', 15569023]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
https://jsfiddle.net/Niggels/paosudhb/7/
Current Workaround:
The only way I’ve managed to get the nodes and links to display is by setting minLinkWidth in the series to a value like 10. However, this causes all the links to have the same thickness, which is not what I need. I require the links to be proportional to their respective values (weights).
Has anyone experienced a similar issue, or does anyone have suggestions on how to resolve this? I’m looking for a solution that allows the nodes and links to display correctly without forcing a minimum link width that disrupts the proportionality of the links.
Thanks in advance!
Things I’ve Tried:
- Data Label Overlap: I’ve tried enabling and disabling
dataLabels.allowOverlap, but this didn’t resolve the issue. - Chart Dimensions: I’ve adjusted the height and width of the chart to
ensure there’s enough space for everything to display properly. - Node and Link Verification: I’ve double-checked that all nodes are
referenced in the links, and vice versa, to ensure no missing
connections.
EDIT: Ok, somehow i fixed it. I played with the column numbering and i think I need the column 0 to start with. In the previous, corrupted chart I started with column 1. Now i started with Column 0 and that seems to have fixed the problem!