Flow chart in Highcharts adding list and line breaks

https://jsfiddle.net/ermacwins/817zry6a/7/

I am creating a flow chart

3 things have me stuck

1 (bottom blue boxes)

I can add 1 line break
I cannot add 2 line breaks.
The 2nd
just get ignored

2 (bottom blue boxes)

I cannot add an unordered list
The html tags gets ignored.

3

Can't get the arrow's appearance to change (fattened or shortened)

Highcharts.chart('container',
chart:
backgroundColor: 'white',
events:
load: function()

//Draw the flow chart
var ren = this.renderer,
colors = Highcharts.getOptions().colors,
rightArrow = ['M', 0, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];

// Headers
ren.label('', 20, 40)
.css(
fontWeight: 'bold'
)
.add();
ren.label('', 220, 40)
.css(
fontWeight: 'bold'
)
.add();
ren.label('', 440, 40)
.css(
fontWeight: 'bold'
)
.add();

// Top labels
ren.label('Risk<br/>Rewards', 10, 82)
.attr(
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 90,
width: 110
)
.css(
color: 'black'
)
.add()
.shadow(true);

ren.label('The<br/>Determination', 160, 82)
.attr(
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 90,
width: 110
)
.css(
color: 'black'
)
.add()
.shadow(true);

ren.label('Action<br/>Packed Theme', 310, 82)
.attr(
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 90,
width: 110
)
.css(
color: 'black'
)
.add()
.shadow(true);

ren.label('Awaiting<br/>Your<br/>Reply', 460, 82)
.attr(
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 90,
width: 110
)
.css(
color: 'black'
)
.add()
.shadow(true);

ren.label('Final<br/>Destination', 610, 82)
.attr(
fill: colors[2],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 90,
width: 110
)
.css(
color: 'black'
)
.add()
.shadow(true);

// Arrow
ren.path(rightArrow)
.attr(
'stroke-width': 2,
stroke: colors[1]
)
.translate(120, 100)
.add();


// Bottom labels
ren.label('84 cases<br/>Chemistry characterization', 30, 135)
.attr(
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 100
)
.css(
color: 'white',
width: '110px',
fontSize: '8px'
)
.add()
.shadow(true);

ren.label('1285 colors<br/><br/>Cases in dialogue', 180, 135)
.attr(
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 100
)
.css(
color: 'white',
width: '110px',
fontSize: '8px'
)
.add()
.shadow(true);

ren.label('60 drones<br/><br/>Sources are to<br/> be be named', 330, 135)
.attr(
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 100
)
.css(
color: 'white',
width: '110px',
fontSize: '8px'
)
.add()
.shadow(true);

ren.label('1162 metals<br/>Awaiting signatures<br/>Cases unknown', 480, 135)
.attr(
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 100
)
.css(
color: 'white',
width: '110px',
fontSize: '8px'
)
.add()
.shadow(true);

ren.label('', 630, 135)
.attr(
fill: colors[0],
stroke: 'white',
'stroke-width': 2,
padding: 5,
r: 5,
height: 100,
width: 110
)
.css(
color: 'white',
width: '110px',
fontSize: '8px'
)
.add()
.shadow(true);


,
title:
text: 'Active directory Projections',
style:
color: 'black'



);

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

1 Answer
1

First of all, you need to edit your post and add the appropriate link to JSFiddle example.

I can add 1 line break I cannot add 2 line breaks. The 2nd
just get ignored

It's because every string provided to renderer methods is parsed by some rules, and among others, two and more <br/> elements placed one by one are not respected. In order to make it work, just need to set baseline parameter equal to true when creating the label, then it should be actually the HTML element instead of <tspan>.

renderer

<br/>

baseline

true

<tspan>

I cannot add an unordered list The html tags gets ignored.

Just like before, if you set baseline, then the <ul> should be visible.
Here is the code:

baseline

<ul>

ren.label('1285 colors<br/><br/>Cases in dialogue:<br/><ul><li>Something...</li></ul>', 180, 135, "rect", 0, 0, true)


Can't get the arrow's appearance to change (fattened or shortened)

It's not a big deal, because it's enough to change the path on an arrow a bit, and increase its stroke-width parameter to make it fattened, for example:

stroke-width

var rightArrow = ['M', 0, 0, 'L', 45, 0, 'L', 40, 10, 'M', 45, 0, 'L', 40, -10],

ren.path(rightArrow)
.attr(
'stroke-width': 4,
stroke: colors[1]
)
.translate(120, 100)
.add();


Live example: http://jsfiddle.net/e8twxurz/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.