3

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/

enter image description here

Update Understood. It is necessary to use Nodes. https://jsfiddle.net/p4f21w7e/

al.koval
  • 2,087
  • 4
  • 28
  • 35

2 Answers2

7

The 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.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:

  • "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.

JamesG
  • 163
  • 1
  • 12
  • 1
    But is there a way to specifically set "Red" node to "#88000" rather than trying to get everythink in the right order to match the colors specified in series[].colors ? – Arcyno Mar 03 '21 at 09:44
  • I think I got my answer from this : https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/sankey/ – Arcyno Mar 03 '21 at 09:47
1

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']
}]

enter image description here

Romesh Panditha
  • 31
  • 1
  • 2