2

I'm having trouble setting the color of the end column of my highcharts sankey diagram. For customizing the colors I used the following option:

      series: [{
        keys: ['from', 'to', 'weight', 'visible'],
        data: JSON.parse(this.data.get('flow-data')),
        nodes: JSON.parse(this.data.get('node-data')),
        type: 'sankey',
        name: 'segments',
        linkOpacity: 0.0
      }]

I'm setting the colors for each node as followed:

[{"id":"1?0","column":1,"color":"rgba(222, 27, 0, 1.0)"},
{"id":"2?0","column":1,"color":"rgba(194, 31, 9, 0.917)"},
{"id":"3?0","column":1,"color":"rgba(166, 35, 18, 0.833)"},
{"id":"4?0","column":1,"color":"rgba(138, 39, 27, 0.75)"},
{"id":"5?0","column":1,"color":"rgba(110, 43, 36, 0.667)"},
{"id":"1?1","column":2,"color":"rgba(222, 27, 0, 1.0)"},
{"id":"2?1","column":2,"color":"rgba(194, 31, 9, 0.917)"},
{"id":"3?1","column":2,"color":"rgba(166, 35, 18, 0.833)"},
{"id":"4?1","column":2,"color":"rgba(138, 39, 27, 0.75)"},
{"id":"5?1","column":2,"color":"rgba(110, 43, 36, 0.667)"},
{"id":"5?2","column":3,"color":"rgba(110, 43, 36, 0.667)"},
{"id":"1?2","column":3,"color":"rgba(222, 27, 0, 1.0)"},
{"id":"2?2","column":3,"color":"rgba(194, 31, 9, 0.917)"},
{"id":"3?2","column":3,"color":"rgba(166, 35, 18, 0.833)"},
{"id":"4?2","column":3,"color":"rgba(138, 39, 27, 0.75)"},
{"id":"1?3","column":4,"color":"rgba(222, 27, 0, 1.0)"},
{"id":"2?3","column":4,"color":"rgba(194, 31, 9, 0.917)"},
{"id":"3?3","column":4,"color":"rgba(166, 35, 18, 0.833)"},
{"id":"4?3","column":4,"color":"rgba(138, 39, 27, 0.75)"},
{"id":"5?3","column":4,"color":"rgba(110, 43, 36, 0.667)"},
{"id":"1?4","column":5,"color":"rgba(222, 27, 0, 1.0)"},
{"id":"2?4","column":5,"color":"rgba(194, 31, 9, 0.917)"},
{"id":"3?4","column":5,"color":"rgba(166, 35, 18, 0.833)"},
{"id":"4?4","column":5,"color":"rgba(138, 39, 27, 0.75)"},
{"id":"5?4","column":5,"color":"rgba(110, 43, 36, 0.667)"},
{"id":"1?6","column":6,"color":"rgba(222, 27, 0, 1.0)"},
{"id":"2?6","column":6,"color":"rgba(194, 31, 9, 0.917)"},
{"id":"3?6","column":6,"color":"rgba(166, 35, 18, 0.833)"},
{"id":"4?6","column":6,"color":"rgba(138, 39, 27, 0.75)"},
{"id":"5?6","column":6,"color":"rgba(110, 43, 36, 0.667)"}]

Everything works fine, except the last column (6), which is generated somehow by highcharts doesn't apply to the specified color.

This is the result:

Image

JSFiddle

Fadi A.
  • 21
  • 4

0 Answers0