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.net/s3xnm5v8/
Update Understood. It is necessary to use Nodes. https://jsfiddle.net/p4f21w7e/
The key thing to realise is that there are two ways to colour your chart:
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.net/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:
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.com/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']
}]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.