How to make the series color identical to the data color?
In the example, the "imbalance" data is red, but the series is colored blue.
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
series: [{
colors: ["#90CAF9", "#F44336", "#1565C0"],
keys: ['from', 'to', 'weight'],
data: [
{name: "prop-1", color: "#90CAF9", from: "prop-1", to: "transition", weight: 0},
{name: "prop-2", color: "#90CAF9", from: "prop-2", to: "transition", weight: 4.14},
{name: "imbalance", color: "#F44336", from: "imbalance", to: "transition", weight: 0.6},
{name: "prop-3", color: "#1565C0", from: "transition", to: "prop-3", weight: 4.74},
{name: "prop-4", color: "#1565C0", from: "transition", to: "prop-4", weight: 0},
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
Example: /
Update Understood. It is necessary to use Nodes. /
How to make the series color identical to the data color?
In the example, the "imbalance" data is red, but the series is colored blue.
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
series: [{
colors: ["#90CAF9", "#F44336", "#1565C0"],
keys: ['from', 'to', 'weight'],
data: [
{name: "prop-1", color: "#90CAF9", from: "prop-1", to: "transition", weight: 0},
{name: "prop-2", color: "#90CAF9", from: "prop-2", to: "transition", weight: 4.14},
{name: "imbalance", color: "#F44336", from: "imbalance", to: "transition", weight: 0.6},
{name: "prop-3", color: "#1565C0", from: "transition", to: "prop-3", weight: 4.74},
{name: "prop-4", color: "#1565C0", from: "transition", to: "prop-4", weight: 0},
],
type: 'sankey',
name: 'Sankey demo series'
}]
});
Example: https://jsfiddle/s3xnm5v8/
Update Understood. It is necessary to use Nodes. https://jsfiddle/p4f21w7e/
Share Improve this question edited Dec 11, 2018 at 7:20 al.koval asked Dec 11, 2018 at 4:32 al.kovalal.koval 2,5625 gold badges31 silver badges35 bronze badges2 Answers
Reset to default 7The key thing to realise is that there are two ways to colour your chart:
- The series colours (series[].colors) will colour the nodes.
- The series data (series[].data[].color) colour your flows.
Take a look at this example:
series: [{
colors: ["#880000", "#AFAFAF", "#008800", "#000088", "#ffb238", "#ffee37"],
data: [
{color: "#BB0000", from: "Red", to: "Colour Demo", weight: 10},
{color: "#00BB00", from: "Green", to: "Colour Demo", weight: 4}, {color: "#0000BB", from: "Blue", to: "Colour Demo", weight: 6},
{color: "#ffb238", from: "Colour Demo", to: "Orange", weight: 10},
{color: "#ffee37", from: "Colour Demo", to: "Yellow", weight: 10}
]
}]
https://jsfiddle/jjjjssssfidd/c2dbjshx/2/
The nodes are coloured using the series colours in the order in which they are rendered (left to right, moving down). So, in this example:
- "Red" first (using series[].colors[0])
- Then "Colour Demo" (which uses series[].colors[1])
- Back to Green (series[].colors[2])
- Down to "Blue" (using series[].colors[3])
- Then over to Orange (series[].colors[4])
- Finally Yellow (series[].colors[5])
The flow itself is coloured as per the associated color for that data point, so this is a straight forward association.
You can use the 'colors' property of the sankey series type.
https://api.highcharts./highcharts/series.sankey.colors
series: [{
keys: ['from', 'to', 'weight'],
data: [
{from:'Brazil', to:'Portugal', weight:5},
['Canada', 'Portugal', 1 ],
['Canada', 'France', 5 ],
['Canada', 'England', 1 ],
['Mexico', 'Portugal', 1 ],
['Mexico', 'France', 1 ],
['Mexico', 'Spain', 5 ],
['Mexico', 'England', 1 ],
['USA', 'Portugal', 1 ],
['USA', 'France', 1 ],
['USA', 'Spain', 1 ],
['USA', 'England', 5 ]
],
type: 'sankey',
name: 'Sankey demo series',
colors: ['#00796B', '#ff0000', '#00ff00','#0000ff']
}]